:root {
  /* paleta de La Zona (bots-lazona.html / indicador-lazona.html) */
  --fondo: #05070C; --panel: #0D1320; --panel2: #090E18; --borde: #2A3550; --borde2: #34436a;
  --txt: #F2F5FC; --tenue: #9AA6BD; --apagado: #66738c;
  --oro: #F5B942; --oro2: #E8A020; --cielo: #22D3EE; --verde: #2ED876; --rojo: #F2544B; --ambar: #F7C95C; --violeta: #a78bfa;
  --radio: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--txt); font-family: Manrope, 'Segoe UI', system-ui, sans-serif; font-size: 15px; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); overflow-x: hidden; }
/* resplandor de La Zona + campo de estrellas */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 420px at 50% -5%, rgba(245,185,66,.14), transparent 60%),
    radial-gradient(800px 460px at 50% 105%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.35), transparent 60%), radial-gradient(2px 2px at 78% 32%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 72%, rgba(255,255,255,.3), transparent 60%), radial-gradient(1.5px 1.5px at 88% 84%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(1.5px 1.5px at 56% 12%, rgba(255,255,255,.25), transparent 60%), radial-gradient(2px 2px at 6% 58%, rgba(255,255,255,.2), transparent 60%); }
/* rejilla de cabina, muy tenue */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(34,211,238,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.035) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%); }
.top-line { height: 3px; background: linear-gradient(90deg, transparent, var(--cielo), var(--oro), var(--cielo), transparent); opacity: .9; box-shadow: 0 0 18px rgba(245,185,66,.5); }
h1, h2, h3, .titulo, .cab-titulo, .kpi .v, .alumno .nom { font-family: Sora, Manrope, sans-serif; }
@keyframes rayoTexto { 0%,100% { text-shadow: 0 0 8px rgba(57,169,255,.6), 0 0 16px rgba(57,169,255,.25); } 48% { text-shadow: 0 0 3px rgba(57,169,255,.35); } 52% { text-shadow: 0 0 14px rgba(57,169,255,1), 0 0 28px rgba(57,169,255,.5); } }
@keyframes vidaZT { 0%,100% { transform: scale(1); filter: brightness(1) saturate(1); } 50% { transform: scale(1.035); filter: brightness(1.15) saturate(1.2); } }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(46,216,118,0); } 100% { box-shadow: 0 0 0 0 rgba(46,216,118,0); } }
@keyframes cajaVerde { 0%,100% { box-shadow: 0 0 8px rgba(46,216,118,.25), inset 0 0 10px rgba(46,216,118,.12); } 50% { box-shadow: 0 0 18px rgba(46,216,118,.55), inset 0 0 18px rgba(46,216,118,.3); } }
@keyframes cajaRojo { 0%,100% { box-shadow: 0 0 8px rgba(242,84,75,.25), inset 0 0 10px rgba(242,84,75,.12); } 50% { box-shadow: 0 0 18px rgba(242,84,75,.55), inset 0 0 18px rgba(242,84,75,.3); } }
.lz { color: var(--oro); animation: rayoTexto 3.8s infinite; }
.oculto { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
h2 { font-size: 1.35rem; margin: 6px 0 16px; padding-left: 12px; border-left: 4px solid var(--oro); }
h3 { font-size: 1.02rem; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
a { color: var(--cielo); }

/* entrar */
.entrar { max-width: 420px; margin: 0 auto; padding: 48px 16px; text-align: center; }
.logo-grande { width: 150px; height: 150px; border-radius: 50%; filter: drop-shadow(0 0 22px rgba(245,185,66,.45)); animation: vidaZT 4.5s ease-in-out infinite; }
.titulo { font-size: 1.9rem; font-weight: 800; margin: 14px 0 4px; letter-spacing: -.02em; }
.titulo span, .cab-titulo span { color: var(--oro); text-shadow: 0 0 10px rgba(57,169,255,.45); }
.lema { color: var(--tenue); margin: 0 0 28px; }
.entrar-caja { text-align: left; }
.entrar-caja input { text-align: center; letter-spacing: .12em; font-weight: 700; font-size: 1.15rem; text-transform: uppercase; }
.pista { color: var(--apagado); font-size: .85rem; margin: 12px 0 0; }
.error { color: var(--rojo); font-size: .9rem; min-height: 1.2em; margin: 10px 0 0; }

/* cabecera */
.cabecera { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(5,7,12,.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.logo-mini { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 14px rgba(245,185,66,.45); }
.cab-txt { flex: 1; min-width: 0; }
.cab-titulo { font-weight: 800; font-size: 1rem; }
.cab-nombre { color: var(--tenue); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.racha { box-shadow: 0 0 14px rgba(245,185,66,.25); font-weight: 700; font-size: .85rem; color: var(--oro); background: rgba(245,185,66,.1); border: 1px solid rgba(245,185,66,.3); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.racha:empty { display: none; }
.btn-icono { background: none; border: 1px solid var(--borde); border-radius: 10px; padding: 0 12px; height: 36px; font-size: .82rem !important; font-weight: 600; cursor: pointer; color: var(--tenue); font-size: 1.1rem; }

.pestanas { display: flex; gap: 4px; overflow-x: auto; padding: 0 12px; border-bottom: 1px solid var(--borde); max-width: 1000px; margin: 0 auto; scrollbar-width: none; }
.pestanas button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--tenue); padding: 13px 12px; font-weight: 600; font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.pestanas button.activa { color: var(--oro); border-bottom-color: var(--oro); }
main { max-width: 1000px; margin: 0 auto; padding: 20px 16px 80px; }

/* cajas */
.caja { background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; margin-bottom: 16px; }
.caja.alerta { border-left: 4px solid var(--rojo); }
.caja.oro { border-left: 4px solid var(--oro); box-shadow: 0 0 30px rgba(245,185,66,.08); }
.caja.ok { border-left: 4px solid var(--verde); }
.caja.info { border-left: 4px solid var(--cielo); box-shadow: 0 0 30px rgba(34,211,238,.07); }
label, .etq { display: block; color: var(--tenue); font-size: .85rem; font-weight: 500; margin: 0 0 6px; }
input, select, textarea { width: 100%; background: var(--panel2); border: 1px solid var(--borde2); border-radius: 10px; padding: 11px 12px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--oro); }
textarea { min-height: 84px; resize: vertical; }
.fila { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 12px; }
.fila2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 12px; }
.campo { margin-bottom: 12px; }
.ayuda { color: var(--apagado); font-size: .8rem; margin-top: 4px; }

/* chips (radio/checkbox bonitos) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--panel2); border: 1px solid var(--borde2); border-radius: 10px; cursor: pointer; user-select: none; font-weight: 500; }
.chip input { width: auto; margin: 0; accent-color: var(--oro); }
.chip.on { border-color: var(--oro); background: rgba(245,185,66,.08); }
.chip.on.v { border-color: var(--verde); background: rgba(46,216,118,.08); }
.chip.on.r { border-color: var(--rojo); background: rgba(242,84,75,.08); }
.habito { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel2); border: 1px solid var(--borde2); border-radius: 10px; cursor: pointer; }
.habito input { width: 20px; height: 20px; accent-color: var(--verde); margin: 0; }

/* botones */
.btn { border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 700; cursor: pointer; background: var(--borde); color: var(--txt); }
.btn-oro { background: linear-gradient(180deg, var(--ambar), var(--oro2)); color: #1a1405; box-shadow: 0 0 24px rgba(245,185,66,.3); width: 100%; margin-top: 14px; font-size: 1rem; }
.btn-linea { background: none; border: 1px dashed var(--borde2); color: var(--tenue); width: 100%; }
.btn-peq { padding: 7px 12px; font-size: .85rem; border-radius: 9px; }
.btn-rojo { background: rgba(242,84,75,.15); color: var(--rojo); }
.btn:disabled { opacity: .5; cursor: default; }
.guardar { position: sticky; bottom: 12px; z-index: 5; box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* operaciones */
.op { border: 1px solid var(--borde2); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--panel2); }
.op.mala { border-color: rgba(242,84,75,.55); }
.op-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 700; }
.op-cab .pnl { font-weight: 800; }
.op .fila { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.op-avisos { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }

/* etiquetas */
.tag { display: inline-block; font-size: .76rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(242,84,75,.12); color: #fda4af; border: 1px solid rgba(242,84,75,.3); }
.tag.v { background: rgba(46,216,118,.1); color: #6ee7b7; border-color: rgba(46,216,118,.3); }
.tag.g { background: rgba(148,163,184,.1); color: var(--tenue); border-color: var(--borde2); }
.tag.o { background: rgba(245,185,66,.1); color: var(--oro); border-color: rgba(245,185,66,.3); }
.pos { color: var(--verde); } .neg { color: var(--rojo); } .neu { color: var(--tenue); }

/* espejo del día */
.espejo-lista { margin: 0; padding: 0; list-style: none; }
.espejo-lista li { padding: 9px 0; border-bottom: 1px solid var(--borde); display: flex; gap: 10px; font-size: .93rem; }
.espejo-lista li:last-child { border-bottom: 0; }

/* KPIs */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.kpi { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.kpi .k { color: var(--tenue); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kpi .v { font-size: 1.7rem; font-weight: 800; margin-top: 6px; }
.kpi .s { color: var(--apagado); font-size: .8rem; margin-top: 2px; }

/* barra dentro/fuera */
.barra { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--panel2); margin: 10px 0 8px; }
.barra div { height: 100%; }
.leyenda { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; flex-wrap: wrap; }

/* semana / historial */
.navsem { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.navsem .txt { font-weight: 700; text-align: center; }
.dias7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; }
.dia7 { background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 4px; text-align: center; cursor: pointer; font-size: .8rem; }
.dia7 .n { font-weight: 800; font-size: 1rem; margin-top: 2px; }
.dia7.bien { border-color: rgba(46,216,118,.6); animation: cajaVerde 3.2s ease-in-out infinite; }
.dia7.mal { border-color: rgba(242,84,75,.6); animation: cajaRojo 3.2s ease-in-out infinite; }
.dia7.vacio { opacity: .45; }
.dia7.hoy { outline: 2px solid var(--oro); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--tenue); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: 8px 6px; border-bottom: 1px solid var(--borde); }
td { padding: 10px 6px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-scroll { overflow-x: auto; }
.mentor-txt p { margin: 0 0 10px; line-height: 1.55; }
.comentario { background: rgba(34,211,238,.07); border: 1px solid rgba(34,211,238,.3); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.comentario .de { color: var(--cielo); font-weight: 700; font-size: .85rem; margin-bottom: 6px; }
.comentario p { margin: 0; white-space: pre-wrap; line-height: 1.5; }

/* mentor */
.alumnos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.alumno { background: linear-gradient(180deg, var(--panel), var(--panel2)); transition: transform .18s, border-color .18s, box-shadow .18s; border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; cursor: pointer; }
.alumno:hover { transform: translateY(-3px); border-color: var(--oro); box-shadow: 0 0 34px rgba(245,185,66,.22), 0 0 60px rgba(34,211,238,.1); }
.alumno.riesgo { border-left: 4px solid var(--rojo); }
.alumno.bien { border-left: 4px solid var(--verde); }
.alumno .nom { font-weight: 700; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 8px; }
.alumno .mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 10px; }
.alumno .mini div { background: var(--panel2); border-radius: 8px; padding: 8px; text-align: center; }
.alumno .mini b { display: block; font-size: 1.05rem; }
.alumno .mini span { color: var(--apagado); font-size: .72rem; }
.codigo { font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .08em; color: var(--oro); }
.volver { background: none; border: 0; color: var(--tenue); cursor: pointer; padding: 0; margin-bottom: 12px; font-weight: 600; }

.toast { position: fixed; left: 50%; top: 14px; transform: translate(-50%, -40px); opacity: 0; pointer-events: none; transition: all .25s; background: var(--panel); border: 1px solid var(--borde2); border-left: 4px solid var(--verde); padding: 12px 18px; border-radius: 12px; z-index: 50; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: calc(100% - 32px); }
.toast.ver { transform: translate(-50%, 0); opacity: 1; }
.toast.mal { border-left-color: var(--rojo); }
.vacio-txt { color: var(--apagado); text-align: center; padding: 24px 0; font-style: italic; }

@media (max-width: 560px) {
  .kpi .v { font-size: 1.35rem; }
  .dia7 { font-size: .7rem; padding: 6px 2px; }
  .caja { padding: 15px; }
}

/* indicador en vivo (punto verde que late, como en las landings) */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(46,216,118,.7); animation: pulse 1.6s infinite; vertical-align: 1px; margin-right: 6px; }
.kpi::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(34,211,238,.6), rgba(245,185,66,.6), transparent); opacity: .6; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* informes */
.selector { display: flex; gap: 4px; background: var(--panel2); border: 1px solid var(--borde); border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.selector button { flex: 1; background: none; border: 0; border-radius: 9px; padding: 9px 6px; color: var(--tenue); font-weight: 700; cursor: pointer; }
.selector button.on { background: linear-gradient(180deg, var(--ambar), var(--oro2)); color: #1a1405; box-shadow: 0 0 16px rgba(245,185,66,.3); }
.lista-c { margin: 4px 0 8px; padding: 0; list-style: none; }
.lista-c li { padding: 6px 0; line-height: 1.5; }
.grafico { position: relative; margin: 4px 0 12px; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-barra path { transition: opacity .15s; }
.g-barra:hover path { opacity: .8; filter: drop-shadow(0 0 8px rgba(245,185,66,.6)); }
.g-tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--borde2); border-radius: 8px; padding: 6px 10px; font-size: .8rem; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.5); z-index: 3; }
.rec { background: var(--panel2); border: 1px solid var(--borde2); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.rec-cab { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; color: var(--oro); }
.rec ul { margin: 6px 0; padding-left: 18px; }
.rec li { margin: 3px 0; }

/* PDF: se imprime el informe, sin botones ni lo comercial */
@media print {
  @page { margin: 12mm; }
  html, body { background: #05070C !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::after, .top-line, .pestanas, .btn-icono, .racha, .no-print, .solo-mentor, .volver, #sub, .toast, .guardar { display: none !important; }
  .cabecera { position: static; }
  .caja, .kpi { break-inside: avoid; }
  main { padding: 0; }
  * { animation: none !important; }
}

.pie { text-align: center; color: var(--apagado); font-size: .8rem; padding: 10px 16px 28px; }
.pie a { color: var(--tenue); }
.nueva-version { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 60; background: var(--panel); border: 1px solid var(--oro); border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 0 30px rgba(245,185,66,.3); max-width: calc(100% - 32px); font-weight: 600; }
.nueva-version .btn { background: linear-gradient(180deg, var(--ambar), var(--oro2)); color: #1a1405; }

/* marcas: La Zona Trade y Jackson Guardian */
.marcas { max-width: 1000px; margin: 8px auto 0; padding: 0 16px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.marca { display: flex; gap: 14px; align-items: center; background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; transition: border-color .18s, box-shadow .18s; }
.marca:hover { border-color: var(--oro); box-shadow: 0 0 26px rgba(245,185,66,.18), 0 0 50px rgba(34,211,238,.08); }
.marca img { width: 64px; height: 64px; border-radius: 50%; flex: none; box-shadow: 0 0 16px rgba(245,185,66,.35); }
#marca-jg img { box-shadow: 0 0 16px rgba(167,139,250,.45); }
.marca-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.marca-txt b { font-family: Sora, Manrope, sans-serif; }
.marca-txt span { color: var(--tenue); font-size: .82rem; }
.marca-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.marca-links:empty { display: none; }
.marca-links .btn { text-decoration: none; border: 1px solid var(--borde2); background: var(--panel2); }
.marca-links .btn:hover { border-color: var(--oro); color: var(--oro); }

/* avisos de cada entrada, explicados */
.avisos-op { width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(242,84,75,.07); border: 1px solid rgba(242,84,75,.3); font-size: .88rem; }
.avisos-op b { color: #fda4af; }
.avisos-op ul { margin: 6px 0 0; padding: 0; list-style: none; }
.avisos-op li { margin: 6px 0; line-height: 1.45; }
.avisos-op .tag { margin-right: 4px; }

/* tu plan de hoy */
.plan-hoy { border-left: 4px solid var(--cielo); }
.plan-reglas { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 6px 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.plan-reglas li { font-size: .9rem; padding-left: 16px; position: relative; }
.plan-reglas li::before { content: '▸'; position: absolute; left: 0; color: var(--cielo); }

.falta { outline: 2px solid var(--rojo) !important; outline-offset: 3px; border-radius: 10px; }
.solo-movil { display: none; }
@media (max-width: 700px) { .solo-movil { display: inline; } }
/* C15: los desplegables de cada entrada, más anchos en el móvil para que no se corten */
.op .fila { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.op select { font-size: .9rem; padding-right: 26px; text-overflow: ellipsis; }

/* textos larguísimos sin espacios (enlaces) no ensanchan la página */
.caja, .ayuda, .comentario p, td, .lema, .mentor-txt { overflow-wrap: anywhere; word-break: break-word; }
/* tablas en el móvil: más compactas, y la última columna no se pierde */
@media (max-width: 560px) { table { font-size: .8rem; } th, td { padding: 6px 4px; } th { font-size: .7rem; } }

/* ================= APP MÓVIL (6-oct) ================= */
:root { --barra: 64px; }
/* barra de abajo, solo alumno y solo en móvil; arriba en escritorio */
@media (max-width: 700px) {
  body.con-barra .pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--borde);
    background: rgba(9,14,24,.97); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; overflow: visible; }
  body.con-barra .pestanas button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border: 0; border-radius: 12px; font-size: .7rem; letter-spacing: .02em; text-transform: none; min-height: 52px; }
  body.con-barra .pestanas button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  body.con-barra .pestanas button.activa { color: var(--oro); background: rgba(245,185,66,.1); border: 0; }
  body.con-barra main { padding-bottom: calc(var(--barra) + 90px + env(safe-area-inset-bottom)); }
  body.con-barra .guardar { bottom: calc(var(--barra) + 10px + env(safe-area-inset-bottom)); }
  body.con-barra.escribiendo .pestanas { display: none; }
  body.con-barra.escribiendo .guardar { bottom: 10px; }
  body.con-barra .cabecera { padding: 8px 14px; }
  body.con-barra .cab-titulo { font-size: .95rem; }
  body.con-barra .marcas { padding-bottom: calc(var(--barra) + 20px); }
}
@media (min-width: 701px) { .pestanas button svg { display: none; } }
.pestanas button span { pointer-events: none; }
/* marcas presentes sin molestar: nunca en «Hoy» */
body[data-vista="hoy"] .marcas { display: none; }
.marcas .marca { padding: 10px 12px; } .marcas .marca img { width: 44px; height: 44px; }

/* portada del día */
.hero-dia { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, rgba(245,185,66,.16), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(34,211,238,.12), transparent 60%), linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--borde); border-radius: 20px; padding: 18px 16px 14px; margin-bottom: 16px; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.saludo { color: var(--tenue); font-size: .9rem; }
.fecha-grande { font-family: Sora, Manrope, sans-serif; font-weight: 800; font-size: 1.55rem; line-height: 1.15; margin-top: 2px; }
.fecha-grande::first-letter { text-transform: uppercase; }
.hoy-tag { font-family: Manrope, sans-serif; font-size: .7rem; font-weight: 700; color: #1a1405; background: var(--oro); border-radius: 999px; padding: 2px 8px; margin-left: 8px; vertical-align: 4px; }
.pill .estado { display: inline-block; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.e-vacio { color: var(--tenue); border: 1px solid var(--borde2); }
.e-sucio { color: #1a1405; background: var(--ambar); }
.e-ok { color: var(--cielo); border: 1px solid rgba(34,211,238,.45); background: rgba(34,211,238,.08); }
.aviso-cambio { margin-top: 8px; font-size: .82rem; color: var(--txt); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hero-dia .navsem { margin: 14px 0 6px; gap: 6px; }
.semana-tira { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.punto-dia { background: none; border: 0; color: var(--tenue); display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px 0; cursor: pointer; font-size: .72rem; min-height: 44px; border-radius: 10px; }
.punto-dia i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--borde2); display: block; }
.punto-dia.apuntado i { background: var(--oro); border-color: var(--oro); box-shadow: 0 0 10px rgba(245,185,66,.5); }
.punto-dia.actual { color: var(--txt); background: rgba(255,255,255,.05); font-weight: 700; }
.punto-dia:disabled { opacity: .35; cursor: default; }
.hero-resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.hero-resumen div { background: rgba(5,7,12,.45); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; }
.hero-resumen b { display: block; font-family: Sora, Manrope, sans-serif; font-size: 1.3rem; }
.hero-resumen span { color: var(--apagado); font-size: .74rem; }

/* tu plan a mano, plegable */
.plan-mini { background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid var(--borde); border-left: 4px solid var(--cielo); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.plan-mini summary { cursor: pointer; font-weight: 700; list-style: none; }
.plan-mini[open] summary { margin-bottom: 10px; }

/* secciones plegables del registro */
.seccion { background: linear-gradient(180deg, var(--panel), var(--panel2)); border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: 12px; }
.seccion > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 16px; font-family: Sora, Manrope, sans-serif; font-weight: 700; min-height: 52px; }
.seccion > summary::-webkit-details-marker, .plan-mini summary::-webkit-details-marker, .op-mas summary::-webkit-details-marker { display: none; }
.seccion > summary::after { content: '⌄'; color: var(--tenue); font-size: 1.1rem; transition: transform .2s; }
.seccion[open] > summary::after { transform: rotate(180deg); }
.seccion .relleno { margin-left: auto; font-style: normal; font-family: Manrope, sans-serif; font-weight: 600; font-size: .72rem; color: var(--tenue); }
.seccion-cuerpo { padding: 0 16px 16px; }

/* entradas */
.chips-op { margin-bottom: 10px; }
.chips-op .chip { min-height: 44px; flex: 1 1 auto; justify-content: center; }
.chip.on.g { border-color: var(--verde); background: rgba(46,216,118,.1); }
.chip.on.p { border-color: var(--rojo); background: rgba(242,84,75,.1); }
.op-mas { margin-top: 4px; border-top: 1px dashed var(--borde2); padding-top: 10px; }
.op-mas summary { cursor: pointer; font-weight: 600; color: var(--cielo); padding: 6px 0; list-style: none; }
.op-mas[open] summary { margin-bottom: 8px; }
.ops-botones { display: flex; gap: 8px; } .ops-botones .btn { flex: 1; }

/* guardar: se vuelve ✓ */
.guardar.hecho { background: linear-gradient(180deg, #5eead4, #22b8a5); color: #04211d; transform: scale(1.02); transition: all .25s; }

/* instalar */
.instalar { position: relative; display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(180deg, rgba(245,185,66,.1), rgba(34,211,238,.06)); border: 1px solid rgba(245,185,66,.35); border-radius: 16px; padding: 12px 40px 12px 12px; margin-bottom: 14px; }
.instalar img { width: 44px; height: 44px; border-radius: 12px; }
.instalar p { margin: 4px 0 8px; color: var(--tenue); font-size: .85rem; line-height: 1.45; }
.instalar-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-oro-peq { background: linear-gradient(180deg, var(--ambar), var(--oro2)); color: #1a1405; }
.instalar .cerrar { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; background: none; color: var(--tenue); font-size: 1.3rem; cursor: pointer; }

/* entrada / alta: firma de las dos marcas, discreta */
.firma-marcas { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; color: var(--apagado); font-size: .78rem; text-align: center; }
.firma-marcas img { width: 26px; height: 26px; border-radius: 50%; flex: none; }
/* pulido tras capturas (6-oct) */
th { overflow-wrap: normal; word-break: normal; hyphens: auto; }
.chips-op .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chips-op .chip { position: relative; }
.chips-op .chip:has(input:focus-visible) { outline: 2px solid var(--cielo); outline-offset: 2px; }
@media (max-width: 700px) {
  body.con-barra:not([data-vista="hoy"]) main { padding-bottom: 20px; }
  body.con-barra .marcas { padding-bottom: calc(var(--barra) + 90px + env(safe-area-inset-bottom)); }
}
/* QA 6-oct: flecha en «Mi plan», día a medio escribir en la tira, toques de 44 px, pie visible sobre la barra */
.plan-mini summary { display: flex; align-items: center; gap: 6px; }
.plan-mini summary::after { content: '⌄'; margin-left: auto; color: var(--tenue); font-size: 1.1rem; transition: transform .2s; }
.plan-mini[open] summary::after { transform: rotate(180deg); }
.punto-dia.borrador i { border-color: var(--ambar); border-style: dashed; }
.aviso-borr a { color: var(--oro); font-weight: 700; }
#aviso-dia .aviso-cambio { margin: 10px 0 0; }
.hero-dia .navsem .btn-peq, .op-cab .btn-peq, .instalar .cerrar { min-width: 44px; min-height: 44px; }
input:disabled { opacity: .5; }
@media (max-width: 700px) {
  body.con-barra .pie { padding-bottom: calc(var(--barra) + 24px + env(safe-area-inset-bottom)); }
  body.con-barra[data-vista="hoy"] .pie { padding-bottom: calc(var(--barra) + 90px + env(safe-area-inset-bottom)); }
  body.con-barra[data-vista="hoy"] main { padding-bottom: 0; }
}
/* ================= CALENDARIO (6-oct) ================= */
@media (max-width: 700px) { body.con-barra .pestanas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } body.con-barra .pestanas button { font-size: .66rem; } }
.cal .navsem { margin-bottom: 12px; }
.cal .navsem .txt { font-family: Sora, Manrope, sans-serif; font-size: 1.15rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-cab { margin-bottom: 5px; } .cal-cab span { text-align: center; font-size: .72rem; color: var(--apagado); font-weight: 700; }
.cal-d { aspect-ratio: 1 / 1.08; min-height: 44px; border-radius: 10px; border: 1px solid var(--borde); background: var(--panel2); color: var(--txt); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px; cursor: pointer; font-family: Manrope, sans-serif; }
.cal-d .n { font-weight: 700; font-size: .85rem; line-height: 1; }
.cal-d .v { font-size: .62rem; font-weight: 700; line-height: 1.1; white-space: nowrap; opacity: .95; }
.cal-d:disabled { cursor: default; }
.cal-d.e-positivo { background: rgba(46,216,118,.16); border-color: rgba(46,216,118,.55); } .cal-d.e-positivo .v { color: var(--verde); }
.cal-d.e-negativo { background: rgba(242,84,75,.16); border-color: rgba(242,84,75,.55); } .cal-d.e-negativo .v { color: var(--rojo); }
.cal-d.e-cero { background: rgba(160,170,190,.12); border-color: rgba(160,170,190,.45); }
.cal-d.e-sinEntradas { background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.5); } .cal-d.e-sinEntradas .v { color: var(--cielo); font-weight: 600; }
.cal-d.e-sinApuntar { background: transparent; border: 1.5px dashed var(--borde2); color: var(--tenue); }
.cal-d.e-pendiente { background: transparent; border: 1.5px dashed rgba(245,185,66,.6); }
.cal-d.e-futuro, .cal-d.e-antes { background: transparent; border-color: transparent; color: var(--apagado); opacity: .45; }
.cal-d.es-hoy { box-shadow: 0 0 0 2px var(--oro), 0 0 14px rgba(245,185,66,.35); }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: .74rem; color: var(--tenue); }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.cal-leyenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; border: 1px solid var(--borde2); }
.cal-leyenda i.e-positivo { background: rgba(46,216,118,.5); border-color: var(--verde); } .cal-leyenda i.e-negativo { background: rgba(242,84,75,.5); border-color: var(--rojo); }
.cal-leyenda i.e-cero { background: rgba(160,170,190,.35); } .cal-leyenda i.e-sinEntradas { background: rgba(34,211,238,.35); border-color: var(--cielo); }
.cal-leyenda i.e-sinApuntar { background: transparent; border-style: dashed; }
.cal-tit { margin: 18px 0 10px; }
.cal-total { margin-top: 14px; line-height: 1.6; font-size: .9rem; }
.cal, .cal-tit { max-width: 620px; margin-left: auto; margin-right: auto; }
.cal-d { aspect-ratio: auto; height: clamp(46px, 11vw, 64px); }
/* logo de La Zona = ZT CUADRADO de Manuel (nunca el círculo: regla de Daniel 11-sep) */
#marca-lazona img, .firma-marcas img[src^="marca-lazona"] { border-radius: 10px; }