/* =============================================================
   Salón · palo rosa y dorado
   Misma idea del HTML de Análisis: fondo con luces que se mueven,
   barra flotante de pestañas y tarjetas de vidrio.
   ============================================================= */

:root, :root[data-tema="oscuro"] {
  --fondo: #160b10;
  --tarjeta: rgba(52, 24, 34, .62);
  --tarjeta2: rgba(72, 33, 47, .55);
  --tarjeta-solida: #2a1520;
  --linea: rgba(243, 214, 211, .14);
  --linea2: rgba(243, 214, 211, .28);
  --texto: #fff6f3;
  --texto2: #ebd3cf;
  --texto3: #be9c9f;
  --rosa: #d9a3a6;
  --rosa-txt: #f0c7c7;
  --oro: #d4af6a;
  --oro-txt: #e8c98c;
  --grad-rosa: linear-gradient(135deg, #a8606d 0%, #d49ba2 100%);
  --grad-oro: linear-gradient(135deg, #b8893b 0%, #e6c27e 55%, #f3ddaa 100%);
  --grad-titulo: linear-gradient(95deg, #fff6f3 0%, #f3d6d3 45%, #e8c98c 100%);
  --en-oro: #2b1218;
  --ok: #9fe3c4;
  --mal: #ff9daa;
  --aviso: #f2d49b;
  --serie-ing: #b98b30;
  --serie-egr: #b56e9f;
  --pista: rgba(185, 139, 48, .22);
  --campo: rgba(18, 7, 11, .55);
  --capa: rgba(10, 4, 7, .74);
  --sombra: 0 18px 50px -24px rgba(0, 0, 0, .85);
  --grano: .14;
  --letra: "Outfit", system-ui, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  color-scheme: dark;
}

:root[data-tema="claro"] {
  --fondo: #fbf4f0;
  --tarjeta: rgba(255, 255, 255, .74);
  --tarjeta2: rgba(255, 250, 247, .88);
  --tarjeta-solida: #fff9f6;
  --linea: rgba(122, 62, 74, .14);
  --linea2: rgba(122, 62, 74, .26);
  --texto: #3a1c24;
  --texto2: #694650;
  --texto3: #86646b;
  --rosa: #c98a93;
  --rosa-txt: #9c4f5e;
  --oro: #c9a25a;
  --oro-txt: #8a6420;
  --grad-rosa: linear-gradient(135deg, #b76e79 0%, #d9a0a8 100%);
  --grad-oro: linear-gradient(135deg, #c49548 0%, #e5c285 55%, #f2dcab 100%);
  --grad-titulo: linear-gradient(95deg, #5a2a35 0%, #9c4f5e 50%, #a8803a 100%);
  --en-oro: #3a1c24;
  --ok: #23744f;
  --mal: #c0475a;
  --aviso: #8a5f12;
  --serie-ing: #b8862a;
  --serie-egr: #a0507e;
  --pista: rgba(184, 134, 42, .18);
  --campo: rgba(255, 255, 255, .92);
  --capa: rgba(70, 30, 40, .46);
  --sombra: 0 18px 50px -26px rgba(90, 40, 50, .45);
  --grano: .07;
  color-scheme: light;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto);
  font: 400 15.5px/1.55 var(--letra); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit }
input, textarea { caret-color: var(--oro) }
::selection { background: rgba(212, 175, 106, .38); color: var(--texto) }
a { color: var(--rosa-txt) }
[hidden] { display: none !important }

/* ---------- fondo que se mueve ---------- */
.cielo { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: linear-gradient(165deg, #120709 0%, #1f0d14 45%, #2c1420 100%) }
:root[data-tema="claro"] .cielo { background: linear-gradient(165deg, #fff8f5 0%, #fbede9 50%, #f6e2dc 100%) }
.cielo i { position: absolute; border-radius: 50%; will-change: transform; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1) }
.o1 { width: 95vmax; height: 95vmax; right: -38vmax; bottom: -45vmax; background: radial-gradient(circle, rgba(176, 96, 112, .42) 0%, rgba(150, 80, 96, .18) 38%, transparent 66%); transform: translate(calc(var(--s, 0) * -30vw), calc(var(--s, 0) * -40vh)) }
.o2 { width: 80vmax; height: 80vmax; right: -30vmax; top: -42vmax; background: radial-gradient(circle, rgba(110, 36, 58, .85) 0%, rgba(110, 36, 58, .35) 40%, transparent 68%); transform: translate(calc(var(--s, 0) * -20vw), calc(var(--s, 0) * 30vh)) }
.o3 { width: 46vmax; height: 46vmax; right: -10vmax; bottom: -16vmax; background: radial-gradient(circle, rgba(212, 175, 106, .20) 0%, rgba(212, 175, 106, .08) 35%, transparent 68%); transform: translate(calc(var(--s, 0) * -45vw), calc(var(--s, 0) * -50vh)) }
.o4 { width: 70vmax; height: 70vmax; left: -35vmax; top: -20vmax; background: radial-gradient(circle, rgba(80, 26, 44, .75) 0%, transparent 65%); transform: translate(calc(var(--s, 0) * 18vw), calc(var(--s, 0) * 50vh)) }
:root[data-tema="claro"] .o1 { background: radial-gradient(circle, rgba(230, 170, 178, .45) 0%, rgba(230, 170, 178, .16) 40%, transparent 66%) }
:root[data-tema="claro"] .o2 { background: radial-gradient(circle, rgba(243, 214, 170, .55) 0%, rgba(243, 214, 170, .2) 40%, transparent 68%) }
:root[data-tema="claro"] .o3 { background: radial-gradient(circle, rgba(214, 160, 170, .32) 0%, transparent 66%) }
:root[data-tema="claro"] .o4 { background: radial-gradient(circle, rgba(250, 222, 212, .85) 0%, transparent 65%) }
.grano { position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: var(--grano); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") }

/* ---------- barra flotante de pestañas ---------- */
.barra { position: fixed; top: 12px; left: 0; right: 0; margin: 0 auto; width: fit-content; z-index: 40; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
  background: rgba(60, 26, 40, .40); border: 1px solid var(--linea2);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 12px 40px -18px rgba(0, 0, 0, .7) }
:root[data-tema="claro"] .barra { background: rgba(255, 255, 255, .62); box-shadow: 0 12px 40px -22px rgba(120, 60, 70, .45) }
.barra::-webkit-scrollbar { display: none }
.tab { flex: none; padding: 9px 15px; border-radius: 999px; border: 0; background: transparent; color: var(--texto2); font: 500 14px/1 var(--letra); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s }
.tab:hover { background: rgba(217, 163, 166, .22); color: var(--texto) }
.tab[aria-selected="true"] { background: var(--grad-rosa); color: #fff; box-shadow: 0 6px 22px -6px rgba(201, 120, 135, .9), inset 0 1px 0 rgba(255, 255, 255, .25) }
.tab .cuenta { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; font-size: 11px; background: var(--grad-oro); color: var(--en-oro) }
.tema { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--texto2); cursor: pointer; font-size: 16px; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease }
.tema:hover { background: rgba(212, 175, 106, .2); color: var(--texto) }
@media (max-width: 1040px) { .tab { padding: 9px 11px } }
@media (max-width: 760px) { .tab { padding: 8px 10px; font-size: 13.5px } }

/* ---------- estructura ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px }
main.wrap { padding-top: 84px; padding-bottom: 120px }
@media (max-width: 640px) { .wrap { padding: 0 16px } }
.panel { display: none }
.panel.on { display: block; animation: entrar .16s ease-out }
@keyframes entrar { from { opacity: 0 } to { opacity: 1 } }

.cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; margin: 22px 0 22px }
.cabeza h1 { margin: 0; font: 500 clamp(30px, 3.8vw, 42px)/1.08 var(--letra); letter-spacing: -.025em;
  background: var(--grad-titulo); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em }
.cabeza .sub { margin: 6px 0 0; color: var(--texto2); font-size: 15px }
.cabeza .acciones { display: flex; flex-wrap: wrap; gap: 8px }

.sh { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 34px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linea) }
.sh h2 { margin: 0; font: 500 21px/1.25 var(--letra); letter-spacing: -.025em; color: var(--texto) }
.sh .orn { color: var(--oro); font-size: 14px }
.sh .extra { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap }
.sh .pg { font: 500 12.5px/1 var(--letra); color: var(--texto3) }

p { margin: 0 0 10px } p:last-child { margin-bottom: 0 }
b, strong { font-weight: 600 }
.t2 { color: var(--texto2) } .t3 { color: var(--texto3) }
.oro-txt { color: var(--oro-txt) } .rosa-txt { color: var(--rosa-txt) }
.ok-txt { color: var(--ok) } .mal-txt { color: var(--mal) } .aviso-txt { color: var(--aviso) }
.num { font-variant-numeric: tabular-nums }
.der { text-align: right }
.chico { font-size: 13px }
.nowrap { white-space: nowrap }

/* ---------- tarjetas y rejillas ---------- */
.card { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px; padding: 20px 22px; margin: 0 0 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) }
.card h3 { margin: 0 0 4px; font: 600 16.5px/1.3 var(--letra); letter-spacing: -.02em }
.card .card-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap }
.card .card-cab h3 { margin: 0 }
.g2, .g3, .g4 { display: grid; gap: 14px; margin: 0 0 14px }
.g2 { grid-template-columns: 1fr 1fr } .g3 { grid-template-columns: repeat(3, 1fr) } .g4 { grid-template-columns: repeat(4, 1fr) }
.g2 > .card, .g3 > .card, .g4 > .card { margin: 0 }
.g-auto { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 0 0 14px }
.g-auto > .card { margin: 0 }
/* tarjetas de agentes: tantas columnas como agentes (hasta 3) para que no queden huecos */
.g-agentes { display: grid; gap: 14px; margin: 0 0 14px }
.g-agentes > .card { margin: 0 }
.g-agentes.c1 { grid-template-columns: minmax(0, 1fr) }
.g-agentes.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.g-agentes.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
@media (max-width: 1000px) { .g-agentes.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 680px) { .g-agentes.c2, .g-agentes.c3 { grid-template-columns: minmax(0, 1fr) } }
.lado { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; align-items: start }
@media (max-width: 1000px) { .g4 { grid-template-columns: 1fr 1fr } .lado { grid-template-columns: 1fr } }
@media (max-width: 760px) { .g2, .g3 { grid-template-columns: 1fr } }
@media (max-width: 460px) { .g4 { grid-template-columns: 1fr } }

/* ---------- cifras (KPI) ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 0 0 14px }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 680px) { .kpis { grid-template-columns: 1fr 1fr } }
.kpi { position: relative; padding: 16px 18px; border-radius: 18px; background: var(--tarjeta); border: 1px solid var(--linea); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden }
.kpi.destacado { background: linear-gradient(150deg, rgba(185, 139, 48, .28), rgba(52, 24, 34, .62) 70%); border-color: rgba(232, 201, 140, .35) }
:root[data-tema="claro"] .kpi.destacado { background: linear-gradient(150deg, rgba(232, 201, 140, .45), rgba(255, 255, 255, .8) 70%) }
.kpi .etq { font: 500 13px/1.3 var(--letra); color: var(--texto2) }
.kpi .valor { font: 500 clamp(24px, 2.6vw, 31px)/1.1 var(--letra); letter-spacing: -.035em; margin: 8px 0 4px; color: var(--texto) }
.kpi .pie { font-size: 12.5px; color: var(--texto3) }
.kpis.dos { grid-template-columns: repeat(2, 1fr) }
.kpis.tres { grid-template-columns: repeat(3, 1fr) }
.kpis.cuatro { grid-template-columns: repeat(4, 1fr) }
@media (max-width: 760px) { .kpis.tres, .kpis.cuatro { grid-template-columns: 1fr 1fr } }
@media (max-width: 460px) { .kpis.dos, .kpis.tres { grid-template-columns: 1fr } }
.kpi.boton { cursor: pointer; transition: border-color .2s, transform .2s }
.kpi.boton:hover { border-color: var(--linea2); transform: translateY(-1px) }
.heroe { font: 500 clamp(40px, 6vw, 56px)/1 var(--letra); letter-spacing: -.045em }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 500 14px/1 var(--letra); padding: 11px 18px; border-radius: 999px; cursor: pointer; color: var(--texto);
  border: 1px solid var(--linea2); background: rgba(217, 163, 166, .14); text-decoration: none; transition: background-color .15s ease, box-shadow .15s ease, transform .16s var(--ease-out), border-color .15s ease; white-space: nowrap }
.btn:hover { background: var(--grad-rosa); color: #fff; border-color: transparent; box-shadow: 0 8px 24px -10px rgba(201, 120, 135, .95); transform: translateY(-1px) }
.btn:active { transform: scale(.97); transition-duration: .1s }
.btn.oro { background: var(--grad-oro); color: var(--en-oro); border-color: transparent; font-weight: 600; box-shadow: 0 8px 26px -12px rgba(212, 175, 106, .9) }
.btn.oro:hover { filter: brightness(1.06); box-shadow: 0 10px 30px -10px rgba(212, 175, 106, 1); color: var(--en-oro) }
.btn.ghost { background: transparent }
.btn.ghost:hover { background: rgba(217, 163, 166, .2); color: var(--texto); box-shadow: none }
.btn.peligro { background: transparent; border-color: rgba(255, 157, 170, .45); color: var(--mal) }
.btn.peligro:hover { background: rgba(255, 157, 170, .16); color: var(--mal); box-shadow: none }
.btn.chico { padding: 7px 12px; font-size: 13px }
.btn[disabled] { opacity: .45; pointer-events: none }
.btn.wa { border-color: rgba(159, 227, 196, .4) }
.btn.wa:hover { background: rgba(159, 227, 196, .18); color: var(--texto); box-shadow: none }
.icono { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--texto2); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; font-size: 15px; flex: none }
.icono:hover { background: rgba(217, 163, 166, .22); color: var(--texto) }

/* ---------- chips y segmentos ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1.2 var(--letra); padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--linea); color: var(--texto2); white-space: nowrap }
:root[data-tema="claro"] .chip { background: rgba(255, 255, 255, .7) }
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent) }
.chip.mal { color: var(--mal); border-color: color-mix(in srgb, var(--mal) 45%, transparent) }
.chip.aviso { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 45%, transparent) }
.chip.rosa { color: var(--rosa-txt); border-color: color-mix(in srgb, var(--rosa) 50%, transparent) }
.chip.oro { color: var(--oro-txt); border-color: color-mix(in srgb, var(--oro) 50%, transparent) }
.chip .punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor }
button.chip { cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease }
button.chip:hover { background: rgba(217, 163, 166, .22); color: var(--texto) }
button.chip.on { background: var(--grad-rosa); color: #fff; border-color: transparent }

.seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(60, 26, 40, .35); border: 1px solid var(--linea) }
:root[data-tema="claro"] .seg { background: rgba(255, 255, 255, .6) }
.seg button { padding: 8px 15px; border-radius: 999px; border: 0; background: transparent; color: var(--texto2); font: 500 13.5px/1 var(--letra); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; white-space: nowrap }
.seg button:hover { background: rgba(217, 163, 166, .22); color: var(--texto) }
.seg button.on { background: var(--grad-rosa); color: #fff; box-shadow: 0 6px 18px -8px rgba(201, 120, 135, .9) }
.seg.ancho { display: flex; width: 100% }
.seg.ancho button { flex: 1 }
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px }
.navper { display: inline-flex; align-items: center; gap: 6px }
.navper .lbl { min-width: 150px; text-align: center; font-weight: 500; color: var(--texto) }
.navper .ir-fecha { display: none }
.navper button.lbl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; background: transparent; padding: 8px 12px; border-radius: 12px; cursor: pointer; transition: background-color .15s ease }
.navper button.lbl::after { content: ''; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--texto3); border-bottom: 2px solid var(--texto3); transform: rotate(45deg) }
.navper button.lbl:hover { background: rgba(217, 163, 166, .16) }
.navper button.lbl:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px }

/* ---------- avisos ---------- */
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-radius: 16px; margin: 0 0 16px; background: linear-gradient(120deg, rgba(212, 175, 106, .22), rgba(169, 96, 109, .18)); border: 1px solid rgba(232, 201, 140, .35) }
.banner p { margin: 0; flex: 1 1 280px; color: var(--texto2); font-size: 14.5px }
.banner b { color: var(--texto) }
.alertas { display: grid; gap: 8px }
.alerta { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: var(--tarjeta2); border: 1px solid var(--linea); font-size: 14px }
.alerta .ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: rgba(242, 212, 155, .16); color: var(--aviso) }
.alerta.mal .ic { background: rgba(255, 157, 170, .16); color: var(--mal) }
.alerta.ok .ic { background: rgba(159, 227, 196, .16); color: var(--ok) }
.alerta .txt { flex: 1; color: var(--texto2) }
.alerta .txt b { color: var(--texto) }
.vacio { text-align: center; padding: 30px 16px; color: var(--texto3) }
.vacio .orn { display: block; font-size: 22px; color: var(--oro); margin-bottom: 6px }

/* ---------- listas de filas ---------- */
.lista { display: grid; gap: 8px }
.fila { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--tarjeta2); border: 1px solid var(--linea); cursor: pointer; transition: border-color .2s, background .2s; text-align: left; width: 100%; color: inherit }
.fila:hover { border-color: var(--linea2); background: rgba(217, 163, 166, .12) }
.fila .hora { font: 500 15px/1.15 var(--letra); letter-spacing: -.02em; min-width: 64px }
.fila .hora small { display: block; color: var(--texto3); font-size: 12px; font-weight: 400 }
.fila:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px }
.fila .info { min-width: 0 }
.fila .info .nom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px }
.fila .info b { font-weight: 600; color: var(--texto) }
.fila .info .tel { color: var(--texto3); font-size: 12.5px }
.fila .info .det { display: block; color: var(--texto2); font-size: 13.5px }
.fila .info .ref { display: block; color: var(--texto3); font-size: 12.5px }
.fila .lado-der { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px }
.fila .monto { font: 500 15.5px/1 var(--letra); font-variant-numeric: tabular-nums }
.fila.apagada { background: transparent; border-style: dashed }
.fila.apagada .info b, .fila.apagada .monto { color: var(--texto2) }
.fila.apagada .monto { text-decoration: line-through }
.fila.sin-hora { grid-template-columns: 1fr auto }
@media (max-width: 560px) { .fila { grid-template-columns: auto 1fr; } .fila .lado-der { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center } }

/* ---------- tablas ---------- */
.tw { overflow-x: auto; border-radius: 14px; border: 1px solid var(--linea); background: var(--tarjeta2) }
table { border-collapse: collapse; width: 100%; font-size: 14px }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--linea); white-space: nowrap }
th { font-weight: 500; color: var(--texto2); background: rgba(169, 96, 109, .16); font-size: 13px }
tbody tr:last-child td { border-bottom: 0 }
tbody tr:hover td { background: rgba(217, 163, 166, .07) }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums }
tr.tot td { background: rgba(212, 175, 106, .12); font-weight: 600 }
tr.clic { cursor: pointer }
td .chip { font-size: 12px }
td.envuelve { white-space: normal; min-width: 200px }

/* ---------- formularios ---------- */
.campos { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px 14px }
.campo { grid-column: span 12; display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.campo.c6 { grid-column: span 6 } .campo.c4 { grid-column: span 4 } .campo.c8 { grid-column: span 8 } .campo.c3 { grid-column: span 3 }
@media (max-width: 560px) { .campo.c6, .campo.c4, .campo.c8, .campo.c3 { grid-column: span 12 } .campo.c6.siempre6 { grid-column: span 6 } }
.campo > label, .etiqueta { font: 500 13px/1.3 var(--letra); color: var(--texto2) }
.campo small { color: var(--texto3); font-size: 12.5px }
input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="tel"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], select, textarea {
  width: 100%; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--linea2); background: var(--campo); color: var(--texto); outline: none; transition: border-color .2s, box-shadow .2s; font-size: 15px }
input:focus, select:focus, textarea:focus { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(212, 175, 106, .22) }
textarea { min-height: 76px; resize: vertical }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto3) 50%), linear-gradient(135deg, var(--texto3) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px }
select option { background: var(--tarjeta-solida); color: var(--texto) }
input[type="number"] { font-variant-numeric: tabular-nums }
input::placeholder, textarea::placeholder { color: var(--texto3); opacity: .8 }
.opciones { display: flex; flex-wrap: wrap; gap: 6px }
.opciones label { position: relative; cursor: pointer }
.opciones input { position: absolute; opacity: 0; pointer-events: none }
.opciones span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--linea2); background: rgba(255, 255, 255, .04); color: var(--texto2); font-size: 14px; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease }
.opciones label:hover span { background: rgba(217, 163, 166, .18); color: var(--texto) }
.opciones input:checked + span { background: var(--grad-rosa); color: #fff; border-color: transparent; box-shadow: 0 6px 18px -8px rgba(201, 120, 135, .9) }
.opciones input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px }
.marcar { display: flex; align-items: center; gap: 9px; cursor: pointer; color: var(--texto2); font-size: 14px }
.marcar input { width: 18px; height: 18px; accent-color: #c98a93 }
.bloque { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--linea) }
:root[data-tema="claro"] .bloque { background: rgba(255, 255, 255, .6) }
.bloque + .bloque { margin-top: 12px }
.bloque h4 { margin: 0 0 10px; font: 600 14px/1.3 var(--letra); color: var(--texto) }
.total-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; font-variant-numeric: tabular-nums }
.total-linea.grande { font-size: 18px; font-weight: 600; border-top: 1px solid var(--linea); margin-top: 6px; padding-top: 10px }
.sugerencias { display: grid; gap: 4px; margin-top: 6px; max-height: 210px; overflow: auto }
.sugerencias button { text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--linea); background: var(--tarjeta2); cursor: pointer; transition: background-color .15s ease, border-color .15s ease }
.sugerencias button:hover { border-color: var(--oro) }
.sugerencias button small { color: var(--texto3); margin-left: 6px }
.cli-elegido { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 10px 14px; border-radius: 14px; background: rgba(212, 175, 106, .1); border: 1px solid rgba(232, 201, 140, .4) }
.cli-elegido span { min-width: 0 }
.cli-elegido b, .cli-elegido small { display: block }
.cli-elegido small { color: var(--texto2); font-size: 13px }
.cat-servicios { display: grid; gap: 10px }
.cat-servicios .grupo-t { font: 600 12px/1 var(--letra); letter-spacing: .07em; text-transform: uppercase; color: var(--oro-txt); margin-bottom: 6px }
.servicio-btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linea2); background: rgba(255, 255, 255, .04); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; text-align: left }
.servicio-btn:hover { border-color: var(--rosa) }
.servicio-btn.on { background: var(--grad-rosa); border-color: transparent; color: #fff }
.servicio-btn small { font-size: 12px; color: var(--texto2) }
.servicio-btn.on small { opacity: 1; color: rgba(255, 255, 255, .92) }
.choque { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(242, 212, 155, .12); border: 1px solid rgba(242, 212, 155, .35); color: var(--aviso); font-size: 13.5px }
.dia-mini { display: grid; gap: 4px; margin-top: 8px; font-size: 13px; color: var(--texto2) }
.dia-mini div { display: flex; gap: 8px }
.dia-mini b { min-width: 62px; color: var(--texto) }

/* ---------- desplegables propios (en vez del select del navegador) ---------- */
.desp { position: relative; width: 100%; min-width: 0 }
.desp > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none }
.desp-btn { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 13px; border-radius: 12px; border: 1px solid var(--linea2); background: var(--campo); color: var(--texto); text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s; font-size: 15px }
.desp-btn:hover { border-color: color-mix(in srgb, var(--oro) 55%, var(--linea2)) }
.desp-btn:focus-visible, .desp.abierto .desp-btn { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(212, 175, 106, .22) }
.desp-btn .t, .desp-op .t { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.desp-btn .t b, .desp-op .t b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.desp-btn .t small, .desp-op .t small { color: var(--texto3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.desp-btn.vacio .t b { color: var(--texto3); font-weight: 400 }
.desp-btn .flecha { flex: none; width: 8px; height: 8px; margin: 0 3px 4px; border-right: 2px solid var(--texto3); border-bottom: 2px solid var(--texto3); transform: rotate(45deg); transition: transform .2s, margin .2s }
.desp.abierto .desp-btn .flecha { transform: rotate(-135deg); margin-bottom: -3px }
.desp.chico .desp-btn { min-height: 36px; padding: 4px 10px; font-size: 13.5px; border-radius: 10px }
.desp-lista { position: fixed; z-index: 95; overflow-y: auto; padding: 6px; border-radius: 16px; outline: none; background: var(--tarjeta-solida); border: 1px solid var(--linea2); box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .9); animation: aparecer .18s var(--ease-out) }
:root[data-tema="claro"] .desp-lista { box-shadow: 0 26px 60px -26px rgba(90, 40, 50, .5) }
@keyframes aparecer { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: none } }
.desp-op { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 11px; cursor: pointer; color: var(--texto) }
.desp-op + .desp-op { margin-top: 2px }
.desp-op.activa { background: rgba(217, 163, 166, .16) }
.desp-op[aria-selected="true"] { background: var(--grad-rosa); color: #fff }
.desp-op[aria-selected="true"] .t small { color: rgba(255, 255, 255, .85) }
.desp-op .chulo { flex: none; font-weight: 700 }
.desp-op.deshabilitada { opacity: .45; cursor: default }
.desp-grupo { padding: 10px 12px 5px; font: 600 11.5px/1 var(--letra); letter-spacing: .07em; text-transform: uppercase; color: var(--oro-txt) }
.desp-buscar { margin: 0 0 6px }

/* ---------- inicio: accesos rápidos y agenda ---------- */
.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 0 0 18px }
.accesos.tres { grid-template-columns: repeat(3, 1fr) }
@media (max-width: 860px) { .accesos.tres { grid-template-columns: 1fr } }
/* en el celular los botones de cada sección van de dos en dos y más compactos */
@media (max-width: 560px) {
  .accesos:not(.tres) { grid-template-columns: 1fr 1fr; gap: 10px }
  .accesos:not(.tres) .acceso { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px }
  .accesos:not(.tres) .acceso .ico { width: 38px; height: 38px; border-radius: 12px }
  .accesos:not(.tres) .acceso b { font-size: 15px }
  .accesos:not(.tres) .acceso small { font-size: 12.5px }
}
/* servicios: dos columnas que se acomodan solas para que no queden huecos */
.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start }
.columnas > div { display: grid; gap: 14px }
.columnas .card { margin: 0 }
@media (max-width: 760px) { .columnas { grid-template-columns: 1fr } }
.panel > .accesos:first-child { margin-top: 6px }
.acceso { width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--linea); background: var(--tarjeta); color: var(--texto); text-align: left; cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .2s, border-color .2s, box-shadow .2s }
.acceso:hover { transform: translateY(-2px); border-color: var(--linea2); box-shadow: 0 16px 40px -22px rgba(0, 0, 0, .8) }
.acceso:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px }
.acceso { position: relative }
.acceso .ico { flex: none; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(217, 163, 166, .34), rgba(217, 163, 166, .1)); color: var(--rosa-txt); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14) }
.acceso .ico svg { width: 24px; height: 24px }
.acceso b { display: block; font: 600 17px/1.2 var(--letra); letter-spacing: -.02em }
.acceso small { display: block; margin-top: 4px; color: var(--texto2); font-size: 13.5px }
.acceso.principal { background: var(--grad-oro); border-color: transparent; color: var(--en-oro); box-shadow: 0 14px 36px -18px rgba(212, 175, 106, .95) }
.acceso.principal small { color: var(--en-oro); opacity: .78 }
.acceso.principal .ico { background: rgba(255, 255, 255, .38); color: var(--en-oro) }
.dia-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 20px 2px 8px }
.dia-cab:first-child { margin-top: 2px }
.dia-cab b { font: 600 15px/1.2 var(--letra); color: var(--texto) }
.dia-cab span { font-size: 13px; color: var(--texto3) }
.dia-cab.hoy b { color: var(--oro-txt) }

/* ---------- productos y pagos dentro de la cita ---------- */
.lineas { display: grid; gap: 8px }
.linea-prod { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 8px; align-items: center }
.linea-prod .nombre { min-width: 0; color: var(--texto) }
.linea-prod input { padding: 8px 10px; font-size: 14px }
.desglose { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--linea2); font-size: 13.5px }
.desglose div { display: flex; justify-content: space-between; gap: 10px; color: var(--texto2); font-variant-numeric: tabular-nums }
.desglose b { color: var(--texto); font-weight: 600 }

/* ---------- ventana (modal) ---------- */
.capa { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: var(--capa); opacity: 0; overscroll-behavior: contain; transition: opacity .2s ease }
.capa.on { opacity: 1 }
.modal { width: min(var(--ancho, 560px), 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 22px; background: var(--tarjeta-solida); border: 1px solid var(--linea2); box-shadow: var(--sombra); transform: translateY(10px); transition: transform .2s var(--ease-out); overflow: hidden }
.capa.on .modal { transform: none; transition-duration: .26s }
.modal > header { display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--linea) }
.modal > header h3 { margin: 0; flex: 1; font: 500 21px/1.2 var(--letra); letter-spacing: -.015em; background: var(--grad-titulo); -webkit-background-clip: text; background-clip: text; color: transparent }
.modal > header .x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; cursor: pointer; font-size: 19px; line-height: 1; color: var(--texto2) }
.modal > header .x:hover { background: rgba(217, 163, 166, .2) }
.modal .cuerpo { padding: 18px 20px; overflow-y: auto; overscroll-behavior: contain }
.modal > footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--linea) }
.modal > footer .izq { margin-right: auto }
@media (max-width: 560px) {
  .capa { padding: 0; place-items: end center }
  .modal { max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; transform: translateY(100%); transition: transform .2s var(--ease-drawer) }
  .capa.on .modal { transition-duration: .34s }
}

/* ---------- avisos flotantes ---------- */
#avisos { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100% - 32px) }
.toast { padding: 11px 18px; border-radius: 999px; background: var(--tarjeta-solida); border: 1px solid var(--linea2); box-shadow: var(--sombra); font-size: 14px; animation: subir .26s var(--ease-out) }
.toast.ok { border-color: color-mix(in srgb, var(--ok) 55%, transparent) }
.toast.mal { border-color: color-mix(in srgb, var(--mal) 55%, transparent) }
.toast.fuera { opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease }
@keyframes subir { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes bajar { from { opacity: 0; transform: translateY(-12px) } to { opacity: 1; transform: none } }

/* ---------- gráficos ---------- */
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--texto2) }
.leyenda span { display: inline-flex; align-items: center; gap: 7px }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block }
.grafico { position: relative; width: 100%; min-height: 230px; margin-top: 10px }
.grafico svg { display: block; overflow: visible }
.grafico .rejilla line { stroke: var(--linea); stroke-width: 1 }
.grafico .ejes text { fill: var(--texto3); font: 400 11.5px var(--letra); font-variant-numeric: tabular-nums }
.grafico .golpe { fill: transparent; cursor: default; outline: none }
.grafico .golpe:hover + g rect, .grafico .golpe:focus + g rect { filter: brightness(1.18) }
.grafico .golpe:focus-visible { stroke: var(--oro); stroke-width: 1.5 }
.tip { position: absolute; z-index: 5; pointer-events: none; min-width: 150px; padding: 10px 12px; border-radius: 12px; background: var(--tarjeta-solida); border: 1px solid var(--linea2); box-shadow: var(--sombra); font-size: 13px; opacity: 0; transition: opacity .12s }
.tip.on { opacity: 1 }
.tip .tt { color: var(--texto3); font-size: 12px; margin-bottom: 6px }
.tip .tr { display: flex; align-items: center; gap: 8px; margin-top: 3px }
.tip .tr i { width: 12px; height: 2px; border-radius: 2px; display: inline-block }
.tip .tr b { font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums }
.tip .tr span { color: var(--texto2) }
.ver-numeros { margin-top: 12px }
.ver-numeros summary { cursor: pointer; color: var(--texto3); font-size: 13px }
.ver-numeros .tw { margin-top: 10px; max-height: 280px; overflow: auto }
.barras-h { display: grid; gap: 12px }
.barra-h .fila-t { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 6px }
.barra-h .fila-t span { color: var(--texto2) }
.barra-h .fila-t b { font-weight: 600; font-variant-numeric: tabular-nums }
.barra-h .pista { height: 10px; border-radius: 0 4px 4px 0; background: var(--pista); overflow: hidden }
.barra-h .relleno { height: 100%; border-radius: 0 4px 4px 0; background: var(--serie-ing) }
.barra-h small { color: var(--texto3); font-size: 12px }

/* ---------- agenda ---------- */
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 0 16px }
.semana button { padding: 10px 4px; border-radius: 14px; border: 1px solid var(--linea); background: var(--tarjeta2); cursor: pointer; text-align: center; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; color: var(--texto2) }
.semana button:hover { border-color: var(--linea2) }
.semana button b { display: block; font: 500 20px/1.1 var(--letra); color: var(--texto) }
.semana button small { display: block; font-size: 12px }
.semana button.hoy b { color: var(--oro-txt) }
.semana button.on { background: var(--grad-rosa); border-color: transparent; color: #fff }
.semana button.on b { color: #fff }
.semana .marcas { display: flex; justify-content: center; gap: 3px; margin-top: 5px; height: 6px }
.semana .marcas i { width: 5px; height: 5px; border-radius: 50%; background: var(--oro) }
.semana button.on .marcas i { background: #fff }
@media (max-width: 560px) { .semana { gap: 4px } .semana button { padding: 8px 2px } .semana button b { font-size: 17px } }

/* ---------- detalle ---------- */
.detalle-cab { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14.5px }
.datos dt { color: var(--texto3) }
.datos dd { margin: 0; color: var(--texto) }
.progreso { height: 8px; border-radius: 999px; background: var(--pista); overflow: hidden; margin: 8px 0 4px }
.progreso i { display: block; height: 100%; border-radius: 999px; background: var(--grad-oro) }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.cuenta-estado td:first-child { color: var(--texto3) }
.grande-deuda { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px }

/* ---------- factura ---------- */
.zona-subir { display: grid; place-items: center; gap: 8px; padding: 26px 16px; border-radius: 18px; border: 1.5px dashed var(--linea2); background: rgba(255, 255, 255, .03); text-align: center; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease }
.zona-subir:hover, .zona-subir.encima { border-color: var(--oro); background: rgba(212, 175, 106, .08) }
.zona-subir b { font-size: 16px }
.zona-subir small { color: var(--texto3) }
.cargando { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linea2); border-top-color: var(--oro); animation: girar .8s linear infinite; vertical-align: -3px }
@keyframes girar { to { transform: rotate(360deg) } }

/* ---------- ajustes: cada bloque con su icono y para qué sirve ---------- */
.ajustes { display: grid; gap: 14px }
.ajuste { padding: 20px 22px; border-radius: 20px; background: var(--tarjeta); border: 1px solid var(--linea); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px) }
.ajuste-cab { display: flex; align-items: flex-start; gap: 16px }
.ajuste-cab .ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(217, 163, 166, .16); color: var(--rosa-txt) }
.ajuste-cab .ico svg { width: 23px; height: 23px }
.ajuste-txt { flex: 1; min-width: 0 }
.ajuste-txt h3 { margin: 2px 0 4px; font: 600 17px/1.25 var(--letra); letter-spacing: -.02em }
.ajuste-txt p { margin: 0; color: var(--texto2); font-size: 14.5px; max-width: 760px }
.ajuste-cab .estado { flex: none; margin-top: 2px }
.ajuste-cuerpo { margin: 16px 0 0 62px }
.ajuste.peligro .ico { background: rgba(255, 157, 170, .14); color: var(--mal) }
@media (max-width: 640px) {
  .ajuste-cab { flex-wrap: wrap }
  .ajuste-cab .estado { width: 100%; padding-left: 62px }
  .ajuste-cuerpo { margin-left: 0 }
}
details.pasos-det > summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linea2); color: var(--texto); font-size: 14px; font-weight: 500; transition: background .2s }
details.pasos-det > summary:hover { background: rgba(217, 163, 166, .16) }
details.pasos-det > summary::-webkit-details-marker { display: none }
details.pasos-det > summary::after { content: ''; width: 7px; height: 7px; margin: -4px 0 0; border-right: 2px solid var(--texto3); border-bottom: 2px solid var(--texto3); transform: rotate(45deg); transition: transform .2s, margin .2s }
details.pasos-det[open] > summary::after { transform: rotate(-135deg); margin-top: 3px }
details.pasos-det .contenido { margin-top: 14px }
.card-cab h3.con-ico { display: flex; align-items: center; gap: 10px }
.ico-mini { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(217, 163, 166, .16); color: var(--rosa-txt) }
.ico-mini svg { width: 17px; height: 17px }

/* ---------- código ---------- */
pre.codigo { margin: 10px 0 0; padding: 14px; border-radius: 12px; background: var(--campo); border: 1px solid var(--linea); max-height: 260px; overflow: auto; font: 12.5px/1.5 ui-monospace, Consolas, monospace; color: var(--texto2); white-space: pre }
ol.pasos { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 7px; color: var(--texto2); font-size: 14.5px }
ol.pasos b { color: var(--texto) }

.pie-ajustes { margin-top: 28px; text-align: center }
.mas-centro { display: flex; justify-content: center; margin: 14px 0 }
.lista-clientes { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) }
.fila.cliente .lado-der { min-width: 0 }
.fila.cliente .monto { font-weight: 600 }
footer.pie { color: var(--texto3); font-size: 13px; text-align: center; padding: 20px 0 30px }

/* ---------- celular: barra de abajo como una app ---------- */
.barra-movil { display: none }
@media (max-width: 760px) {
  html { scrollbar-width: none }
  .barra { display: none }
  main.wrap { padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: calc(100px + env(safe-area-inset-bottom)) }
  .barra-movil { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 5px; border-radius: 22px;
    background: #2f1623; border: 1px solid var(--linea2); box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .85) }
  :root[data-tema="claro"] .barra-movil { background: #fffaf7; box-shadow: 0 14px 40px -22px rgba(120, 60, 70, .5) }
  .barra-movil button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 54px; justify-content: center; padding: 7px 0 6px; border: 0; border-radius: 17px; background: transparent; color: var(--texto2); font: 500 10.5px/1 var(--letra); cursor: pointer; transition: background .2s, color .2s }
  .barra-movil .ico svg { width: 22px; height: 22px; display: block }
  .barra-movil button.on { background: var(--grad-rosa); color: #fff; box-shadow: 0 6px 18px -8px rgba(201, 120, 135, .9) }
  .barra-movil button:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px }
  #avisos { top: calc(12px + env(safe-area-inset-top)); bottom: auto }
  .toast { animation-name: bajar }
  .toast.fuera { transform: translateY(-8px) }
  .cabeza { margin: 8px 0 16px }
}

/* ---------- tablas que se vuelven tarjetas en pantallas chicas ---------- */
@media (max-width: 640px) {
  .tw.apilar { border: 0; border-radius: 0; background: none; overflow: visible }
  .tw.apilar table, .tw.apilar tbody, .tw.apilar tr, .tw.apilar td { display: block; width: 100% }
  .tw.apilar thead { display: none }
  .tw.apilar tr { margin: 0 0 8px; padding: 11px 14px; border-radius: 14px; background: var(--tarjeta2); border: 1px solid var(--linea) }
  .tw.apilar tr.tot { background: rgba(212, 175, 106, .12) }
  .tw.apilar td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border: 0; white-space: normal; text-align: right; min-width: 0 }
  .tw.apilar td::before { content: attr(data-label); flex: none; color: var(--texto3); font-size: 12.5px; font-weight: 400; text-align: left }
  .tw.apilar td.principal { display: block; text-align: left; padding: 0 0 6px; font-size: 15px }
  .tw.apilar td.principal::before { content: none }
  .tw.apilar td:empty { display: none }
  .tw.apilar tbody tr:hover td { background: none }
  .tw.apilar td .chips { justify-content: flex-end }
}

/* ---------- teléfono: letra grande, todo se toca con el dedo ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none }
button, a, label, summary, [role="button"], .desp-op { touch-action: manipulation }
/* mantener el dedo sobre un botón no selecciona su texto. Los datos de la persona sí se pueden copiar */
button, [role="button"], .tab, .chip, .opciones span, .desp-op, summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }
.fila, .acceso, .kpi.boton, .servicio-btn, .semana button, .opciones span, .barra-movil button, .icono { transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: .15s, .15s, .15s, .15s, .16s; transition-timing-function: ease, ease, ease, ease, var(--ease-out) }
.fila:active, .acceso:active, .kpi.boton:active { transform: scale(.985); transition-duration: .1s }
.servicio-btn:active, .semana button:active, .opciones label:active span, .icono:active, .sugerencias button:active { transform: scale(.96); transition-duration: .1s }
.barra-movil button:active { transform: scale(.94); transition-duration: .1s }

/* el dedo deja pegado el :hover, aquí se apaga */
@media (hover: none) {
  .btn:hover, .acceso:hover, .kpi.boton:hover { transform: none; box-shadow: none }
  .btn:not(.oro, .ghost, .peligro, .wa):hover { background: rgba(217, 163, 166, .14); color: var(--texto); border-color: var(--linea2) }
  .btn.ghost:hover, .btn.wa:hover, .btn.peligro:hover { background: transparent }
  .btn.oro:hover { filter: none }
  .icono:hover, .seg button:not(.on):hover, button.chip:not(.on):hover { background: transparent; color: var(--texto2) }
  .fila:hover { background: var(--tarjeta2); border-color: var(--linea) }
  .opciones label:hover input:not(:checked) + span { background: rgba(255, 255, 255, .04); color: var(--texto2) }
  .acceso:hover { border-color: var(--linea) }
  .acceso.principal:hover { border-color: transparent }
  .servicio-btn:hover { border-color: var(--linea2) }
  .servicio-btn.on:hover { border-color: transparent }
  .zona-subir:hover { border-color: var(--linea2); background: rgba(255, 255, 255, .03) }
  /* el :hover pegado no debe quitar la respuesta al tocar */
  .btn:active { transform: scale(.97) }
  .acceso:active, .kpi.boton:active { transform: scale(.985) }
}

@media (max-width: 760px) {
  :root[data-tema="oscuro"] { --tarjeta: rgba(52, 24, 34, .86); --tarjeta2: rgba(66, 31, 44, .86) }
  :root[data-tema="claro"] { --tarjeta: rgba(255, 255, 255, .9); --tarjeta2: rgba(255, 251, 249, .94) }
  body { min-height: 100dvh; font-size: 16px; line-height: 1.5 }
  .grano { display: none }
  .card, .kpi, .acceso, .ajuste { backdrop-filter: none; -webkit-backdrop-filter: none }
  .card { padding: 16px; border-radius: 16px }

  /* 16px en los campos evita que el iPhone acerque la pantalla al escribir */
  input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="tel"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], select, textarea { min-height: 48px; padding: 12px 14px; font-size: 16px; min-width: 0 }
  input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none }
  textarea { min-height: 84px }
  .linea-prod input { padding: 10px 12px; font-size: 16px }
  .linea-prod { grid-template-columns: minmax(0, 1fr) 136px auto }
  .linea-prod .desp-btn { padding: 7px 10px }
  .campo > label, .etiqueta { font-size: 14px }
  .campo small { font-size: 13.5px }
  .marcar { min-height: 44px; font-size: 15px }
  .marcar input { width: 22px; height: 22px }

  .btn { min-height: 48px; padding: 12px 18px; font-size: 15.5px; white-space: normal; text-align: center; line-height: 1.2 }
  .btn.chico { min-height: 42px; padding: 9px 14px; font-size: 14.5px }
  .icono, .modal > header .x { width: 44px; height: 44px }
  .seg { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none }
  .seg button { flex: 1; min-height: 42px; padding: 9px 6px; font-size: 14.5px }
  .opciones { gap: 8px }
  .opciones label { flex: 1 1 auto }
  .opciones span { display: block; padding: 12px 14px; font-size: 15px; text-align: center }
  .sugerencias { max-height: 260px }
  .sugerencias button { min-height: 50px; padding: 11px 13px }
  .sugerencias button small { display: block; margin-left: 0 }
  .cat-servicios .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .cat-servicios .servicio-btn:last-child:nth-child(odd) { grid-column: 1 / -1 }
  .servicio-btn { width: 100%; min-height: 54px; padding: 9px 14px; font-size: 15px; justify-content: center }
  .servicio-btn small { font-size: 13px }
  .desp-btn { min-height: 48px; font-size: 16px }
  .desp.chico .desp-btn { min-height: 42px; font-size: 15px }
  .desp-op { min-height: 46px }
  button.chip { min-height: 38px; padding: 7px 13px; font-size: 14px }
  .chip { font-size: 13px }

  .cabeza h1 { font-size: 32px }
  .cabeza .sub { font-size: 15.5px }
  .sh { margin-top: 26px }
  .sh h2 { font-size: 19px }
  .fila { gap: 10px 12px; padding: 13px 14px }
  .fila .info .det { font-size: 14.5px }
  .fila .info .tel, .fila .info .ref { font-size: 13.5px }
  .fila .hora small { font-size: 12.5px }
  .kpi { padding: 14px 15px }
  .kpi .etq { font-size: 13.5px }
  .kpi .pie { font-size: 13px }
  .navper { width: 100%; flex-wrap: wrap; justify-content: space-between }
  .navper .lbl { flex: 1 1 calc(100% - 112px); min-width: 0; white-space: nowrap }
  .filtros { gap: 8px }
  .acciones-fila .btn { flex: 1 1 calc(50% - 4px) }
  .acciones-fila .btn.oro { flex-basis: 100% }
  .datos { font-size: 15.5px }
  .toast { border-radius: 16px; text-align: center; font-size: 15px }
}
@media (max-width: 560px) {
  .modal > header { padding: 14px 16px 10px }
  .modal > header h3 { font-size: 22px }
  .modal .cuerpo { padding: 16px }
  .modal > footer { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)) }
  .modal > footer .btn { flex: 1 1 0; padding: 10px 8px }
  .modal > footer .izq { margin: 0 }
}
@media (max-width: 560px) {
  .accesos:not(.tres) > .acceso:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center }
}
@media (max-width: 680px) { .kpis:not(.cuatro) > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1 } }
@media (max-width: 560px) {
  .lista-clientes { grid-template-columns: minmax(0, 1fr) }
  .fila.cliente { grid-template-columns: minmax(0, 1fr) auto }
  .fila.cliente .lado-der { grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px }
}
/* en Caja lo que entró va arriba y lo demás de dos en dos */
@media (max-width: 460px) {
  .kpis.tres.resumen { grid-template-columns: 1fr 1fr }
  .kpis.tres.resumen > .kpi:first-child { grid-column: 1 / -1 }
  .kpis.tres.resumen:not(.x) > .kpi:last-child:nth-child(odd) { grid-column: auto }
}
/* movimientos de Caja: concepto y monto arriba, fecha y método abajo */
@media (max-width: 640px) {
  .tw.apilar.movs tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "c m" "f t"; column-gap: 12px; row-gap: 2px; padding: 10px 14px }
  .tw.apilar.movs td { display: block; padding: 0; text-align: left }
  .tw.apilar.movs td::before { content: none }
  .tw.apilar.movs td:nth-child(1) { grid-area: f; color: var(--texto3); font-size: 13px }
  .tw.apilar.movs td:nth-child(2) { grid-area: c; padding: 0; font-size: 15px }
  .tw.apilar.movs td:nth-child(3) { grid-area: t; color: var(--texto3); font-size: 13px; text-align: right }
  .tw.apilar.movs td:nth-child(4) { grid-area: m; text-align: right; font-weight: 600 }
}
/* cifras de agentes en una tira compacta en el teléfono */
@media (max-width: 760px) {
  .kpis.tira { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px }
  .kpis.tira:not(.x) > .kpi:last-child:nth-child(odd) { grid-column: auto }
  .kpis.tira .kpi { padding: 10px 10px 11px; border-radius: 14px }
  .kpis.tira .etq { font-size: 12px; line-height: 1.25 }
  .kpis.tira .valor { font-size: 18px; margin: 4px 0 0 }
  .kpis.tira .pie { display: none }
}
@media (max-width: 340px) { .barra-movil button { font-size: 9.5px } .barra-movil .ico svg { width: 20px; height: 20px } }

@media (prefers-reduced-motion: reduce) {
  .toast { animation: entrar .16s ease-out }
  .toast.fuera { transform: none }
  .cielo i { transition: none }
  .modal, .capa.on .modal { transform: none; transition: none }
  .desp-lista { animation: entrar .12s ease-out }
  .btn:active, .fila:active, .acceso:active, .kpi.boton:active, .servicio-btn:active, .semana button:active, .opciones label:active span, .icono:active, .sugerencias button:active, .barra-movil button:active { transform: none }
}
@media print {
  .cielo, .grano, .barra, .barra-movil, #avisos { display: none !important }
  body { background: #fff; color: #000 }
}

/* ================= ronda 5: calendario propio, citas, avisos y relieve ================= */

/* relieve suave: luz arriba y sombra con caída, sin brillos de colores */
.card, .kpi, .acceso, .ajuste, .fila { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 30px -24px rgba(0, 0, 0, .9) }
.card { background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 140px) }
:root[data-tema="claro"] .card, :root[data-tema="claro"] .kpi, :root[data-tema="claro"] .acceso, :root[data-tema="claro"] .ajuste, :root[data-tema="claro"] .fila { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 30px -24px rgba(90, 40, 50, .45) }
.acceso.principal { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 16px 34px -18px rgba(212, 175, 106, .9) }
/* flecha que dice «toca aquí» */
.acceso::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .4 }
@media (max-width: 560px) { .accesos:not(.tres) .acceso::after { top: 26px; right: 16px } }

/* botón de fecha con el diseño del sistema */
.fecha-btn { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--linea2); background: var(--campo); color: var(--texto); text-align: left; cursor: pointer; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease }
.fecha-btn svg { width: 18px; height: 18px; flex: none; color: var(--oro-txt) }
.fecha-btn span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fecha-btn.vacio span { color: var(--texto3) }
.fecha-btn:focus-visible, .fecha-btn.abierto { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(212, 175, 106, .22) }
@media (hover: hover) and (pointer: fine) { .fecha-btn:hover { border-color: color-mix(in srgb, var(--oro) 55%, var(--linea2)) } }
@media (max-width: 760px) { .fecha-btn { min-height: 48px; font-size: 16px } }

/* calendario */
.cal { position: fixed; z-index: 96; padding: 12px; border-radius: 20px; background: var(--tarjeta-solida); border: 1px solid var(--linea2); box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .9); animation: aparecer .18s var(--ease-out); outline: none }
:root[data-tema="claro"] .cal { box-shadow: 0 26px 60px -26px rgba(90, 40, 50, .5) }
.cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px }
.cal-cab b { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em }
.cal-sem, .cal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px }
.cal-sem span { text-align: center; font-size: 12.5px; color: var(--texto3); padding: 4px 0 }
.cal .dia { min-height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--texto); font: 500 15px/1 var(--letra); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .12s ease, transform .16s var(--ease-out) }
.cal .dia.fuera { color: var(--texto3) }
.cal .dia.hoy { box-shadow: inset 0 0 0 1.5px var(--oro); color: var(--oro-txt); font-weight: 600 }
.cal .dia.on { background: var(--grad-rosa); color: #fff; box-shadow: 0 6px 16px -8px rgba(201, 120, 135, .9) }
.cal .dia:active { transform: scale(.94); transition-duration: .1s }
.cal .dia:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px }
@media (hover: hover) and (pointer: fine) { .cal .dia:not(.on):hover { background: rgba(217, 163, 166, .16) } }
.cal-pie { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px }

/* citas: hora, quién, qué se hace y a la derecha cuánto y cómo va */
.fila.cita { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 4px 12px; padding: 13px 14px }
.fila.cita .hora { font-weight: 600; font-size: 15px }
.fila.cita .nombre { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fila.cita .det { font-size: 14px }
.fila.cita .lado-der { gap: 6px }
.fila.cita .monto { font-weight: 600 }
@media (max-width: 560px) {
  .fila.cita { grid-template-columns: 60px minmax(0, 1fr) auto }
  .fila.cita .lado-der { grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: center }
}

/* avisos con su color y su icono */
.avisos-lista { display: grid; gap: 10px }
.aviso-n { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; border: 1px solid rgba(232, 201, 140, .3); background: linear-gradient(120deg, rgba(212, 175, 106, .2), rgba(212, 175, 106, .05) 70%); box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .9) }
.aviso-n.mal { border-color: rgba(255, 157, 170, .32); background: linear-gradient(120deg, rgba(255, 157, 170, .2), rgba(255, 157, 170, .05) 70%) }
.aviso-n.ok { border-color: rgba(159, 227, 196, .3); background: linear-gradient(120deg, rgba(159, 227, 196, .16), rgba(159, 227, 196, .04) 70%) }
.aviso-ico { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--grad-oro); color: var(--en-oro); font-size: 20px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4) }
.aviso-n.mal .aviso-ico { background: linear-gradient(140deg, #b8475a, #f08a9b); color: #fff }
.aviso-n.ok .aviso-ico { background: linear-gradient(140deg, #2f8a63, #8fd9b6); color: #0c2a1d }
.aviso-ico svg { width: 22px; height: 22px }
.aviso-txt b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.25; color: var(--texto) }
.aviso-txt small { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.35; color: var(--texto2) }
:root[data-tema="claro"] .aviso-n { background: linear-gradient(120deg, rgba(212, 175, 106, .26), rgba(255, 255, 255, .7) 75%) }
:root[data-tema="claro"] .aviso-n.mal { background: linear-gradient(120deg, rgba(192, 71, 90, .14), rgba(255, 255, 255, .7) 75%) }
:root[data-tema="claro"] .aviso-n.ok { background: linear-gradient(120deg, rgba(47, 138, 99, .14), rgba(255, 255, 255, .7) 75%) }

/* agentes: la empresa y la deuda se leen de lejos */
.card h3.agente-nombre { font-size: 22px; letter-spacing: -.02em }
.debe-etq { font-size: 15px; color: var(--texto2); margin-top: 4px }
.heroe.debe-monto { font-size: 44px; margin: 2px 0 12px }

/* precios en botones al agendar y al completar */
.precios-elegir { display: grid; gap: 12px }
.precios-elegir:empty { display: none }
.precio-elegir { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--linea) }
:root[data-tema="claro"] .precio-elegir { background: rgba(255, 255, 255, .6) }
.resumen-cita { font-size: 14.5px }
.linea-srv { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--linea) }
:root[data-tema="claro"] .linea-srv { background: rgba(255, 255, 255, .6) }
.linea-srv-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.linea-srv-cab b { font-size: 16px; font-weight: 600 }
[data-srv-lineas] { display: grid; gap: 10px }

/* en tema claro el botón elegido mantiene su color */
:root[data-tema="claro"] button.chip.on { background: var(--grad-rosa); color: #fff; border-color: transparent }
:root[data-tema="claro"] .orn { color: var(--oro-txt) }

/* ================= ronda 6: botones más pequeños, ayuda, deshacer y guardado ================= */

/* botones de cada sección: compactos, en fila */
.accesos:not(.tres) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px }
.accesos:not(.tres) .acceso { width: auto; flex: 1 1 190px; flex-direction: row; align-items: center; gap: 10px; min-height: 52px; padding: 9px 14px; border-radius: 14px }
.accesos:not(.tres) .acceso .ico { width: 34px; height: 34px; border-radius: 11px }
.accesos:not(.tres) .acceso .ico svg { width: 18px; height: 18px }
.accesos:not(.tres) .acceso b { font-size: 15px }
.accesos:not(.tres) .acceso small { margin-top: 1px; font-size: 12.5px }
.accesos:not(.tres) .acceso::after { display: none }
@media (max-width: 560px) {
  .accesos:not(.tres) { display: grid; grid-template-columns: 1fr 1fr }
  .accesos:not(.tres) .acceso { flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px }
  .accesos:not(.tres) .acceso .ico { width: 32px; height: 32px; border-radius: 10px }
  .accesos:not(.tres) .acceso b { font-size: 14.5px }
}

/* avisos un poco más pequeños */
.aviso-n { gap: 12px; padding: 11px 12px; border-radius: 16px }
.aviso-ico { width: 38px; height: 38px; border-radius: 12px; font-size: 17px }
.aviso-ico svg { width: 19px; height: 19px }
.aviso-txt b { font-size: 15.5px }
.aviso-txt small { font-size: 13.5px; margin-top: 2px }

/* el ? de cada sección */
.titulo-fila { display: flex; align-items: center; gap: 10px }
.ayuda-btn { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linea2); background: rgba(217, 163, 166, .14); color: var(--rosa-txt); font: 600 15px/1 var(--letra); cursor: pointer; transition: background-color .15s ease, transform .16s var(--ease-out); position: relative }
.ayuda-btn::before { content: ''; position: absolute; inset: -8px }
.ayuda-btn:active { transform: scale(.94) }
@media (hover: hover) and (pointer: fine) { .ayuda-btn:hover { background: rgba(217, 163, 166, .26) } }
.ayuda-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px }
.ayuda-lista li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.45; color: var(--texto) }
.ayuda-lista li::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: .55em; border-radius: 50%; background: var(--grad-oro) }

/* aviso con Deshacer */
.toast.con-boton { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; pointer-events: auto }
.toast .deshacer { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 0; background: var(--grad-oro); color: var(--en-oro); font: 600 14px/1 var(--letra); cursor: pointer }

/* repetir la última cita */
.btn.repetir { margin-top: 8px; white-space: normal; text-align: left; justify-content: flex-start; line-height: 1.3 }

/* señal de guardado */
#guardado { position: fixed; right: 14px; bottom: 18px; z-index: 70; padding: 6px 12px; border-radius: 999px; background: var(--tarjeta-solida); border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); font: 500 13px/1 var(--letra); opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s var(--ease-out); pointer-events: none }
#guardado.on { opacity: 1; transform: none }
#guardado.mal { border-color: color-mix(in srgb, var(--mal) 60%, transparent); color: var(--mal) }
@media (max-width: 760px) { #guardado { right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)) } }
@media (prefers-reduced-motion: reduce) { #guardado { transition: opacity .12s ease; transform: none } }
@media (max-width: 560px) { .accesos:not(.tres) .acceso .ico { width: 30px; height: 30px } .accesos:not(.tres) .acceso small { font-size: 12px } }
#guardado.aviso { border-color: color-mix(in srgb, var(--aviso) 55%, transparent); color: var(--aviso) }

/* ================= pantalla para entrar ================= */
body.sin-sesion .barra, body.sin-sesion .barra-movil, body.sin-sesion main { display: none }
#entrar { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: calc(28px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto }
.entrar-centro { width: min(400px, 100%); display: grid; justify-items: center; gap: 18px; animation: subirEntrada .42s var(--ease-out) both }
@keyframes subirEntrada { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.entrar-logo { width: 104px; height: 104px; border-radius: 30px; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(240, 211, 154, .28) }
.entrar-caja { width: 100%; padding: 24px 20px 22px; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 120px), var(--tarjeta-solida); border: 1px solid var(--linea2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 70px -30px rgba(0, 0, 0, .9) }
.entrar-caja h1 { margin: 0; text-align: center; font: 500 34px/1.1 var(--letra); letter-spacing: -.025em; background: var(--grad-titulo); -webkit-background-clip: text; background-clip: text; color: transparent }
.entrar-caja .sub { margin: 6px 0 20px; text-align: center; color: var(--texto2) }
.entrar-caja .btn.oro { width: 100%; min-height: 52px; font-size: 16.5px }
.instalar-btn { gap: 10px; min-height: 48px }
.instalar-btn svg { width: 19px; height: 19px }
.instalar-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 14px }
.instalar-cab img { flex: none; border-radius: 16px }
.instalar-cab p { margin: 0; color: var(--texto2) }
.instalar-pasos { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.45 }
.instalar-pasos b { color: var(--texto) }
@media (prefers-reduced-motion: reduce) { .entrar-centro { animation: entrar .16s ease-out } }
.clave-caja { position: relative }
.clave-caja input { padding-right: 84px }
.ver-clave { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 0; background: rgba(217, 163, 166, .16); color: var(--texto); font: 500 13.5px/1 var(--letra); cursor: pointer }
.error-entrar { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 157, 170, .14); border: 1px solid rgba(255, 157, 170, .35); color: var(--mal); font-size: 14.5px }