/* =============================================================================
   Puente ContaPyme — sistema visual
   -----------------------------------------------------------------------------
   Todo claro. La jerarquia no la da el color de fondo sino la elevacion: el
   lienzo es el tono mas bajo, la barra lateral y las tarjetas son blancas, y
   lo que esta "encima" (tarjetas, modales) tiene sombra. El acento bronce es
   el mismo del diagnostico del cliente, para que la aplicacion y los
   documentos se lean como una sola cosa.

   La barra lateral vive en los tokens --side-* de aqui abajo. Nada mas depende
   de eso: cambiarlos la vuelve oscura otra vez sin tocar ninguna regla.
   ========================================================================== */

:root{
  /* superficie */
  --canvas:    #f5f4f0;
  --surface:   #ffffff;
  --surface-2: #fbfaf7;
  --surface-3: #f2efe9;
  --line:      #e6e1d7;
  --hairline:  #f0ece4;

  /* tinta */
  --ink:       #1a1712;
  --muted:     #5d574c;
  --dim:       #8a8276;

  /* acento bronce — el mismo del diagnostico */
  --oro:       #a97c1e;
  --oro-2:     #c9a24a;
  --oro-deep:  #6f4f0d;
  --wash:      rgba(169,124,30,.07);
  --edge:      rgba(169,124,30,.24);
  --grad:      linear-gradient(135deg, var(--oro-deep), var(--oro-2));

  /* severidad — nunca decorativa, siempre significa algo */
  --verde:      #1f7a44;
  --verde-wash: #edf6f1;
  --verde-edge: rgba(31,122,68,.22);
  --amber:      #96670f;
  --amber-wash: #fdf6e7;
  --amber-edge: rgba(150,103,15,.24);
  --rojo:       #b0372a;
  --rojo-wash:  #fcf1ef;
  --rojo-edge:  rgba(176,55,42,.22);
  --azul:       #2b6cab;
  --azul-wash:  #eef4fa;
  --azul-edge:  rgba(43,108,171,.22);

  /* barra lateral — clara, apenas un tono por debajo del lienzo para que se
     lea como una superficie propia sin partir la pantalla en dos */
  --side:       #ffffff;
  --side-hover: #f4f1ea;
  --side-line:  #e6e1d7;
  --side-text:  #5d574c;
  --side-fuerte:#1a1712;
  --side-tenue: #a09889;

  /* elevacion */
  --sh-1: 0 1px 2px rgba(26,23,18,.05);
  --sh-2: 0 1px 2px rgba(26,23,18,.04), 0 4px 14px rgba(26,23,18,.05);
  --sh-3: 0 2px 6px rgba(26,23,18,.06), 0 16px 40px rgba(26,23,18,.10);
  --sh-oro: 0 4px 18px rgba(169,124,30,.28);

  --r:   14px;
  --r-s: 9px;
  --side-w: 244px;

  --f: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-d: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-m: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0 }
/* .grid y .fila fijan display, y eso le gana al display:none que trae [hidden]
   por defecto: sin esto, ocultar un bloque de campos no hace nada. */
[hidden]{ display:none !important }

html{ -webkit-text-size-adjust:100% }
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--f); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--oro-deep); text-decoration:none }
a:hover{ text-decoration:underline }
::selection{ background:var(--edge); color:var(--ink) }

/* ---------------------------------------------------------------- shell -- */

.shell{ display:flex; min-height:100vh }

.side{
  width:var(--side-w); flex:0 0 var(--side-w);
  background:var(--side); color:var(--side-text);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  border-right:1px solid var(--side-line);
  transition:width .22s cubic-bezier(.4,0,.2,1), flex-basis .22s cubic-bezier(.4,0,.2,1);
  z-index:50;
}
.side::after{ /* hilo de acento arriba del borde: marca la barra sin una linea dura */
  content:''; position:absolute; top:0; right:-1px; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--oro-2), transparent 42%); opacity:.55;
}
.shell.plegado .side{ width:74px; flex-basis:74px }

.side .marca{
  display:flex; align-items:center; gap:11px;
  padding:19px 18px; border-bottom:1px solid var(--side-line);
  min-height:65px;
}
.side .logo{
  width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  background:var(--grad); box-shadow:var(--sh-oro);
  display:grid; place-items:center;
  font-family:var(--f-d); font-weight:700; font-size:15px; color:#17130a;
}
.side .marca .txt{ min-width:0; overflow:hidden; white-space:nowrap }
.side .marca b{ display:block; font-family:var(--f-d); font-size:14.5px; color:var(--side-fuerte); letter-spacing:-.01em }
.side .marca span{ display:block; font-size:11px; color:var(--side-tenue); letter-spacing:.04em }
.shell.plegado .side .marca .txt{ display:none }

.side nav{ padding:13px 11px; display:flex; flex-direction:column; gap:2px; flex:1;
           overflow-y:auto; overflow-x:hidden }
.side .grupo{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--side-tenue); padding:15px 10px 6px;
}
.shell.plegado .side .grupo{ opacity:0; height:14px; padding:6px 0 0 }

.side nav a{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:9px;
  color:var(--side-text); font-size:13.8px; font-weight:500;
  white-space:nowrap; position:relative;
  transition:background .15s, color .15s;
}
.side nav a:hover{ background:var(--side-hover); color:var(--side-fuerte); text-decoration:none }
.side nav a svg{ width:18px; height:18px; flex:0 0 18px; stroke-width:1.7; opacity:.82 }
.side nav a.on{
  background:linear-gradient(90deg, rgba(169,124,30,.13), rgba(169,124,30,.03));
  color:var(--oro-deep); font-weight:600;
}
.side nav a.on svg{ opacity:1; color:var(--oro) }
.side nav a.on::before{
  content:''; position:absolute; left:-11px; top:50%; transform:translateY(-50%);
  width:3px; height:19px; border-radius:0 3px 3px 0; background:var(--oro);
}
.shell.plegado .side nav a .et{ display:none }
.shell.plegado .side nav a{ justify-content:center; padding:10px 0 }

.side .pie{ padding:11px; border-top:1px solid var(--side-line) }
.side .usuario{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:9px; min-width:0 }
.side .avatar{
  width:31px; height:31px; flex:0 0 31px; border-radius:50%;
  background:var(--wash); border:1px solid var(--edge);
  display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--oro-deep);
}
.side .usuario .txt{ min-width:0; flex:1; overflow:hidden }
.side .usuario b{ display:block; font-size:12.8px; color:var(--side-fuerte); white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.side .usuario span{ display:block; font-size:11px; color:var(--side-tenue) }
.shell.plegado .side .usuario .txt, .shell.plegado .side .usuario .salir{ display:none }
.side .salir{
  background:transparent; border:1px solid var(--side-line); color:var(--dim);
  border-radius:7px; padding:5px 8px; cursor:pointer; font-size:11.5px;
}
.side .salir:hover{ background:var(--side-hover); color:var(--ink) }

.plegar{
  position:absolute; top:74px; right:-11px; width:22px; height:22px;
  border-radius:50%; background:var(--surface); border:1px solid var(--line);
  color:var(--dim); display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--sh-2); z-index:2; padding:0; transition:transform .2s;
}
.plegar:hover{ color:var(--oro); border-color:var(--edge) }
.shell.plegado .plegar svg{ transform:rotate(180deg) }
.plegar svg{ width:13px; height:13px; transition:transform .22s }

.canvas{ flex:1; min-width:0; display:flex; flex-direction:column }

/* --------------------------------------------------------------- topbar -- */

.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(245,244,240,.82); backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);
  padding:0 26px; min-height:64px;
  display:flex; align-items:center; gap:16px;
}
.topbar .titulo{ flex:1; min-width:0 }
.topbar .titulo b{ display:block; font-family:var(--f-d); font-size:16px; letter-spacing:-.01em }
.topbar .titulo span{ display:block; font-size:12.2px; color:var(--dim) }
.topbar .acciones{ display:flex; align-items:center; gap:9px }
.menu-movil{ display:none; background:none; border:none; padding:6px; color:var(--ink); cursor:pointer }

.aviso{
  background:linear-gradient(90deg, var(--amber-wash), rgba(253,246,231,.35));
  border-bottom:1px solid var(--amber-edge);
  padding:11px 26px; font-size:12.9px; color:var(--amber);
  display:flex; gap:10px; align-items:flex-start;
}
.aviso svg{ width:16px; height:16px; flex:0 0 16px; margin-top:1px }
.aviso b{ color:var(--oro-deep) }
.aviso a{ color:var(--amber); text-decoration:underline; font-weight:600 }

main{ padding:26px; flex:1; max-width:1420px; width:100% }
.angosto{ max-width:900px }

/* ----------------------------------------------------------- tipografia -- */

h1{ font-family:var(--f-d); font-size:24px; font-weight:700; letter-spacing:-.022em }
h2{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); margin:30px 0 12px }
h3{ font-family:var(--f-d); font-size:15.5px; font-weight:600; letter-spacing:-.01em; margin-bottom:5px }
.sub{ color:var(--muted); font-size:14px; margin:5px 0 20px; max-width:74ch }
.dim{ color:var(--dim); font-size:12.4px }
.muted{ color:var(--muted); font-size:13.6px }
.der{ text-align:right }
.num{ font-variant-numeric:tabular-nums }
.mono{ font-family:var(--f-m); font-size:.87em; letter-spacing:-.01em }

/* ---------------------------------------------------------------- cajas -- */

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; margin-bottom:14px; box-shadow:var(--sh-2);
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.card.oro{ border-left:2px solid var(--oro) }
.card.rojo{ border-left:2px solid var(--rojo) }
.card.verde{ border-left:2px solid var(--verde) }
.card.realza:hover{ box-shadow:var(--sh-3); transform:translateY(-1px) }

.grid{ display:grid; gap:14px }
.g2{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)) }
.g3{ grid-template-columns:repeat(auto-fit,minmax(215px,1fr)) }
.g4{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) }
.fila{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.entre{ display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap }

/* KPI: el numero en degradado y una cinta de acento arriba. */
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:17px 19px; box-shadow:var(--sh-2); position:relative; overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.kpi::before{
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--grad); opacity:.55;
}
.kpi:hover{ box-shadow:var(--sh-3); transform:translateY(-2px) }
.kpi .et{ font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--dim) }
.kpi .v{
  font-family:var(--f-d); font-size:31px; font-weight:700; line-height:1.1; margin-top:7px;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--oro-deep);
}
.kpi .v.verde{ background:linear-gradient(135deg,#146034,#2c9c5c); -webkit-background-clip:text; background-clip:text }
.kpi .v.rojo{ background:linear-gradient(135deg,#8e2c21,#cf5445); -webkit-background-clip:text; background-clip:text }
.kpi .n{ font-size:12.3px; color:var(--dim); margin-top:5px }

/* ------------------------------------------------------------ controles -- */

label.et{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:6px }
input,select,textarea{
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-s);
  padding:9px 11px; font:inherit; font-size:13.7px; outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input:hover,select:hover,textarea:hover{ border-color:#d8d1c3 }
input:focus,select:focus,textarea:focus{ border-color:var(--oro); box-shadow:0 0 0 3px var(--wash) }
input[type=checkbox]{ width:auto; accent-color:var(--oro) }
input:disabled,select:disabled{ background:var(--surface-3); opacity:.7; cursor:not-allowed }
textarea{ resize:vertical; min-height:62px }
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8276' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:30px;
}
.campo{ margin-bottom:12px }

button,.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-s);
  padding:8px 14px; font:inherit; font-size:13.3px; font-weight:550;
  cursor:pointer; white-space:nowrap; box-shadow:var(--sh-1);
  transition:background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
button:hover,.btn:hover{ background:var(--surface-2); border-color:#d8d1c3; box-shadow:var(--sh-2); text-decoration:none }
button:active,.btn:active{ transform:translateY(1px) }
button:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; transform:none }
button svg,.btn svg{ width:15px; height:15px; flex:0 0 15px }

button.pri{ background:var(--grad); border-color:transparent; color:#fffdf7; box-shadow:var(--sh-oro) }
button.pri:hover{ filter:brightness(1.08); box-shadow:0 6px 22px rgba(169,124,30,.36) }
button.ok{ background:var(--verde-wash); border-color:var(--verde-edge); color:var(--verde) }
button.ok:hover{ background:#e3f2ea }
button.mal{ background:var(--rojo-wash); border-color:var(--rojo-edge); color:var(--rojo) }
button.mal:hover{ background:#fbe8e5 }
button.chico{ padding:5px 10px; font-size:12.2px }
button.plano{ background:transparent; border-color:transparent; box-shadow:none }
button.plano:hover{ background:var(--surface-3) }

/* ---------------------------------------------------------------- tabla -- */

.scroll{
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--sh-2);
}
table{ width:100%; border-collapse:collapse; font-size:13.4px }
th{
  text-align:left; font-size:10.3px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--dim); font-weight:700; padding:11px 14px; white-space:nowrap;
  background:var(--surface-2); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:1;
}
td{ padding:12px 14px; border-bottom:1px solid var(--hairline); color:var(--muted); vertical-align:top }
tbody tr{ transition:background .13s }
tbody tr:last-child td{ border-bottom:none }
tbody tr:hover td{ background:var(--surface-2) }
td b,td strong{ color:var(--ink); font-weight:600 }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums }

.tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.4px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  border-radius:999px; padding:3px 9px; white-space:nowrap;
}
.tag.gris{ background:var(--surface-3); color:var(--muted); border:1px solid var(--line) }
.tag.oro{ background:var(--wash); color:var(--oro-deep); border:1px solid var(--edge) }
.tag.verde{ background:var(--verde-wash); color:var(--verde); border:1px solid var(--verde-edge) }
.tag.rojo{ background:var(--rojo-wash); color:var(--rojo); border:1px solid var(--rojo-edge) }
.tag.azul{ background:var(--azul-wash); color:var(--azul); border:1px solid var(--azul-edge) }

/* punto que respira: solo para "la IA esta encendida", nada mas */
.pulso{ width:6px; height:6px; border-radius:50%; background:currentColor; position:relative }
.pulso::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  background:currentColor; opacity:.35; animation:latir 2s ease-out infinite;
}
@keyframes latir{ 0%{transform:scale(.6);opacity:.5} 70%{transform:scale(1.9);opacity:0} 100%{opacity:0} }

/* --------------------------------------------------------------- avisos -- */

.nota{ border-radius:var(--r-s); padding:12px 15px; font-size:13.2px; margin-bottom:12px; line-height:1.55 }
.nota.amber{ background:var(--amber-wash); border:1px solid var(--amber-edge); border-left:3px solid var(--amber); color:var(--amber) }
.nota.rojo{ background:var(--rojo-wash); border:1px solid var(--rojo-edge); border-left:3px solid var(--rojo); color:var(--rojo) }
.nota.verde{ background:var(--verde-wash); border:1px solid var(--verde-edge); border-left:3px solid var(--verde); color:var(--verde) }
.nota ul{ margin:6px 0 0 18px }
.nota li{ margin-bottom:3px }
.nota b{ font-weight:650 }

.vacio{ text-align:center; padding:46px 20px; color:var(--dim); font-size:13.6px }
.vacio svg{ width:34px; height:34px; margin-bottom:11px; opacity:.4; stroke-width:1.3 }

/* --------------------------------------------------------------- toasts -- */

#toast{ position:fixed; right:22px; bottom:22px; z-index:90; display:flex; flex-direction:column; gap:9px }
#toast div{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s);
  padding:12px 16px 12px 15px; font-size:13.2px; max-width:400px; color:var(--ink);
  box-shadow:var(--sh-3); border-left:3px solid var(--dim);
  animation:entra .28s cubic-bezier(.16,1,.3,1);
}
#toast div.mal{ border-left-color:var(--rojo); color:var(--rojo) }
#toast div.bien{ border-left-color:var(--verde); color:var(--verde) }
@keyframes entra{ from{ opacity:0; transform:translateX(14px) scale(.97) } }

/* ---------------------------------------------------------------- modal -- */

.fondo{
  position:fixed; inset:0; background:rgba(26,23,18,.42); backdrop-filter:blur(4px);
  z-index:70; display:flex; align-items:flex-start; justify-content:center;
  padding:40px 18px; overflow-y:auto; animation:aparecer .18s ease;
}
.modal{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  width:100%; max-width:760px; padding:24px 26px; box-shadow:var(--sh-3);
  animation:sube .26s cubic-bezier(.16,1,.3,1);
}
.modal.ancho{ max-width:1120px }
.modal h3{ font-size:17px }
.cerrar{ background:none; border:none; box-shadow:none; color:var(--dim); font-size:22px; line-height:1; padding:0 6px }
.cerrar:hover{ background:none; color:var(--ink) }
@keyframes aparecer{ from{ opacity:0 } }
@keyframes sube{ from{ opacity:0; transform:translateY(14px) scale(.985) } }

/* ---------------------------------------------------------------- login -- */

.login{ min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; overflow:hidden }
.login::before,.login::after{ /* dos halos: dan profundidad sin cargar la pagina */
  content:''; position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none;
}
.login::before{ width:520px; height:520px; top:-190px; right:-140px; background:rgba(201,162,74,.20) }
.login::after{ width:460px; height:460px; bottom:-200px; left:-150px; background:rgba(111,79,13,.13) }
.login .caja{
  position:relative; width:100%; max-width:392px;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:34px 32px; box-shadow:var(--sh-3);
  animation:sube .4s cubic-bezier(.16,1,.3,1);
}
.login .logo{
  width:46px; height:46px; border-radius:13px; margin:0 auto 16px;
  background:var(--grad); box-shadow:var(--sh-oro); display:grid; place-items:center;
  font-family:var(--f-d); font-weight:700; font-size:19px; color:#17130a;
}
.login h1{ text-align:center; font-size:20px }
.login .sub{ text-align:center; margin:6px 0 24px; font-size:13.2px }

/* --------------------------------------------------------------- soltar -- */

.soltar{
  border:1.5px dashed var(--line); border-radius:var(--r); padding:32px 20px;
  text-align:center; color:var(--muted); cursor:pointer; background:var(--surface-2);
  transition:border-color .18s, background .18s, transform .18s;
}
.soltar:hover{ border-color:var(--edge); background:var(--wash) }
.soltar.activo{ border-color:var(--oro); background:var(--wash); transform:scale(1.008) }
.soltar .ico{
  width:44px; height:44px; margin:0 auto 12px; border-radius:13px;
  background:var(--wash); border:1px solid var(--edge); color:var(--oro);
  display:grid; place-items:center;
}
.soltar .ico svg{ width:21px; height:21px }
.soltar b{ display:block; font-family:var(--f-d); font-size:15px; color:var(--ink); margin-bottom:3px }
.soltar span{ font-size:13px }

.miniatura{
  width:48px; height:48px; object-fit:cover; border-radius:9px;
  border:1px solid var(--line); cursor:zoom-in; background:var(--surface-3);
  transition:transform .16s, box-shadow .16s;
}
.miniatura:hover{ transform:scale(1.06); box-shadow:var(--sh-2) }
.soporte{ max-width:100%; border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--sh-2) }

/* barra de confianza de la lectura */
.confianza{ height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin-top:6px }
.confianza i{ display:block; height:100%; border-radius:99px; background:var(--grad); transition:width .5s cubic-bezier(.16,1,.3,1) }
.confianza.baja i{ background:linear-gradient(135deg,#8e2c21,#d06a5a) }

/* ------------------------------------------------------------- entradas -- */
/* Las tarjetas y las filas entran escalonadas. Es lo unico que se anima solo:
   da sensacion de que la pantalla se arma, sin retrasar la lectura. */
@keyframes surge{ from{ opacity:0; transform:translateY(7px) } }
main .card, main .kpi, main .scroll{ animation:surge .34s cubic-bezier(.16,1,.3,1) both }
main .kpi:nth-child(2){ animation-delay:.04s }
main .kpi:nth-child(3){ animation-delay:.08s }
main .kpi:nth-child(4){ animation-delay:.12s }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width:900px){
  .side{
    position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%);
    transition:transform .24s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 50px rgba(26,23,18,.22);
  }
  .shell.abierto .side{ transform:none }
  .plegar{ display:none }
  .menu-movil{ display:grid; place-items:center }
  .menu-movil svg{ width:21px; height:21px }
  .topbar{ padding:0 16px }
  .aviso{ padding:10px 16px }
  main{ padding:18px 16px 40px }
  .velo{ position:fixed; inset:0; background:rgba(26,23,18,.4); z-index:45; animation:aparecer .2s }
}