/* Fichaje Online — hoja de estilos unica, sin dependencias */
:root {
  --marca: #1d4ed8; --marca-claro: #dbeafe; --marca-oscuro: #1e3a8a;
  --verde: #059669; --verde-claro: #d1fae5;
  --rojo: #dc2626;  --rojo-claro: #fee2e2;
  --ambar: #b45309; --ambar-claro: #fef3c7;
  --morado: #7c3aed; --teal: #0d9488;
  --fondo: #f1f5f9; --tarjeta: #ffffff; --borde: #e2e8f0;
  --texto: #0f172a; --suave: #64748b; --tenue: #94a3b8;
  --sombra: 0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05);
  --radio: 14px;
  --alto-nav: 62px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --marca: #60a5fa; --marca-claro: #1e3a5f; --marca-oscuro: #93c5fd;
    --verde: #34d399; --verde-claro: #064e3b;
    --rojo: #f87171;  --rojo-claro: #4c1d1d;
    --ambar: #fbbf24; --ambar-claro: #4a3410;
    --fondo: #0b1220; --tarjeta: #131c2e; --borde: #23324d;
    --texto: #e8eefc; --suave: #94a3b8; --tenue: #64748b;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo); color: var(--texto);
  font-size: 16px; line-height: 1.45;
  padding-bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom));
  overscroll-behavior-y: contain;
}
h1,h2,h3 { margin: 0 0 .4em; line-height: 1.2; font-weight: 650; }
h1 { font-size: 1.4rem; } h2 { font-size: 1.15rem; } h3 { font-size: .95rem; }
p { margin: 0 0 .6em; }
a { color: var(--marca); }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Estructura ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: var(--tarjeta); border-bottom: 1px solid var(--borde);
  padding: max(env(safe-area-inset-top), 10px) 16px 10px;
  display: flex; align-items: center; gap: 12px;
}
.cabecera .titulo { font-weight: 650; font-size: 1.05rem; flex: 1; }
.cabecera .sub { font-size: .78rem; color: var(--suave); font-weight: 400; display: block; }
.contenido { padding: 14px; max-width: 900px; margin: 0 auto; }
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px; margin-bottom: 12px; box-shadow: var(--sombra);
}
.tarjeta.compacta { padding: 12px 14px; }
.fila { display: flex; align-items: center; gap: 10px; }
.fila.entre { justify-content: space-between; }
.rejilla { display: grid; gap: 10px; }
.rejilla.dos { grid-template-columns: repeat(2, 1fr); }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 620px) { .rejilla.auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

/* ---------- Navegacion inferior ---------- */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--tarjeta); border-top: 1px solid var(--borde);
  display: flex; padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(15,23,42,.06);
}
.nav button {
  flex: 1; border: 0; background: none; padding: 8px 2px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--tenue); font-size: .66rem; font-weight: 550; cursor: pointer;
  min-height: var(--alto-nav);
}
.nav button svg { width: 22px; height: 22px; stroke-width: 1.9; }
.nav button[aria-current="page"] { color: var(--marca); }
.nav .globo {
  /* Anclado al icono por su borde final, no desplazado a ciegas: si no, el
     globo del ultimo boton se salia de la pantalla. Propiedades logicas para
     que se refleje solo en arabe. */
  position: absolute; top: -6px; inset-inline-start: 100%; margin-inline-start: -8px;
  background: var(--rojo); color: #fff; border-radius: 9px;
  font-size: .6rem; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px;
}

/* ---------- Botones ---------- */
.btn {
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto);
  border-radius: 11px; padding: 11px 15px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .06s, filter .15s; min-height: 46px;
}
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn.verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.rojo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn.fantasma { background: transparent; }
/* Un boton fantasma no tiene fondo, asi que su texto no puede seguir siendo
   blanco: se queda invisible. Toma el color de su variante. */
.btn.fantasma.rojo { color: var(--rojo); }
.btn.fantasma.verde { color: var(--verde); }
.btn.fantasma.primario { color: var(--marca); }
.btn.bloque { width: 100%; }
.btn.pequeno { padding: 7px 11px; min-height: 36px; font-size: .84rem; border-radius: 9px; }

/* ---------- Pantalla de fichaje ---------- */
.saludo { margin: 2px 0 12px; }
.saludo h1 { font-size: 1.5rem; margin: 0 0 2px; }

.panel-fichaje { padding-top: 14px; }

.estado-linea {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .88rem; font-weight: 600; color: var(--suave);
  background: var(--fondo); padding: 6px 14px; border-radius: 999px;
}
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--tenue); flex-shrink: 0; }
.punto.trabajando { background: var(--verde); box-shadow: 0 0 0 0 currentColor; animation: pulso 2s infinite; color: var(--verde); }
.punto.en_pausa { background: var(--ambar); }
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.anillo-envoltorio { position: relative; width: min(272px, 76vw); aspect-ratio: 1; margin: 14px auto 4px; }
.anillo { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.anillo .pista { stroke: var(--borde); }
.anillo .avance { stroke: var(--marca); transition: stroke-dashoffset .9s ease, stroke .3s; }
.anillo .avance.cumplida { stroke: var(--verde); }

/* Boton principal: diana grande, legible con guantes y a contraluz */
.fichar {
  position: absolute; inset: 13%; border-radius: 50%; border: 0;
  color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.55);
  transition: transform .1s ease, filter .2s;
}
.fichar:active { transform: scale(.955); }
.fichar:disabled { filter: grayscale(.5); opacity: .75; }
.fichar-icono { font-size: 1.5rem; line-height: 1; opacity: .9; }
.fichar-texto { font-size: 1.16rem; font-weight: 700; letter-spacing: -.2px; }
.fichar.entrar { background: linear-gradient(158deg, #10b981, #047857); }
.fichar.salir  { background: linear-gradient(158deg, #fb7185, #be123c); }

.contador-jornada { margin-top: 6px; }
.contador-jornada .tiempo { font-size: 2.5rem; font-weight: 300; letter-spacing: -1.5px; line-height: 1.05; }

/* Ojo: nada de display:flex aquí. Convertiría cada trozo de texto en un ítem
   flex y se comerían los espacios alrededor de <strong> ("Te faltan07:09"). */
.resumen-dia {
  margin: 8px auto 4px; max-width: 34ch; font-size: .93rem; color: var(--suave);
  min-height: 2.7em; text-align: center; display: block;
}
.resumen-dia strong { color: var(--texto); }
.linea-gps { margin-top: 10px; min-height: 1.2em; }

/* Línea de tiempo de los marcajes del día */
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 6px; }
.linea-tiempo li {
  display: grid; grid-template-columns: 4.2em 1fr auto; align-items: center; gap: 10px;
  padding: 10px 0 10px 20px; position: relative; border-left: 2px solid var(--borde); margin-left: 4px;
}
.linea-tiempo li:last-child { border-left-color: transparent; padding-bottom: 2px; }
.linea-tiempo li::before {
  content: ''; position: absolute; left: -6px; top: 16px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tenue); border: 2px solid var(--tarjeta);
}
.linea-tiempo li.entrada::before { background: var(--verde); }
.linea-tiempo li.salida::before { background: var(--rojo); }
.linea-tiempo li.pausa_inicio::before, .linea-tiempo li.pausa_fin::before { background: var(--ambar); }
.linea-tiempo li.anulado { opacity: .5; text-decoration: line-through; }
.linea-tiempo .hora { font-weight: 700; font-size: 1.02rem; }
.linea-tiempo .que { color: var(--suave); font-size: .9rem; }

/* Confirmación a pantalla completa tras fichar */
.confirmacion {
  position: fixed; inset: 0; z-index: 95;
  background: color-mix(in srgb, var(--tarjeta) 96%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  animation: aparece .18s ease-out; text-align: center; padding: 24px;
}
@keyframes aparece { from { opacity: 0 } }
.confirmacion .titulo { font-size: 1.3rem; font-weight: 700; margin: 14px 0 0; }
.confirmacion .hora { font-size: 2.6rem; font-weight: 300; margin: 2px 0 0; letter-spacing: -1px; }
.confirmacion .nota { color: var(--ambar); font-size: .88rem; max-width: 30ch; margin-top: 10px; }
.marca-ok svg { width: 92px; height: 92px; }
.marca-ok circle {
  fill: none; stroke: var(--verde); stroke-width: 2.5;
  stroke-dasharray: 151; stroke-dashoffset: 151; animation: traza .45s ease-out forwards;
}
.marca-ok path {
  fill: none; stroke: var(--verde); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40; animation: traza .3s .35s ease-out forwards;
}
@keyframes traza { to { stroke-dashoffset: 0 } }

@media (prefers-reduced-motion: reduce) {
  .punto.trabajando { animation: none; }
  .marca-ok circle, .marca-ok path { animation: none; stroke-dashoffset: 0; }
  .anillo .avance { transition: none; }
}

/* ---------- Textos y etiquetas ---------- */
.mono { font-variant-numeric: tabular-nums; }
.suave { color: var(--suave); }
.tenue { color: var(--tenue); }
.mini { font-size: .78rem; }
.centro { text-align: center; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: 999px; font-size: .72rem; font-weight: 600;
  /* Las cortas no se parten; las largas sí, antes que desbordar la tarjeta. */
  white-space: nowrap; max-width: 100%; overflow-wrap: anywhere;
}
.etiqueta:not(.et-verde):not(.et-rojo):not(.et-ambar):not(.et-azul):not(.et-gris) { white-space: normal; }
.et-verde { background: var(--verde-claro); color: var(--verde); }
.et-rojo { background: var(--rojo-claro); color: var(--rojo); }
.et-ambar { background: var(--ambar-claro); color: var(--ambar); }
.et-azul { background: var(--marca-claro); color: var(--marca); }
.et-gris { background: var(--fondo); color: var(--suave); }

/* ---------- Contadores (Mis dias) ---------- */
.bloque-saldo { border-left: 4px solid var(--marca); }
.contador { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--borde); gap: 12px; }
.contador:last-child { border-bottom: 0; }
.contador .val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.contador.destacado { background: var(--fondo); margin: 4px -8px 0; padding: 9px 8px; border-radius: 9px; border-bottom: 0; }
.contador.destacado .val { font-size: 1.25rem; color: var(--marca); }
.medidor { height: 7px; border-radius: 4px; background: var(--borde); overflow: hidden; margin-top: 8px; }
.medidor i { display: block; height: 100%; background: var(--marca); border-radius: 4px; transition: width .4s; }

/* ---------- Formularios ---------- */
label { display: block; font-size: .82rem; font-weight: 600; color: var(--suave); margin: 10px 0 4px; }
input, select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--borde);
  border-radius: 10px; background: var(--fondo); min-height: 46px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: 1px; border-color: transparent; }
textarea { min-height: 82px; resize: vertical; }
.opciones { display: flex; gap: 7px; flex-wrap: wrap; }
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones label {
  margin: 0; padding: 9px 13px; border: 1px solid var(--borde); border-radius: 999px;
  cursor: pointer; font-size: .85rem; color: var(--texto); font-weight: 550; background: var(--tarjeta);
}
.opciones input:checked + label { background: var(--marca); border-color: var(--marca); color: #fff; }
.opciones input:focus-visible + label { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.item { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.item:last-child { border-bottom: 0; }
.item .cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.item .acciones { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.vacio { text-align: center; color: var(--tenue); padding: 30px 12px; }
.vacio svg { width: 42px; height: 42px; opacity: .4; margin-bottom: 8px; }

/* ---------- Tabla del historico ---------- */
.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .3px; color: var(--tenue); font-weight: 650; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.finde td { color: var(--tenue); background: color-mix(in srgb, var(--fondo) 60%, transparent); }
tr.hoy td { background: var(--marca-claro); font-weight: 600; }
.positivo { color: var(--verde); font-weight: 600; }
.negativo { color: var(--rojo); font-weight: 600; }

/* ---------- Calendario ---------- */
.calendario { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
/* Sin min-width:0 la rejilla de 7 dias no puede encogerse y desborda el mes. */
.mes { min-width: 0; }
.mes h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); text-align: center; margin-bottom: 6px; }
.mes-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.mes-rejilla .dow { font-size: .58rem; color: var(--tenue); text-align: center; padding-bottom: 2px; }
.dia {
  aspect-ratio: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  font-size: .68rem; border-radius: 5px; cursor: pointer; border: 1px solid transparent;
  background: var(--fondo); color: var(--texto);
}
.dia.vacio { background: none; cursor: default; }
.dia.nolab { color: var(--tenue); background: transparent; }
.dia.festivo { background: var(--rojo-claro); color: var(--rojo); font-weight: 650; }
.dia.hoy { border-color: var(--texto); font-weight: 800; }
.dia.pend { outline: 1.5px dashed currentColor; outline-offset: -2px; }
.dia.ocupado { color: #fff; font-weight: 650; }
.leyenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: .74rem; color: var(--suave); margin-top: 4px; }
.leyenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: -1px; }

/* ---------- Avisos / dialogos ---------- */
/* El aviso es flex para colocar el icono junto al texto. Cuando el contenido
   mezcla texto y <strong> hay que usar .plano: si no, cada trozo se convierte
   en un ítem flex y desaparecen los espacios entre ellos. */
.aviso { padding: 11px 13px; border-radius: 11px; font-size: .87rem; margin-bottom: 11px; display: flex; gap: 9px; align-items: flex-start; }
.aviso.plano { display: block; }
.aviso.plano strong { font-weight: 650; }
.aviso.info { background: var(--marca-claro); color: var(--marca-oscuro); }
.aviso.ok { background: var(--verde-claro); color: var(--verde); }
.aviso.error { background: var(--rojo-claro); color: var(--rojo); }
.aviso.alerta { background: var(--ambar-claro); color: var(--ambar); }

.brindis {
  position: fixed; left: 50%; bottom: calc(var(--alto-nav) + 18px); transform: translateX(-50%);
  background: var(--texto); color: var(--fondo); padding: 12px 18px; border-radius: 12px;
  z-index: 90; box-shadow: var(--sombra); max-width: 90vw; text-align: center;
  animation: sube .25s ease-out; font-size: .9rem; font-weight: 550;
}
.brindis.error { background: var(--rojo); color: #fff; }
.brindis.ok { background: var(--verde); color: #fff; }
@keyframes sube { from { opacity: 0; transform: translate(-50%, 14px) } }

dialog {
  border: 0; border-radius: 18px 18px 0 0; padding: 0; width: 100%; max-width: 560px;
  background: var(--tarjeta); color: var(--texto);
  margin: auto auto 0; box-shadow: 0 -8px 40px rgba(0,0,0,.25);
}
@media (min-width: 620px) { dialog { border-radius: 18px; margin: auto; } }
dialog::backdrop { background: rgba(15,23,42,.5); backdrop-filter: blur(2px); }
dialog .cuerpo { padding: 18px; max-height: 82vh; overflow-y: auto; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
dialog .agarre { width: 38px; height: 4px; background: var(--borde); border-radius: 3px; margin: 9px auto 0; }

.cargando { display: inline-block; width: 17px; height: 17px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg) } }
.esqueleto { background: linear-gradient(90deg, var(--borde) 25%, var(--fondo) 50%, var(--borde) 75%); background-size: 200% 100%; animation: brillo 1.3s infinite; border-radius: 8px; height: 15px; margin: 8px 0; }
@keyframes brillo { to { background-position: -200% 0 } }

.cinta-offline { background: var(--ambar); color: #fff; text-align: center; padding: 6px; font-size: .8rem; font-weight: 600; }
/* El foco se mueve por codigo al cambiar de seccion: no debe pintar el anillo. */
#principal:focus { outline: none; }
#principal:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.campana { position: relative; }
.campana .globo { position: absolute; top: 1px; right: 1px; transform: none; }

.aviso-item { cursor: pointer; border-radius: 9px; margin: 0 -8px; padding: 12px 8px; }
.aviso-item:hover, .aviso-item:focus-visible { background: var(--fondo); outline: none; }
.aviso-item.nuevo { background: color-mix(in srgb, var(--marca-claro) 55%, transparent); }
.aviso-item .icono-aviso { font-size: 1.25rem; line-height: 1.2; flex-shrink: 0; }
.punto-nuevo {
  width: 9px; height: 9px; border-radius: 50%; background: var(--marca);
  flex-shrink: 0; margin-top: 6px;
}

.recuadro-pendientes {
  border-left: 4px solid var(--marca);
  background: color-mix(in srgb, var(--marca-claro) 45%, var(--tarjeta));
}

.linea-pendiente {
  margin: 6px 0 0; padding: 6px 9px; border-radius: 8px;
  background: var(--fondo); color: var(--suave); line-height: 1.45;
}
.linea-pendiente strong { color: var(--texto); }
.linea-pendiente .ausente { color: var(--ambar); }
.linea-pendiente.sin-responsable { background: var(--ambar-claro); color: var(--ambar); }

.motivo-pausa {
  display: inline-block; font-size: .78rem; padding: 1px 7px; border-radius: 999px;
  background: var(--fondo); color: var(--suave); margin-left: 3px;
}
.opcion-pausa { gap: 12px; padding: 12px 14px; }

td.centro, th.centro { text-align: center; }

/* ---------- Saldo de la semana ---------- */
.semana-tira .saldo-semana { font-size: 1.3rem; font-weight: 700; }

.barras-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; }
.dia-barra { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dia-barra .columna {
  position: relative; width: 100%; height: 62px;
  display: flex; align-items: flex-end; justify-content: center;
}
/* Lo previsto es la barra ancha de fondo; lo hecho, la estrecha encima.
   Así se ven las dos y se compara de un vistazo. */
.dia-barra .previsto,
.dia-barra .hecho { position: absolute; bottom: 0; border-radius: 5px; }
.dia-barra .previsto { width: 100%; background: var(--borde); min-height: 3px; }
.dia-barra .hecho {
  width: 56%; background: var(--marca); min-height: 3px; transition: height .4s;
}
.dia-barra.ok .hecho { background: var(--verde); }
.dia-barra.corto .hecho { background: var(--ambar); }
.dia-barra.extra .hecho { background: var(--morado); }
.dia-barra.festivo .previsto { background: var(--rojo-claro); }
.dia-barra.ausencia .previsto { background: var(--marca-claro); }
.dia-barra.libre .previsto { opacity: .5; }
.dia-barra.futuro .previsto { opacity: .55; }
.dia-barra .etiqueta-dia { font-size: .7rem; color: var(--tenue); font-weight: 600; }
.dia-barra.hoy .etiqueta-dia { color: var(--marca); font-weight: 800; }
.dia-barra.hoy .columna::after {
  content: ''; position: absolute; inset: -3px -2px -3px -2px;
  border: 1.5px solid var(--marca); border-radius: 7px; opacity: .5;
}

.resumen-semana {
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--borde);
  font-size: .9rem; color: var(--suave); text-align: center;
}
.resumen-semana strong { color: var(--texto); }

.item.dia-hoy { background: color-mix(in srgb, var(--marca-claro) 40%, transparent); border-radius: 9px; }
li.item[data-dia] { cursor: pointer; }
li.item[data-dia]:hover { background: var(--fondo); border-radius: 9px; }

.sin-cerrar { border-left: 4px solid var(--ambar); }
.horas-sugeridas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px; margin-top: 12px;
}
.btn.sugerencia {
  flex-direction: column; gap: 2px; padding: 10px 8px; min-height: 58px; text-align: center;
}
.btn.sugerencia .hora { font-size: 1.05rem; font-weight: 700; }
.btn.sugerencia.otra .hora { font-size: .95rem; font-weight: 600; }

/* ---------- Accesibilidad ---------- */
/* Todo se dimensiona en rem, así que basta con mover la raíz. */
html.texto-grande { font-size: 115%; }

html.alto-contraste {
  --texto: #000; --suave: #333; --tenue: #444;
  --borde: #767676; --fondo: #fff; --tarjeta: #fff;
  --marca: #0b3ea8; --marca-claro: #d3e0ff;
  --verde: #056b3f; --rojo: #b3001b; --ambar: #7a4a00;
}
html.alto-contraste .tarjeta { border-width: 2px; }
html.alto-contraste .mini,
html.alto-contraste .tenue { color: var(--suave); }
@media (prefers-color-scheme: dark) {
  html.alto-contraste:not([data-tema="claro"]) {
    --texto: #fff; --suave: #e2e8f0; --tenue: #cbd5e1;
    --borde: #9aa7b8; --fondo: #000; --tarjeta: #0d1420;
    --marca: #8ab4ff; --marca-claro: #16305e;
    --verde: #4ade80; --rojo: #ff8489; --ambar: #fbbf24;
  }
}

/* ---------- Idiomas ---------- */
.rejilla-idiomas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.btn.idioma { min-height: 46px; font-weight: 600; padding: 9px 10px; }
.btn.idioma.elegido { background: var(--marca); border-color: var(--marca); color: #fff; }

/* De derecha a izquierda (árabe): se voltean los márgenes y los iconos. */
[dir="rtl"] .cabecera .titulo,
[dir="rtl"] .contador,
[dir="rtl"] .item .cab { text-align: right; }
[dir="rtl"] .linea-tiempo { padding: 0 6px 0 0; }
[dir="rtl"] .linea-tiempo li {
  border-left: 0; border-right: 2px solid var(--borde);
  padding: 10px 20px 10px 0; margin-left: 0; margin-right: 4px;
}
[dir="rtl"] .linea-tiempo li::before { left: auto; right: -6px; }
[dir="rtl"] .bloque-saldo { border-left: 0; border-right: 4px solid var(--marca); }
[dir="rtl"] .recuadro-pendientes,
[dir="rtl"] .sin-cerrar { border-left: 0; border-right: 4px solid var(--marca); }
[dir="rtl"] td.num, [dir="rtl"] .contador .val { text-align: left; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] .btn.sugerencia, [dir="rtl"] .centro { text-align: center; }

.oculto { display: none !important; }