/*
 * MOLECULE: Card — sistema 2026-05
 * Variantes: base | flush | elevated | accent | dashed
 * KPI cards con sparkline-ready
 */

.card {
  background: var(--h-surface);
  border: 1px solid var(--h-hairline);
  border-radius: var(--h-radius-lg);
  padding: var(--h-space-5);
  position: relative;
  transition:
    border-color 180ms ease-out,
    box-shadow 220ms ease-out,
    transform 180ms ease-out;
}
.card:hover {
  border-color: var(--h-border-soft);
}

/* La tabla pegada al borde de una tarjeta sin relleno (Facturación, Catálogos):
 * la cabecera de la tabla tiene fondo propio y asomaba con la punta cuadrada
 * por la esquina redonda de la tarjeta (Matías, 1/10: «el borde es redondo
 * pero la tarjeta que está dentro tiene la punta cuadrada»). El envoltorio ya
 * recorta para desplazarse de costado; con la curva de la tarjeta, recorta
 * también la esquina. 1px menos: va por dentro del borde. */
.card > .table-scroll { border-radius: calc(var(--h-radius-lg) - 1px); }

/* Lo que toca el borde de una tarjeta sin relleno respeta su curva (19/10,
 * tarea 5363). Matías, con captura de Usuarios: «las tablas tienen vértice
 * cuadrado y no respetan la circunferencia de la tarjeta… pasa en otras
 * tablas». Medido ese día con un barrido de navegador sobre las 68 pantallas
 * con tablas: dos casos que la regla de arriba no cubría.
 *   1. La franja de herramientas arriba de la tabla («Ver dados de baja», el
 *      buscador) tiene fondo propio y asomaba cuadrada por las dos puntas de
 *      arriba. Toma la curva cuando es la primera de la tarjeta — también si
 *      la que va antes está escondida (`x-show` deja `display: none`).
 *      Lo mismo abajo: la tabla de Caja lleva atrás un pie que se esconde.
 *   2. El envoltorio que `scripts/angosto.js` pone a cada tabla
 *      (`.tabla-envoltura`) no recortaba: la línea de abajo del encabezado y
 *      el fondo de la última fila asomaban por las puntas (13 pantallas:
 *      Caja, Medios de cobro, Planes, Presupuesto, Salas…). Recorta con
 *      `overflow: clip`, que —a diferencia de `hidden` o `auto`— no crea un
 *      contenedor de desplazamiento: el encabezado sigue fijo al bajar.
 * Sólo se curvan las puntas que tocan el borde (primera y última de la
 * tarjeta); en el medio no hay curva que respetar. 1px menos: va por dentro. */
.card > :is(.toolbar, .table-toolbar, .tabla-envoltura):first-child,
.card > :is([style*="display: none"], [hidden]):first-child + :is(.toolbar, .table-toolbar, .tabla-envoltura, .table-scroll) {
  border-top-left-radius: calc(var(--h-radius-lg) - 1px);
  border-top-right-radius: calc(var(--h-radius-lg) - 1px);
}
.card > :is(.toolbar, .table-toolbar, .tabla-envoltura):last-child,
.card > .tabla-envoltura:has(+ :is([style*="display: none"], [hidden]):last-child) {
  border-bottom-left-radius: calc(var(--h-radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--h-radius-lg) - 1px);
}
.card > .tabla-envoltura:is(:first-child, :last-child),
.card > .tabla-envoltura:has(+ :is([style*="display: none"], [hidden]):last-child) { overflow: clip; }

/* Elevación opcional — para hero cards o secciones destacadas */
.card-elevated {
  box-shadow: var(--h-shadow-sm);
  border-color: transparent;
}
.card-elevated:hover {
  box-shadow: var(--h-shadow-md);
}

/* Card con acento de color (barra superior fina) */
.card-accent {
  overflow: hidden;
}
.card-accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent-color, var(--h-brand-primary));
}
.card-accent.is-sage     { --card-accent-color: var(--hx-sage); }
.card-accent.is-coral    { --card-accent-color: var(--hx-coral); }
.card-accent.is-lavender { --card-accent-color: var(--hx-periwinkle); }
.card-accent.is-gold     { --card-accent-color: var(--hx-gold); }
.card-accent.is-steel    { --card-accent-color: var(--hx-steel); }

/* Card "vacía" — empty states con borde punteado */
.card-dashed {
  border-style: dashed;
  border-color: var(--h-border-soft);
  background: var(--h-nest);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--h-space-4);
  gap: var(--h-space-3);
}

.card-title {
  font-size: var(--h-text-xs);
  font-weight: var(--h-weight-semibold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--h-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--card-accent-color, var(--h-brand-primary));
}

.card-flush { padding: 0; }
.card-flush .card-header { padding: var(--h-space-5) var(--h-space-5) 0; margin-bottom: var(--h-space-3); }

/* Fila de KPIs
 *
 * La separación es `space-3` y no `space-4` porque las TRES pantallas que la
 * tocaron —críticos, liberación y la lista de trabajo— la bajaron a mano al
 * mismo valor, cada una por su lado y sin saber de las otras. Cuando tres de
 * tres corrigen lo mismo, el que estaba equivocado era el sistema: se adopta
 * acá y se borran las tres copias (19/8). */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--h-space-3);
  margin-bottom: var(--h-space-4);
}
@media (max-width: 1024px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .kpi-row { grid-template-columns: 1fr; } }

/* KPI card — rediseño con jerarquía vertical clara */
.kpi-card {
  background: var(--h-surface);
  border: 1px solid var(--h-hairline);
  border-radius: var(--h-radius-lg);
  padding: var(--h-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--h-space-1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color var(--h-mov-medio), box-shadow var(--h-mov-medio), transform var(--h-mov-medio);
}
.kpi-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, var(--kpi-glow, transparent), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--h-mov-medio);
}
.kpi-card:hover {
  border-color: var(--h-border-soft);
  box-shadow: var(--h-shadow-sm);
  transform: translateY(-1px);
}
.kpi-card:hover::after { opacity: 0.5; }

.kpi-label {
  font-size: var(--h-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--h-muted);
  font-weight: var(--h-weight-semibold);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-value {
  font-family: var(--h-font-mono);
  font-size: 32px;
  font-weight: var(--h-weight-medium);
  color: var(--h-ink);
  letter-spacing: -0.5px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi-value.ok     { color: var(--h-ok);     }
.kpi-value.warn   { color: var(--h-warn);   }
.kpi-value.danger { color: var(--h-danger); }

.kpi-card.is-ok     { --kpi-glow: color-mix(in srgb, var(--h-ok) 10%, transparent); }
.kpi-card.is-warn   { --kpi-glow: color-mix(in srgb, var(--h-warn-vivo) 12%, transparent); }
.kpi-card.is-danger { --kpi-glow: color-mix(in srgb, var(--h-danger) 10%, transparent); }
.kpi-card.is-coral  { --kpi-glow: color-mix(in srgb, var(--hx-coral) 10%, transparent); }

.kpi-card.is-ok     .kpi-value { color: var(--h-ok); }
.kpi-card.is-warn   .kpi-value { color: var(--h-warn); }
.kpi-card.is-danger .kpi-value { color: var(--h-danger); }

.kpi-trend {
  font-size: var(--h-text-xs);
  color: var(--h-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.kpi-trend.up    { color: var(--h-ok); }
.kpi-trend.down  { color: var(--h-danger); }

/* Card de lista — separadores internos suaves */
.card-list > * + * {
  border-top: 1px solid var(--h-hairline);
  padding-top: var(--h-space-3);
  margin-top: var(--h-space-3);
}

/* ─── Ícono decorativo en la esquina de una KPI card ──────────────
 * Centralizado 2026-06-23 (antes duplicado inline en admin-permisos,
 * facturacion, planes, entrega, derivaciones). */
.kpi-icon {
  position: absolute;
  top: var(--h-space-3); right: var(--h-space-3);
  width: 18px; height: 18px;
  color: var(--h-faint); opacity: 0.6;
}
.kpi-card.is-ok     .kpi-icon { color: var(--h-ok);     opacity: 0.6; }
.kpi-card.is-warn   .kpi-icon { color: var(--h-warn);   opacity: 0.6; }
.kpi-card.is-danger .kpi-icon { color: var(--h-danger); opacity: 0.6; }
.kpi-card.is-info   .kpi-icon { color: var(--h-info);   opacity: 0.6; }

/* ─── KPI mini — métrica compacta (barras secundarias) ────────────
 * Centralizado 2026-06-23 (antes duplicado inline en entrega,
 * worklist, criticos). */
.kpi-mini {
  background: var(--h-surface);
  border: 1px solid var(--h-hairline);
  border-radius: var(--h-radius-md);
  padding: var(--h-space-3);
}
.kpi-mini-label {
  font-size: var(--h-text-xs); color: var(--h-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.kpi-mini-value {
  font-size: var(--h-text-2xl); font-weight: 700;
  color: var(--h-ink); font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.kpi-mini-trend { font-size: var(--h-text-xs); color: var(--h-muted); margin-top: 2px; }
.kpi-mini.is-ok     .kpi-mini-value { color: var(--h-ok);     }
.kpi-mini.is-warn   .kpi-mini-value { color: var(--h-warn);   }
.kpi-mini.is-danger .kpi-mini-value { color: var(--h-danger); }
.kpi-mini.is-info   .kpi-mini-value { color: var(--h-info);   }
/* Un cero baja la voz.
 *
 * El color avisa de lo urgente; esto es lo contrario, y hacía falta igual: con
 * cuatro de seis números en cero —lo normal a media mañana— la pantalla era una
 * fila de ceros enormes con el único dato que importa perdido en el medio. El
 * cero sigue estando, porque hay que poder ver que el sistema lo está midiendo,
 * pero deja de competir por la mirada.
 *
 * Va después de los estados a propósito: si un cero además está teñido —no
 * pasa hoy, los umbrales empiezan en 1— gana el atenuado, que es lo correcto. */
.kpi-mini.is-cero .kpi-mini-value { color: var(--h-faint); font-weight: 600; }
.kpi-mini.is-cero .kpi-mini-label,
.kpi-mini.is-cero .kpi-mini-trend { opacity: 0.72; }

/* ─── Auth card — tarjeta centrada de login/acceso ────────────────
 * Centralizado 2026-06-23 (login, portal-medico-login). El max-width
 * default es 420px; portal-medico-login lo sube a 440px con override. */
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--h-surface);
  border: 1px solid var(--h-hairline);
  border-radius: var(--h-radius-xl);
  padding: var(--h-space-8);
  box-shadow: var(--h-shadow-lg);
}