/* STETIK CLINICAL v47.55.17 — Sistema visual unificado.
 * Referencias: Inicio v47.49 y ficha de paciente. Esta capa es exclusivamente visual.
 * Se carga DESPUÉS de style.css y cima-consulta.css: no sustituye flujos clínicos.
 */
:root {
  --st-ink: #132b47;
  --st-heading: #0e284b;
  --st-muted: #526b86;
  --st-primary: #285f87;
  --st-primary-hover: #1f5076;
  --st-accent: #0b63ce;
  --st-border: #d6e5f3;
  --st-border-strong: #b9d0e4;
  --st-surface: #ffffff;
  --st-surface-soft: #f1f7fe;
  --st-surface-hover: #f5faff;
  --st-radius: 12px;
  --st-radius-lg: 14px;
  --st-shadow: 0 8px 26px rgba(24, 73, 123, .045);
  --st-focus: #285f87;
}

/* Un único fondo y escala tipográfica para el espacio clínico.
 * Se conserva la disposición de la agenda a ancho completo y del panel de inicio. */
.v4749-main {
  color: var(--st-ink);
  background: radial-gradient(circle at 60% 8%, rgba(185,220,255,.40), transparent 32%),
    linear-gradient(135deg, #f6fbff 0%, #eef7ff 50%, #f9fcff 100%);
}
.v4749-main .v4749-content { min-width: 0; }
#content { color: var(--st-ink); }
#content h1, #content h2, #content h3 { color: var(--st-heading); }
#content .subtitle, #content .patient-meta { color: var(--st-muted); }
#content .eyebrow { color: #567399; font-size: 11px; font-weight: 750; letter-spacing: .09em; }

/* Encabezado: misma jerarquía para directorios, módulos y paciente. */
#content .page-heading {
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  min-width: 0;
}
#content .page-heading > div:first-child { min-width: 0; }
#content .page-heading h1 { font-size: clamp(25px, 2vw, 30px); font-weight: 780; letter-spacing: -.8px; }
#content .page-heading .subtitle { font-size: 13px; line-height: 1.55; margin-top: 6px; }
#content .page-heading .actions { justify-content: flex-end; }

/* Botones compartidos: no se tocan botones de texto del mapa ni iconos de alerta. */
#content .btn, #modal .btn {
  border-radius: 10px;
  border-color: var(--st-border);
  background: var(--st-surface);
  color: #244d77;
  font-size: 13px;
  font-weight: 690;
  min-height: 40px;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#content .btn:hover:not(:disabled), #modal .btn:hover:not(:disabled) {
  background: var(--st-surface-soft);
  border-color: var(--st-border-strong);
}
#content .btn.primary, #modal .btn.primary {
  color: #fff;
  border-color: #285f87;
  background: #285f87;
  box-shadow: 0 5px 12px rgba(40,95,135,.12);
}
#content .btn.primary:hover:not(:disabled), #modal .btn.primary:hover:not(:disabled) {
  color: #fff;
  background: var(--st-primary-hover);
  border-color: var(--st-primary-hover);
}
#content .btn.danger, #modal .btn.danger {
  color: #a52d36;
  background: #fff7f7;
  border-color: #efc5c8;
}
#content .btn:disabled, #modal .btn:disabled { cursor: not-allowed; opacity: .58; box-shadow: none; }
#content :is(.btn, .tab, .text-link, .navlink):focus-visible,
#modal :is(.btn, .close):focus-visible {
  outline: 3px solid var(--st-focus);
  outline-offset: 2px;
}

/* Tarjetas y cabeceras: el mismo patrón de la ficha de paciente.
 * Las tarjetas premium de Inicio conservan su composición y colores originales. */
#content .card, body:not([data-route="dashboard"]) #content .v4749-card, #content .stat,
#content .settings-card, #content .agenda-professional-table {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  background: var(--st-surface);
  box-shadow: var(--st-shadow);
}
#content .card, body:not([data-route="dashboard"]) #content .v4749-card { min-width: 0; overflow: hidden; }
#content .card-head, body:not([data-route="dashboard"]) #content .v4749-card-head {
  background: var(--st-surface-soft);
  border-bottom: 1px solid var(--st-border);
  padding: 15px 18px;
  gap: 12px;
  min-height: 52px;
}
#content .card-head h2, body:not([data-route="dashboard"]) #content .v4749-card-head h2 {
  color: var(--st-heading);
  font-weight: 740;
  font-size: 15px;
  line-height: 1.35;
}
#content .card-head .icon, body:not([data-route="dashboard"]) #content .v4749-card-head .icon { color: var(--st-primary); }
#content .card-head .text-link, body:not([data-route="dashboard"]) #content .v4749-card-head a,
#content .text-link:not(.danger-link) { color: #285f87; }
#content .card .pad { padding: 20px; }
#content .empty { color: var(--st-muted); line-height: 1.6; }

/* Listados: cabecera suave, filas y textos con una misma escala. Se conserva el
 * ancho propio del calendario y las tablas desplazables de dispositivos pequeños. */
#content .table-wrap { max-width: 100%; }
#content table { color: var(--st-ink); }
#content th {
  color: #425e7b;
  font-weight: 720;
  font-size: 11px;
  letter-spacing: .035em;
  background: #f1f7fe;
  border-bottom: 1px solid var(--st-border);
}
#content td { border-top-color: #e5edf6; }
#content tr.clickable:hover, body:not([data-route="dashboard"]) #content .v4749-patient-row:hover,
#content .v475512-pending-row:hover { background: var(--st-surface-hover); }
#content .person strong { color: var(--st-heading); font-weight: 700; }
#content .person small, #content .activity time { color: var(--st-muted); }
#content .activity { border-bottom-color: #e5edf6; }
#content .toolbar { align-items: center; gap: 10px; }

/* Formularios del contenido y de diálogos, sin alterar los bloqueos de seguridad.
 * No se fuerzan estilos sobre .clinical-toggle input (checkbox) ni sobre QR/firma. */
#content .field label, #modal .field label { color: #29485f; font-size: 12px; font-weight: 680; }
#content .field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
#content .toolbar :is(input, select),
#modal .field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: #fff;
  color: var(--st-ink);
  border: 1px solid var(--st-border-strong);
  border-radius: 9px;
  min-height: 42px;
}
#content .field :is(input, select, textarea):focus-visible,
#content .toolbar :is(input, select):focus-visible,
#modal .field :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--st-focus);
  outline-offset: 1px;
}
#content .field :is(input, textarea)::placeholder,
#content .toolbar input::placeholder { color: #6f8297; opacity: 1; }
#content .form-section { color: var(--st-primary); border-bottom-color: var(--st-border); }

/* Pestañas estándar: las internas del paciente siguen siendo la referencia. */
#content .tabs { gap: 8px; flex-wrap: wrap; overflow: visible; padding: 8px 0 14px; border-bottom-color: var(--st-border); }
#content .tabs > .tab {
  padding: 10px 14px;
  min-height: 42px;
  background: #fff;
  color: #29485d;
  border: 1px solid #c1d1dd;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 650;
}
#content .tabs > .tab:hover { background: #e7f0f7; border-color: #759ab5; }
#content .tabs > .tab.active { background: var(--st-primary); border-color: var(--st-primary); color: #fff; }
#content .tabs.tabs-with-icons > .tab { font-size: 15px; min-height: 44px; }

/* Indicadores y cifras en otros módulos siguen el patrón de Inicio. */
#content .stat, #content .financial-summary > div, #content .timing-kpis > div,
#content .inventory-mini-stats > div {
  border-color: var(--st-border);
  border-radius: var(--st-radius);
  background: #fff;
  box-shadow: var(--st-shadow);
}
#content .stat-top, #content .stat-foot,
#content .financial-summary span, #content .timing-kpis span { color: var(--st-muted); }
#content .stat-num, #content .financial-summary strong,
#content .timing-kpis strong { color: var(--st-heading); }

/* Estado neutral únicamente: verde/ámbar/rojo/alertas clínicas mantienen sus tonos. */
#content .tag:not(.green):not(.amber):not(.blue):not(.red) {
  background: #edf3fa;
  color: #45627e;
  border-radius: 7px;
}
#content .tag.blue { color: #245f9b; background: #e6f1fe; }
#content .text-link { font-weight: 670; }

/* Módulos con bloques propios: compartimos superficies sin tocar calendarios,
 * horarios, estados de cita, cantidades, controles de inventario o alertas. */
#content .settings-menu-item, #content .agenda-side-section,
#content .patient-treatment-filter, #content .inventory-planning-section .inventory-plan-card,
#content .timing-summary-grid > div, #content .appointment-history-toolbar {
  border-color: var(--st-border);
  border-radius: var(--st-radius);
  box-shadow: 0 2px 12px rgba(24,73,123,.025);
}
#content .settings-menu-item:hover { background: var(--st-surface-hover); border-color: var(--st-border-strong); }
#content .settings-menu-item.active { background: #e9f3fd; border-color: #a9c9e6; }
#content .agenda-professional-table { overflow: hidden; }
#content .professional-agenda-head { border-bottom: 1px solid var(--st-border); }
#content .detail-list dt { color: var(--st-muted); font-size: 12px; }
#content .detail-list dd { color: var(--st-ink); overflow-wrap: anywhere; }
#content .patient-heading-line h1 { font-size: clamp(23px, 2vw, 29px); }
#content .photo-card { border-color: var(--st-border); border-radius: var(--st-radius); }

/* Los diálogos forman parte del mismo sistema, sin alterar sus formularios. */
#modal .dialog { border: 1px solid var(--st-border); border-radius: 15px; }
#modal .dialog-head { background: var(--st-surface-soft); border-bottom-color: var(--st-border); }
#modal .dialog-head h2, #modal .dialog-head h3 { color: var(--st-heading); }
#modal .dialog-foot { border-top-color: var(--st-border); }

/* Catálogo CIMA/AEMPS: conserva favoritos, búsqueda y lógica de seguridad. */
.cima-overlay .cima-panel {
  color: var(--st-ink);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  box-shadow: 0 24px 75px rgba(24,73,123,.16);
}
.cima-panel .cima-header { border-bottom-color: var(--st-border); }
.cima-panel .cima-header h3, .cima-panel .cima-medicine-title { color: var(--st-heading); }
.cima-panel .cima-kicker, .cima-panel .cima-header p { color: var(--st-muted); }
.cima-panel .cima-tabs { border-bottom-color: var(--st-border); }
.cima-panel .cima-tabs button { color: #45627e; }
.cima-panel .cima-tabs button.active { color: var(--st-primary); border-bottom-color: var(--st-primary); }
.cima-panel .cima-search { background: var(--st-surface-soft); border-color: var(--st-border); border-radius: var(--st-radius); }
.cima-panel .cima-search :is(input, select) { border-color: var(--st-border-strong); border-radius: 9px; color: var(--st-ink); }
.cima-panel .cima-result, .cima-panel .cima-presentation-row,
.cima-panel .cima-favorite-row { border-color: var(--st-border); border-radius: 10px; }
.cima-panel .cima-result:hover, .cima-panel .cima-result:focus-visible {
  background: var(--st-surface-hover);
  border-color: var(--st-border-strong);
}
.cima-panel :is(input, select, button):focus-visible { outline: 2px solid var(--st-focus); outline-offset: 2px; }

/* Responsividad: conservamos en móvil el diseño específico de agenda y
 * el acceso a todas las acciones; ningún texto de botón desaparece por CSS. */
@media (max-width: 950px) {
  #content .page-heading { flex-wrap: wrap; }
  #content .page-heading .actions { justify-content: flex-start; }
  #content .stat { min-width: 0; }
}
@media (max-width: 720px) {
  #content .page-heading { align-items: flex-start; }
  #content .page-heading .actions { width: 100%; }
  #content .page-heading .actions .btn { font-size: 12px; padding: 9px 11px; }
  #content .page-heading .actions .btn .icon { width: 16px; height: 16px; }
  #content .card .pad { padding: 16px; }
  #content .card-head, body:not([data-route="dashboard"]) #content .v4749-card-head { padding: 13px 15px; }
  #content .tabs { gap: 6px; }
  #content .tabs > .tab { padding: 9px 11px; font-size: 12px; }
  #content .tabs.tabs-with-icons > .tab { font-size: 13px; }
  #modal .dialog { border-radius: 14px 14px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  #content .btn, #modal .btn { transition: none; }
}