/* Aqualit CRM — estilos extraídos del demo sin cambios (Instrucciones §7.1) + extensiones mínimas */
:root { --aq-purple: #4B164C; --aq-red: #E3264A; --aq-yellow: #DCE116; --bg-light: #F4F6F8; --text-dark: #1E293B; --sidebar-width: 260px; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-light); color: var(--text-dark); overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, .sidebar-brand { font-family: 'Montserrat', sans-serif; }
.top-navbar { height: 70px; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.05); z-index: 1020; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; }
/* La barra va ACOTADA a la altura de la pantalla. Con min-height crecía hasta
   donde pedía el contenido (980 px) y, al estar fija, lo que sobraba quedaba
   fuera sin posibilidad de desplazarlo. dvh respeta la barra del navegador en
   iPad y iPhone, que aparece y desaparece al hacer scroll. */
.sidebar-wrapper {
    width: var(--sidebar-width); background-color: var(--aq-purple); color: white;
    z-index: 1030; display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0;
    height: 100vh; height: 100dvh; max-height: 100dvh;
    transition: transform 0.3s ease-in-out;
}
.sidebar-brand { text-align: center; padding: 25px 20px; display: block; border-bottom: 1px solid rgba(255,255,255,0.1); background-color: #4b164c; flex-shrink: 0; }
.sidebar-brand img { max-height: 45px; width: auto; object-fit: contain; }
/* min-height: 0 es lo que permite que un hijo flexible se encoja por debajo de
   su contenido; sin eso, overflow-y: auto no recorta nada. */
.sidebar-nav {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 15px 0;
    overscroll-behavior: contain;          /* al llegar al final no arrastra la página */
    -webkit-overflow-scrolling: touch;     /* desplazamiento con inercia en iPad */
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.2); border-radius: 10px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.4); }
/* El bloque del usuario queda siempre pegado abajo y nunca se encoge. */
.sidebar-user { flex-shrink: 0; }
/* Estas cuatro reglas van **acotadas al menú**. Sin el prefijo pintaban
   cualquier `.nav-link` de Bootstrap que hubiera en la página: una pestaña
   dentro de una tarjeta blanca heredaba texto blanco en reposo y el amarillo
   de marca al activarse, y quedaba ilegible. El amarillo rinde 9,8:1 sobre el
   morado del menú y 1,4:1 sobre blanco; fuera del menú no se usa. */
/* El título del grupo es un botón: pliega y despliega sus módulos. */
.sidebar-nav .nav-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: calc(100% - 30px);
    margin: 15px 15px 5px 15px;
    padding: 4px 5px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}
.sidebar-nav .nav-section-title:hover,
.sidebar-nav .nav-section-title:focus-visible {
    color: rgba(255,255,255,0.85);
    background-color: rgba(255,255,255,0.06);
}
.sidebar-nav .nav-section-title:focus-visible { outline: 2px solid var(--aq-yellow); outline-offset: 1px; }
.nav-chevron { font-size: .6rem; width: .75rem; transition: transform .2s ease; }
.sidebar-nav .nav-section-title[aria-expanded="false"] .nav-chevron { transform: rotate(-90deg); }

/* El contenedor de los módulos del grupo.
   **Sin animación, a propósito.** Tres intentos de animarlo —altura desde
   JavaScript, y después `grid-template-rows`— se quedaron a medias por cosas
   distintas: medir con el grupo escondido daba cero, el `transition: all` de
   los enlaces disparaba `transitionend` que burbujeaba hasta aquí, y la
   `visibility` heredada tardaba de más en aplicarse. Un menú que abre al
   instante es lo que hacen Gmail, GitHub y VS Code, y no tiene estado que se
   pueda descuadrar: `display:none` esconde, saca del tabulador y saca del
   lector de pantalla, todo de una vez y sin esperar nada. */
.nav-section-items.is-collapsed { display: none; }

/* El contador del grupo solo aparece cuando está cerrado: con el grupo
   abierto los números ya se ven módulo por módulo y sería repetirlos. */
.nav-group-badge { display: none; margin-left: auto; }
.sidebar-nav .nav-section-title[aria-expanded="false"] .nav-group-badge { display: inline-block; }

/* Con el dedo el título es un control que hay que poder tocar: 25 px de alto
   es poco. Gana aire en pantallas chicas y en cualquier equipo táctil —una
   tableta en horizontal muestra el menú completo y aun así se toca—. Se queda
   compacto donde se apunta con el ratón, que es donde escasea el alto. */
@media (pointer: coarse), (max-width: 991.98px) {
    .sidebar-nav .nav-section-title { padding: 11px 8px; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-chevron { transition: none; }
}
/* `transition` acotado a lo que de verdad cambia al pasar el ratón. Con
   `all` se animaba también la `visibility` heredada al plegar el grupo —el
   enlace tardaba en esconderse y se quedaba alcanzable con el tabulador— y
   cada paso del ratón disparaba un `transitionend` de más. */
.sidebar-nav .nav-link { color: rgba(255, 255, 255, 0.75); font-weight: 500; padding: 10px 20px; margin: 2px 15px; border-radius: 8px; transition: color .2s, background-color .2s; font-size: 0.85rem; display: flex; align-items: center; text-decoration: none; }
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { background-color: rgba(255, 255, 255, 0.1); color: var(--aq-yellow); }
.sidebar-nav .nav-link i { width: 30px; font-size: 1.1rem; }
.main-content { margin-left: var(--sidebar-width); flex-grow: 1; min-height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.3s ease-in-out; }
/* ---- Pantallas bajas: laptops de 13"–15" e iPad en horizontal --------------
   Aquí el problema no es el ancho sino el ALTO. En vez de obligar a desplazar
   el menú, se le va quitando aire por escalones para que entre completo. El
   alto de cada ítem nunca baja de 32 px, que sigue siendo cómodo con el dedo;
   por debajo de eso se prefiere desplazar antes que apretar más.             */

/* iPad Pro 13" en horizontal y laptops con poca barra: un pellizco basta. */
@media (max-height: 1000px) {
    .sidebar-brand { padding: 18px 20px; }
    .sidebar-brand img { max-height: 38px; }
    .sidebar-nav { padding: 10px 0; }
    .nav-section-title { margin: 11px 0 4px 20px; }
    .nav-link { padding: 8px 20px; }
}

/* MacBook de 13"–15" y iPad Air/10.9" en horizontal. */
@media (max-height: 820px) {
    .sidebar-brand { padding: 14px 20px; }
    .sidebar-brand img { max-height: 34px; }
    .sidebar-nav { padding: 8px 0; }
    .nav-section-title { margin: 9px 0 3px 20px; font-size: 0.65rem; }
    .nav-link { padding: 7px 20px; margin: 1px 12px; font-size: 0.82rem; }
    .nav-link i { width: 26px; font-size: 1rem; }
    .sidebar-user { padding: 10px 12px !important; }
    .sidebar-user .avatar-initials { width: 34px; height: 34px; font-size: 0.75rem; }
    .sidebar-user .fs-6 { font-size: 0.85rem !important; }
}

/* iPad en horizontal con la barra del navegador a la vista (≈700 px). */
@media (max-height: 760px) {
    .sidebar-brand { padding: 10px 20px; }
    .sidebar-brand img { max-height: 30px; }
    .sidebar-nav { padding: 3px 0; }
    .nav-section-title { margin: 6px 0 1px 20px; }
    .nav-link { padding: 6px 20px; }
    .sidebar-user { padding: 8px 12px !important; }
    .sidebar-user .avatar-initials { width: 30px; height: 30px; }
}

/* Pantallas muy bajas (1366x768 con barras, netbooks). */
@media (max-height: 680px) {
    .sidebar-brand { padding: 8px 20px; }
    .sidebar-brand img { max-height: 26px; }
    .nav-section-title { margin: 6px 0 2px 20px; }
    .nav-link { padding: 5px 20px; font-size: 0.8rem; }
    .sidebar-user .text-white-50 { display: none; }   /* el rol se ve en el perfil */
}

/* Si queda menú por ver hacia abajo, un degradado al pie lo insinúa. La clase
   la pone ui.js solo cuando de verdad hay algo más abajo, así que al llegar al
   final el último ítem se ve nítido. */
.sidebar-nav { position: relative; }
.sidebar-nav-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sidebar-nav-wrap::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
    pointer-events: none; opacity: 0; transition: opacity .2s;
    background: linear-gradient(to top, var(--aq-purple), transparent);
}
.sidebar-nav-wrap.has-more::after { opacity: 1; }

@media (max-width: 991.98px) {
    .main-content { margin-left: 0; }
    .sidebar-wrapper { transform: translateX(-100%); }
    .sidebar-wrapper.show { transform: translateX(0); }
    .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 1025; display: none; }
    .sidebar-overlay.show { display: block; }
    /* Con el panel abierto el fondo queda fijo: nada de dos desplazamientos */
    body.sidebar-open { overflow: hidden; }
    .btn-menu, .top-navbar .btn-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
.card { border: none; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); margin-bottom: 24px; background: #fff; }
.card-header { background-color: transparent; border-bottom: 1px solid #F1F5F9; padding: 16px 24px; font-weight: 600; color: var(--text-dark); }
.text-aq-purple { color: var(--aq-purple); }

/* ---- Botones de marca ----------------------------------------------------
   Bootstrap 5.3 resuelve hover, foco, activo y deshabilitado con variables
   --bs-btn-*. Pintar solo `background-color` deja esas variables vacías y el
   botón se vuelve transparente al pasar el mouse: por eso cada color de marca
   se declara aquí como una variante completa. Las clases bg-aq-* se mantienen
   como alias para no tener que tocar las vistas.                            */
.btn-aq, .btn.bg-aq-purple {
    --bs-btn-color: #fff;              --bs-btn-bg: var(--aq-purple);
    --bs-btn-border-color: var(--aq-purple);
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: #63216A;
    --bs-btn-hover-border-color: #63216A;
    --bs-btn-focus-shadow-rgb: 75, 22, 76;
    --bs-btn-active-color: #fff;       --bs-btn-active-bg: #3A1039;
    --bs-btn-active-border-color: #3A1039;
    /* Un botón apagado tiene que verse apagado: en el teléfono, con el morado a
       toda intensidad, la promotora intentaba tocar botones que no hacían nada. */
    --bs-btn-disabled-color: #fff;     --bs-btn-disabled-bg: #B49BB6;
    --bs-btn-disabled-border-color: #B49BB6;
}
.btn-aq-red, .btn.bg-aq-red {
    --bs-btn-color: #fff;              --bs-btn-bg: var(--aq-red);
    --bs-btn-border-color: var(--aq-red);
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: #C41E3D;
    --bs-btn-hover-border-color: #C41E3D;
    --bs-btn-focus-shadow-rgb: 227, 38, 74;
    --bs-btn-active-color: #fff;       --bs-btn-active-bg: #A81833;
    --bs-btn-active-border-color: #A81833;
    --bs-btn-disabled-color: #fff;     --bs-btn-disabled-bg: var(--aq-red);
    --bs-btn-disabled-border-color: var(--aq-red);
}
.btn-aq-blue, .btn.bg-aq-blue {
    --bs-btn-color: #fff;              --bs-btn-bg: #2563EB;
    --bs-btn-border-color: #2563EB;
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: #1D4FD8;
    --bs-btn-hover-border-color: #1D4FD8;
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
    --bs-btn-active-color: #fff;       --bs-btn-active-bg: #1A44BC;
    --bs-btn-active-border-color: #1A44BC;
    --bs-btn-disabled-color: #fff;     --bs-btn-disabled-bg: #2563EB;
    --bs-btn-disabled-border-color: #2563EB;
}
.btn-aq-outline {
    --bs-btn-color: var(--aq-purple);  --bs-btn-border-color: var(--aq-purple);
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: var(--aq-purple);
    --bs-btn-hover-border-color: var(--aq-purple);
    --bs-btn-focus-shadow-rgb: 75, 22, 76;
    --bs-btn-active-color: #fff;       --bs-btn-active-bg: #3A1039;
    --bs-btn-active-border-color: #3A1039;
    --bs-btn-disabled-color: var(--aq-purple);
    --bs-btn-disabled-border-color: var(--aq-purple);
}
/* Las clases bg-aq-* fuera de un botón siguen siendo utilidades de fondo */
.bg-aq-red { background-color: var(--aq-red); color: #fff; }
.bg-aq-purple { background-color: var(--aq-purple); color: #fff; }
.btn.bg-aq-purple, .btn.bg-aq-red, .btn.bg-aq-blue { border: 1px solid transparent; }

/* Botones secundarios (v0.45.1). `btn-light` (#f8f9fa) sobre el fondo gris claro
   de las pantallas casi no se veía (Cancelar, Volver...), y los de contorno
   venían en gris o en el azul de Bootstrap. Ahora todos salen en el morado
   oscuro de la marca: texto 11:1 sobre el lila suave, borde visible. */
.btn-light {
    --bs-btn-color: #4B164C;           --bs-btn-bg: #EDE4EE;
    --bs-btn-border-color: #8F6A91;
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: #4B164C;
    --bs-btn-hover-border-color: #4B164C;
    --bs-btn-focus-shadow-rgb: 75, 22, 76;
    --bs-btn-active-color: #fff;       --bs-btn-active-bg: #3A1039;
    --bs-btn-active-border-color: #3A1039;
    --bs-btn-disabled-color: #7A5F7C;  --bs-btn-disabled-bg: #F3EEF4;
    --bs-btn-disabled-border-color: #D9C9DB;
}
.btn-outline-secondary, .btn-outline-primary {
    --bs-btn-color: #4B164C;           --bs-btn-border-color: #6B3A6C;
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: #4B164C;
    --bs-btn-hover-border-color: #4B164C;
    --bs-btn-focus-shadow-rgb: 75, 22, 76;
    --bs-btn-active-color: #fff;       --bs-btn-active-bg: #3A1039;
    --bs-btn-active-border-color: #3A1039;
    --bs-btn-disabled-color: #7A5F7C;  --bs-btn-disabled-border-color: #C9B3CB;
}
.btn-outline-danger {
    --bs-btn-color: #B91C3A;           --bs-btn-border-color: #B91C3A;
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: #B91C3A;
    --bs-btn-hover-border-color: #B91C3A;
    --bs-btn-active-color: #fff;       --bs-btn-active-bg: #9B1730;
    --bs-btn-active-border-color: #9B1730;
    --bs-btn-disabled-color: #B91C3A;  --bs-btn-disabled-border-color: #B91C3A;
}
/* El foco por teclado siempre se ve, en cualquier botón o enlace */
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
a:focus-visible, .page-link:focus-visible {
    outline: 2px solid var(--aq-purple); outline-offset: 2px; box-shadow: none;
}
.btn-link:hover { color: var(--aq-purple); }
.badge-qb { background-color: #10B981; color: white; }
.badge-pending { background-color: #F59E0B; color: white; }
.chat-widget-btn { position: fixed; bottom: 20px; right: 20px; width: 55px; height: 55px; background-color: var(--aq-purple); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.2); cursor: pointer; z-index: 1050; transition: transform 0.2s; border: none; }
.chat-widget-btn:hover { transform: scale(1.05); }
.chat-window { position: fixed; bottom: 85px; right: 20px; width: 360px; max-width: calc(100vw - 40px); background: white; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.15); z-index: 1050; display: none; flex-direction: column; overflow: hidden; }
.chat-window.active { display: flex; }
.chat-header { background: var(--aq-purple); color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; font-weight: 600;}
.chat-body { padding: 15px; height: 320px; overflow-y: auto; background-color: #F8FAFC; display: flex; flex-direction: column; gap: 10px; }
.chat-message { max-width: 85%; padding: 10px 15px; border-radius: 15px; font-size: 0.85rem; }
.chat-message.bot { background-color: white; border: 1px solid #E2E8F0; align-self: flex-start; border-bottom-left-radius: 0; }
.chat-message.user { background-color: var(--aq-red); color: white; align-self: flex-end; border-bottom-right-radius: 0; }
.timeline-item { position: relative; padding-left: 30px; margin-bottom: 20px; border-left: 2px solid #E2E8F0; }
.timeline-item::before { content: ''; position: absolute; left: -6px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--aq-red); }

/* ---- Extensiones (mismos tokens del demo) ---- */
.avatar-initials { width: 36px; height: 36px; border-radius: 50%; background: var(--aq-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; flex-shrink: 0; }
.sidebar-user .btn-logout { color: rgba(255,255,255,0.6); padding: 0; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.sidebar-user .btn-logout:hover { color: var(--aq-yellow); }
/* ---- Pantalla de acceso ----
   Fondo blanco. Sobre blanco, una tarjeta blanca sin nada se pierde, así que la
   separa una sombra suave con un punto de morado en vez de gris puro: se
   integra con la marca en lugar de parecer un recorte gris pegado encima.
   La cabecera sigue morada porque es lo que identifica la pantalla de un
   vistazo cuando ya no hay fondo de color. */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: #fff;
}
/* Con foto de fondo (Configuración → Empresa): cubre toda la pantalla y una capa
   morada la apaga lo justo para que la tarjeta se lea sobre cualquier foto. */
.auth-con-fondo .auth-wrapper {
    background: linear-gradient(rgba(46, 26, 71, .45), rgba(46, 26, 71, .45)), var(--auth-fondo) center / cover no-repeat;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    border: 1px solid #EDEFF3;
    /* Dos capas: el contorno cercano que la despega del fondo y la sombra
       amplia que le da altura. Una sola se ve o dura o sucia. */
    box-shadow: 0 1px 2px rgba(75, 22, 76, .05), 0 16px 40px -12px rgba(75, 22, 76, .16);
}
.auth-card-wide { max-width: 820px; }
.auth-brand { background: var(--aq-purple); border-radius: 16px 16px 0 0; padding: 28px; text-align: center; }
.auth-brand img { max-height: 50px; }

/* Los campos: apenas un relieve en reposo y el anillo de marca al escribir. */
.auth-card .form-control,
.auth-card .form-select {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    border-color: #E2E6EC;
}
.auth-card .form-control:focus,
.auth-card .form-select:focus {
    border-color: var(--aq-purple);
    box-shadow: 0 0 0 .2rem rgba(75, 22, 76, .12);
}
.auth-card .btn { box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.empty-state { text-align: center; padding: 48px 16px; color: #64748B; }
.empty-state i { font-size: 2.5rem; color: #CBD5E1; margin-bottom: 12px; }
.secret-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.1rem; letter-spacing: 1px; word-break: break-all; }
.toast-container { z-index: 1090; }
.cursor-pointer { cursor: pointer; }
.search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 1060; max-height: 60vh; overflow-y: auto; margin-top: 4px; }
.customer-card { transition: box-shadow .15s, transform .15s; }
.customer-card:hover { box-shadow: 0 6px 20px rgba(75,22,76,.12); transform: translateY(-1px); }
.min-w-0 { min-width: 0; }
.nav-tabs .nav-link.active { font-weight: 600; border-bottom-color: #fff; }
.main-content { min-width: 0; }

/* ---- F2.1 Pipeline, agenda y metas ---- */
.bg-aq-blue { background-color: #2563EB; color: #fff; }
.kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.kanban { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.kanban-col { flex: 0 0 280px; max-width: 280px; background: #EEF1F5; border-radius: 12px; padding: 12px; }
.kanban-col.drag-over { outline: 2px dashed var(--aq-purple); outline-offset: 2px; background: #E6E9F2; }
.kanban-head { padding-bottom: 10px; border-bottom: 1px solid #DDE3EA; margin-bottom: 10px; }
.kanban-body { display: flex; flex-direction: column; gap: 10px; min-height: 60px; max-height: 62vh; overflow-y: auto; }
.kanban-card { background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.04); cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.kanban-card:hover { box-shadow: 0 6px 18px rgba(75,22,76,.12); }
.task-row.overdue { border-left: 3px solid var(--aq-red); }
.task-row.today { border-left: 3px solid #F59E0B; }
.goal-cell input { max-width: 140px; }

/* =========================================================================
   Diseño adaptable a cualquier dispositivo (teléfono, tableta y escritorio)
   Puntos de corte de Bootstrap 5: xs <576, sm ≥576, md ≥768, lg ≥992, xl ≥1200
   ========================================================================= */

/* Nada puede desbordar la pantalla en horizontal */
html, body { max-width: 100%; }
img, svg, canvas, video { max-width: 100%; height: auto; }
.card, .modal-content { overflow-wrap: anywhere; }
.text-break-all { word-break: break-word; overflow-wrap: anywhere; }

/* ---- Tablas que se convierten en tarjetas en el teléfono -------------------
   Marque el contenedor con .table-cards; cada <td> lleva data-label. */
@media (max-width: 767.98px) {
    .table-cards > table > thead { display: none; }
    .table-cards > table,
    .table-cards > table > tbody,
    .table-cards > table > tbody > tr,
    .table-cards > table > tbody > tr > td { display: block; width: 100%; }
    .table-cards > table > tbody > tr {
        border: 1px solid #E2E8F0; border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; background: #fff;
    }
    .table-cards > table > tbody > tr:last-child { margin-bottom: 0; }
    .table-cards > table > tbody > tr > td {
        border: 0; padding: 5px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
        text-align: right;
    }
    .table-cards > table > tbody > tr > td::before {
        content: attr(data-label); flex: 0 0 42%; text-align: left; color: #64748B; font-size: .75rem;
        font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding-top: 2px;
    }
    .table-cards > table > tbody > tr > td[data-label=""]::before,
    .table-cards > table > tbody > tr > td:not([data-label])::before { content: none; }
    /* La primera celda hace de título de la tarjeta */
    .table-cards > table > tbody > tr > td:first-child {
        font-weight: 700; font-size: .95rem; border-bottom: 1px solid #F1F5F9; padding-bottom: 8px; margin-bottom: 4px;
    }
    .table-cards > table > tbody > tr > td:first-child::before { content: none; }
    .table-cards > table > tbody > tr > td.text-end { text-align: right; }
    .table-cards > table { border-collapse: separate; }
    /* Editor de líneas: cada campo ocupa el ancho completo */
    .table-cards.lines-editor > table > tbody > tr > td { flex-direction: column; align-items: stretch; text-align: left; gap: 4px; }
    .table-cards.lines-editor > table > tbody > tr > td::before { flex: none; }
    .table-cards.lines-editor > table > tbody > tr > td:first-child { border-bottom: 0; }
    .table-cards.lines-editor > table > tbody > tr { position: relative; padding-top: 14px; }
    .table-cards.lines-editor td:last-child { position: absolute; top: 6px; right: 8px; width: auto; padding: 0; }
}

/* ---- Tarjetas de indicadores compactas en pantallas chicas ---- */
@media (max-width: 575.98px) {
    #kpis .card, #buckets .card, #totals .card { padding: .75rem !important; }
    #kpis .kpi-icon, #buckets .kpi-icon, #totals .kpi-icon { width: 38px; height: 38px; font-size: .95rem; border-radius: 10px; }
    #kpis h4, #buckets h4, #totals h4 { font-size: 1.1rem; margin-bottom: 0; }
    #kpis .row, #buckets .row { row-gap: .5rem; }
}

/* ---- Barra de acciones de la cabecera ---- */
@media (max-width: 575.98px) {
    .page-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
    .page-actions > .btn, .page-actions > a.btn, .page-actions > form { width: 100%; }
    .page-actions > .btn-group { grid-column: 1 / -1; }
    .page-actions .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- Filtros plegables (los arma ui.js en pantallas chicas) ---- */
.filters-toggle { display: none; }
@media (max-width: 767.98px) {
    .filters-toggle { display: inline-flex; align-items: center; gap: .5rem; width: 100%; justify-content: space-between; }
    .filters-card.is-collapsed { display: none; }
    .filters-count { background: var(--aq-red); color: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; }
}

/* ---- Kanban: una columna casi completa por pantalla en el teléfono ---- */
@media (max-width: 767.98px) {
    .kanban { scroll-snap-type: x mandatory; gap: 12px; -webkit-overflow-scrolling: touch; }
    .kanban-col { flex: 0 0 85%; max-width: 85%; scroll-snap-align: start; }
    .kanban-body { max-height: none; }
}

/* ---- Modales cuyo contenido va dentro de un <form> ------------------------
   Casi todos los diálogos del sistema envuelven cabecera, cuerpo y pie en un
   solo <form>, para que Enter envíe y el navegador valide de una vez. Eso deja
   al <form> como único hijo de .modal-content y rompe la cadena de flex de
   Bootstrap: el cuerpo deja de tener altura limitada, no hace scroll, y en un
   formulario largo el pie —con el botón de guardar— se va debajo de la pantalla.
   Aquí se le devuelve al <form> el papel de columna flexible.

   Se limita a los diálogos .modal-dialog-scrollable: en los demás Bootstrap
   deja crecer el diálogo y se desplaza la página entera, que también llega al
   pie. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    /* Sin esto, un hijo flexible se niega a encogerse por debajo de su contenido */
    min-height: 0;
    max-height: 100%;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
    min-height: 0;
}

/* ---- Modales a pantalla completa en el teléfono ---- */
@media (max-width: 575.98px) {
    .modal-dialog { margin: 0; max-width: 100%; min-height: 100%; }
    .modal-content { min-height: 100vh; border-radius: 0; }
    .modal-body { overflow-y: auto; }
    .modal-footer { position: sticky; bottom: 0; background: #fff; z-index: 2; }
    .modal-footer .btn { flex: 1 1 auto; }
}

/* ---- Objetivos táctiles y tipografía en pantallas táctiles o chicas ---- */
@media (pointer: coarse), (max-width: 991.98px) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; padding-left: .85rem; padding-right: .85rem; }
    .btn-group-sm > .btn, .table .btn-sm, .list-group .btn-sm { min-height: 38px; }
    .form-control, .form-select { min-height: 44px; font-size: 16px; }  /* 16px evita el zoom de iOS */
    .form-control-sm, .form-select-sm { min-height: 40px; font-size: 16px; }
    textarea.form-control { min-height: 88px; }
    .nav-link, .list-group-item-action { min-height: 44px; }
    .nav-tabs .nav-link { display: flex; align-items: center; }
    .form-check-input { width: 1.25rem; height: 1.25rem; }
}

/* ---- Ajustes finos por tamaño ---- */
@media (max-width: 575.98px) {
    h2 { font-size: 1.4rem; }
    .card { border-radius: 10px; margin-bottom: 16px; }
    .card-header { padding: 12px 16px; }
    .top-navbar { height: 60px; padding: 0 14px; }
    .doc-sheet { padding: 12px; }
    .timeline-item { padding-left: 22px; }
    dl.row dt, dl.row dd { font-size: .9rem; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    /* Tableta: el contenido usa todo el ancho y los filtros caben en dos filas */
    .main-content { margin-left: 0; }
    .kanban-col { flex: 0 0 260px; max-width: 260px; }
}

/* Barra de pestañas desplazable cuando hay muchas (ficha de cliente) */
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link { white-space: nowrap; }

/* Impresión: sin barras ni menús */
@media print {
    .sidebar-wrapper, .top-navbar, .chat-widget-btn, .chat-window, .page-actions, .filters-card, .filters-toggle { display: none !important; }
    .main-content { margin-left: 0 !important; }
}

/* Pie de formulario: botones a ancho completo en el teléfono */
@media (max-width: 575.98px) {
    .form-actions { display: grid; grid-template-columns: 1fr; gap: .5rem; }
    .form-actions .btn { width: 100%; }
    /* Tarjetas de indicadores en una sola línea */
    #kpis .card > div, #totals .card > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; flex: 1 1 auto; }
    #kpis .card > div > small:first-child, #totals .card > div > small:first-child { flex: 1 1 auto; }
    #kpis .card h4, #totals .card h4 { margin-left: auto; }
    #kpis .card > div > small:last-child { flex: 1 1 100%; }
}
/* En el editor de líneas, las celdas de solo lectura quedan como etiqueta + valor */
@media (max-width: 767.98px) {
    .table-cards.lines-editor > table > tbody > tr > td:not(:has(input, select)) {
        flex-direction: row; align-items: baseline; justify-content: space-between;
    }
}

/* Búsqueda global desplegada en el teléfono */
@media (max-width: 575.98px) {
    #globalSearch.search-open {
        position: absolute; top: 60px; left: 0; right: 0; width: auto !important;
        background: #fff; padding: 10px 14px; box-shadow: 0 6px 16px rgba(0,0,0,.08); z-index: 1035;
    }
    #globalSearch.search-open .search-results { left: 14px; right: 14px; }
}
/* Pantallas muy anchas: el contenido no se estira sin límite */
@media (min-width: 1700px) {
    .main-content > .p-3, .main-content > .p-md-4 { max-width: 1600px; width: 100%; margin-inline: auto; }
}

/* ---- Prueba de entrega (POD) ---- */
.signature-pad { position: relative; border: 2px dashed #CBD5E1; border-radius: 12px; background: #F8FAFC; height: 190px; touch-action: none; }
.signature-pad canvas { width: 100%; height: 100%; display: block; touch-action: none; border-radius: 10px; }
.signature-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: .9rem; pointer-events: none; }
.signature-pad.has-signature { border-style: solid; border-color: var(--aq-purple); background: #fff; }
.signature-pad.has-signature .signature-hint { display: none; }
.pod-photo { display: block; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid #E2E8F0; }
.pod-photo img { width: 100%; height: 100%; object-fit: cover; }
#podForm .btn-outline-secondary:has(input:checked) { border-color: var(--aq-purple); background: rgba(75,22,76,.06); color: var(--aq-purple); font-weight: 600; }

/* Las utilidades de Bootstrap (d-flex, d-block…) ganan al atributo hidden:
   sin esto, ocultar un bloque con el atributo no surte efecto. */
[hidden] { display: none !important; }

/* Importador: en pantalla grande las listas largas se desplazan dentro de su
   tarjeta; en el teléfono se dejan crecer, porque un desplazamiento dentro de
   otro es incómodo con el dedo. */
.map-table, .report-table { overflow-y: auto; }
@media (min-width: 992px) {
    .map-table { max-height: 45vh; }
    .report-table { max-height: 55vh; }
}

/* Pasos numerados del importador */
.step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--aq-purple); color: #fff;
            display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }

/* Contenedor de mapas (Google Maps). Alto fijo para que el mapa se dibuje bien. */
.map-box { width: 100%; height: 280px; border-radius: 12px; overflow: hidden; background: #EEF2F6; }
@media (max-width: 575.98px) { .map-box { height: 220px; } }

/* Cuadro comparativo de proveedores (PRD §2.6). La columna del más barato se
   destaca en verde suave para que se vea de un vistazo cuál conviene. */
.comparison-table th, .comparison-table td { vertical-align: middle; }
.comparison-table .cmp-best { background: rgba(25, 135, 84, .07); }
.comparison-table .cmp-pick { cursor: pointer; display: inline-flex; align-items: center; }
.comparison-table .cmp-pick:hover { color: var(--aq-purple); }
.comparison-table tfoot th, .comparison-table tfoot td { border-top: 2px solid var(--aq-purple); }

@media (max-width: 767.98px) {
    /* En el teléfono el comparativo se desplaza a lo ancho: partirlo en tarjetas
       perdería justo lo que sirve, que es ver los proveedores uno al lado del otro. */
    .comparison-table { min-width: 620px; }
}

/* Calendario de activaciones (PRD §2.8): vistas Mes, Semana y Día.
   El color de cada bloque es el de su TIPO (--ev-*, viene del servidor); el
   ESTADO se lee en el ícono y en el trazo del bloque: planificada punteada,
   confirmada firme, en curso con halo, cerrada atenuada, cancelada tachada.
   En el teléfono el mes pasa a una lista de días con actividad. */
.aq-cal { --cal-line: #E5E7EB; position: relative; }
.cal-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; padding: .75rem 1rem; }
.cal-title { font-size: 1.05rem; }
.cal-legend { padding: 0 1rem .75rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; justify-content: space-between; }
.cal-chip {
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid #D1D5DB; background: #fff;
    border-radius: 999px; padding: 2px 10px; font-size: .78rem; color: #374151; cursor: pointer;
}
.cal-chip:hover { background: #F3F4F6; }
.cal-chip.is-off { opacity: .5; text-decoration: line-through; }
.cal-chip-pick[aria-pressed="true"] { background: var(--ev-bg); border-color: var(--ev-color); color: var(--ev-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ev-color); }
.cal-chip:focus-visible, .cal-ev:focus-visible, .cal-date:focus-visible, .cal-colhead:focus-visible {
    outline: 2px solid var(--aq-purple); outline-offset: 2px;
}
.cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.cal-state-keys { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .72rem; color: #6B7280; }
.cal-st { font-size: .62rem; margin-right: 3px; }

/* Bloques */
.cal-ev {
    --ev-bg: #EEEDFE; --ev-color: #534AB7; --ev-ink: #26215C;
    background: var(--ev-bg); color: var(--ev-ink); border-left: 3px solid var(--ev-color);
    border-radius: 5px; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.cal-ev:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.cal-ev.is-draggable { cursor: grab; }
.cal-ev.is-dragging { opacity: .88; z-index: 60; cursor: grabbing; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.cal-ev-chip { font-size: .68rem; line-height: 1.25; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-hour { font-weight: 700; margin-right: 3px; }
.cal-cont { margin: 0 2px; font-size: .6rem; }
.cal-ev.st-planificada { border-top: 1px dashed var(--ev-color); border-right: 1px dashed var(--ev-color); border-bottom: 1px dashed var(--ev-color); }
.cal-ev.st-en_curso { box-shadow: 0 0 0 2px var(--ev-color); }
.cal-ev.st-cerrada { opacity: .68; }
.cal-ev.st-cancelada { opacity: .55; filter: grayscale(.7); text-decoration: line-through; }

/* Mes */
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 .75rem .75rem; }
.cal-head { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; padding-bottom: 4px; }
.cal-day { min-height: 104px; border: 1px solid var(--cal-line); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 3px; background: #fff; min-width: 0; }
.cal-day.cal-out { background: #F9FAFB; }
.cal-day.cal-out .cal-date { color: #9CA3AF; }
.cal-day.cal-today { border-color: var(--aq-purple); box-shadow: inset 0 0 0 1px var(--aq-purple); }
.cal-date { align-self: flex-start; border: 0; background: transparent; font-size: .75rem; font-weight: 700; color: #374151; padding: 0 6px; border-radius: 6px; line-height: 1.6; }
.cal-date:hover { background: #EEE7EF; }
.cal-today .cal-date { background: var(--aq-purple); color: #fff; }
.cal-dow { display: none; }
.cal-more { border: 0; background: transparent; font-size: .7rem; color: var(--aq-purple); text-align: left; padding: 0 4px; font-weight: 600; }
.cal-more:hover { text-decoration: underline; }
.cal-day.cal-drop { outline: 2px dashed var(--aq-purple); outline-offset: -2px; background: #F5EEF6; }

/* Semana y Día */
.cal-grid { --gw: 52px; padding: 0 .75rem .75rem; }
.cal-grid-head, .cal-grid-body { display: grid; grid-template-columns: var(--gw) repeat(var(--n), minmax(0, 1fr)); }
.cal-grid-head { background: #fff; border-bottom: 1px solid var(--cal-line); }
.cal-colhead { border: 0; background: transparent; padding: 6px 0; font-size: .74rem; color: #6B7280; text-transform: uppercase; }
.cal-colhead b { display: inline-block; font-size: 1.05rem; color: #1E293B; min-width: 1.9rem; line-height: 1.9rem; border-radius: 50%; }
.cal-colhead.cal-today b { background: var(--aq-purple); color: #fff; }
.cal-gutter { position: relative; }
.cal-hlabel { position: absolute; right: 6px; margin-top: 2px; font-size: .68rem; color: #9CA3AF; }
.cal-col {
    position: relative; border-left: 1px solid var(--cal-line);
    background-image: repeating-linear-gradient(to bottom, var(--cal-line) 0, var(--cal-line) 1px, transparent 1px, transparent var(--hpx));
}
.cal-col.cal-today { background-color: #FBF7FC; }
.cal-ev-block { position: absolute; padding: 2px 5px; font-size: .72rem; line-height: 1.2; overflow: hidden; z-index: 2; box-sizing: border-box; }
.cal-ev-block { word-break: normal; overflow-wrap: normal; hyphens: none; }
.cal-ev-block .cal-l1, .cal-ev-block .cal-l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-block.is-narrow .cal-l3, .cal-ev-block.is-narrow .cal-l4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-block.is-narrow .cal-l4 { display: none; }
.cal-ev-block.is-cascade { box-shadow: -1px 0 0 #fff, 0 1px 3px rgba(0, 0, 0, .2); }
.cal-ev-block .cal-l1 { font-weight: 700; }
.cal-ev-block .cal-l3 { font-weight: 600; }
.cal-ev-block .cal-l4 { font-size: .68rem; opacity: .85; }
.cal-ev-block.is-short .cal-l1, .cal-ev-block.is-short .cal-l2 { display: inline; }
.cal-ev-block.is-short .cal-l3, .cal-ev-block.is-short .cal-l4 { display: none; }
.cal-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.cal-resize::after { content: ""; position: absolute; left: 35%; right: 35%; bottom: 2px; height: 2px; border-radius: 2px; background: var(--ev-color); opacity: 0; }
.cal-ev-block:hover .cal-resize::after { opacity: .8; }
.cal-sel { position: absolute; left: 2px; right: 2px; background: rgba(75, 22, 76, .14); border: 1px solid var(--aq-purple); border-radius: 5px; font-size: .7rem; padding: 2px 4px; color: var(--aq-purple); pointer-events: none; z-index: 3; overflow: hidden; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--aq-red); z-index: 4; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--aq-red); }

/* Arrastre, aviso y ventanas */
body.cal-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.cal-hint { position: fixed; z-index: 2000; background: #1E293B; color: #fff; font-size: .75rem; padding: 3px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.cal-snack { position: sticky; bottom: 12px; margin: 0 auto; width: max-content; max-width: 92%; background: #1E293B; color: #fff; border-radius: 8px; padding: 8px 12px; display: flex; gap: 12px; align-items: center; z-index: 10; font-size: .85rem; }
.cal-modal .modal-content > form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 3.5rem); }
.cal-modal .modal-body { overflow-y: auto; }
.cal-row { --ev-bg: #fff; --ev-color: #534AB7; --ev-ink: #26215C; display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--cal-line, #E5E7EB); border-left: 4px solid var(--ev-color); border-radius: 8px; margin-bottom: .5rem; }
.cal-row.st-cancelada .fw-semibold { text-decoration: line-through; }
.cal-row.st-cerrada { opacity: .8; }
.cal-tag { background: var(--ev-bg); color: var(--ev-ink); border: 1px solid var(--ev-color); border-radius: 999px; padding: 0 8px; font-size: .72rem; font-weight: 700; }

@media (max-width: 767.98px) {
    .cal-toolbar, .cal-legend { padding-left: .75rem; padding-right: .75rem; }
    .cal-month { grid-template-columns: 1fr; gap: 6px; }
    .cal-head { display: none; }
    .cal-day { min-height: 0; }
    .cal-day:not(.has-events):not(.cal-today), .cal-day.cal-out { display: none; }
    .cal-dow { display: inline; }
    .cal-ev-chip { white-space: normal; font-size: .8rem; padding: 6px 6px; }
    .cal-grid { --gw: 40px; padding: 0 .25rem .75rem; }
}
@media (prefers-reduced-motion: reduce) { .cal-ev, .cal-chip { transition: none; } }

/* ---- Panorama Comercial (PRD §5 y §17) ------------------------------------
   Un indicador que todavía muestra un dato de ejemplo tiene que verse distinto
   de uno real: en una reunión nadie debe tomar por buena una cifra inventada. */
.kpi-card { position: relative; }
.kpi-card-sample {
    border-style: dashed;
    background-image: repeating-linear-gradient(135deg,
        rgba(148, 163, 184, .06) 0 6px, transparent 6px 12px);
}
.kpi-flag {
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 6px; border-radius: 999px; white-space: nowrap; cursor: help;
}
.kpi-flag-sample { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.kpi-flag-empty  { background: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; }

/* Alto fijo para que la gráfica se dibuje bien y no salte al cargar */
.chart-box { position: relative; height: 320px; }
.chart-box-sm { height: 240px; }
@media (max-width: 767.98px) {
    .chart-box { height: 260px; }
    .chart-box-sm { height: 220px; }
}
.chart-table table { font-size: .85rem; }

/* En el teléfono las tarjetas del panorama se aprietan, pero el valor sigue
   alineado a la izquierda: su estructura es nombre + sello arriba y cifra
   debajo, distinta de las tarjetas con ícono de los otros módulos. */
@media (max-width: 575.98px) {
    #panoramaKpis .card { padding: .7rem !important; }
    #panoramaKpis h4 { font-size: 1.05rem; }
    #panoramaKpis .row { row-gap: .5rem; }
}

/* ---- Servicio al cliente: contador en el menú (PRD §2.10) ---------------- */
/* Los avisos van en pantalla, así que el número tiene que verse sin abrir el
   módulo. El texto acompaña al color: nunca es solo un punto de color. */
.nav-badge {
    margin-left: auto;
    min-width: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #E3264A;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
}
.nav-link.active .nav-badge { background: #fff; color: #E3264A; }

/* ---- Contraste sobre fondo claro ------------------------------------------
   Regla del proyecto: el amarillo de marca (#DCE116) vive **solo** sobre el
   morado. Sobre blanco rinde 1,4:1 y no se lee. El amarillo de Bootstrap
   (#ffc107) rinde 1,63:1, igual de malo, y `text-warning` lo usa tal cual.
   Se redefine a un ámbar oscuro que da 5,3:1 sobre blanco: sigue leyéndose
   como advertencia y se puede leer de verdad.
   El fondo amarillo con texto oscuro (`text-bg-warning`, `bg-warning
   text-dark`) no se toca: ahí el amarillo es fondo, no tinta.             */
:root { --aq-amber-ink: #8A6508; }
.text-warning { color: var(--aq-amber-ink) !important; }
/* El botón de contorno amarillo pinta su texto con el mismo #ffc107 sobre un
   fondo transparente: 1,5:1 contra el gris claro de las pantallas. Se le pone
   la tinta ámbar; al pasar por encima sí se rellena de amarillo, y ahí el
   texto va oscuro. */
.btn-outline-warning {
    --bs-btn-color: var(--aq-amber-ink);
    --bs-btn-border-color: var(--aq-amber-ink);
    --bs-btn-hover-color: #1E293B;
    --bs-btn-hover-bg: #FFC107;
    --bs-btn-hover-border-color: #FFC107;
    --bs-btn-active-color: #1E293B;
    --bs-btn-active-bg: #FFC107;
    --bs-btn-active-border-color: #FFC107;
    --bs-btn-disabled-color: var(--aq-amber-ink);
    --bs-btn-disabled-border-color: var(--aq-amber-ink);
}

/* Pestañas de contenido. Sobre blanco el activo va en morado de marca, no en
   el azul de Bootstrap ni en el amarillo del menú. */
.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: #475569;
    font-weight: 500;
}
.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover { color: var(--aq-purple); }
.nav-tabs .nav-link.active {
    color: var(--aq-purple);
    font-weight: 600;
}
.nav-pills .nav-link.active {
    background-color: var(--aq-purple);
    color: #fff;
}
.nav-tabs .nav-link:disabled,
.nav-tabs .nav-link.disabled { color: #94A3B8; }

/* Campana de avisos de la barra superior */
.bell-btn { line-height: 1; }
.bell-btn::after { display: none; }        /* sin la flechita del dropdown */
.bell-count {
    position: absolute;
    top: -.45rem;
    right: -.55rem;
    min-width: 1.05rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: #E3264A;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
    /* Un aro del color del fondo: despega el globo del icono */
    box-shadow: 0 0 0 2px #fff;
}
.bell-menu { width: min(22rem, calc(100vw - 2rem)); max-height: 70vh; overflow-y: auto; }
.bell-menu .dropdown-item { white-space: normal; }

/* Semáforo del plazo en la ficha del ticket */
.sla-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }

/* ---- Centro de reportes (PRD §6) ---------------------------------------- */
.report-card { transition: box-shadow .15s, transform .15s; }
.report-card:hover { box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .08); transform: translateY(-1px); }
.report-icon {
    width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem;
    border-radius: .6rem;
    display: flex; align-items: center; justify-content: center;
    background: #F3E8F4; color: #8B3A8C; font-size: 1.1rem;
}

/* ---- Configuración del sistema (PRD §10) -------------------------------- */
.settings-card { transition: box-shadow .15s, transform .15s; }
.settings-card:hover { box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .08); transform: translateY(-1px); }
.settings-icon {
    width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem;
    border-radius: .6rem;
    display: flex; align-items: center; justify-content: center;
    background: #F3E8F4; color: #8B3A8C; font-size: 1.05rem;
}
.settings-icon-admin { background: #EEF2FF; color: #2563EB; }

/* Un campo con error se marca junto al campo, no en un cartel suelto arriba */
.setting-field.has-error input,
.setting-field.has-error select,
.setting-field.has-error textarea { border-color: #E3264A; }
.setting-field [data-error]:empty { display: none; }

/* Un permiso que no se puede quitar se ve que no se puede quitar */
.perm-locked { opacity: .75; }
.perm-locked .form-check-label::after {
    content: "\f023"; /* candado */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-left: .35rem; font-size: .7rem; color: #64748B;
}

.logo-preview {
    width: 10rem; height: 5rem;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed #CBD5E1; border-radius: .5rem;
    background: #4B164C; padding: .5rem;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Logo de documentos y favicon se ven sobre fondo claro: así se juzga cómo salen impresos */
.logo-preview--claro { background: #fff; }
.logo-preview--cuadro { width: 5rem; }
.logo-preview--foto { width: 12rem; height: 6.75rem; padding: 0; overflow: hidden; }
.logo-preview--foto img { width: 100%; height: 100%; object-fit: cover; }

/* La barra de guardar queda a la vista en formularios largos. El relleno de
   abajo es lo que evita que la barra tape el último campo al llegar al final. */
.sticky-actions {
    position: sticky; bottom: 0; z-index: 5;
    background: rgba(248, 250, 252, .97);
    padding: .75rem 0; margin-top: -.25rem;
    border-top: 1px solid #E2E8F0;
}
body:has(.sticky-actions) .content-area,
body:has(.sticky-actions) main { padding-bottom: 5rem; }

/* ---------------------------------------------- semáforo de materia prima */
/* El punto de color del PRD §25.3. Va acompañado siempre de su texto: el
   color solo no basta —ni para daltónicos ni para imprimir en blanco y negro. */
.light-dot {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    flex: 0 0 auto;
}
.light-card { transition: border-color .15s ease; }
.light-card:hover { border-color: #CBD5E1; }

/* ---- Agenda de visitas médicas (PRD §27.2; 2026-10-20) ----------------------
   Cinco estados, cinco colores, y cada uno con su icono: el color ayuda pero no
   carga solo la información. Fondo claro con tinta oscura del mismo tono, todas
   por encima de 4,5:1 (Instrucciones §7.4). El ámbar es tinta ámbar, no amarillo. */
.agenda-programada   { --ag-bg: #E0F2FE; --ag-ink: #075985; --ag-edge: #0284C7; }
.agenda-pendiente    { --ag-bg: #FEF3C7; --ag-ink: #7A5605; --ag-edge: #B45309; }
.agenda-reprogramada { --ag-bg: #F3E8F4; --ag-ink: #4B164C; --ag-edge: #8B3A8C; }
.agenda-realizada    { --ag-bg: #DCFCE7; --ag-ink: #166534; --ag-edge: #15803D; }
.agenda-cancelada    { --ag-bg: #F1F5F9; --ag-ink: #475569; --ag-edge: #64748B; }

.agenda-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .72rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
    padding: 3px 8px; border-radius: 999px;
    background: var(--ag-bg); color: var(--ag-ink); border: 1px solid var(--ag-edge);
}
.agenda-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ag-edge); }

.agenda-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.agenda-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; margin: 0; min-width: 12ch; }
.agenda-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .75rem; color: #475569; margin-top: 10px; }
.agenda-legend span { display: inline-flex; align-items: center; gap: 5px; }

.agenda-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.agenda-grid .ag-head {
    text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #64748B; padding-bottom: 4px;
}
.agenda-grid .ag-day {
    min-height: 104px; border: 1px solid #E5E7EB; border-radius: 8px; padding: 4px;
    display: flex; flex-direction: column; gap: 3px; background: #fff; position: relative;
}
.agenda-grid .ag-out { background: #F9FAFB; }
.agenda-grid .ag-out .ag-date { color: #64748B; font-weight: 500; }
.agenda-grid .ag-today { border-color: var(--aq-purple); box-shadow: inset 0 0 0 1px var(--aq-purple); }
.agenda-grid .ag-drop { background: #F3E8F4; border-color: #8B3A8C; border-style: dashed; }
.ag-date {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .75rem; font-weight: 700; color: #334155; background: none; border: 0; padding: 0 2px;
}
.ag-add {
    border: 0; background: none; color: #64748B; font-size: .75rem; line-height: 1; padding: 2px 4px; border-radius: 4px;
    opacity: 0; transition: opacity .12s;
}
.ag-day:hover .ag-add, .ag-add:focus-visible { opacity: 1; }
.ag-add:hover { background: #F1F5F9; color: var(--aq-purple); }

.ag-item {
    display: flex; align-items: center; gap: 4px; width: 100%; text-align: left;
    font-size: .7rem; line-height: 1.25; border-radius: 5px; padding: 3px 5px;
    background: var(--ag-bg); color: var(--ag-ink); border: 0; border-left: 3px solid var(--ag-edge);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
}
.ag-item > span.ag-txt { overflow: hidden; text-overflow: ellipsis; }
.ag-item:hover { filter: brightness(.97); }
.ag-item:focus-visible { outline: 2px solid var(--aq-purple); outline-offset: 1px; }
.ag-item[draggable="true"] { cursor: grab; }
.ag-item.agenda-cancelada .ag-txt { text-decoration: line-through; }
.ag-more { font-size: .7rem; font-weight: 600; color: var(--aq-purple); background: none; border: 0; text-align: left; padding: 0 4px; }

/* Semana: siete columnas con las visitas completas, sin horas (casi ninguna
   visita planificada tiene hora; inventarle una sería mentir). */
.agenda-week .ag-day { min-height: 220px; }
.agenda-week .ag-item { white-space: normal; align-items: flex-start; font-size: .74rem; }
.agenda-week .ag-item > i { margin-top: 2px; }

/* Día: la lista completa, con lo que hace falta para decidir sin abrir nada */
.agenda-daylist { display: flex; flex-direction: column; gap: 8px; }
.agenda-daylist .ag-card {
    display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%;
    border: 1px solid #E5E7EB; border-left: 4px solid var(--ag-edge); border-radius: 8px;
    background: #fff; padding: 10px 12px; color: inherit;
}
.agenda-daylist .ag-card:hover { background: #F8FAFC; }

@media (max-width: 767.98px) {
    /* En el teléfono el mes se lee como lista de días con visitas */
    .agenda-grid { grid-template-columns: 1fr; gap: 6px; }
    .agenda-grid .ag-head, .agenda-grid .ag-empty { display: none; }
    .agenda-grid .ag-day { min-height: 0; }
    .ag-add { opacity: 1; }
    .ag-item { white-space: normal; font-size: .8rem; padding: 6px 8px; }
    .agenda-week .ag-day { min-height: 0; }
}

/* Histórico por médico: una línea de tiempo vertical */
.agenda-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid #E2E8F0; }
.agenda-timeline > li { position: relative; padding: 0 0 16px 12px; }
.agenda-timeline > li::before {
    content: ''; position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--ag-edge, #64748B); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ag-edge, #64748B);
}
.agenda-kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: .82rem; }
.agenda-kv dt { color: #64748B; font-weight: 500; }
.agenda-kv dd { margin: 0; white-space: pre-line; }
.agenda-toolbar .btn { white-space: nowrap; }

/* ---- Ayuda (Manual del sistema) y AquaBot (v0.37.0) ---- */
.help-btn { line-height: 1; }
.help-nav { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
.help-nav-group { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748B; padding: 12px 10px 4px; }
.help-nav-link { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--text-dark); text-decoration: none; font-size: .86rem; }
.help-nav-link i { width: 16px; text-align: center; color: var(--aq-purple); }
.help-nav-link:hover { background: #F1F5F9; }
.help-nav-link.active { background: #F3E8F3; color: var(--aq-purple); font-weight: 600; }
.help-article { line-height: 1.6; }
.help-article h2 { font-size: 1.2rem; font-weight: 700; margin: 1.4rem 0 .6rem; }
.help-article h2:first-child, .help-article h3:first-child { margin-top: 0; }
.help-article h3 { font-size: 1.02rem; font-weight: 700; margin: 1.2rem 0 .5rem; }
.help-article h4, .help-article h5 { font-size: .95rem; font-weight: 700; margin: 1rem 0 .4rem; }
.help-article ol, .help-article ul { padding-left: 1.3rem; }
.help-article li { margin-bottom: .3rem; }
.help-article code { color: var(--aq-purple); background: #F3E8F3; padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.help-table { font-size: .85rem; }
.help-table th { background: #F8FAFC; }
.help-recent li { margin-bottom: .5rem; }
.help-recent li p { display: inline; margin: 0; }
.help-release summary { cursor: pointer; list-style: none; }
.help-release summary::-webkit-details-marker { display: none; }
.help-release summary::before { content: '\25B8'; margin-right: 6px; color: var(--aq-purple); }
.help-release[open] summary::before { content: '\25BE'; }

.chat-window { width: 380px; max-height: calc(100dvh - 110px); }
.chat-header { padding: 10px 12px 10px 15px; }
.chat-mode { font-size: .68rem; font-weight: 500; background: rgba(255,255,255,.18); border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.chat-icon-btn { background: transparent; border: 0; color: #fff; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.chat-icon-btn:hover, .chat-icon-btn:focus-visible { background: rgba(255,255,255,.18); outline: 2px solid #fff; outline-offset: -2px; }
.chat-body { height: 360px; max-height: calc(100dvh - 260px); }
.chat-message { max-width: 90%; overflow-wrap: anywhere; }
.chat-message.bot p { margin: 0 0 .5rem; }
.chat-message.bot p:last-child, .chat-message.bot ol:last-child, .chat-message.bot ul:last-child { margin-bottom: 0; }
.chat-message.bot ol, .chat-message.bot ul { padding-left: 1.1rem; margin: 0 0 .5rem; }
.chat-message.bot h2, .chat-message.bot h3, .chat-message.bot h4 { font-size: .9rem; font-weight: 700; margin: .4rem 0; }
.chat-message.bot a { color: var(--aq-purple); font-weight: 600; }
.chat-message.chat-typing { color: #64748B; font-style: italic; }
.chat-message.chat-error { border-color: #FCA5A5; background: #FEF2F2; color: #991B1B; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 8px; border-top: 1px solid #E2E8F0; background: #fff; }
.chat-form textarea { resize: none; min-height: 38px; max-height: 120px; }
.chat-foot { font-size: .7rem; color: #64748B; padding: 0 10px 8px; background: #fff; }
.chat-foot a { color: var(--aq-purple); }
@media (max-width: 575.98px) {
    .chat-window { right: 10px; left: 10px; width: auto; max-width: none; bottom: 80px; }
    .chat-body { height: auto; flex: 1 1 auto; min-height: 200px; }
}