/* ========================================
   ARCHIVO: components.css
   PROPÓSITO: Componentes UI reutilizables (botones, tarjetas, badges, inputs)
   DEPENDENCIAS: tokens.css, base.css
   CONVENCIONES BEM-like:
     .componente
     .componente__elemento
     .componente--modificador
     .componente-estado
   ======================================== */

/* ========================================
   BOTONES
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Variantes de color --- */
.btn--primary {
  background-color: var(--color-primary-500);
  color: var(--text-inverse);
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--color-primary-600);
}

.btn--secondary {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--bg-hover);
  border-color: var(--border-strong);
}

.btn--ghost {
  background-color: transparent;
  color: var(--text-primary);
}

.btn--ghost:hover:not(:disabled) {
  background-color: var(--bg-hover);
}

.btn--danger {
  background-color: var(--color-danger-500);
  color: var(--text-inverse);
}

.btn--danger:hover:not(:disabled) {
  background-color: var(--color-danger-700);
}

/* --- Tamaños --- */
.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

/* --- Con icono --- */
.btn .icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* --- Tamaño base para svg.icon (evita que se infle al 100% del contenedor) --- */
svg.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* --- Icono circular (cuadrado) --- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  border: none;
  cursor: pointer;
}

.icon-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.icon-btn--primary {
  background-color: var(--color-primary-500);
  color: var(--text-inverse);
}

.icon-btn--primary:hover {
  background-color: var(--color-primary-600);
}

.icon-btn .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* ========================================
   BADGES (etiquetas de estado)
   ======================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.badge--neutral {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

.badge--primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

.badge--success {
  background-color: var(--color-success-50);
  color: var(--color-success-700);
}

.badge--danger {
  background-color: var(--color-danger-50);
  color: var(--color-danger-700);
}

.badge--warning {
  background-color: var(--color-warning-50);
  color: var(--color-warning-700);
}

.badge--pink {
  background-color: var(--color-pink-50);
  color: var(--color-pink-700);
}

.badge--purple {
  background-color: var(--color-purple-50);
  color: var(--color-purple-700);
}

/* ========================================
   TARJETAS (Cards)
   ======================================== */

.card {
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--transition-base);
}

.card--hover:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}

.card--padded {
  padding: var(--space-6);
}

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

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.card-subtitle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* ========================================
   TARJETA DE PACIENTE — Patient Overview Card
   Layout horizontal 5 columnas, ancho completo.

   ESTRUCTURA en desktop:
     col 1 → Información del paciente  (cama + hospitalizado + nombre + motivo + chips)
     col 2 → Diagnóstico               (panel blanco, soporta múltiples separados por ; o ,)
     col 3 → Tratamiento               (sección principal, badge estado, meds numeradas, "Actualizado", 2 mini-botones)
     col 4 → Equipo médico + Alertas   (2 paneles apilados)
     col 5 → Acciones rápidas          (4 botones verticales)

   Responsive:
     ≤1200px → 2 columnas, tratamiento ocupa fila completa
     ≤820px  → 1 columna, todo apilado, acciones en grid 2x2
     ≤480px  → compactar tipografías
======================================== */

.patient-card {
  display: grid;
  grid-template-columns: 240px 200px 1fr 220px 140px;
  gap: var(--space-5);
  align-items: stretch;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 22px;
  padding: 24px 28px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
  overflow: hidden;
}

/* Indicador lateral de género (izquierda) */
.patient-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
width: 4px;
  background-color: var(--color-primary-300);
}

.patient-card--mujeres::before {
  background-color: var(--color-pink-500);
}

.patient-card--hombres::before {
  background-color: var(--color-primary-500);
}

.patient-card:hover {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

/* --- Contenedor genérico de columna --- */
.patient-card__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-2);
}

/* ========================================
   COL 1: INFORMACIÓN DEL PACIENTE
======================================== */
.patient-card__col--identity {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.patient-card__id-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.patient-card__bed-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background-color: #dbeafe;     /* azul pastel */
  color: #1e3a8a;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.patient-card__status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background-color: #d1fae5;     /* verde pastel */
  color: #065f46;
  border: 1px solid #6ee7b7;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.patient-card__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0.125rem 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.patient-card__motivo {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
  font-style: italic;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.patient-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.patient-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background-color: var(--bg-app);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* ========================================
   CHIP DE SEXO DEL PACIENTE
   ⚠️ NO MODIFICAR COLORES DIRECTAMENTE ⚠️
   Estos estilos consumen los tokens semánticos definidos
   en tokens.css (`--chip-sexo-femenino-*` y
   `--chip-sexo-masculino-*`).

   REGLA DE ORO:
     - paciente.genero === 'mujer'  → SIEMPRE rosa
     - paciente.genero === 'hombre' → SIEMPRE azul
   El color va ligado al género, NUNCA a otra cosa.
   Si necesitas reutilizar este chip con otro color,
   crea una clase nueva; no toques estos estilos.
   ======================================== */
.patient-card__chip--sexo {
  background-color: var(--chip-sexo-femenino-bg);
  color: var(--chip-sexo-femenino-text);
  border-color: var(--chip-sexo-femenino-border);
}

.patient-card__chip--sexo[data-genero="hombre"] {
  background-color: var(--chip-sexo-masculino-bg);
  color: var(--chip-sexo-masculino-text);
  border-color: var(--chip-sexo-masculino-border);
}

.patient-card__chip--sexo[data-genero="mujer"] {
  background-color: var(--chip-sexo-femenino-bg);
  color: var(--chip-sexo-femenino-text);
  border-color: var(--chip-sexo-femenino-border);
}

.patient-card__chip--sexo:hover {
  background-color: var(--chip-sexo-femenino-bg-hover);
}
.patient-card__chip--sexo[data-genero="hombre"]:hover {
  background-color: var(--chip-sexo-masculino-bg-hover);
}
.patient-card__chip--sexo[data-genero="mujer"]:hover {
  background-color: var(--chip-sexo-femenino-bg-hover);
}

/* ========================================
   PANEL GENÉRICO (cols 2, 3, 4)
======================================== */
.patient-card__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-height: 0;
}

.patient-card__panel-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.patient-card__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 0.5rem;
}

.patient-card__panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.patient-card__empty {
  color: var(--text-tertiary);
  font-style: italic;
  font-size: var(--text-xs);
}

.patient-card__empty-meds {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: italic;
  padding: var(--space-2) 0;
}

/* ========================================
   COL 2: DIAGNÓSTICO
======================================== */
.patient-card__col--diagnosis {
  display: flex;
  flex-direction: column;
}

.patient-card__dx-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-primary);
  line-height: 1.35;
  font-weight: 500;
}

.patient-card__dx-list li {
  position: relative;
  padding-left: 0.875rem;
}

.patient-card__dx-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-primary-500);
  font-weight: 700;
}

/* ========================================
   COL 3: TRATAMIENTO (sección principal con badge estado, meds numeradas, mini-botones)

   Estados visuales (basados en TIEMPO desde la última actualización):
     --reciente  → verde  (revisado hace < 24h)
     --atencion  → amarillo (revisado hace 24-48h)
     --vencido   → rojo   (sin revisar hace > 48h)
     --pendiente → gris   (sin meds o sin fecha)
======================================== */
.patient-card__col--treatment {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.patient-card__panel--treatment {
  background-color: #f3f4f6;       /* gris pastel — base "pendiente" */
  border: 1.5px solid #d1d5db;
  color: #374151;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.patient-card__panel--treatment.patient-card__panel--reciente {
  background-color: #ecfdf5;       /* verde pastel */
  border-color: #6ee7b7;
  color: #065f46;
}

.patient-card__panel--treatment.patient-card__panel--atencion {
  background-color: #fef3c7;       /* amarillo pastel */
  border-color: #fcd34d;
  color: #78350f;
}

.patient-card__panel--treatment.patient-card__panel--vencido {
  background-color: #fee2e2;       /* rojo pastel */
  border-color: #fca5a5;
  color: #991b1b;
}

.patient-card__panel--treatment.patient-card__panel--pendiente {
  background-color: #f3f4f6;       /* gris pastel */
  border-color: #d1d5db;
  color: #6b7280;
}

/* Píldora de estado en la esquina superior derecha */
.patient-card__status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  white-space: nowrap;
}

.patient-card__status-pill--reciente {
  background-color: #d1fae5;
  color: #065f46;
}
.patient-card__status-pill--atencion {
  background-color: #fef3c7;
  color: #92400e;
}
.patient-card__status-pill--vencido {
  background-color: #fee2e2;
  color: #991b1b;
}
.patient-card__status-pill--pendiente {
  background-color: #e5e7eb;
  color: #4b5563;
}

/* Lista numerada de medicamentos */
.patient-card__meds {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.patient-card__med {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: inherit;
}

.patient-card__med::marker {
  font-weight: 700;
  color: #92400e;
}

.patient-card__panel--treatment.patient-card__panel--vencido .patient-card__med::marker {
  color: #991b1b;
}

.patient-card__panel--treatment.patient-card__panel--reciente .patient-card__med::marker {
  color: #065f46;
}

.patient-card__panel--treatment.patient-card__panel--atencion .patient-card__med::marker {
  color: #92400e;
}

.patient-card__panel--treatment.patient-card__panel--pendiente .patient-card__med::marker {
  color: #6b7280;
}

.patient-card__med-name {
  font-weight: 600;
  color: inherit;
}

.patient-card__med-detail {
  font-size: 0.75rem;
  color: inherit;
  opacity: 0.85;
  margin-top: 0.125rem;
  font-style: italic;
}

/* "Actualizado hace X" */
.patient-card__updated {
  font-size: 0.7rem;
  font-style: italic;
  opacity: 0.8;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

/* Mini-botones Editar tratamiento / Sin cambios */
.patient-card__treatment-actions {
  display: flex;
  gap: 0.5rem;
}

.patient-card__mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex: 1;
  white-space: nowrap;
}

.patient-card__mini-btn:hover {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
  transform: translateY(-1px);
}

.patient-card__mini-btn:active { transform: scale(0.97); }

.patient-card__mini-btn .icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.patient-card__mini-btn--ghost {
  background-color: transparent;
  color: var(--text-secondary);
}

.patient-card__mini-btn--ghost:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* ========================================
   COL 4: EQUIPO MÉDICO + ALERTAS (2 paneles apilados)
======================================== */
.patient-card__col--side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.patient-card__panel--medicos {
  background-color: #f3f4f6;       /* gris pastel */
  border: 1.5px solid #d1d5db;
  color: #374151;
}

.patient-card__medicos-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
}

.patient-card__medico-row {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Panel de alertas (rojo si hay, neutro si no) */
.patient-card__panel--alerts {
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-light);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.patient-card__panel--alerts.is-empty {
  background-color: #f9fafb;
  border-color: #e5e7eb;
  color: #6b7280;
}

.patient-card__panel--alerts.is-active {
  background-color: #fff1f2;       /* rosa claro */
  border-color: #fda4af;
  color: #9f1239;
}

.patient-card__alerts-content {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.patient-card__alerts-empty {
  font-size: 0.8125rem;
  font-style: italic;
  opacity: 0.75;
}

.patient-card__alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: #9f1239;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.5);
}

.patient-card__alert .icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  color: #e11d48;
  margin-top: 0.1rem;
}

.patient-card__alert-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.patient-card__alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.patient-card__alert-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.375rem;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.patient-card__alert-time {
  font-size: 0.65rem;
  font-weight: 500;
  opacity: 0.7;
}

.patient-card__alert-text {
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

/* Variante: PENDIENTE (azul) */
.patient-card__alert--pendiente {
  color: #1e40af;
  background-color: #eff6ff;
}
.patient-card__alert--pendiente .icon {
  color: #2563eb;
}
.patient-card__alert--pendiente .patient-card__alert-tag {
  background-color: #dbeafe;
  color: #1e40af;
}

/* Variante: INCIDENCIA (rojo/rosa) */
.patient-card__alert--incidencia {
  color: #9f1239;
  background-color: #fff1f2;
}
.patient-card__alert--incidencia .icon {
  color: #e11d48;
}
.patient-card__alert--incidencia .patient-card__alert-tag {
  background-color: #fecdd3;
  color: #9f1239;
}

/* ========================================
   COL 5: ACCIONES RÁPIDAS (4 botones verticales)
======================================== */
.patient-card__col--actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.patient-card__vbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.625rem var(--space-1);
  min-height: 3.5rem;
  border: 1.5px solid;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  line-height: 1.15;
  width: 100%;
}

.patient-card__vbtn .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.patient-card__vbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.patient-card__vbtn:active { transform: scale(0.97); }

/* Editar — blanco/gris neutro */
.patient-card__vbtn--editar {
  background-color: #ffffff;
  border-color: #e5e7eb;
  color: #374151;
}
.patient-card__vbtn--editar:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
  color: #111827;
}

/* Incidencias — rosa pastel */
.patient-card__vbtn--incidencias {
  background-color: #fce7f3;
  border-color: #f9a8d4;
  color: #9d174d;
}
.patient-card__vbtn--incidencias:hover {
  background-color: #fbcfe8;
  border-color: #f472b6;
  color: #831843;
}

/* Pendientes — azul pastel */
.patient-card__vbtn--pendientes {
  background-color: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
}
.patient-card__vbtn--pendientes:hover {
  background-color: #bfdbfe;
  border-color: #60a5fa;
  color: #1e3a8a;
}

/* Evolución — amarillo pastel */
.patient-card__vbtn--evolucion {
  background-color: #fef3c7;
  border-color: #fcd34d;
  color: #78350f;
}
.patient-card__vbtn--evolucion:hover {
  background-color: #fde68a;
  border-color: #fbbf24;
  color: #451a03;
}

/* --- Bloque de incidencia expandible (debajo de las 5 columnas) --- */
.patient-card__incidencia {
  grid-column: 1 / -1;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-orange-50);
  border: 1px solid var(--color-orange-100, #fed7aa);
  border-left: 3px solid var(--color-orange-500);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: #7c2d12;
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;       /* respeta saltos de línea */
  word-wrap: break-word;       /* no se desborda */
  overflow-wrap: break-word;
}

.patient-card__incidencia-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9a3412;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.patient-card__incidencia-texto {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ========================================
   RESPONSIVE — apilar en pantallas pequeñas
======================================== */
@media (max-width: 1200px) {
  .patient-card {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: 20px 22px;
  }
  .patient-card__col--treatment { grid-column: 1 / -1; }
  .patient-card__col--actions   { flex-direction: row; }
  .patient-card__vbtn           { flex: 1 1 calc(50% - var(--space-1)); min-width: calc(50% - var(--space-1)); }
}

@media (max-width: 820px) {
  .patient-card {
    grid-template-columns: 1fr;
    padding: var(--space-4);
    border-radius: 18px;
  }
  .patient-card__col--treatment,
  .patient-card__col--side,
  .patient-card__col--actions {
    grid-column: auto;
  }
  .patient-card__col--side {
    flex-direction: row;
  }
  .patient-card__col--side .patient-card__panel {
    flex: 1;
  }
  .patient-card__col--actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .patient-card__vbtn {
    flex: 1 1 calc(50% - var(--space-1));
    min-width: calc(50% - var(--space-1));
  }
}

@media (max-width: 480px) {
  .patient-card {
    gap: var(--space-3);
    padding: var(--space-3);
  }
  .patient-card__name { font-size: 0.95rem; }
  .patient-card__vbtn { min-height: 3rem; }
  .patient-card__vbtn span { font-size: 0.7rem; }
  .patient-card__col--side { flex-direction: column; }
  .patient-card__meds { padding-left: 1.1rem; }
}

/* ========================================
   INPUTS
   ======================================== */

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-tertiary);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

.input--search {
  padding-left: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--space-3) center;
  background-size: 1rem 1rem;
}

.search-wrapper {
  position: relative;
}

.textarea {
  min-height: 5rem;
  resize: vertical;
  font-family: var(--font-sans);
}

/* ========================================
   TABS / PILLS (filtros)
   ======================================== */

.tabs {
  display: inline-flex;
  background: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-50, #f9fafb));
  padding: 4px;
  border-radius: var(--radius-lg);
  gap: 2px;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tabs__item {
  position: relative;
  padding: 0 var(--space-4);
  height: 2.5rem; /* igual al alto del input de búsqueda para alinear */
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-lg) - 4px);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
  z-index: 1;
}

.tabs__item:hover:not(.tabs__item--active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.5);
}

.tabs__item:active {
  transform: scale(0.96);
}

.tabs__item--active {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}

.tabs__item--active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.08),
    rgba(59, 130, 246, 0.02));
  pointer-events: none;
  z-index: -1;
}

/* Tabs de género con color identificador (opcional) */
.tabs__item[data-filter="hombre"].tabs__item--active {
  color: #1e40af;
  background: linear-gradient(135deg, #fff, #eff6ff);
}

.tabs__item[data-filter="hombre"].tabs__item--active::before {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
}

.tabs__item[data-filter="mujer"].tabs__item--active {
  color: #be185d;
  background: linear-gradient(135deg, #fff, #fdf2f8);
}

.tabs__item[data-filter="mujer"].tabs__item--active::before {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.05));
}

.tabs__item[data-filter="todos"].tabs__item--active {
  color: #4338ca;
  background: linear-gradient(135deg, #fff, #eef2ff);
}

.tabs__item[data-filter="todos"].tabs__item--active::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.05));
}

/* Animación de "pulso" al cambiar tab */
@keyframes tab-pulse {
  0%   { transform: translateY(-1px) scale(1); }
  50%  { transform: translateY(-1px) scale(1.04); }
  100% { transform: translateY(-1px) scale(1); }
}

.tabs__item--active {
  animation: tab-pulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Contador en tabs (opcional) */
.tabs__item-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  font-weight: var(--font-semibold);
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  transition: all 0.25s ease;
}

.tabs__item--active .tabs__item-count {
  background: var(--color-primary-500);
  color: white;
}

.tabs__item[data-filter="hombre"] .tabs__item-count {
  background: rgba(59, 130, 246, 0.15);
  color: #1e40af;
}

.tabs__item[data-filter="mujer"] .tabs__item-count {
  background: rgba(236, 72, 153, 0.15);
  color: #be185d;
}

/* ========================================
   STAT CARDS (tarjetas de estadísticas)
   ======================================== */

.stat {
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat__value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1;
}

.stat__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.stat--blue .stat__value { color: var(--color-primary-600); }
.stat--pink .stat__value { color: var(--color-pink-700); }
.stat--green .stat__value { color: var(--color-success-700); }
.stat--orange .stat__value { color: var(--color-orange-500); }

/* ========================================
   ALERTAS / BANNERS
   ======================================== */

.alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: var(--border-width) solid;
}

.alert--warning {
  background-color: var(--color-warning-50);
  border-color: var(--color-warning-100);
  color: var(--color-warning-700);
}

.alert--info {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

.alert__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* ========================================
   AVATAR
   ======================================== */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-500);
  color: var(--text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  flex-shrink: 0;
}

.avatar--sm {
  width: 2rem;
  height: 2rem;
  font-size: var(--text-xs);
}

.avatar--lg {
  width: 3.5rem;
  height: 3.5rem;
  font-size: var(--text-lg);
}

/* ========================================
   EMPTY STATE
   ======================================== */

.empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--text-tertiary);
}

.empty__icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--space-3);
  opacity: 0.5;
}

.empty__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

/* ========================================
   SPINNER
   ======================================== */

.spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-gray-200);
  border-top-color: var(--color-primary-500);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   TRATAMIENTO - Estado automático + notas libres
   Rediseño del modal de tratamiento para reemplazar
   el <select> "Al día / Vencido" por:
     - Un header visual que muestra el estado calculado
       por tiempo desde 'actualizado_en' (no por selección
       del usuario).
     - Un <textarea> libre "Notas del tratamiento" para
       escribir el plan / indicaciones / observaciones.
   ======================================== */

/* --- Box de estado (header dentro del modal) --- */
.tratamiento-estado-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  border: var(--border-width) solid var(--border-light);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  transition: all var(--transition-fast);
}

.tratamiento-estado-box__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background-color: var(--color-gray-100);
  color: var(--text-secondary);
}

.tratamiento-estado-box__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

.tratamiento-estado-box__time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
}

.tratamiento-estado-box__time svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* --- Modificadores por estado (calculado por tiempo) --- */
.tratamiento-estado-box--reciente {
  background-color: var(--color-success-50);
  border-color: var(--color-success-100);
}
.tratamiento-estado-box--reciente .tratamiento-estado-box__pill {
  background-color: var(--color-success-100);
  color: var(--color-success-700);
}

.tratamiento-estado-box--atencion {
  background-color: var(--color-warning-50);
  border-color: var(--color-warning-100);
}
.tratamiento-estado-box--atencion .tratamiento-estado-box__pill {
  background-color: var(--color-warning-100);
  color: var(--color-warning-700);
}

.tratamiento-estado-box--vencido {
  background-color: var(--color-danger-50);
  border-color: var(--color-danger-100);
}
.tratamiento-estado-box--vencido .tratamiento-estado-box__pill {
  background-color: var(--color-danger-100);
  color: var(--color-danger-700);
}

.tratamiento-estado-box--pendiente {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-200);
}
.tratamiento-estado-box--pendiente .tratamiento-estado-box__pill {
  background-color: var(--color-gray-200);
  color: var(--color-gray-700);
}

/* --- Hint debajo del box de estado --- */
.tratamiento-estado-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: italic;
  margin: 0 0 var(--space-4) 0;
  line-height: var(--leading-snug);
}

/* --- Textarea de notas (reemplaza al <select> anterior) --- */
.tratamiento-notas {
  min-height: 6rem;
  line-height: var(--leading-relaxed);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  resize: vertical;
  background-color: var(--bg-app);
  border-color: var(--border-default);
}

.tratamiento-notas:focus {
  background-color: var(--bg-surface);
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

.tratamiento-notas::placeholder {
  color: var(--text-tertiary);
  font-style: italic;
}

/* --- Fila label + counter (encima del textarea) --- */
.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.form-counter {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
  font-variant-numeric: tabular-nums;
  transition: color var(--transition-fast);
}

.form-counter--warn {
  color: var(--color-warning-700);
  font-weight: var(--font-semibold);
}

/* ========================================
   COMPONENTE: ALERTA-CARD
   Tarjeta usada en la vista "Pendientes" para
   mostrar cada pendiente o incidencia de forma
   visual y consistente.
   ======================================== */

.alerta-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--color-primary-500);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: all var(--transition-fast);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.alerta-card:hover {
  border-color: var(--border-default);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.alerta-card--pendiente {
  border-left-color: var(--color-primary-500);
}

.alerta-card--incidencia {
  border-left-color: #f97316; /* naranja incidencias */
}

/* --- Header: badges + tipo --- */
.alerta-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.alerta-card__badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.alerta-card__bed {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.alerta-card__type {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.alerta-card--incidencia .alerta-card__type {
  color: #c2410c;
}

/* --- Paciente: nombre + diagnóstico --- */
.alerta-card__patient {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.alerta-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0;
}

.alerta-card__dx {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  font-style: italic;
  margin: 0;
  line-height: 1.3;
}

/* --- Cuerpo: descripción clínica --- */
.alerta-card__body {
  padding: var(--space-3);
  background-color: var(--color-primary-50);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary-200);
}

.alerta-card--incidencia .alerta-card__body {
  background-color: #fff7ed;
  border-left-color: #fed7aa;
}

.alerta-card__desc {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* --- Footer: meta + acciones --- */
.alerta-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.alerta-card__meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.alerta-card__autor {
  font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alerta-card__sep {
  opacity: 0.5;
  margin: 0 0.125rem;
}

.alerta-card__actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.alerta-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1;
  white-space: nowrap;
}

.alerta-card__btn .icon {
  width: 0.85rem;
  height: 0.85rem;
}

.alerta-card__btn--primary {
  background-color: var(--color-primary-500);
  color: var(--text-inverse);
  border-color: var(--color-primary-500);
}
.alerta-card__btn--primary:hover {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.alerta-card__btn--danger {
  background-color: transparent;
  color: var(--color-danger-700);
  border-color: var(--color-danger-100);
  padding: 0.375rem 0.5rem;
}
.alerta-card__btn--danger:hover {
  background-color: var(--color-danger-50);
  border-color: var(--color-danger-500);
}