/* EMAÚS · App de Logística. Colores de la ficha: rosa roja, verde de las hojas, madera de la cruz. */

:root {
  --rosa: #A3243B;
  --verde: #3F6B35;
  --rosa-osc: color-mix(in srgb, var(--rosa) 78%, black);
  --rosa-claro: color-mix(in srgb, var(--rosa) 10%, white);
  --rosa-borde: color-mix(in srgb, var(--rosa) 30%, white);
  --verde-osc: color-mix(in srgb, var(--verde) 80%, black);
  --verde-claro: color-mix(in srgb, var(--verde) 12%, white);
  --madera: #8A6A3F;
  --madera-osc: #6E5332;
  --madera-claro: #F4EDE3;
  --naranja-fuerte: #B5540F;
  --naranja: #82360A;
  --naranja-claro: #FCE8D8;
  --amarillo: #5E4800;
  --amarillo-claro: #FFF3CC;
  --azul: #0B5394;
  --azul-claro: #DCE9F5;
  --fondo: #FAF8F5;
  --blanco: #FFFFFF;
  --tinta: #1F1B18;
  --tinta-2: #4A443E;
  --gris: #5E5750;
  --gris-2: #6B645D;
  --borde: #E4DDD4;
  --borde-suave: #F1ECE6;
  --sombra: 0 1px 2px rgba(31, 27, 24, 0.06), 0 4px 14px rgba(31, 27, 24, 0.05);
  --radio: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #EFE6DA;
  min-height: 100vh;
  color: var(--tinta);
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}
a { color: var(--rosa); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.5; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Estructura ───────────────────────────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  backdrop-filter: blur(8px);
  padding: 12px 16px 10px;
  display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid var(--borde-suave);
}
.barra > * { width: 100%; max-width: 720px; margin: 0 auto; }
.barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.barra-derecha { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.barra-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.barra h1, .titulo-grande {
  margin: 0; font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 28px; line-height: 1.15;
}
.contador { font-size: 15px; color: var(--gris); white-space: nowrap; }
.contador strong { color: var(--tinta); }
.volver { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 16px; font-weight: 700; text-decoration: none; }
.marca { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: 0.05em; }
.marca svg { color: var(--madera); }

.pantalla { max-width: 720px; margin: 0 auto; padding: 14px 16px 32px; display: flex; flex-direction: column; gap: 12px; }
.pantalla-ancha { max-width: none; }
.pantalla-con-pie { padding-bottom: 110px; }
.pie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fondo) 96%, transparent);
  border-top: 1px solid var(--borde-suave);
}
.pie > * { max-width: 688px; margin: 0 auto; }

.tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px; }
.tarjeta-sin-pad { padding: 0; gap: 0; overflow: hidden; }
.h2 { margin: 6px 0 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.h2.sep { margin-top: 14px; }
.h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--tinta-2); }
.etiqueta-grupo { font-size: 13px; color: var(--madera-osc); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 8px; }
.sub { margin: 0; color: var(--tinta-2); font-size: 15px; }
.chico { font-size: 13px; }
.etiqueta { font-size: 12px; font-weight: 700; color: var(--madera-osc); text-transform: uppercase; letter-spacing: 0.05em; }
.vacio { padding: 28px 16px; text-align: center; color: var(--gris); }
.txt-rosa { color: var(--rosa) !important; }
.txt-naranja { color: var(--naranja) !important; font-weight: 700; }
.txt-verde { color: var(--verde-osc) !important; }
.grilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .grilla-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Botones ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 18px; border-radius: 14px; border: 2px solid transparent;
  font-size: 16px; font-weight: 700; text-decoration: none; text-align: center;
}
.btn-ancho { width: 100%; }
.btn-chico { min-height: 44px; padding: 0 14px; font-size: 15px; }
.btn-primario { background: var(--rosa); color: #fff; }
.btn-oscuro { background: var(--tinta); color: #fff; }
.btn-verde { background: var(--verde); color: #fff; }
.btn-suave { background: var(--blanco); border-color: var(--borde); color: var(--tinta); }
.btn-borde-verde { background: var(--blanco); border-color: var(--verde); color: var(--verde-osc); }
.btn-borde-rosa { background: var(--blanco); border-color: var(--rosa); color: var(--rosa); }
.btn-icono { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--borde); background: var(--blanco); font-size: 22px; font-weight: 700; }
.mas { font-size: 22px; line-height: 1; }
.link-chico { background: none; border: none; padding: 6px 0; font-size: 14px; font-weight: 700; color: var(--rosa); text-align: left; align-self: flex-start; }

.pildora { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pildora svg { width: 14px; height: 14px; }
.pildora-ok { background: var(--verde-claro); color: var(--verde-osc); }
.pildora-aviso { background: var(--amarillo-claro); color: var(--amarillo); }
.pildora-neutra { background: var(--borde-suave); color: var(--tinta-2); }

.chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.chip-urgente { background: var(--rosa); color: #fff; }
.chip-comprar { background: var(--naranja-claro); color: var(--naranja); }
.chip-preguntar { background: var(--amarillo-claro); color: var(--amarillo); }
.chip-coordinar { background: var(--azul-claro); color: var(--azul); }
.chip-ok { background: var(--verde-claro); color: var(--verde-osc); }
.chip-apagado { background: var(--borde-suave); color: var(--gris-2); text-decoration: line-through; }
.chip-neutro { background: var(--borde-suave); color: var(--tinta-2); }
.chip-oscuro { background: #3D3833; color: #fff; }
.chip-borde { background: var(--blanco); border: 1.5px solid var(--rosa-borde); color: var(--rosa); }

.aviso { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; }
.aviso-error { background: var(--rosa-claro); color: var(--rosa-osc); }
.aviso-amarillo { background: var(--amarillo-claro); color: var(--amarillo); }

/* ── Buscador y filtros ───────────────────────────────────────── */

.buscador { display: flex; align-items: center; gap: 10px; background: var(--blanco); border: 1.5px solid var(--borde); border-radius: 14px; padding: 0 14px; min-height: 48px; color: var(--gris-2); }
.buscador input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; height: 44px; font-size: 16px; color: var(--tinta); }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.filtro { flex-shrink: 0; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--borde); background: var(--blanco); font-size: 14px; font-weight: 700; color: var(--tinta-2); white-space: nowrap; }
.filtro.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.filtro-n { opacity: 0.7; margin-left: 2px; }
.segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--borde-suave); border-radius: 12px; padding: 4px; gap: 4px; }
.segmentos button { min-height: 40px; border: none; border-radius: 9px; background: transparent; font-weight: 700; color: var(--gris); }
.segmentos button.activo { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(31, 27, 24, 0.15); }

/* ── Listas ───────────────────────────────────────────────────── */

.renglon { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--borde-suave); text-decoration: none; color: var(--tinta); }
.tarjeta > .renglon:first-of-type { border-top: none; }
.renglon-pad { padding: 10px 14px; }
.renglon svg:last-child { color: #9A928A; flex-shrink: 0; }
.renglon-texto { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; text-decoration: none; color: var(--tinta); }
.renglon-texto small { color: var(--gris); font-size: 13px; }
.punto-color { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.burbuja { width: 22px; height: 22px; border-radius: 999px; background: var(--rosa); color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }

.persona { display: flex; align-items: center; gap: 10px; background: var(--blanco); border-radius: var(--radio); padding: 12px 12px 12px 16px; box-shadow: var(--sombra); text-decoration: none; color: var(--tinta); }
.persona > svg { color: #9A928A; flex-shrink: 0; }
.item-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.item-chips small { color: var(--gris); font-size: 12px; }

.acordeon { width: 100%; display: flex; align-items: center; gap: 12px; background: transparent; border: none; padding: 14px 16px; min-height: 64px; text-align: left; }
.acordeon-texto { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.acordeon-texto strong { font-size: 17px; }
.acordeon-texto small { font-size: 14px; font-weight: 700; }
.giro { color: var(--gris-2); transition: transform 0.2s; display: flex; }
.giro.girado { transform: rotate(180deg); }
.acordeon-cuerpo { border-top: 1px solid var(--borde-suave); }
.agregar-item { margin: 10px 16px 14px; }

.item { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--borde-suave); }
.item-texto { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; text-decoration: none; color: var(--tinta); }
.item-texto strong { font-size: 16px; line-height: 1.25; }
.stock-solo { min-width: 44px; text-align: center; font-size: 20px; font-weight: 700; }
.stepper { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.stepper button { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--borde); background: var(--blanco); font-size: 24px; font-weight: 700; color: var(--tinta-2); line-height: 1; }
.stepper span { min-width: 40px; text-align: center; font-size: 20px; font-weight: 700; }
.stepper-grande { justify-content: space-between; }
.stepper-grande button { width: 68px; height: 68px; border-radius: 18px; font-size: 34px; background: var(--fondo); }
.stepper-grande input { width: 120px; text-align: center; font-size: 48px; font-weight: 700; border: none; background: transparent; }
.falta { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-radius: 12px; padding: 10px 14px; flex-wrap: wrap; }
.falta label { display: flex; align-items: center; gap: 8px; color: var(--tinta-2); }
.falta-si { background: var(--rosa-claro); }
.falta-si strong { color: var(--rosa); }
.falta-no { background: var(--verde-claro); }
.falta-no strong { color: var(--verde-osc); }
.input-chico { width: 72px; min-height: 40px; border: 1.5px solid var(--borde); border-radius: 10px; padding: 0 10px; background: var(--blanco); font-weight: 700; }
.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opcion { min-height: 50px; border-radius: 12px; border: 2px solid var(--borde); background: var(--blanco); display: flex; align-items: center; justify-content: center; padding: 6px; }
.opcion.activa { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--tinta) inset; }
.opcion .chip { font-size: 14px; padding: 5px 12px; }

.check-fila, .tarea { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--blanco); border: 2px solid var(--borde-suave); border-radius: var(--radio); padding: 10px 14px; text-align: left; }
.check-fila.hecho, .tarea.hecho { background: #F4F1EC; }
.check-fila.hecho strong, .tarea.hecho strong { text-decoration: line-through; color: var(--gris-2); }
.caja { width: 34px; height: 34px; border-radius: 10px; border: 2.5px solid #9A928A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.hecho .caja { background: var(--verde); border-color: var(--verde); }
.caja-btn { background: none; border: none; padding: 4px; margin: -4px; }

.progreso { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--tinta-2); }
.progreso strong { color: var(--tinta); }
.barra-prog { height: 10px; border-radius: 999px; background: #ECE6DF; overflow: hidden; }
.barra-prog div { height: 100%; border-radius: 999px; background: var(--verde); }

/* ── Inicio ───────────────────────────────────────────────────── */

.saludo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.dias { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.9); color: var(--tinta); border-radius: 18px; padding: 8px 16px; min-width: 78px; box-shadow: 0 4px 16px rgba(110, 83, 50, 0.12); backdrop-filter: blur(8px); }
.dias strong { font-family: 'Lora', Georgia, serif; font-size: 32px; font-weight: 600; line-height: 1; color: var(--madera-osc); }
.dias small { font-size: 12px; font-weight: 700; color: var(--gris); }
.stat { display: flex; align-items: center; gap: 12px; background: var(--blanco); border-radius: var(--radio); padding: 12px; box-shadow: var(--sombra); text-decoration: none; color: var(--tinta); }
.stat > span { display: flex; flex-direction: column; min-width: 0; }
.stat small { font-size: 13px; font-weight: 700; color: var(--gris); }
.stat strong { font-size: 16px; }
.stat em { font-style: normal; font-size: 12px; color: var(--gris-2); }
.anillo { flex-shrink: 0; }
.seccion { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 88px; padding: 8px 4px; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); text-decoration: none; color: var(--tinta); font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2; }
.seccion-pronto { opacity: 0.55; box-shadow: none; border: 1.5px dashed var(--borde); }
.seccion-pronto small { font-size: 10px; font-weight: 700; color: var(--gris-2); }
.seccion-icono { width: 40px; height: 40px; border-radius: 12px; background: var(--borde-suave); color: var(--gris-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.seccion-icono.chico { width: 36px; height: 36px; }
.tono-rosa { background: var(--rosa-claro); color: var(--rosa); }
.tono-verde { background: var(--verde-claro); color: var(--verde-osc); }
.tono-madera { background: var(--madera-claro); color: var(--madera); }
.frase { text-align: center; margin-top: 8px; color: var(--madera-osc); }
.frase p { margin: 0; font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 16px; }
.frase small { font-size: 12px; }

.opcion-grande { display: flex; align-items: center; gap: 14px; background: var(--blanco); border-radius: 18px; padding: 16px; box-shadow: var(--sombra); text-decoration: none; color: var(--tinta); min-height: 76px; }
.opcion-grande.deshabilitada { opacity: 0.55; box-shadow: none; border: 1.5px dashed var(--borde); }

/* ── Formularios ──────────────────────────────────────────────── */

.campos { gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > span, .campo > label { font-size: 13px; font-weight: 700; color: var(--gris); }
.campo input, .campo textarea {
  min-height: 46px; border: 1.5px solid var(--borde); border-radius: 12px; padding: 10px 12px;
  background: var(--blanco); font-size: 16px; width: 100%; resize: vertical;
}
.campo input[readonly], .campo textarea[readonly] { background: var(--fondo); border-color: transparent; }
.campo-calculado { background: var(--fondo); border-radius: 12px; padding: 10px 12px; }
.campo-calculado strong { font-size: 16px; }
.campo-calculado small { font-size: 12px; color: var(--gris-2); }
.campo-fila { display: flex; gap: 8px; align-items: center; }
.campo-fila input { flex: 1; min-width: 0; }
.campo-fila input[type="color"] { padding: 4px; height: 46px; }
.campo-admin { border-top: 1px solid var(--borde-suave); padding-top: 10px; }
.campo-admin:first-of-type { border-top: none; padding-top: 0; }

.contacto .nombre { display: block; font-size: 20px; margin-top: 2px; }

/* ── Calendario ───────────────────────────────────────────────── */

.cal-cabeza { display: flex; justify-content: space-between; align-items: center; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.cal-dia-sem { font-size: 12px; font-weight: 700; color: var(--gris-2); padding-bottom: 4px; }
.dia { height: 46px; border-radius: 10px; border: none; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 15px; }
.dia i { width: 6px; height: 6px; border-radius: 999px; }
.dia i.con { background: var(--rosa); }
.dia.retiro { background: var(--rosa-claro); color: var(--rosa); font-weight: 700; }
.dia.hoy { background: var(--tinta); color: #fff; font-weight: 700; }
.vacio-dia { height: 46px; }

/* ── Planillas ────────────────────────────────────────────────── */

.tabla-caja { overflow: auto; max-height: calc(100vh - 230px); background: var(--blanco); border-radius: 12px; box-shadow: var(--sombra); }
.tabla { border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tabla th, .tabla td { padding: 8px 10px; border-bottom: 1px solid var(--borde-suave); border-right: 1px solid var(--borde-suave); text-align: left; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.tabla thead th { position: sticky; top: 0; z-index: 2; background: #3D3833; color: #fff; font-weight: 700; }
.tabla .num { position: sticky; left: 0; z-index: 1; background: var(--fondo); color: var(--gris-2); font-weight: 700; text-align: center; min-width: 44px; }
.tabla thead .num { z-index: 3; background: #2B2724; color: #fff; }
.tabla td.fx { background: #F6F3EF; color: var(--gris); }
.tabla td.editable { cursor: pointer; }
.tabla td.editable:hover { background: var(--rosa-claro); }

/* ── Entrada con PIN ──────────────────────────────────────────── */

.login { max-width: 400px; margin: 0 auto; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.login-marca { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--madera-osc); }
.login h1 { margin: 6px 0 0; font-family: 'Lora', Georgia, serif; font-size: 28px; font-weight: 600; }
.login-ayuda { margin: 0; color: var(--tinta-2); }
.puntos { display: flex; gap: 14px; margin: 10px 0; }
.punto { width: 18px; height: 18px; border-radius: 999px; border: 2.5px solid var(--gris-2); }
.punto.lleno { background: var(--rosa); border-color: var(--rosa); }
.teclado { display: grid; grid-template-columns: repeat(3, 84px); gap: 12px; margin-top: 8px; }
.tecla { height: 72px; border-radius: 20px; border: 1.5px solid var(--borde); background: var(--blanco); font-size: 28px; font-weight: 700; box-shadow: var(--sombra); }
.tecla:active { transform: scale(0.96); }
.tecla-suave { background: transparent; box-shadow: none; border-color: transparent; }
.tecla-ok { background: var(--rosa); color: #fff; border-color: var(--rosa); font-size: 17px; }

/* ── Modal y avisos ───────────────────────────────────────────── */

.fondo-modal { position: fixed; inset: 0; z-index: 20; background: rgba(31, 27, 24, 0.4); display: flex; align-items: flex-end; justify-content: center; }
.modal { width: 100%; max-width: 560px; background: var(--blanco); border-radius: 22px 22px 0 0; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.modal textarea { min-height: 90px; border: 1.5px solid var(--borde); border-radius: 12px; padding: 10px 12px; font-size: 17px; width: 100%; }
@media (min-width: 640px) { .fondo-modal { align-items: center; } .modal { border-radius: 22px; } }

.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 30; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; font-weight: 700; box-shadow: 0 8px 24px rgba(31, 27, 24, 0.2); }
.toast-ok { background: var(--tinta); color: #fff; }
.toast-error { background: var(--rosa); color: #fff; }

/* ── Fondo: degradado cálido con la foto del retiro desenfocada ─ */

body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(255, 236, 196, 0.85), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(163, 36, 59, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(250, 244, 234, 0.55) 0%, rgba(239, 230, 218, 0.78) 100%),
    url('img/fondo-blur.webp') center / cover no-repeat;
}
.barra { background: rgba(250, 245, 238, 0.72); border-bottom-color: rgba(255, 255, 255, 0.6); }
.pie { background: rgba(250, 245, 238, 0.82); backdrop-filter: blur(10px); }
.tarjeta, .persona, .stat, .seccion, .opcion-grande, .check-fila, .tarea { border: 1px solid rgba(255, 255, 255, 0.7); }

/* ── Barra lateral (vidrio) ───────────────────────────────────── */

.lateral {
  position: fixed; z-index: 15; top: 14px; bottom: 14px; left: 14px; width: 272px;
  display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 12px;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 26px;
  box-shadow: 0 10px 40px rgba(110, 83, 50, 0.16);
  overflow-y: auto;
  scrollbar-width: none;
}
.lateral::-webkit-scrollbar { display: none; }
.lateral-cabeza { display: flex; align-items: center; justify-content: center; position: relative; padding: 4px 0 2px; }
.lateral-cabeza .btn-menu { position: absolute; right: 0; top: 0; }
.logo img { display: block; height: 62px; width: auto; }
.nav-buscar {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px;
  border-radius: 14px; border: 1px solid rgba(31, 27, 24, 0.10); background: rgba(255, 255, 255, 0.55);
  color: var(--gris); font-size: 15px; text-align: left;
}
.nav-buscar span { flex: 1; }
.nav-buscar kbd { font-family: ui-monospace, monospace; font-size: 11px; padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(31, 27, 24, 0.15); background: rgba(255, 255, 255, 0.8); color: var(--gris-2); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px;
  border-radius: 13px; text-decoration: none; color: var(--tinta-2); font-size: 16px; font-weight: 700;
  border: 1px solid transparent;
}
.nav-item svg { color: var(--gris-2); flex-shrink: 0; }
.nav-item:hover { background: rgba(255, 255, 255, 0.55); }
.nav-item.activo { background: rgba(255, 255, 255, 0.92); border-color: #fff; color: var(--tinta); box-shadow: 0 2px 10px rgba(110, 83, 50, 0.12); }
.nav-item.activo svg { color: var(--rosa); }
.nav-item.pronto { opacity: 0.5; cursor: default; }
.nav-item.pronto small { margin-left: auto; font-size: 10px; color: var(--gris-2); }
.lateral-pie { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.reloj-card {
  position: relative; overflow: hidden; border-radius: 18px; padding: 44px 14px 12px; color: #fff; flex-shrink: 0;
  background:
    linear-gradient(180deg, rgba(31, 27, 24, 0) 0%, rgba(31, 27, 24, 0.55) 60%, rgba(31, 27, 24, 0.72) 100%),
    url('img/caminantes.webp') center 30% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  display: flex; flex-direction: column; gap: 2px;
}
.reloj { display: flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.reloj span { font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: -0.5px; }
.reloj small { font-size: 18px; opacity: 0.8; }
.reloj-fecha { font-size: 14px; opacity: 0.92; }
.reloj-retiro { font-size: 12px; opacity: 0.85; margin-top: 6px; }
.salir { align-self: center; color: var(--gris); }

.btn-menu { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(31, 27, 24, 0.1); background: rgba(255, 255, 255, 0.7); display: inline-flex; align-items: center; justify-content: center; color: var(--tinta); flex-shrink: 0; }
.barra-izq { display: flex; align-items: center; gap: 8px; min-width: 0; }
.velo { position: fixed; inset: 0; z-index: 14; background: rgba(31, 27, 24, 0.35); }

/* ── Inicio ───────────────────────────────────────────────────── */

.saludo-texto { margin: 0; font-size: 16px; color: var(--tinta-2); font-weight: 700; }
.hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 22px; border-radius: 22px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.78), rgba(255, 248, 236, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 30px rgba(110, 83, 50, 0.12);
}
.hero-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-texto .titulo-grande { font-size: 32px; }
.hero-acciones { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.hero-acciones .btn { min-height: 64px; }
.inicio-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.grilla-stats { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Menú de clic derecho ─────────────────────────────────────── */

.ctx-velo { position: fixed; inset: 0; z-index: 40; }
.ctx {
  position: fixed; z-index: 41; min-width: 230px; max-width: 320px; max-height: 70vh; overflow-y: auto;
  padding: 6px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(16px);
  border: 1px solid rgba(31, 27, 24, 0.08);
  box-shadow: 0 14px 40px rgba(31, 27, 24, 0.22);
  display: flex; flex-direction: column;
}
.ctx button { min-height: 42px; padding: 0 12px; border: none; border-radius: 9px; background: transparent; text-align: left; font-size: 15px; color: var(--tinta); }
.ctx button:hover, .ctx button:focus-visible { background: var(--rosa-claro); color: var(--rosa-osc); outline: none; }
.ctx hr { border: none; border-top: 1px solid var(--borde-suave); margin: 4px 6px; }
[data-ctx] { -webkit-touch-callout: none; }

/* ── Buscador general ─────────────────────────────────────────── */

.fondo-arriba { align-items: flex-start; padding-top: 10vh; }
.buscador-global { border-radius: 22px; max-width: 640px; }
.buscador-global .buscador { min-height: 54px; border-width: 2px; }
.buscador-global .buscador input { font-size: 18px; }
.resultados { display: flex; flex-direction: column; max-height: 56vh; overflow-y: auto; }
.resultado { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border-radius: 12px; text-decoration: none; color: var(--tinta); }
.resultado:hover, .resultado:focus-visible { background: var(--rosa-claro); outline: none; }
.resultado .chip { min-width: 84px; justify-content: center; }

/* ── Celu: la barra lateral es un menú que se abre ───────────── */

@media (max-width: 1023px) {
  .lateral { transform: translateX(calc(-100% - 24px)); transition: transform 0.25s ease; }
  .lateral.abierto { transform: none; }
}

/* ── PC: barra lateral fija y todo a lo ancho ─────────────────── */

@media (min-width: 1024px) {
  .solo-movil { display: none !important; }
  .contenido { margin-left: 300px; min-height: 100vh; }
  .barra { padding: 14px 28px 12px; }
  .barra > * { max-width: none; }
  .pantalla { max-width: none; padding: 18px 28px 40px; }
  .pantalla-con-pie { padding-bottom: 120px; }
  .pie { left: 300px; padding-left: 28px; padding-right: 28px; }
  .pie > * { max-width: 520px; margin: 0 0 0 auto; }
  .barra h1, .titulo-grande { font-size: 32px; }
  .hero { padding: 28px 30px; }
  .hero-texto .titulo-grande { font-size: 40px; }
  .inicio-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
  .grilla-stats { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .grilla-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); align-items: start; gap: 14px; }
  .grilla-auto > :not(.celda-grilla) { grid-column: 1 / -1; }
  .grupo { display: flex; flex-direction: column; gap: 8px; }
  .grupo .etiqueta-grupo { margin-top: 0; }
  .cal { max-width: 640px; }
  .tabla-caja { max-height: calc(100vh - 200px); }
  .toast { left: calc(50% + 150px); }
  .fondo-modal { left: 300px; }
}
@media (min-width: 1500px) {
  .grilla-auto { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
}