/* rb-telefonico — estilos propios (base copiada de rb-fl5) sobre Bootstrap 5.3.
   Se usa sobre todo en el celular: ahí la letra base es 16px (la del sistema) y se agranda con el
   zoom del teléfono; en la computadora es 18px ajustable (A−/A+). Atkinson Hyperlegible, contrastes
   AA o mejores en claro y oscuro y foco siempre visible. */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/atkinson-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/atkinson-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/atkinson-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/atkinson-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/atkinson-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/atkinson-700-italic.woff2) format("woff2"); }

/* --- Escala de letra (la elige el usuario, queda en localStorage) --- */
html[data-escala="0"] { font-size: 100%; }    /* 16px */
html[data-escala="1"] { font-size: 112.5%; }  /* 18px, por defecto */
html[data-escala="2"] { font-size: 125%; }    /* 20px */
html[data-escala="3"] { font-size: 137.5%; }  /* 22px */
/* Celular: letra del sistema, sin escala propia (el A−/A+ no se muestra). */
@media (max-width: 767.98px) { html[data-escala] { font-size: 100%; } }

:root {
  --bs-body-font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-line-height: 1.55;
  --foco: #0b57d0;
}
[data-bs-theme="light"] {
  --bs-body-color: #16181b;               /* casi negro: contraste ~17:1 */
  --bs-secondary-color: #4a5058;          /* texto secundario ≥ 7:1 (AAA) */
  --bs-link-color: #0a4fb8; --bs-link-color-rgb: 10, 79, 184;
  --bs-link-hover-color: #073a88; --bs-link-hover-color-rgb: 7, 58, 136;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #121417;
  --bs-body-color: #eceff3;
  --bs-secondary-color: #bcc3cc;          /* ≥ 9:1 sobre el fondo oscuro */
  --bs-tertiary-bg: #1b1f24;
  --bs-link-color: #8ab4ff; --bs-link-color-rgb: 138, 180, 255;
  --bs-link-hover-color: #b3ceff; --bs-link-hover-color-rgb: 179, 206, 255;
  --foco: #8ab4ff;
}

/* Foco bien visible para quien navega con teclado */
:focus-visible { outline: 3px solid var(--foco) !important; outline-offset: 2px; box-shadow: none !important; }
.btn, .form-control, .form-select { --bs-border-width: 1.5px; }
.form-control::placeholder { color: var(--bs-secondary-color); opacity: .85; }
.d-contents { display: contents; }

/* El atributo hidden siempre oculta, aunque el elemento tenga d-flex u otra utilidad de display de Bootstrap. */
[hidden] { display: none !important; }

/* --- Nav --- */
.navbar .nav-link, .dropdown-item { font-size: 1rem; }
.navbar .nav-link.active, .navbar .dropdown-toggle.active { font-weight: 700; text-decoration: underline; text-underline-offset: .35em; }
.dropdown-menu { max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); overflow-y: auto; }
.pendiente { color: var(--bs-secondary-color) !important; cursor: default; }
.pendiente .badge { font-weight: 400; font-size: .7em; color: var(--bs-secondary-color) !important; background: transparent !important; }
[data-bs-theme="light"] .logo-oscuro, [data-bs-theme="dark"] .logo-claro { display: none; }
[data-bs-theme="light"] .tema-claro, [data-bs-theme="dark"] .tema-oscuro { display: none; }

/* --- Login --- */
.login-card { border-radius: 1rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* La confirmación puede abrirse sobre otro modal: va por encima. */
#confirmModal { z-index: 1070; }
/* Los formularios del modal envuelven header, body y footer: el form toma el lugar de .modal-content
   en el flex de Bootstrap; si no, el body no scrollea y el pie con los botones queda cortado. */
.modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* Celular: el modal genérico ocupa la pantalla (modal-fullscreen-sm-down) con el alto visible real
   (dvh: sin la barra del navegador), así el pie con los botones nunca queda fuera de la vista. */
@media (max-width: 575.98px) {
  #appModal .modal-dialog { height: 100dvh; min-height: 0; }
  #appModal .modal-footer { flex-wrap: nowrap; }
  #appModal .modal-footer .btn { flex: 1 1 0; }
}

/* Modo oscuro: botones outline más claros para mantener contraste AA */
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #75d4a1; --bs-btn-border-color: #75d4a1; }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #f19ca4; --bs-btn-border-color: #f19ca4; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #8ab4ff; --bs-btn-border-color: #8ab4ff; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #ced4da; --bs-btn-border-color: #8c959f; }
[data-bs-theme="dark"] .btn-outline-info { --bs-btn-color: #6edff6; --bs-btn-border-color: #6edff6; }
/* Los textos para lectores de pantalla (position:absolute) no deben escapar del scroll de la tabla */
.table-responsive { position: relative; }

/* Menú del usuario: en la computadora, desplegable a la derecha; en el celular (menú plegado),
   baja dentro del menú ocupando el ancho, así no queda fuera de la pantalla. */
.menu-usuario .dropdown-menu { min-width: 16rem; }
@media (max-width: 767.98px) {
  .navbar-collapse > .d-flex { flex-wrap: wrap; align-items: flex-start !important; }
  .menu-usuario { flex: 1 1 auto; }
  .menu-usuario .dropdown-menu { position: static; width: 100%; min-width: 0; margin-top: .5rem; }
}

/* --- Llamar --- */
.contador { font-size: 1.05rem; }
.dias .btn[aria-pressed="true"] { background: var(--bs-primary); color: #fff; font-weight: 700; }
.ficha-nombre { font-size: 1.75rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ficha-tel { font-size: 1.4rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ficha-datos dt { font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); margin-top: .5rem; }
.ficha-datos dd { margin: 0; }
.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.acciones .btn { font-weight: 700; padding-top: .9rem; padding-bottom: .9rem; }
/* ENVIAR MENSAJE deshabilitado: gris con borde punteado (no solo más transparente, que con el azul
   casi no se distingue) y candado; la leyenda de abajo dice por qué. */
.plantilla .btn:disabled { opacity: 1; background: var(--bs-secondary-bg); color: var(--bs-secondary-color);
  border: 2px dashed var(--bs-secondary-color); cursor: not-allowed; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }

/* --- Buscar: el estado se distingue por el borde y el texto, no solo por el color --- */
.resultado { border-left: 5px solid var(--bs-border-color); }
.estado-pendiente { border-left-color: var(--bs-primary); }
.estado-dato { border-left-color: var(--bs-success); }
.estado-anulada, .estado-error { border-left-color: var(--bs-danger); }
.estado-agotada { border-left-color: var(--bs-warning); }
/* Comisiones: mismo borde por resultado del dato */
.estado-venta { border-left-color: var(--bs-success); }
.estado-anulado { border-left-color: var(--bs-danger); }
.estado-fechado { border-left-color: var(--bs-warning); }
.motivo { white-space: pre-line; }
.badge-estado { background: var(--bs-secondary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); }

/* Días: los cinco botones entran siempre en una línea, también en el celular */
.dias .btn { flex: 1 1 0; min-width: 0; padding-left: .25rem; padding-right: .25rem; }
/* Teléfono: en oscuro, botón claro para que no se pierda contra la tarjeta */
[data-bs-theme="dark"] .ficha-tel { --bs-btn-bg: #e9ecef; --bs-btn-color: #121417; --bs-btn-border-color: #e9ecef;
  --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #121417; --bs-btn-active-bg: #fff; --bs-btn-active-color: #121417; }

/* Celular: ficha más compacta para que nombre, teléfono y las acciones entren sin tanto scroll. */
@media (max-width: 575.98px) {
  .ficha-nombre { font-size: 1.4rem; }
  .ficha-tel { font-size: 1.2rem; }
  .acciones { gap: .5rem; }
  .acciones .btn { font-size: 1.05rem; padding-top: .7rem; padding-bottom: .7rem; }
  .dias .btn { font-size: 1rem; }
}

/* --- Conversaciones --- */
.aviso-conversaciones { color: var(--bs-warning-text-emphasis); border-width: 2px; }
.aviso-conversaciones:hover { filter: brightness(.97); }
.chat { display: flex; flex-direction: column; gap: .6rem; max-height: min(28rem, 55dvh); overflow-y: auto; }
.burbuja { max-width: 85%; padding: .5rem .75rem; border-radius: .75rem; border: 1px solid var(--bs-border-color); }
.burbuja-in { align-self: flex-start; background: #e3f1fb; }
.burbuja-out { align-self: flex-end; background: #eaf7ee; }
[data-bs-theme="dark"] .burbuja-in { background: #13283a; }
[data-bs-theme="dark"] .burbuja-out { background: #16301f; }
.burbuja-meta { font-size: .8rem; color: var(--bs-secondary-color); margin-bottom: .2rem; }
.text-pre-wrap { white-space: pre-wrap; }