/* Archivo: /assets/ui/ui-actions.css
   V-004 - Acciones de grids: iconos grandes + color + sin texto (móvil y desktop)
*/

:root{
  --c-view-bg: rgba(79,70,229,.10);
  --c-view-bd: rgba(79,70,229,.25);
  --c-view-fg: #3730a3;

  --c-edit-bg: rgba(245,158,11,.14);
  --c-edit-bd: rgba(245,158,11,.30);
  --c-edit-fg: #92400e;

  --c-del-bg: rgba(239,68,68,.12);
  --c-del-bd: rgba(239,68,68,.30);
  --c-del-fg: #991b1b;

  --c-wa-bg: rgba(34,197,94,.14);
  --c-wa-bd: rgba(34,197,94,.35);
  --c-wa-fg: #166534;

  --c-mail-bg: rgba(59,130,246,.14);
  --c-mail-bd: rgba(59,130,246,.30);
  --c-mail-fg: #1e3a8a;

  --c-card-bg: rgba(168,85,247,.14);
  --c-card-bd: rgba(168,85,247,.30);
  --c-card-fg: #5b21b6;

  --c-send-bg: rgba(20,184,166,.14);
  --c-send-bd: rgba(20,184,166,.30);
  --c-send-fg: #115e59;

  --c-copy-bg: rgba(100,116,139,.12);
  --c-copy-bd: rgba(100,116,139,.30);
  --c-copy-fg: #334155;
}

.ainstable-table th, .ainstable-table td,
table.compact th, table.compact td,
table th, table td{
  font-size: 14px;
}
@media (max-width: 768px){
  .ainstable-table th, .ainstable-table td,
  table.compact th, table.compact td,
  table th, table td{ font-size: 15px; }
}

.chk, input[type="checkbox"]{ width:20px; height:20px; }

.lbl{ display:none !important; }

.act{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.act .btn,
.act a.btn,
.act button.btn,
.act span.btn{
  min-width:44px;
  min-height:44px;
  padding:0 !important;
  border-radius:14px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}

.act .ico{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
.act svg{width:22px !important;height:22px !important;stroke-width:2.2 !important;}

.act [data-action="view"]{
  background: var(--c-view-bg) !important;
  border:1px solid var(--c-view-bd) !important;
  color: var(--c-view-fg) !important;
}
.act [data-action="edit"]{
  background: var(--c-edit-bg) !important;
  border:1px solid var(--c-edit-bd) !important;
  color: var(--c-edit-fg) !important;
}
.act [data-action="delete"]{
  background: var(--c-del-bg) !important;
  border:1px solid var(--c-del-bd) !important;
  color: var(--c-del-fg) !important;
}
.act [data-action="send"], .act [title*="Enviar"], .act [title*="enviar"]{
  background: var(--c-send-bg) !important;
  border:1px solid var(--c-send-bd) !important;
  color: var(--c-send-fg) !important;
}

.act a[title*="WhatsApp"], .act a[href^="https://wa.me"], .act a[href^="whatsapp:"], .act span[title*="teléfono"]{
  background: var(--c-wa-bg) !important;
  border:1px solid var(--c-wa-bd) !important;
  color: var(--c-wa-fg) !important;
}
.act a[title*="Email"], .act a[href^="mailto:"], .act span[title*="email"]{
  background: var(--c-mail-bg) !important;
  border:1px solid var(--c-mail-bd) !important;
  color: var(--c-mail-fg) !important;
}
.act a[title*="Carnet"], .act a[title*="carnet"], .act span[title^="Carnet"]{
  background: var(--c-card-bg) !important;
  border:1px solid var(--c-card-bd) !important;
  color: var(--c-card-fg) !important;
}
.act button[title*="Copiar"], .act .js-copy{
  background: var(--c-copy-bg) !important;
  border:1px solid var(--c-copy-bd) !important;
  color: var(--c-copy-fg) !important;
}

.act span.btn{ opacity:.55; cursor:not-allowed; }

@media (max-width:768px){
  .act svg{width:24px !important;height:24px !important;}
  .act .ico{width:24px;height:24px;}

  table.as-cards-mobile .act{
    display:grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
  }
  table.as-cards-mobile .act .btn,
  table.as-cards-mobile .act a.btn,
  table.as-cards-mobile .act button.btn,
  table.as-cards-mobile .act span.btn{
    width:100%;
    min-height:48px;
    border-radius:16px !important;
    font-size:20px;
  }
  table.as-cards-mobile .act svg{width:22px !important;height:22px !important;stroke-width:2.2 !important;}
}