/* =============================================================================
   GoCare — gc-portal.css
   Sistema de diseño unificado del área logueada (portal médico, colaborador,
   clínica y paciente). Hereda los tokens Blueprint v1 de gc-form.css.

   Objetivo: una sola retícula, un solo encabezado de página, una sola tarjeta,
   una sola tabla y un solo set de botones para TODAS las pantallas del menú
   lateral. Antes cada vista traía su propio <style> con métricas distintas.

   Por qué los selectores llevan el prefijo `body`:
   las vistas incrustan su CSS en un <style> dentro del <body>, es decir DESPUÉS
   de este archivo en el orden de cascada. Con especificidad igual ganaría la
   vista. El prefijo `body` sube la especificidad lo justo para que la métrica
   compartida gane, sin recurrir a !important.

   Reglas aplicables: .cursor/rules/01-identidad-gocare.mdc
                      .cursor/rules/06-diseno-interfaces-prime.mdc
   ========================================================================== */

/* =============================================================================
   1. TOKENS DE RETÍCULA
   Única fuente de verdad para márgenes y encuadre del área logueada.
   ========================================================================== */
:root {
    /* Canal lateral único de toda la plataforma. El header (logo a la izquierda,
       chip de cuenta a la derecha) y el shell de cualquier portal arrancan en
       esta misma coordenada, así el margen izquierdo, el del menú lateral y el
       derecho son iguales. layouts/header.php también lo consume. */
    --gc-gutter: 24px;

    --gcp-shell-pad-y: 24px;
    --gcp-shell-pad-x: var(--gc-gutter);
    --gcp-gap: 24px;
    --gcp-sidebar-w: 264px;
    /* Sin tope de ancho: un shell centrado dejaba franjas muertas de más de
       100px por lado en pantallas anchas y desalineaba el contenido del header. */
    --gcp-shell-max: none;

    --gcp-card-pad: 20px;
    --gcp-card-radius: 14px;
    --gcp-stack: 18px;

    --gcp-head-pad-y: 20px;
    --gcp-head-pad-x: 24px;

    --gcp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =============================================================================
   2. SHELL: retícula sidebar + contenido
   Mismos márgenes en todas las pantallas. El aire lo da el wrapper, no un
   segundo panel interior: así se elimina el "doble marco" que tenían algunas
   vistas (tarjeta gris dentro de página gris).
   ========================================================================== */
/* El shell ocupa todo el ancho con el canal lateral del header, así que el fondo
   del propio wrapper ya cubre la página; el :has() pinta el body por si alguna
   vista deja un remanente visible al hacer scroll de rebote. */
body:has(.dashboard-wrapper),
body:has(.patient-dashboard-layout),
body:has(.ai-page) {
    background: var(--bp-bg-page);
}

body .dashboard-wrapper {
    display: grid;
    grid-template-columns: var(--gcp-sidebar-w) minmax(0, 1fr);
    gap: var(--gcp-gap);
    align-items: start;
    width: 100%;
    max-width: var(--gcp-shell-max);
    margin: 0 auto;
    padding: var(--gcp-shell-pad-y) var(--gcp-shell-pad-x);
    background: var(--bp-bg-page);
    min-height: calc(100vh - 80px);
    font-family: var(--gcp-font);
    box-sizing: border-box;
}

body .dashboard-wrapper * {
    box-sizing: border-box;
}

body .dashboard-wrapper--embed {
    grid-template-columns: minmax(0, 1fr);
}

body .dashboard-sidebar {
    position: sticky;
    top: 96px;
    width: 100%;
    min-width: 0;
    align-self: start;
}

/* Contenido: sin fondo ni padding propios. Los márgenes vienen del wrapper,
   de modo que todas las pantallas arrancan en la misma coordenada. */
body .dashboard-content,
body .hc-dashboard-content {
    width: 100%;
    min-width: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    min-height: 0;
}

/* Vistas satélite sin sidebar (p. ej. archivo de imágenes) usan la misma caja. */
body .ai-page,
body .procedimientos-wrap {
    width: 100%;
    max-width: var(--gcp-shell-max);
    margin: 0 auto;
    padding: var(--gcp-shell-pad-y) var(--gcp-shell-pad-x);
    background: var(--bp-bg-page);
    font-family: var(--gcp-font);
    box-sizing: border-box;
}

body .dashboard-content .procedimientos-wrap {
    max-width: none;
    padding: 0;
    background: transparent;
}

/* Contenedores que traen su propio tope de ancho y vuelven a centrarse DENTRO
   del shell: se neutralizan para que no aparezca un segundo margen lateral
   encima del canal del wrapper. */
body .dashboard-wrapper .hc-container {
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 0;
}

/* Shell del portal paciente: no usa .dashboard-wrapper, así que se le iguala
   solo el canal lateral sin tocar su retícula interna. */
body .patient-dashboard-layout {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--gcp-shell-pad-x);
    padding-right: var(--gcp-shell-pad-x);
    box-sizing: border-box;
}

/* Ritmo vertical homogéneo entre bloques de primer nivel. */
body .dashboard-content > * {
    margin-bottom: var(--gcp-stack);
}

body .dashboard-content > *:last-child {
    margin-bottom: 0;
}

/* =============================================================================
   3. ENCABEZADO DE PÁGINA — un solo lenguaje
   Antes coexistían 3 familias: hero azul a sangre, tarjeta azul claro y tarjeta
   blanca. Se unifican en una cabecera compacta blanca con "kicker" azul, según
   la regla 06 ("NO usar hero gigante dentro del área logueada").
   ========================================================================== */
body .dm-header-card,
body .pcv-header-card,
body .ic-header-card,
body .icr-header-card,
body .aq-header,
body .cb-bp-header,
body .agenda-header,
body .page-header,
body .perfil-header,
body .procedimientos-header,
body .hc-header-card,
body .archivo-header.archivo-hero,
body .hcv-hero,
body .ai-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 var(--gcp-stack);
    padding: var(--gcp-head-pad-y) var(--gcp-head-pad-x);
    background: var(--bp-bg-card);
    border: 1px solid var(--bp-ink-200);
    border-left: 3px solid var(--bp-primary-500);
    border-radius: var(--gcp-card-radius);
    box-shadow: var(--bp-shadow-sm);
    color: var(--bp-ink-800);
    font-family: var(--gcp-font);
}

/* Título: mismo tamaño y peso en las 13 pantallas. */
body .dm-header-card h1,
body .pcv-header-card h1,
body .ic-header-card h1,
body .icr-header-card h1,
body .aq-header h1,
body .aq-header .aq-header__title,
body .cb-bp-header h1,
body .cb-bp-header .cb-title,
body .agenda-header .agenda-title,
body .page-header h1,
body .perfil-header h1,
body .procedimientos-header .procedimientos-title,
body .hc-header-card h1,
body .archivo-header h1,
body .hcv-hero .hcv-patient-title h1,
body .rips-head h1,
body .ai-top h1 {
    margin: 0;
    font-family: var(--gcp-font);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--bp-ink-900);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: normal;
}

body .dm-header-card h1 i,
body .pcv-header-card h1 i,
body .ic-header-card h1 i,
body .icr-header-card h1 i,
body .aq-header .aq-header__title i,
body .page-header h1 i,
body .hc-header-card h1 i,
body .archivo-header h1 i,
body .ai-top h1 i {
    color: var(--bp-primary-500);
    font-size: 1.15rem;
    opacity: 1;
}

/* Micro-etiqueta sobre el título. */
body .pcv-kicker,
body .ic-kicker,
body .icr-kicker,
body .hc-kicker,
body .hcv-kicker,
body .rips-kicker,
body .archivo-kicker,
body .cb-kicker,
body .aq-header .aq-header__eyebrow {
    margin: 0 0 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bp-primary-600);
    opacity: 1;
}

/* Bajada descriptiva. */
body .pcv-header-card .pcv-sub,
body .dm-header-card .dm-date,
body .ic-header-card p,
body .icr-header-card p,
body .aq-header .aq-header__sub,
body .cb-bp-header .cb-lead,
body .agenda-header .agenda-subtitle,
body .page-header p,
body .perfil-header p,
body .hc-header-card p,
body .archivo-header p,
body .ai-top p {
    margin: 6px 0 0;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--bp-ink-500);
    opacity: 1;
    max-width: 78ch;
}

body .dm-header-card .dm-date {
    margin: 0;
}

/* --- Reparto interno del encabezado -----------------------------------------
   Las vistas no comparten estructura: unas envuelven el texto en un <div>
   (escritorio, interconsultas) y otras cuelgan el <h1> y los <p> directamente
   del encabezado (agenda quirúrgica, consultorio, pacientes). Con un flex
   simple, el segundo caso alinearía kicker, título y bajada en una sola línea.
   Se resuelve dando ancho completo al texto suelto y empujando las acciones. */

/* Bloques que envuelven el texto: comparten fila con las acciones. */
body .dm-header-main,
body .pcv-header-main,
body .ic-header-card > div:first-child,
body .icr-header-card > div:first-child,
body .hc-header-card > div:first-child,
body .agenda-header > div:first-child,
body .archivo-header.archivo-hero > div:first-child,
body .ai-top .ai-titulo {
    flex: 1 1 340px;
    min-width: 0;
}

/* Texto suelto como hijo directo: siempre fila completa. */
body .aq-header > h1,
body .aq-header > p,
body .page-header > h1,
body .page-header > p,
body .perfil-header > h1,
body .perfil-header > p,
body .hcv-hero > p,
body .hcv-hero > .hcv-patient-head,
body .ai-top > .ai-back {
    flex: 1 1 100%;
    min-width: 0;
}

/* Zona de acciones: se alinea a la derecha de la fila. */
body .dm-header-kpis,
body .pcv-header-side,
body .ic-quick-actions,
body .icr-quick-actions,
body .hc-quick-actions,
body .patients-page-actions,
body .archivo-hero-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 0 auto;
    flex: 0 0 auto;
}

body .pcv-header-side {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

body .page-header-top {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
}

/* El encabezado de perfil vive DENTRO de .perfil-card: se muestra como bloque
   de título, no como una segunda tarjeta anidada. */
body .perfil-card > .perfil-header {
    padding: 0 0 16px;
    margin: 0 0 18px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--bp-ink-100);
    border-radius: 0;
    box-shadow: none;
}

/* Los chips de KPI vivían sobre fondo azul (texto blanco). Al pasar la
   cabecera a blanco se reconvierten a chip claro con borde. */
body .dm-kpi-chip,
body .pcv-kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    background: var(--bp-ink-100);
    border: 1px solid var(--bp-ink-200);
    color: var(--bp-ink-700);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

body a.dm-kpi-chip:hover {
    background: var(--bp-info-bg);
    border-color: var(--bp-info-border);
    color: var(--bp-info-text);
    transform: translateY(-1px);
}

body .dm-kpi-chip i,
body .pcv-kpi-chip i {
    color: var(--bp-primary-500);
    opacity: 1;
}

body .dm-kpi-chip strong,
body .pcv-kpi-chip strong {
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--bp-ink-900);
}

/* Botones "light" que asumían fondo azul translúcido. */
body .pcv-header-card .pcv-btn-light,
body .ic-header-card .ic-btn-light,
body .icr-header-card .icr-btn-light,
body .hcv-hero .hcv-btn-light {
    background: var(--bp-bg-card);
    border: 1px solid var(--bp-ink-300);
    color: var(--bp-ink-800);
}

body .pcv-header-card .pcv-btn-light:hover,
body .ic-header-card .ic-btn-light:hover,
body .icr-header-card .icr-btn-light:hover {
    background: var(--bp-ink-100);
    border-color: var(--bp-ink-400);
    color: var(--bp-ink-900);
}

/* Detalle clínico: el hero verde se alinea al resto pero conserva el verde
   como color de estado, no como fondo. */
body .hcv-hero {
    border-left-color: var(--bp-success);
}

body .hcv-hero .hcv-kicker {
    color: var(--bp-success);
}

/* =============================================================================
   4. TARJETAS / SECCIONES
   ========================================================================== */
body .dashboard-content .dm-card,
body .dashboard-content .pcv-card,
body .dashboard-content .ic-list-card,
body .dashboard-content .icr-card,
body .dashboard-content .info-card,
body .dashboard-content .archivo-card,
body .dashboard-content .rips-card,
body .dashboard-content .rips-config-card,
body .dashboard-content .aq-card,
body .dashboard-content .perfil-card,
body .dashboard-content .patients-card,
body .dashboard-content .agenda-card {
    background: var(--bp-bg-card);
    border: 1px solid var(--bp-ink-200);
    border-radius: var(--gcp-card-radius);
    padding: var(--gcp-card-pad);
    box-shadow: var(--bp-shadow-sm);
}

/* Barras de herramientas / filtros: mismo lenguaje que las tarjetas. */
body .dashboard-content .pcv-toolbar,
body .dashboard-content .ic-toolbar,
body .dashboard-content .icr-toolbar,
body .dashboard-content .agenda-toolbar,
body .dashboard-content .patients-toolbar {
    background: var(--bp-bg-card);
    border: 1px solid var(--bp-ink-200);
    border-radius: var(--gcp-card-radius);
    padding: 16px var(--gcp-card-pad);
    box-shadow: var(--bp-shadow-sm);
}

/* Títulos de sección dentro de tarjetas. */
body .dashboard-content .info-card h2,
body .dashboard-content .rips-config-card h2,
body .dashboard-content .dm-card-title {
    margin: 0 0 14px;
    font-family: var(--gcp-font);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--bp-ink-900);
}

/* =============================================================================
   5. TABLAS
   Se excluye .hcv-page: la historia clínica usa tablas con formato de impresión
   (fórmulas, órdenes) que deben conservar su maquetación exacta.
   ========================================================================== */
body .dashboard-content:not(.hcv-page) table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--gcp-font);
    font-size: 0.88rem;
}

body .dashboard-content:not(.hcv-page) thead th {
    padding: 11px 14px;
    background: var(--bp-ink-100);
    border-bottom: 1px solid var(--bp-ink-200);
    color: var(--bp-ink-500);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

body .dashboard-content:not(.hcv-page) tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--bp-ink-100);
    color: var(--bp-ink-800);
    vertical-align: middle;
}

body .dashboard-content:not(.hcv-page) tbody tr:hover td {
    background: var(--bp-bg-card-soft);
}

body .dashboard-content:not(.hcv-page) tbody tr:last-child td {
    border-bottom: 0;
}

/* =============================================================================
   6. BOTONES
   Se homologan las 8 familias heredadas (dm-, pcv-, ic-, icr-, aq-, gc-, etc.)
   a una sola geometría. El color lo sigue definiendo el modificador de cada
   vista; aquí se unifica forma, tipografía y estados.
   ========================================================================== */
body .dashboard-content .dm-btn,
body .dashboard-content .pcv-btn,
body .dashboard-content .ic-btn,
body .dashboard-content .icr-btn,
body .dashboard-content .hc-btn,
body .dashboard-content .aq-btn,
body .dashboard-content .gc-btn,
body .dashboard-content .quick-link,
body .dashboard-content .btn-logout,
body .dashboard-content .btn-edit-rips-config,
body .dashboard-content .btn-save-rips-config,
body .dashboard-content .btn-create-patient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 16px;
    border-radius: var(--bp-radius-sm);
    font-family: var(--gcp-font);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}

body .dashboard-content .dm-btn:hover,
body .dashboard-content .pcv-btn:hover,
body .dashboard-content .ic-btn:hover,
body .dashboard-content .icr-btn:hover,
body .dashboard-content .hc-btn:hover,
body .dashboard-content .aq-btn:hover,
body .dashboard-content .gc-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--bp-shadow-md);
}

body .dashboard-content button:focus-visible,
body .dashboard-content a:focus-visible,
body .dashboard-content input:focus-visible,
body .dashboard-content select:focus-visible,
body .dashboard-content textarea:focus-visible {
    outline: none;
    box-shadow: var(--bp-focus-ring);
    border-color: var(--bp-primary-500);
}

/* =============================================================================
   7. BADGES / PÍLDORAS DE ESTADO
   ========================================================================== */
body .dashboard-content .status-pill,
body .dashboard-content .rips-status-badge,
body .dashboard-content .badge,
body .dashboard-content .hc-chip,
body .dashboard-content .ic-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--gcp-font);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

/* =============================================================================
   8. KPIs
   ========================================================================== */
body .dashboard-content .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

body .dashboard-content .kpi-card {
    background: var(--bp-bg-card);
    border: 1px solid var(--bp-ink-200);
    border-top: 3px solid var(--bp-primary-500);
    border-radius: var(--gcp-card-radius);
    padding: 16px 18px;
    box-shadow: var(--bp-shadow-sm);
}

body .dashboard-content .kpi-card:hover {
    box-shadow: var(--bp-shadow-md);
    transform: translateY(-2px);
}

body .dashboard-content .kpi-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bp-ink-500);
}

body .dashboard-content .kpi-value {
    margin-top: 8px;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bp-ink-900);
}

/* =============================================================================
   9. CONTROLES DE FORMULARIO EN PANTALLAS ADMINISTRATIVAS
   Corrige el problema de etiquetas solapadas de "Mi Consultorio": las rejillas
   fijas de 5 columnas no dejaban ancho suficiente al texto de cada label.
   ========================================================================== */
body .dashboard-content .rips-config-field label,
body .dashboard-content .icr-filters label,
body .dashboard-content .agenda-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bp-ink-500);
    line-height: 1.35;
    overflow-wrap: break-word;
}

body .dashboard-content .rips-config-field,
body .dashboard-content .agenda-field {
    min-width: 0;
}

body .dashboard-content .rips-config-field input,
body .dashboard-content .rips-config-field select,
body .dashboard-content .icr-input,
body .dashboard-content .agenda-input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--bp-ink-300);
    border-radius: var(--bp-radius-sm);
    background: var(--bp-bg-card);
    color: var(--bp-ink-900);
    font-family: var(--gcp-font);
    font-size: 0.88rem;
}

/* Rejilla fluida: cada campo respeta un mínimo legible y se reacomoda solo. */
body .dashboard-content #rips-config-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px 18px;
    align-items: end;
}

body .dashboard-content .rips-config-actions {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 10px;
}

/* =============================================================================
   10. ALERTAS
   ========================================================================== */
body .dashboard-content .alert-error,
body .dashboard-content .alert-success,
body .dashboard-content .aq-flash,
body .dashboard-content .flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: var(--bp-radius-sm);
    border: 1px solid transparent;
    font-family: var(--gcp-font);
    font-size: 0.88rem;
    font-weight: 600;
}

/* =============================================================================
   11. ESTADOS VACÍOS
   ========================================================================== */
body .dashboard-content .empty-state,
body .dashboard-content .pcv-empty,
body .dashboard-content .ic-empty,
body .dashboard-content .agenda-empty,
body .dashboard-content .dm-empty {
    padding: 28px 22px;
    border: 1px dashed var(--bp-ink-300);
    border-radius: var(--gcp-card-radius);
    background: var(--bp-bg-card-soft);
    color: var(--bp-ink-500);
    font-size: 0.9rem;
    text-align: center;
}

/* =============================================================================
   12. RESPONSIVE — mismos escalones de margen en todo el portal
   ========================================================================== */
@media (max-width: 1024px) {
    :root {
        --gc-gutter: 18px;
        --gcp-shell-pad-y: 16px;
        --gcp-gap: 16px;
        --gcp-head-pad-y: 16px;
        --gcp-head-pad-x: 18px;
        --gcp-card-pad: 16px;
        --gcp-stack: 14px;
    }

    body .dashboard-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    body .dashboard-sidebar {
        position: static;
        top: auto;
    }

    body .dm-header-card,
    body .pcv-header-card,
    body .ic-header-card,
    body .icr-header-card,
    body .aq-header,
    body .agenda-header,
    body .page-header,
    body .perfil-header,
    body .procedimientos-header,
    body .hc-header-card,
    body .archivo-header.archivo-hero,
    body .hcv-hero,
    body .ai-top {
        flex-direction: column;
        align-items: flex-start;
    }

    /* En dirección columna, flex-basis pasa a ser ALTURA: hay que anularlo o
       los bloques de título reservan cientos de píxeles en blanco. */
    body .dm-header-main,
    body .pcv-header-main,
    body .ic-header-card > div:first-child,
    body .icr-header-card > div:first-child,
    body .hc-header-card > div:first-child,
    body .agenda-header > div:first-child,
    body .archivo-header.archivo-hero > div:first-child,
    body .ai-top .ai-titulo,
    body .aq-header > h1,
    body .aq-header > p,
    body .page-header > h1,
    body .page-header > p,
    body .perfil-header > h1,
    body .perfil-header > p,
    body .hcv-hero > p,
    body .hcv-hero > .hcv-patient-head,
    body .ai-top > .ai-back,
    body .dm-header-kpis,
    body .pcv-header-side,
    body .ic-quick-actions,
    body .icr-quick-actions,
    body .hc-quick-actions,
    body .patients-page-actions,
    body .archivo-hero-chip,
    body .page-header-top {
        flex: 0 0 auto;
        width: 100%;
        margin-left: 0;
    }

    body .pcv-header-side {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    :root {
        --gc-gutter: 14px;
        --gcp-shell-pad-y: 12px;
    }

    body .dm-header-card h1,
    body .pcv-header-card h1,
    body .ic-header-card h1,
    body .icr-header-card h1,
    body .aq-header .aq-header__title,
    body .agenda-header .agenda-title,
    body .page-header h1,
    body .perfil-header h1,
    body .procedimientos-header .procedimientos-title,
    body .hc-header-card h1,
    body .archivo-header h1,
    body .ai-top h1 {
        font-size: 1.28rem;
    }

    body .dashboard-content .kpi-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =============================================================================
   13. NAVEGACIÓN DEL PORTAL EN EL CELULAR  (1 sep 2026)

   Problema que resuelve: el menú lateral del médico son 29 enlaces y el del
   colaborador otros tantos. Hasta ahora, por debajo de 1024px simplemente se
   apilaban a ancho completo (regla `position: static` de la sección 12), así
   que en un teléfono había que bajar cerca de mil píxeles de menú ANTES de
   ver el contenido, en las más de treinta pantallas del portal.

   Cómo funciona: el mismo elemento del menú lateral se convierte en un panel
   deslizante. No se duplica marcado ni se crea un segundo menú que después
   quede desincronizado. `assets/js/gc-nav-portal.js` marca ese elemento con
   la clase .gc-navp y añade el botón, el velo y el botón de cerrar.

   Sobre la especificidad: 36 vistas redefinen `.dashboard-sidebar` en su
   propio <style>, que va después de este archivo. Igual que en el resto de
   gc-portal.css, el prefijo `body` sube lo justo para ganar sin !important.
   ========================================================================== */

/* Sin JavaScript el menú se sigue apilando como antes: nada desaparece. */
body .gc-navp-btn,
body .gc-navp-velo,
body .gc-navp-cerrar {
    display: none;
}

@media (max-width: 1024px) {
    /* El portal del paciente tiene su propia retícula y solo colapsaba a
       920px: entre 920 y 1024 quedaba una columna vacía de 260px. */
    body .patient-dashboard-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ---- El menú lateral, convertido en panel ---- */
    body .gc-navp {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1101;
        /* La altura va explícita y no por `top: 0; bottom: 0`. Dentro de una
           retícula, `align-self: start` —que varias vistas fijan en el menú
           lateral— impide que la caja se estire, y el panel crecía hasta la
           altura de sus 29 enlaces: los últimos, incluido Cerrar sesión,
           quedaban fuera de la pantalla y sin manera de alcanzarlos.
           `dvh` además descuenta la barra del navegador móvil. */
        height: 100vh;
        height: 100dvh;
        align-self: stretch;
        width: min(86vw, 320px);
        margin: 0;
        border: 0;
        border-right: 1px solid var(--bp-ink-200);
        border-radius: 0;
        background: var(--bp-bg-card);
        box-shadow: var(--bp-shadow-lg);
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s;
    }

    body .gc-navp.is-abierto {
        transform: translateX(0);
        visibility: visible;
        transition: transform .22s ease;
    }

    /* ---- Botón para abrirlo ---- */
    body .gc-navp-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        left: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        z-index: 1050;
        padding: 12px 17px 12px 14px;
        border: 1px solid var(--bp-primary-600);
        border-radius: 999px;
        background: var(--bp-primary-600);
        color: #fff;
        font-family: var(--gcp-font);
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        box-shadow: var(--bp-shadow-lg);
        transition: transform .18s ease, opacity .18s ease;
    }

    body .gc-navp-btn:active {
        transform: scale(.96);
    }

    body .gc-navp-btn[aria-expanded="true"] {
        opacity: 0;
        pointer-events: none;
    }

    body .gc-navp-btn svg {
        width: 18px;
        height: 18px;
        flex: none;
    }

    /* ---- Velo ---- */
    body .gc-navp-velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1100;
        background: rgba(25, 34, 39, .48);
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, visibility 0s linear .22s;
    }

    body .gc-navp-velo.is-abierto {
        opacity: 1;
        visibility: visible;
        transition: opacity .22s ease;
    }

    /* ---- Cerrar, dentro del panel ---- */
    body .gc-navp-cerrar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 0 10px auto;
        padding: 0;
        border: 1px solid var(--bp-ink-200);
        border-radius: 50%;
        background: var(--bp-bg-card-soft);
        color: var(--bp-ink-700);
        cursor: pointer;
    }

    body .gc-navp-cerrar svg {
        width: 18px;
        height: 18px;
    }

    body .gc-navp-btn:focus-visible,
    body .gc-navp-cerrar:focus-visible {
        outline: 2px solid var(--bp-focus-ring);
        outline-offset: 2px;
    }

    /* Mientras el panel está abierto la página de atrás no se desplaza. */
    body.gc-navp-bloqueado {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .gc-navp,
    body .gc-navp-velo,
    body .gc-navp-btn {
        transition: none;
    }
}


/* =============================================================================
   14. PUENTE A LA APP MÓVIL  (2 sep 2026)
   Botón que aparece solo en un teléfono, dentro del portal clínico, para que
   quien ya tenía sesión abierta encuentre la app sin escribir la dirección.
   Va abajo a la derecha para no chocar con el botón de menú, que está a la
   izquierda; los dos caben sin taparse incluso en pantallas de 320px.
   ========================================================================== */
body .gc-abrir-app { display: none; }

@media (max-width: 1024px) {
    body .gc-abrir-app {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        z-index: 1050;
        min-height: 44px;
        padding: 12px 17px 12px 14px;
        border-radius: 999px;
        border: 1px solid #F3672A;
        background: #F3672A;
        color: #fff;
        font-family: var(--gcp-font);
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
        box-shadow: var(--bp-shadow-lg);
    }

    body .gc-abrir-app:active { transform: scale(.96); }
    body .gc-abrir-app svg { width: 17px; height: 17px; flex: none; }

    body .gc-abrir-app:focus-visible {
        outline: 2px solid var(--bp-focus-ring);
        outline-offset: 2px;
    }
}

/* En pantallas muy estrechas los dos botones no caben con su texto: el de la
   app se queda solo con el icono, que es el que menos texto necesita. */
@media (max-width: 380px) {
    body .gc-abrir-app span { display: none; }
    body .gc-abrir-app { padding: 12px 14px; }
}

/* =============================================================================
   15. MENÚ LATERAL: FIJO, CON SCROLL PROPIO Y OSCURO   (3 sep 2026)

   Dos problemas resueltos aquí.

   (a) El menú ya era `sticky`, pero el del especialista tiene ~20 entradas y
       es MÁS ALTO QUE LA PANTALLA. Cuando un elemento sticky no cabe en el
       viewport, el navegador tiene que desplazar la página entera para
       enseñar su parte inferior: por eso había que bajar todo el contenido de
       la derecha para llegar al final del menú. La solución no es más sticky,
       es acotar su altura y darle scroll propio. El pie (cerrar sesión) queda
       anclado abajo y solo rueda la lista.

   (b) El menú pasa a ser la superficie oscura de la plataforma. Con el azul de
       marca de fondo, la navegación queda separada del área de trabajo sin
       necesidad de una línea, y la marca está presente en todas las pantallas.

   Por qué `body` + `!important`: los tres partials de menú (médico,
   colaborador, paciente) declaran estas mismas clases con `!important` dentro
   de un <style> en el <body>, o sea DESPUÉS de este archivo. Para ganar hace
   falta igualar el `!important` y superar la especificidad; el prefijo `body`
   hace exactamente eso. La definición canónica del menú vive aquí, y los
   colores salen de los tokens --gc-menu-* de gc-tokens.css.

   Todo va dentro de min-width:1025px porque por debajo el menú es un cajón
   deslizante (sección 13) y ahí no aplica ni la altura fija ni el scroll.
   ========================================================================== */
@media (min-width: 1025px) {

    /* --- (a) Fijo de verdad ------------------------------------------------ */
    body .dashboard-sidebar {
        position: sticky;
        top: 96px;                                   /* 80px del header + aire */
        /* La altura disponible: pantalla menos el header, menos el aire de
           arriba y de abajo. Así el panel nunca sobresale de la ventana. */
        max-height: calc(100vh - 96px - var(--gcp-shell-pad-y, 24px));
        display: flex;
        flex-direction: column;
        overflow: hidden;                            /* el panel no crece */
        align-self: start;
    }

    /* La lista rueda por dentro; el pie no se mueve. */
    body .dashboard-sidebar .sidebar-nav {
        flex: 1 1 auto;
        min-height: 0;                               /* imprescindible en flex:
                                                        sin esto el hijo se
                                                        niega a encogerse y el
                                                        overflow nunca actúa */
        overflow-y: auto;
        overscroll-behavior: contain;                /* al llegar al final no
                                                        arrastra la página */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .22) transparent;
    }
    /* La barra se deja SIEMPRE visible cuando hay desbordamiento, no en
       superposición: con veinte entradas no caben todas en pantalla, y una
       barra que solo aparece al pasar el ratón esconde que hay más menú
       debajo. Es el precio justo por 6px de ancho. */
    body .dashboard-sidebar .sidebar-nav::-webkit-scrollbar {
        width: 6px;
        -webkit-appearance: none;
    }
    body .dashboard-sidebar .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
    body .dashboard-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .18);
        border-radius: 999px;
    }
    body .dashboard-sidebar .sidebar-nav:hover::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .3);
    }

    /* Sombras de desplazamiento. macOS esconde las barras de scroll salvo
       mientras se rueda, así que la barra sola no basta para avisar de que
       hay más menú fuera de la vista. Estas dos sombras aparecen SOLO cuando
       queda contenido por ver y desaparecen al llegar al extremo, sin una
       línea de JavaScript.

       Cómo funciona: las dos primeras capas van con `local`, así que se
       desplazan pegadas al contenido; las dos últimas van con `scroll` y se
       quedan fijas al marco. Cuando la lista está arriba del todo, la capa
       local tapa a la fija y la sombra no se ve. Al rodar, la local se va
       con el contenido y destapa la sombra. */
    body .dashboard-sidebar .sidebar-nav {
        background:
            linear-gradient(var(--gc-menu-fondo) 34%, rgba(0, 47, 71, 0)) top    / 100% 26px no-repeat local,
            linear-gradient(rgba(0, 47, 71, 0), var(--gc-menu-fondo) 66%) bottom / 100% 26px no-repeat local,
            radial-gradient(farthest-side at 50% 0,    rgba(0, 0, 0, .38), rgba(0, 0, 0, 0)) top    / 100% 13px no-repeat scroll,
            radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0)) bottom / 100% 13px no-repeat scroll;
    }

    body .dashboard-sidebar .sidebar-footer {
        flex: 0 0 auto;
        margin-top: 10px !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--gc-menu-linea) !important;
    }

    /* --- (b) Oscuro -------------------------------------------------------- */
    body .dashboard-sidebar {
        background: var(--gc-menu-fondo) !important;
        border: 0 !important;
        box-shadow: var(--gc-sombra) !important;
        border-radius: var(--gc-r) !important;
        padding: 14px 10px !important;
    }

    /* Cabecera del menú (nombre del portal) */
    body .dashboard-sidebar .portal-panel {
        border-bottom: 1px solid var(--gc-menu-linea) !important;
    }
    body .dashboard-sidebar .portal-panel .portal-panel-title {
        color: var(--gc-menu-texto-fuerte) !important;
    }
    body .dashboard-sidebar .portal-panel .portal-panel-subtitle {
        color: var(--gc-menu-titulo) !important;
    }

    /* Rótulos de grupo: ASISTENCIAL / ADMINISTRATIVO */
    body .dashboard-sidebar .sidebar-group-title {
        color: var(--gc-menu-titulo) !important;
    }
    body .dashboard-sidebar .sidebar-group-title--divided {
        border-top-color: var(--gc-menu-linea) !important;
    }

    /* Entradas */
    body .dashboard-sidebar .nav-item {
        color: var(--gc-menu-texto) !important;
        background: transparent !important;
        border-left-color: transparent !important;
    }
    body .dashboard-sidebar .nav-item i,
    body .dashboard-sidebar .nav-item svg {
        color: var(--gc-menu-icono) !important;
    }
    body .dashboard-sidebar .nav-item:hover {
        background: var(--gc-menu-hover) !important;
        color: var(--gc-menu-texto-fuerte) !important;
    }
    body .dashboard-sidebar .nav-item:hover i,
    body .dashboard-sidebar .nav-item:hover svg {
        color: var(--gc-menu-texto-fuerte) !important;
    }
    body .dashboard-sidebar .nav-item.active {
        background: var(--gc-menu-activo-fondo) !important;
        color: var(--gc-menu-activo-texto) !important;
        border-left-color: transparent !important;
    }
    body .dashboard-sidebar .nav-item.active i,
    body .dashboard-sidebar .nav-item.active svg {
        color: var(--gc-menu-activo-texto) !important;
    }

    /* Submenús */
    body .dashboard-sidebar .nav-submenu {
        border-left-color: var(--gc-menu-linea) !important;
    }
    body .dashboard-sidebar .nav-subitem {
        color: var(--gc-menu-texto) !important;
        background: transparent !important;
    }
    body .dashboard-sidebar .nav-subitem:hover {
        background: var(--gc-menu-hover) !important;
        color: var(--gc-menu-texto-fuerte) !important;
    }
    body .dashboard-sidebar .nav-subitem.active {
        background: var(--gc-menu-activo-fondo) !important;
        color: var(--gc-menu-activo-texto) !important;
    }
    body .dashboard-sidebar .nav-caret { color: var(--gc-menu-icono) !important; }

    /* Cerrar sesión: contorno sobre oscuro, y rojo solo al pasar por encima.
       Un botón rojo permanente en el menú compite con el contenido clínico. */
    body .dashboard-sidebar .btn-logout {
        background: transparent !important;
        color: var(--gc-menu-texto) !important;
        border: 1px solid var(--gc-menu-linea) !important;
    }
    body .dashboard-sidebar .btn-logout:hover {
        background: var(--gc-riesgo) !important;
        border-color: var(--gc-riesgo) !important;
        color: #FFFFFF !important;
    }

    /* Cambio de portal (colaborador) */
    body .dashboard-sidebar .portal-switch .nav-item {
        border: 1px solid var(--gc-menu-linea) !important;
    }

    /* Densidad del menú. Con la altura acotada a la ventana, bajar el
       interlineado de cada entrada es lo que decide cuántas se ven sin rodar.
       No se baja de 36px de alto: por debajo cuesta acertar con el ratón. */
    body .dashboard-sidebar .nav-item {
        padding: 8px 12px !important;
        margin-bottom: 2px !important;
        min-height: 36px;
    }
    body .dashboard-sidebar .sidebar-group-title {
        padding-bottom: 5px !important;
        margin: 8px 0 1px !important;
    }
    body .dashboard-sidebar .sidebar-group-title--divided {
        margin-top: 10px !important;
        padding-top: 10px !important;
    }
    body .dashboard-sidebar .portal-panel {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    /* --- Vocabulario del portal COLABORADOR ---------------------------------
       Su partial no usa las mismas clases que el del médico: los rótulos son
       `.sidebar-title` (no `.sidebar-group-title`) y los submenús `.nav-sub a`
       (no `.nav-subitem`). Sin estas reglas, ese menú quedaba con texto gris
       oscuro sobre el fondo azul: invisible.
       Además su `.portal-panel` trae un degradado claro propio con título
       oscuro, que sobre el menú oscuro desaparecía. --- */
    body .dashboard-sidebar .portal-panel {
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid var(--gc-menu-linea) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 8px 10px !important;
    }
    body .dashboard-sidebar .portal-panel-title { color: var(--gc-menu-texto-fuerte) !important; }
    body .dashboard-sidebar .portal-panel-subtitle { color: var(--gc-menu-titulo) !important; }
    body .dashboard-sidebar .sidebar-title { color: var(--gc-menu-titulo) !important; }

    body .dashboard-sidebar .nav-sub {
        border-left: 1px solid var(--gc-menu-linea);
        padding-left: 10px;
        margin-left: 22px !important;
    }
    body .dashboard-sidebar .nav-sub a {
        color: var(--gc-menu-texto) !important;
        background: transparent !important;
        border-color: transparent !important;
    }
    body .dashboard-sidebar .nav-sub a:hover {
        background: var(--gc-menu-hover) !important;
        border-color: transparent !important;
        color: var(--gc-menu-texto-fuerte) !important;
    }
    body .dashboard-sidebar .nav-sub a.active {
        background: var(--gc-menu-activo-fondo) !important;
        border-color: transparent !important;
        color: var(--gc-menu-activo-texto) !important;
    }

    /* El colaborador pinta algunas entradas con fondo claro propio. */
    body .dashboard-sidebar .portal-switch { border-top-color: var(--gc-menu-linea) !important; }
    body .dashboard-sidebar .portal-switch .nav-item {
        background: transparent !important;
        border-color: var(--gc-menu-linea) !important;
        color: var(--gc-menu-texto) !important;
    }
    body .dashboard-sidebar .portal-switch .nav-item:hover {
        background: var(--gc-menu-hover) !important;
        border-color: var(--gc-menu-linea) !important;
    }
    body .dashboard-sidebar .sidebar-footer { border-top-color: var(--gc-menu-linea) !important; }

    /* Foco visible sobre fondo oscuro: el anillo azul no se ve aquí. */
    body .dashboard-sidebar :is(a, button, summary):focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .35) !important;
    }
}


/* =============================================================================
   17. CHIPS DEL ENCABEZADO   (3 sep 2026)

   El escritorio del especialista ya traía "chips" con los indicadores del día
   (agenda hoy, pre-consultas, interconsultas), pero su estilo vivía dentro del
   <style> de esa vista y estaba pensado para un banner azul: relleno blanco
   translúcido. Sobre la cabecera blanca del sistema esos chips quedan casi
   invisibles. Aquí se define UN solo chip, legible sobre fondo claro, y se
   aplica a los dos escritorios para que la identidad sea la misma.
   ========================================================================== */
body .gc-head-chip,
body .dm-kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: var(--gc-r-pill);
    background: var(--gc-azul-50);
    border: 1px solid var(--gc-azul-200);
    color: var(--gc-azul-800);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--gc-transicion), border-color var(--gc-transicion);
}
body a.gc-head-chip:hover,
body a.dm-kpi-chip:hover {
    background: var(--gc-azul-100);
    border-color: var(--gc-azul-300);
    transform: none;
}
body .gc-head-chip strong,
body .dm-kpi-chip strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body .gc-head-chip i,
body .dm-kpi-chip i { color: var(--gc-azul-600); font-size: .8rem; }

/* El chip del ROL es el único con relleno sólido: identifica al usuario, no
   cuenta nada. Uno solo por pantalla, así que no compite con los demás. */
body .gc-head-chip--rol {
    background: var(--gc-azul-800);
    border-color: var(--gc-azul-800);
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .7rem;
    font-weight: 700;
}
body .gc-head-chip--rol i { color: rgba(255, 255, 255, .85); }

/* Fila de chips a la derecha del titular, que baja debajo si no cabe. */
body .gc-head-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
@media (max-width: 768px) {
    body .gc-head-chips { margin-left: 0; }
}
