/* =============================================================================
   CAPTA · componentes compartidos — al sistema visual (Felipe, 22/10/2026)
   =============================================================================
   El CSS de los componentes que viven en shared/ (estados, modal, avisos, buscador de contactos, selector de fecha) y los nombres heredados (.c-*, .btn*, .input, .badge*,
   .m-*), ahora con las medidas y los colores del sistema (`escala.css`, docs/SISTEMA_VISUAL.md): botones y campos de 44 px, DM Sans, nada de rojo ni ámbar. Las apps
   cambian de aspecto sin tocar su HTML; cuando una se migra a las clases `es-*`, estos alias se van quedando sin uso. Regla que vigila scripts/lint_shared_clases.py:
   ninguna clase que use un archivo de shared/ puede estar definida solo fuera de shared/. NO se agregan colores ni tamaños sueltos acá: salen de `--es-*`.
   ============================================================================= */

/* ---------- Estados: cargando, vacío, error ---------- */
.c-ico { flex: none; }
.c-cargando, .m-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: var(--es-nota); font-size: var(--es-t-detalle); }
.c-spinner { width: 20px; height: 20px; flex: none; border: 3px solid var(--es-linea); border-top-color: var(--es-verde); border-radius: 50%; animation: spin .8s linear infinite; }
.c-vacio, .m-empty {
  display: flex; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 12px;
  background: var(--es-fondo); border: 1px dashed var(--es-punteado); color: var(--es-nota); font-size: var(--es-t-detalle); line-height: 1.45;
}
.c-vacio .c-ico { color: var(--es-rotulo); }
.c-error, .m-error {
  display: flex; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 12px;
  background: var(--es-fondo); border: 2px solid var(--es-tinta); color: var(--es-tinta); font-size: var(--es-t-detalle); line-height: 1.45;
}
.c-error .c-ico { color: var(--es-tinta); }
.c-estado-cuerpo { min-width: 0; }
.c-estado-titulo, .m-error-title { font-weight: 700; }
.c-estado-ayuda { margin-top: 4px; color: var(--es-nota); }
/* El código técnico se muestra, no se esconde: es lo que hace que un problema se pueda reportar y arreglar en vez de quedar como "no anda". */
.c-error-codigo, .m-error-code {
  display: inline-block; margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--es-t-etiqueta); color: var(--es-nota); background: var(--es-gris-fondo); border-radius: 6px; padding: 2px 6px;
}
.c-estado-accion { margin-top: 10px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Modal (modal.js): la ventana del sistema ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(19, 32, 47, 0.55); display: flex; align-items: flex-start; justify-content: center;
  z-index: 1000; padding: 64px 16px 16px; animation: fadeIn 0.15s ease-out;
}
.modal {
  background: var(--es-fondo); border-radius: 14px; width: 100%; max-width: 560px; max-height: calc(100vh - 80px);
  display: flex; flex-direction: column; box-shadow: var(--shadow-md); animation: slideIn 0.18s ease-out; overflow: hidden;
}
.modal.modal-wide { max-width: 860px; }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--es-linea); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.modal-header h2 { margin: 0; font-size: var(--es-t-numero); font-weight: 700; letter-spacing: -0.01em; color: var(--es-tinta); }
.modal-close {
  flex: none; min-width: var(--es-alto); min-height: var(--es-alto); border-radius: 10px; border: 1px solid var(--es-borde); background: var(--es-fondo);
  display: flex; align-items: center; justify-content: center; color: var(--es-tinta); font-size: 22px; line-height: 1; cursor: pointer;
}
.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--es-linea); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex-shrink: 0; background: var(--es-fondo-suave); }
@media (max-width: 900px) { .modal-overlay { padding: 16px; align-items: center; } }

/* ---------- Banda del consultorio (tenant_band.js): hoy la dice el encabezado de módulo (modulo.js); queda para quien aún la pinte ---------- */
#tenant-band[hidden] { display: none !important; }
#tenant-band { grid-area: tenant-band; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 16px; background: var(--es-fondo); border-bottom: 1px solid var(--es-linea); font-size: var(--es-t-detalle); }
#tenant-band .tb-label { text-transform: uppercase; font-size: var(--es-t-etiqueta); font-weight: 600; letter-spacing: 0.06em; color: var(--es-rotulo); }
#tenant-band .tb-name { font-size: var(--es-t-seccion); font-weight: 600; color: var(--es-tinta); }

/* ---------- Resultados del buscador de contactos (patient_search.js) ---------- */
.contact-search-wrap { position: relative; }
.contact-results { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--es-fondo); border: 1px solid var(--es-borde); border-radius: 10px; box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; z-index: 20; }
.contact-result-item { padding: 12px 16px; cursor: pointer; font-size: var(--es-t-detalle); border-bottom: 1px solid var(--es-sep); }
.contact-result-item:hover { background: var(--es-gris-fondo); }
.contact-result-item .contact-name { font-weight: 600; color: var(--es-tinta); }
.contact-result-item .contact-detail { font-size: var(--es-t-detalle); color: var(--es-nota); margin-top: 2px; }
.contact-loading { padding: 12px 16px; font-size: var(--es-t-detalle); color: var(--es-nota); }

/* ---------- Botones: principal · secundario (los dos de 44 px). El «fantasma» y el «peligro» viejos se ven como secundario: el sistema tiene cuatro botones ---------- */
.c-btn, .btn, .m-btn,
.c-btn-primario, .btn-primary, .c-btn-secundario, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--es-alto); padding: 8px 16px; border: 1px solid var(--es-borde); border-radius: 10px;
  font-family: var(--es-font); font-size: var(--es-t-detalle); font-weight: 600; line-height: 1.2;
  color: var(--es-tinta); background: var(--es-fondo); cursor: pointer; white-space: nowrap; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.c-btn:disabled, .btn:disabled, .m-btn:disabled, .btn-primary:disabled, .btn-secondary:disabled { opacity: .6; cursor: not-allowed; }
.c-btn-primario, .btn-primary, .m-btn-primary { background: var(--es-verde); border-color: var(--es-verde); color: var(--es-fondo); }
.c-btn-secundario, .btn-secondary, .m-btn-secondary,
.c-btn-fantasma, .btn-ghost, .m-btn-ghost, .c-btn-peligro, .btn-danger { background: var(--es-fondo); color: var(--es-tinta); border-color: var(--es-borde); }
.c-btn-chico, .btn-sm { min-height: var(--es-alto); padding: 8px 16px; font-size: var(--es-t-detalle); }
.c-btn:focus-visible, .btn:focus-visible, .m-btn:focus-visible { outline: 2px solid var(--es-foco); outline-offset: 2px; }

/* ---------- «+ Agregar …»: el botón punteado del sistema (es-btn--agregar) con el nombre heredado ---------- */
.btn-add-row { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--es-alto); padding: 12px 16px; font: inherit; font-size: var(--es-t-detalle); font-weight: 600; color: var(--es-verde); background: transparent; border: 1px dashed var(--es-punteado); border-radius: 12px; cursor: pointer; }

/* ---------- Campos: 44 px, texto de 16 ---------- */
.c-campo, .input, .m-input {
  min-height: var(--es-alto); padding: 8px 12px; background: var(--es-fondo); border: 1px solid var(--es-borde); border-radius: 10px;
  font-family: var(--es-font); font-size: var(--es-t-campo); color: var(--es-tinta);
}
.c-campo:focus, .input:focus, .m-input:focus { outline: 2px solid var(--es-foco); outline-offset: 1px; border-color: var(--es-foco); }

/* ---------- Tarjetas ---------- */
.c-tarjeta, .m-card { background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; padding: 16px; }

/* ---------- Insignias = chips: informan un estado, no se tocan ---------- */
.c-insignia, .badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: var(--es-t-detalle); font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--es-nota); background: var(--es-linea); }
.c-insignia-exito, .badge-success, .c-insignia-marca, .badge-teal { background: var(--es-verde-fondo); color: var(--es-verde); }
.c-insignia-aviso, .badge-warning, .badge-warn, .c-insignia-peligro, .badge-danger { background: var(--es-tinta); color: var(--es-fondo); }
.c-insignia-neutra, .badge-muted, .c-insignia-pendiente, .badge-pending { background: var(--es-linea); color: var(--es-nota); }

/* ---------- Aviso en la página ---------- */
.c-aviso, .m-warn {
  display: flex; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 12px;
  background: var(--es-gris-fondo); border: 1px solid var(--es-borde); color: var(--es-tinta); font-size: var(--es-t-detalle); line-height: 1.45;
}

/* ---------- Título de pantalla ---------- */
body { font-family: var(--es-font); font-size: var(--es-t-detalle); font-weight: 400; color: var(--es-tinta); }
h1, h2, h3, h4, .c-titulo { font-family: var(--es-font); color: var(--es-tinta); line-height: 1.25; }
h1, .c-titulo { font-size: var(--es-t-pagina); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--es-t-seccion); font-weight: 600; }
h3, h4 { font-size: var(--es-t-detalle); font-weight: 700; }

/* ---------- Formularios: la etiqueta arriba (15/600) y el campo de 16 px y 44 px — la base de TODAS las apps (antes cada hoja la repetía con 11 px en mayúsculas y 38 px de alto) ---------- */
label { font-size: var(--es-t-detalle); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--es-tinta); }
input[type="text"], input[type="date"], input[type="number"], input[type="search"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
  min-height: var(--es-alto); padding: 8px 12px; background: var(--es-fondo); border: 1px solid var(--es-borde); border-radius: 10px;
  font-family: var(--es-font); font-size: var(--es-t-campo); color: var(--es-tinta);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--es-foco); outline-offset: 1px; border-color: var(--es-foco); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.field.full { grid-column: 1 / -1; }
.block { width: 100%; margin-top: 8px; }
.subtitle { color: var(--es-nota); font-size: var(--es-t-campo); margin-top: 4px; }
.panel-loading { color: var(--es-nota); padding: 40px; text-align: center; }

/* ---------- Todo lo que se toca mide 44 px como mínimo (en la compu también) ---------- */
:is(button, select, textarea, [role="button"], a.btn, a.c-btn,
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"]),
  .m-nav-tab, .m-list-row, .m-result, .es-tab) { min-height: var(--es-alto); }
:is(.modal-close, .c-aviso-cerrar) { min-width: var(--es-alto); }

/* ---------- Orden de columnas y arrastre (column_sort.js, sortable.js) ---------- */
.drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; cursor: grab; color: var(--es-rotulo); border-radius: 6px; user-select: none; }
.drag-handle svg { fill: currentColor; }
.drag-handle:hover { color: var(--es-tinta); background: var(--es-linea); }
.sort-arrow { display: inline-block; margin-left: 4px; font-size: var(--es-t-etiqueta); font-weight: 700; line-height: 1; }
.sort-arrow-active { color: var(--es-verde); opacity: 1; }
.sort-arrow-idle { color: var(--es-rotulo); opacity: 0.6; }
/* Encabezado de columna ordenable (column_sort.js: th.sortable-col + .sort-label). */
table.data th.sortable-col { cursor: pointer; user-select: none; }
table.data th.sortable-col .sort-label { display: inline-block; }
table.data th.sortable-col:hover { color: var(--es-tinta); }

/* ---------- Avisos flotantes (aviso.js) — reemplazan a alert(). Un error no se cierra solo; "listo" sí ---------- */
.c-avisos { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.c-aviso-flotante { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; font-size: var(--es-t-detalle); line-height: 1.45; box-shadow: var(--shadow-md); background: var(--es-fondo); border: 1px solid var(--es-borde); color: var(--es-tinta); }
.c-aviso-error { border: 2px solid var(--es-tinta); }
.c-aviso-warn { border: 1px solid var(--es-borde); }
.c-aviso-ok { border: 1px solid var(--es-verde-borde); background: var(--es-verde-fondo); }
.c-aviso-cuerpo { flex: 1; min-width: 0; }
.c-aviso-cerrar { flex: none; min-width: var(--es-alto); min-height: var(--es-alto); margin: -8px -10px 0 0; border: 0; border-radius: 10px; background: none; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }

/* ---------- Selector de fecha (selector_fecha.js): el calendario para formularios; prefijo `sf-` a propósito (Registro define `.cal*` en su hoja y repetir un nombre rompió el panel una vez) ---------- */
.sf-ancla { position: relative; }
.sf-boton { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.sf-caret { font-size: var(--es-t-etiqueta); color: var(--es-rotulo); }
.sf-cal { position: absolute; top: calc(100% + 6px); left: 0; z-index: 110; width: 320px; max-width: calc(100vw - 32px); background: var(--es-fondo); border: 1px solid var(--es-borde); border-radius: 12px; box-shadow: var(--shadow-md); padding: 14px; text-align: left; font-size: var(--es-t-detalle); color: var(--es-tinta); }
.sf-cal[hidden] { display: none; }
.sf-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sf-mes { flex: 1; font-size: var(--es-t-campo); font-weight: 600; }
.sf-cab button, .sf-pie button { font: inherit; font-size: var(--es-t-detalle); font-weight: 600; min-height: var(--es-alto); min-width: var(--es-alto); padding: 6px 12px; color: var(--es-tinta); background: var(--es-fondo); border: 1px solid var(--es-borde); border-radius: 10px; cursor: pointer; }
.sf-dow, .sf-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sf-dow { margin-bottom: 4px; }
.sf-dow span { text-align: center; font-size: var(--es-t-etiqueta); color: var(--es-rotulo); padding: 2px 0; text-transform: uppercase; }
.sf-grilla button { border: 0; background: transparent; border-radius: 10px; cursor: pointer; font: inherit; font-size: var(--es-t-detalle); color: var(--es-tinta); font-variant-numeric: tabular-nums; min-height: var(--es-alto); padding: 0; }
.sf-grilla button:hover { background: var(--es-gris-fondo); }
.sf-grilla button.fuera { color: var(--es-rotulo); opacity: .6; }
.sf-grilla button.hoy { font-weight: 700; }
.sf-grilla button[aria-selected="true"] { background: var(--es-verde); color: var(--es-fondo); opacity: 1; }
.sf-pie { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--es-linea); }
.sf-vacio { color: var(--es-rotulo); }