/* rb-catun — estilos propios sobre Bootstrap 5.3 (base de rb-telefonico / rb-fl5). 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; }

/* --- 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-body-bg: #f3f5f9;                  /* lienzo gris azulado: las tarjetas blancas resaltan */
  --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;
  --fondo-tarjeta: #ffffff;
}
[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;
  --fondo-tarjeta: #1b1f24;
}

/* 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; }
[hidden] { display: none !important; }
.tabular { font-variant-numeric: tabular-nums; }
.card { --bs-card-bg: var(--fondo-tarjeta); }

/* --- 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; }
.logo { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem;
  background: var(--bs-emphasis-color); color: var(--bs-body-bg); font-weight: 700; }
[data-bs-theme="light"] .tema-claro, [data-bs-theme="dark"] .tema-oscuro { display: none; }
.menu-usuario .dropdown-menu { min-width: 16rem; }
/* Celular (menú plegado): los desplegables bajan dentro del menú ocupando el ancho, así no quedan fuera de la pantalla. */
@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; }
}

.login-card { border-radius: 1rem; }
.contenido-form { max-width: 34rem; }
.badge-estado { background: var(--bs-secondary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); font-weight: 400; }
.comentario { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muestra-color { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: .35rem; border: 1px solid var(--bs-border-color); vertical-align: middle; }

@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; }
/* Celular: el modal genérico sube desde abajo (bottom sheet) y ocupa a lo sumo el 80% del alto: nunca llega al borde de
   arriba y el "Cerrar" del pie queda al alcance del pulgar. El encabezado queda fijo y el cuerpo scrollea. */
@media (max-width: 575.98px) {
  #appModal .modal-dialog { position: fixed; inset: auto 0 0 0; margin: 0; max-width: none; height: auto; }
  #appModal .modal-content { max-height: 80vh; max-height: 80dvh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  #appModal.fade .modal-dialog { transform: translateY(100%); }
  #appModal.show .modal-dialog { transform: none; }
}

/* --- Colores de dominio: uno por tarjeta de inicio (bordes, botones, barras de los gráficos). Una tarjeta nueva =
   una clase tono-x acá. Los elementos usan var(--tono) y lo heredan de la tarjeta o de su propia clase tono-x. --- */
.tono-relpax { --tono: #2563eb; }
.tono-migral { --tono: #dc2626; }
.tono-migrana { --tono: #db2777; }
.tono-naproxeno { --tono: #15803d; }
.tono-tratamiento { --tono: #047857; }
.tono-agua { --tono: #0284c7; }
.tono-caminar { --tono: #4f46e5; }
.tono-ejercicio { --tono: #d97706; }
.tono-lectura { --tono: #b45309; }
.tono-presion { --tono: #7e22ce; }
.tono-cabergolina { --tono: #b88a00; } /* amarillo oscuro: 3:1 sobre blanco (el #eab308 no llega) */
.tono-dolor { --tono: #be123c; }
.tono-citas { --tono: #a21caf; }
.tono-gimnasio { --tono: #0f766e; }
/* Intensidades del dolor de cabeza: el mismo color en claro y oscuro (es el significado); --tinta, el texto encima. */
.tono-dolor-amarillo { --tono: #facc15; --tinta: #121417; }
.tono-dolor-naranja { --tono: #f97316; --tinta: #121417; }
.tono-dolor-rojo { --tono: #dc2626; --tinta: #fff; }
.tono-dolor-negro { --tono: #000; --tinta: #fff; }
/* En oscuro, más claros para el texto teñido sobre fondo oscuro. */
[data-bs-theme="dark"] .tono-relpax { --tono: #60a5fa; }
[data-bs-theme="dark"] .tono-migral { --tono: #f87171; }
[data-bs-theme="dark"] .tono-migrana { --tono: #f472b6; }
[data-bs-theme="dark"] .tono-naproxeno { --tono: #4ade80; }
[data-bs-theme="dark"] .tono-tratamiento { --tono: #34d399; }
[data-bs-theme="dark"] .tono-agua { --tono: #38bdf8; }
[data-bs-theme="dark"] .tono-caminar { --tono: #a5b4fc; }
[data-bs-theme="dark"] .tono-ejercicio { --tono: #fbbf24; }
[data-bs-theme="dark"] .tono-lectura { --tono: #fbbf24; }
[data-bs-theme="dark"] .tono-presion { --tono: #d8b4fe; }
[data-bs-theme="dark"] .tono-cabergolina { --tono: #facc15; }
[data-bs-theme="dark"] .tono-dolor { --tono: #fb7185; }
[data-bs-theme="dark"] .tono-citas { --tono: #e879f9; }
[data-bs-theme="dark"] .tono-gimnasio { --tono: #2dd4bf; }
.texto-tono { color: var(--tono); }

/* --- Inicio --- */
.avisos-inicio { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.aviso-inicio { display: inline-block; margin: 0; padding: .35rem 1rem; border-radius: 2rem; background: var(--fondo-tarjeta);
  border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-weight: 700; font-size: .95rem; }
.tarjetas { display: grid; gap: 1.25rem 1.5rem; align-items: start; }
@media (min-width: 576px) { .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Tarjeta: fieldset con borde grueso del color de la tarjeta y la leyenda en mayúsculas (como la app original). */
.tarjeta { display: flex; flex-direction: column; gap: 1rem; min-width: 0; margin: 0; padding: .5rem 1.25rem .75rem;
  border: 3px solid var(--tono); border-radius: 1rem; background: var(--fondo-tarjeta); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.tarjeta > legend { float: none; width: auto; margin: 0 0 0 .25rem; padding: 0 .6rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; background: var(--bs-secondary-bg); border-radius: .4rem; }
.pie-tarjeta { display: flex; justify-content: flex-end; gap: .25rem; margin: auto -.5rem 0; padding-top: .4rem;
  border-top: 1px solid var(--bs-border-color); }
.error-tarjeta { margin: 0; color: var(--bs-danger-text-emphasis); font-weight: 700; font-size: .95rem; }
.subtitulo-tarjeta { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bs-secondary-color); }
.total-tarjeta { font-size: 2.4rem; font-weight: 700; line-height: 1.1; }

/* Toma rápida: botón redondo grande, lleno con brillo (dosis completa) o suave. */
.btn-dosis { display: inline-flex; align-items: center; justify-content: center; width: 5.25rem; height: 5.25rem; border-radius: 50%;
  border: 0; font-weight: 700; font-size: 1.05rem; letter-spacing: .03em; cursor: pointer; color: #fff;
  background: linear-gradient(rgb(255 255 255 / .22), rgb(0 0 0 / .1)), var(--tono);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tono) 25%, transparent), 0 6px 22px color-mix(in srgb, var(--tono) 45%, transparent);
  text-shadow: 0 1px 2px rgb(0 0 0 / .35); transition: transform .15s; }
.btn-dosis:hover { transform: scale(1.05); }
.btn-dosis:active { transform: scale(.95); }
.btn-dosis:disabled { opacity: .6; cursor: wait; }
.btn-dosis.suave { color: var(--tono); background: color-mix(in srgb, var(--tono) 10%, var(--fondo-tarjeta)); text-shadow: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tono) 45%, transparent); }
.btn-dosis.suave:hover { background: color-mix(in srgb, var(--tono) 20%, var(--fondo-tarjeta)); }
[data-bs-theme="dark"] .btn-dosis:not(.suave) { color: #121417; text-shadow: none; }
/* Botón píldora teñido (agua) o lleno (Guardar de caminar). */
.btn-tono { --bs-btn-color: var(--tono); --bs-btn-border-color: color-mix(in srgb, var(--tono) 45%, transparent);
  --bs-btn-bg: color-mix(in srgb, var(--tono) 10%, transparent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tono);
  --bs-btn-hover-border-color: var(--tono); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tono);
  --bs-btn-active-border-color: var(--tono); --bs-btn-disabled-color: var(--tono); border-radius: 2rem; font-weight: 700; }
.btn-tono.lleno { --bs-btn-color: #fff; --bs-btn-bg: var(--tono); --bs-btn-border-color: var(--tono); }
[data-bs-theme="dark"] .btn-tono { --bs-btn-hover-color: #121417; --bs-btn-active-color: #121417; }
[data-bs-theme="dark"] .btn-tono.lleno { --bs-btn-color: #121417; }
/* Botones de intensidad del dolor: redondos, se achican si no entran (4 por fila en la tarjeta más angosta). */
.fila-dolor { display: flex; justify-content: center; gap: .6rem; }
.btn-dolor { flex: 0 1 3.5rem; aspect-ratio: 1; min-width: 0; border: 0; border-radius: 50%; font-weight: 700; font-size: 1.25rem;
  cursor: pointer; color: var(--tinta); background: var(--tono); transition: transform .15s;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 25%, transparent), 0 4px 12px color-mix(in srgb, var(--tono) 40%, transparent); }
.btn-dolor:hover { transform: scale(1.05); }
.btn-dolor:active { transform: scale(.95); }
.btn-dolor:disabled { opacity: .6; cursor: wait; }
/* El negro, con un aro claro para que se distinga del fondo oscuro. */
[data-bs-theme="dark"] .btn-dolor.tono-dolor-negro { box-shadow: 0 0 0 2px #9ca3af; }
/* Botón de ejercicio: el color viene de la base (validado) en style. */
.btn-ejercicio { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 4.75rem; height: 4.75rem;
  border: 0; border-radius: 1rem; box-shadow: 0 2px 6px rgb(0 0 0 / .2), inset 0 0 0 1px rgb(0 0 0 / .1); cursor: pointer; transition: transform .15s; }
.btn-ejercicio:hover { transform: scale(1.05); }
.btn-ejercicio:active { transform: scale(.95); }
.btn-ejercicio:disabled { opacity: .6; }
/* Insignia teñida (última toma, km de hoy, abreviatura) o llena (tiempo desde la toma). */
.insignia { display: inline-flex; align-items: center; justify-content: center; padding: .25rem .7rem; border-radius: 2rem;
  font-weight: 700; font-size: .95rem; color: var(--tono); background: color-mix(in srgb, var(--tono) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tono) 35%, transparent); font-variant-numeric: tabular-nums; }
.insignia.fuerte { color: #fff; background: var(--tono); border-color: var(--tono); }
[data-bs-theme="dark"] .insignia.fuerte { color: #121417; }
.insignia.ancho-fijo { min-width: 2.75rem; }
.insignia.con-tinta { color: var(--tinta); background: var(--tono); border-color: var(--tono); }
[data-bs-theme="dark"] .insignia.con-tinta.tono-dolor-negro { border-color: #9ca3af; }

/* Stock de Relpax: cajas cerradas (con su tapa y el 6) y comprimidos sueltos (el medio, con la otra mitad punteada). */
.stock { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; min-height: 2.5rem; padding-top: .5rem; }
.stock-grupo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; }
.stock-caja { width: 3.25rem; height: auto; }
.stock-caja .tapa { fill: rgb(0 0 0 / .18); }
.stock-caja text { fill: #fff; font-weight: 700; font-size: 15px; }
[data-bs-theme="dark"] .stock-caja text { fill: #121417; }
.stock-comp { width: 1.75rem; height: 1.75rem; }
.stock-comp .ranura { stroke: rgb(0 0 0 / .25); stroke-width: 1.5; }
.stock-comp .contorno { fill: none; stroke: var(--tono); stroke-width: 1.5; stroke-dasharray: 2 2; }

/* --- Gráficos (SVG) --- */
.relleno { fill: var(--tono); }
.relleno.suave { fill-opacity: .4; }
.fondo-barra { fill: var(--bs-secondary-bg); }
.barras { display: grid; gap: .25rem; }
.barra-fila { display: grid; grid-template-columns: 6.5rem 1fr 3rem; align-items: center; gap: .5rem; font-size: .9rem; }
.barra { display: block; width: 100%; height: .75rem; border-radius: .2rem; overflow: hidden; }
.leyenda { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .9rem; }
.cuadradito { width: .8rem; height: .8rem; border-radius: .15rem; overflow: hidden; flex: none; }
.cuadradito.grande { width: 1rem; height: 1rem; }
.grafico-scroll { overflow-x: auto; }
.grafico { display: block; width: 100%; min-width: 47.5rem; height: auto; font-size: 10px; }
.linea-guia { stroke: var(--bs-border-color); }
.eje { stroke: var(--bs-secondary-color); }
.texto-eje { fill: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.columna-dia { fill: transparent; }
.columna-dia:hover, g:hover > .columna-dia { fill: color-mix(in srgb, var(--bs-body-color) 6%, transparent); }
.segmento { stroke: var(--fondo-tarjeta); stroke-width: 1; }
.grafico-dolor { display: block; width: 100%; height: auto; font-size: 10px; }
[data-bs-theme="dark"] .relleno.tono-dolor-negro { stroke: #9ca3af; stroke-width: .75; }

/* Pivot: la columna de la suma del grupo, teñida con su tono. */
th.col-destacada { background: var(--tono) !important; color: #fff !important; --bs-table-bg-type: var(--tono); }
[data-bs-theme="dark"] th.col-destacada { color: #121417 !important; }
td.celda-destacada { font-weight: 700; color: var(--tono); --bs-table-bg-type: color-mix(in srgb, var(--tono) 12%, transparent); }

/* Miniatura de la foto de una cita (tabla y formulario). */
.foto-cita { display: block; flex: none; object-fit: cover; border-radius: .5rem; border: 1px solid var(--bs-border-color); }
/* Comentarios libres (gimnasio): respetan los saltos de línea y cortan palabras largas. */
.texto-multilinea { white-space: pre-line; overflow-wrap: anywhere; }
/* Comentarios de una cita en la tabla: hasta dos líneas (el texto entero, en el title y al editar). */
.comentario-cita { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-width: 12rem; max-width: 22rem; white-space: pre-line; font-style: italic; color: var(--bs-secondary-color); }