/* BAQUIANO · hoja de estilo del portal
   Pensada primero para el teléfono. Todo lo demás es ampliación. */

:root{
  --ground:#F2F4F8; --lienzo:#FFFFFF; --lienzo-2:#EDF0F6;
  --tinta:#141A33; --apagado:#5B6385; --linea:#DCE0EB; --linea-suave:#E8EBF3;
  --azul:#1F2A63; --naranja:#FF6B1A; --cian:#1FA5DC; --morado:#8B3DD6;
  --bien:#15803D; --bien-f:#E3F4E9; --aviso:#B45309; --aviso-f:#FBF0DB;
  --mal:#B91C1C; --mal-f:#FBE5E5;
  --vidrio:rgba(255,255,255,.72); --sombra:0 1px 2px rgba(20,26,51,.05), 0 10px 30px rgba(20,26,51,.07);
  --radio:14px; --gutter:16px;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --texto:"Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --titulo:"Archivo", var(--texto);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --ground:#080C18; --lienzo:#121829; --lienzo-2:#1A2134;
    --tinta:#E8EBF6; --apagado:#98A0BE; --linea:#262E47; --linea-suave:#1F2639;
    --azul:#93A3EA; --naranja:#FF8A42; --cian:#4FC0EE; --morado:#BB86F0;
    --bien:#5BD98C; --bien-f:#0F2C1D; --aviso:#F0B44F; --aviso-f:#2E220C;
    --mal:#F87171; --mal-f:#301414;
    --vidrio:rgba(18,24,41,.72); --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.4);
  }
}
:root[data-tema="oscuro"]{
  --ground:#080C18; --lienzo:#121829; --lienzo-2:#1A2134;
  --tinta:#E8EBF6; --apagado:#98A0BE; --linea:#262E47; --linea-suave:#1F2639;
  --azul:#93A3EA; --naranja:#FF8A42; --cian:#4FC0EE; --morado:#BB86F0;
  --bien:#5BD98C; --bien-f:#0F2C1D; --aviso:#F0B44F; --aviso-f:#2E220C;
  --mal:#F87171; --mal-f:#301414;
  --vidrio:rgba(18,24,41,.72); --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.4);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--ground); color:var(--tinta);
  font:15px/1.55 var(--texto); -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  min-height:100dvh;
}
h1,h2,h3,h4{ margin:0; font-family:var(--titulo); text-wrap:balance; letter-spacing:-.015em; }
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; }
[hidden]{ display:none !important; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
:focus-visible{ outline:2px solid var(--naranja); outline-offset:2px; border-radius:6px; }

/* ---------- fondo de marca ---------- */
.telon{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.telon::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(48% 46% at 8% -6%, color-mix(in srgb, var(--naranja) 18%, transparent), transparent 70%),
    radial-gradient(52% 50% at 96% 2%, color-mix(in srgb, var(--azul) 20%, transparent), transparent 72%);
}
.telon::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 70%);
  mask-image:linear-gradient(to bottom, #000, transparent 70%);
}
.telon svg{
  position:absolute; right:-14vmin; top:-10vmin; width:62vmin; height:62vmin;
  opacity:.07; transform:rotate(12deg);
}

/* ---------- estructura ---------- */
.marco{ width:min(1120px,100%); margin:0 auto; padding-inline:var(--gutter); padding-block:18px 60px; }

.barra{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  background:var(--vidrio); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea-suave);
}
.barra-in{
  width:min(1120px,100%); margin:0 auto; padding:10px var(--gutter);
  display:flex; align-items:center; gap:12px;
}
.logo{ display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; }
.logo svg{ width:34px; height:34px; flex:none; }
.logo b{ font-family:var(--titulo); font-weight:800; font-size:18px; letter-spacing:-.02em; }
.logo small{ display:block; white-space:nowrap; font-size:10px; color:var(--apagado); letter-spacing:.14em;
  text-transform:uppercase; font-family:var(--mono); }
.barra .reloj{ margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--apagado);
  text-align:right; line-height:1.25; flex:none; }
.barra .reloj b{ color:var(--tinta); font-weight:600; font-size:14px; display:block; }

/* pestañas */
.pestanas{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  width:min(1120px,100%); margin:0 auto; padding:0 var(--gutter) 8px; }
.pestanas::-webkit-scrollbar{ display:none; }
.pestanas button{
  font:inherit; font-size:13.5px; font-weight:600; color:var(--apagado); background:none;
  border:0; border-bottom:2px solid transparent; padding:8px 12px; cursor:pointer;
  white-space:nowrap; border-radius:8px 8px 0 0;
}
.pestanas button[aria-selected="true"]{ color:var(--tinta); border-bottom-color:var(--naranja); }

/* ---------- piezas ---------- */
.btn{
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  border:1px solid var(--linea); background:var(--lienzo); color:var(--tinta);
  border-radius:10px; padding:9px 13px; display:inline-flex; align-items:center;
  justify-content:center; gap:7px; text-decoration:none; transition:border-color .15s, transform .06s;
}
.btn:hover{ border-color:var(--apagado); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn-p{ background:var(--azul); border-color:var(--azul); color:#fff; }
:root[data-tema="oscuro"] .btn-p, :root:not([data-tema="claro"]) .btn-p{ color:#080C18; }
@media (prefers-color-scheme: light){ :root:not([data-tema="oscuro"]) .btn-p{ color:#fff; } }
.btn-n{ background:var(--naranja); border-color:var(--naranja); color:#fff; }
.btn-peligro{ color:var(--mal); border-color:color-mix(in srgb, var(--mal) 40%, var(--linea)); background:transparent; }
.btn-chico{ padding:6px 10px; font-size:12.5px; border-radius:8px; }
.btn-icono{ padding:8px; width:38px; height:38px; }
@media (max-width:520px){ .btn-icono{ width:40px; height:40px; } }
.ico{ display:inline-block; flex:none; line-height:0; }
.ico svg{ width:100%; height:100%; display:block; }
.btn .ico{ margin:-1px 0; }

.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap; }
.chip .punto{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.chip.bien{ color:var(--bien); background:var(--bien-f); }
.chip.aviso{ color:var(--aviso); background:var(--aviso-f); }
.chip.mal{ color:var(--mal); background:var(--mal-f); }
.chip.gris{ color:var(--apagado); background:var(--lienzo-2); }
.latiendo .punto{ animation:latir 1s ease-in-out infinite; }
@keyframes latir{ 50%{ opacity:.25; } }
@media (prefers-reduced-motion: reduce){ .latiendo .punto{ animation:none; } }

.tarjeta{
  background:var(--lienzo); border:1px solid var(--linea); border-radius:var(--radio);
  padding:15px; box-shadow:var(--sombra);
}
.rejilla{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(min(100%,290px),1fr)); align-items:start; }

.etiqueta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--apagado); }
.titulillo{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--apagado); }

/* ---------- tienda ---------- */
/* ALINEACIÓN: en una rejilla, toda tarjeta se compone de los mismos bloques
   y cada bloque mide lo mismo en todas. Es lo que hace que una fila se lea
   de un vistazo; sin eso la rejilla se ve torcida aunque el contenido esté bien. */
.rejilla-alineada{ grid-auto-rows:auto; }
.rejilla-alineada > .tarjeta{ grid-row:span var(--filas,4); display:grid; grid-template-rows:subgrid; gap:12px; }
@supports not (grid-template-rows: subgrid){
  .rejilla-alineada > .tarjeta{ display:flex; flex-direction:column; gap:12px; }
  .tienda-cab{ min-height:96px; }
  .medidor{ min-height:96px; }
}
.tienda{ transition:border-color .18s, transform .18s; align-content:start; }
.tienda:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--c,var(--azul)) 50%, var(--linea)); }
.tienda-cab{ display:flex; gap:12px; align-items:flex-start; }
.marca-t{
  width:58px; height:58px; flex:none; border-radius:12px; background:#fff;
  border:2px solid var(--c,var(--azul)); display:grid; place-items:center; padding:5px; overflow:hidden;
}
.marca-t img{ max-height:100%; object-fit:contain; }
.marca-t span{ font-family:var(--titulo); font-weight:800; font-size:20px; color:var(--c,var(--azul)); }
.tienda h3{ font-size:16px; font-weight:700; line-height:1.2; }
.tienda .giro{ font-size:12px; color:var(--apagado); margin-top:2px; }
.tienda .rif{ font-family:var(--mono); font-size:12px; color:var(--apagado); margin-top:4px; }
.aviso-comparte{
  display:inline-block; font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px;
  color:var(--morado); background:var(--lienzo-2); border:1px solid var(--linea-suave); margin-top:6px;
}

.capas{ display:grid; gap:7px; }
.capa{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px;
  padding:8px 10px; border:1px solid var(--linea-suave); border-radius:10px;
  background:var(--lienzo-2); text-decoration:none; transition:border-color .15s;
}
.capa:hover{ border-color:var(--c,var(--azul)); }
.capa.vacia{ opacity:.5; pointer-events:none; }
.capa .punto{ width:8px; height:8px; border-radius:50%; flex:none; }
.capa .n{ font-size:13px; font-weight:600; min-width:0; }
.capa .n em{ display:block; font-style:normal; font-family:var(--mono); font-size:10.5px;
  color:var(--apagado); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.capa .v{ font-family:var(--mono); font-size:11px; color:var(--apagado); }
.p-bien{ background:var(--bien); } .p-aviso{ background:var(--aviso); }
.p-mal{ background:var(--mal); } .p-gris{ background:var(--linea); }

.barras{ display:flex; gap:2px; align-items:flex-end; flex:1; min-width:0; }
.barras i{ flex:1 1 0; min-width:2px; height:13px; border-radius:1.5px; background:var(--bien); opacity:.8; }
.barras i.a{ background:var(--aviso); } .barras i.m{ background:var(--mal); opacity:1; }
.barras i.g{ background:var(--linea); }
.uptime{ display:flex; align-items:center; gap:9px; }
.uptime .etiqueta{ flex:none; }

.ficha{ border-top:1px dashed var(--linea); padding-top:10px; display:grid; gap:5px; font-size:12.5px; }
.ficha > div{ display:grid; grid-template-columns:86px 1fr; gap:8px; }
.ficha dt{ color:var(--apagado); font-weight:500; }
.ficha dd{ margin:0; color:var(--tinta); overflow-wrap:anywhere; }

.agregar{
  border:1.5px dashed var(--linea); background:transparent; box-shadow:none; cursor:pointer;
  min-height:190px; display:grid; place-content:center; justify-items:center; gap:6px; text-align:center;
  color:var(--apagado); padding:20px; font:inherit; transition:border-color .15s, color .15s;
}
.agregar:hover{ border-color:var(--naranja); color:var(--tinta); }
.agregar .mas{ font-family:var(--titulo); font-size:28px; color:var(--naranja); line-height:1; }
.agregar strong{ font-size:14.5px; }
.agregar small{ max-width:210px; font-size:12px; line-height:1.45; }

/* ---------- salud del VPS ---------- */
.medidor{ display:grid; gap:6px; align-content:start; }
.medidor .nota{ font-size:12px; color:var(--apagado); line-height:1.45; }
.medidor .fila{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.val{ font-family:var(--mono); font-size:19px; font-weight:500; font-variant-numeric:tabular-nums; }
.val small{ font-size:12px; color:var(--apagado); font-weight:400; }
.tarjeta .nota{ font-size:12px; color:var(--apagado); line-height:1.45; align-self:end; }
.riel{ height:6px; border-radius:99px; background:var(--lienzo-2); overflow:hidden; }
.riel i{ display:block; height:100%; border-radius:99px; background:var(--bien); transition:width .4s; }
.riel i.a{ background:var(--aviso); } .riel i.m{ background:var(--mal); }
.lista-srv{ display:grid; gap:6px; }
.lista-srv > div{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:13px; padding:5px 0; border-bottom:1px solid var(--linea-suave); }
.lista-srv > div:last-child{ border-bottom:0; }
.lista-srv .nom{ font-family:var(--mono); font-size:12px; overflow-wrap:anywhere; }

/* ---------- calendario ---------- */
.cal-cab{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.cal-cab h3{ font-size:19px; text-transform:capitalize; }
.mes{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.mes .dow{ text-align:center; font-size:10.5px; font-family:var(--mono); color:var(--apagado);
  text-transform:uppercase; letter-spacing:.1em; padding-bottom:4px; }
.dia{
  min-height:70px; min-width:0; overflow:hidden; border:1px solid var(--linea-suave);
  border-radius:9px; padding:5px; background:var(--lienzo); display:flex; flex-direction:column;
  gap:3px; cursor:pointer; font:inherit; text-align:left; color:inherit;
}
.dia:hover{ border-color:var(--naranja); }
.dia.fuera{ opacity:.35; }
.dia.hoy{ border-color:var(--naranja); box-shadow:inset 0 0 0 1px var(--naranja); }
.dia .num{ font-family:var(--mono); font-size:11.5px; color:var(--apagado); }
.dia.hoy .num{ color:var(--naranja); font-weight:600; }
.ev{ max-width:100%; font-size:10.5px; line-height:1.3; padding:2px 5px; border-radius:5px; background:var(--lienzo-2);
  border-left:2px solid var(--azul); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev.cumple{ border-left-color:var(--naranja); }
.ev.reunion{ border-left-color:var(--cian); }
@media (max-width:560px){ .dia{ min-height:56px; } .dia .num{ font-size:10.5px; } .ev{ font-size:9.5px; } }

/* ---------- usuarios ---------- */
.usuario{ display:flex; gap:12px; align-items:flex-start; }
.retrato{
  width:52px; height:52px; border-radius:14px; flex:none; object-fit:cover;
  background:var(--lienzo-2); display:grid; place-items:center;
  font-family:var(--titulo); font-weight:700; font-size:18px; color:var(--azul);
}
.usuario h3{ font-size:15.5px; }
.usuario .apodo{ font-size:12.5px; color:var(--apagado); }
.pares{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.par{ font-size:11px; padding:3px 8px; border-radius:6px; background:var(--lienzo-2);
  border:1px solid var(--linea-suave); color:var(--apagado); }
.par b{ color:var(--tinta); font-weight:600; }

/* ---------- ventanas ---------- */
.velo{ position:fixed; inset:0; background:rgba(8,12,24,.6); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:var(--gutter); z-index:60; overflow:auto; }
.ventana{
  background:var(--lienzo); border:1px solid var(--linea); border-radius:16px;
  width:min(620px,100%); max-height:88dvh; overflow:auto; padding:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.ventana-cab{ display:flex; align-items:flex-start; gap:12px; margin-bottom:4px; }
.ventana h3{ font-size:19px; }
.ventana .sub{ color:var(--apagado); font-size:13px; margin-top:5px; }
.ventana .cerrar{ margin-left:auto; }
.ventana .pie{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:18px; }
.ventana .pie .izq{ margin-right:auto; }

.campos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:12px; margin-top:16px; }
.campo{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.campo.ancho{ grid-column:1/-1; }
label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--apagado); }
input,select,textarea{
  font:inherit; font-size:14px; padding:9px 11px; border-radius:9px; border:1px solid var(--linea);
  background:var(--ground); color:var(--tinta); width:100%; min-width:0;
}
textarea{ resize:vertical; min-height:70px; }
.pista{ font-size:11.5px; color:var(--apagado); }
.con-ojo{ position:relative; }
.con-ojo input{ padding-right:44px; }
.ojo{ position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none; border:0;
  cursor:pointer; padding:7px; color:var(--apagado); line-height:0; border-radius:8px; }
.ojo:hover{ color:var(--tinta); }
.casillas{ display:flex; flex-wrap:wrap; gap:7px; }
.casilla{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:6px 10px;
  border:1px solid var(--linea); border-radius:9px; cursor:pointer; background:var(--lienzo); }
.casilla input{ width:auto; margin:0; accent-color:var(--naranja); }
.casilla:has(input:checked){ border-color:var(--naranja); background:var(--lienzo-2); font-weight:600; }

pre{ margin:14px 0 0; background:var(--lienzo-2); border:1px solid var(--linea-suave); border-radius:10px;
  padding:12px 13px; font-family:var(--mono); font-size:12px; overflow-x:auto; line-height:1.6; }
.recado{ padding:10px 12px; border-radius:10px; font-size:13px; margin-top:12px; }
.recado.mal{ color:var(--mal); background:var(--mal-f); }
.recado.bien{ color:var(--bien); background:var(--bien-f); }
.recado.aviso{ color:var(--aviso); background:var(--aviso-f); }

/* ---------- módulos ---------- */
.mod{ cursor:pointer; text-align:left; font:inherit; color:inherit; display:grid; gap:6px; align-content:start; }
.mod .cod{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--naranja); }
.mod h3{ font-size:14.5px; font-weight:700; }
.mod p{ font-size:12.5px; line-height:1.5; color:var(--apagado); }
.mod:hover{ border-color:var(--naranja); }

/* ---------- banda del origen ---------- */
.banda{
  margin-top:46px; border:1px solid var(--linea-suave); border-radius:20px; overflow:hidden;
  background:
    radial-gradient(60% 100% at 100% 0%, color-mix(in srgb, var(--naranja) 9%, transparent), transparent 70%),
    radial-gradient(50% 90% at 0% 100%, color-mix(in srgb, var(--azul) 10%, transparent), transparent 70%),
    var(--lienzo);
}
.banda-in{ padding:26px clamp(16px,3vw,32px); display:grid; gap:26px; }
@media (min-width:900px){ .banda-in{ grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:36px; align-items:center; } }
.banda-in.ancha{ grid-template-columns:1fr !important; }
.texto-origen{ column-gap:30px; }
@media (min-width:900px){ .texto-origen .doble{ columns:2; column-gap:30px; } .texto-origen .doble p{ break-inside:avoid; } }

.estanteria{ width:100%; max-width:380px; margin-inline:auto; }
.estanteria svg{ width:100%; height:auto; display:block; }
@keyframes caer{ 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(2px); } }
@keyframes palpitar{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.estanteria .pin{ animation:caer 2.4s ease-in-out infinite; transform-origin:center; }
.estanteria .destino{ animation:palpitar 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .estanteria .pin, .estanteria .destino{ animation:none; } }

.apellidos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:14px; }
.apellido{ border:1px solid var(--linea-suave); border-radius:12px; padding:12px 14px; background:var(--lienzo); }
.apellido b{ display:block; font-family:var(--titulo); font-size:30px; line-height:1; color:var(--naranja); }
.apellido span{ display:block; font-size:13px; color:var(--apagado); margin-top:4px; letter-spacing:.01em; }

/* ---------- pie ---------- */
.pie-portal{ display:grid; gap:16px; grid-template-columns:1fr; color:var(--apagado); font-size:13px; }
@media (min-width:760px){ .pie-portal{ grid-template-columns:118px 1fr; gap:26px; } }
.pie-portal .rosa{ width:104px; opacity:.85; }
.pie-portal h2{ font-size:20px; color:var(--tinta); margin-bottom:4px; }
.pie-portal p{ margin-top:12px; max-width:none; line-height:1.65; }
.pie-portal blockquote{ margin:16px 0 0; padding-left:16px; border-left:3px solid var(--naranja);
  font-style:italic; break-inside:avoid; }
.pie-portal cite{ display:block; font-style:normal; font-size:12px; margin-top:6px; }
.pie-portal .cierre{ background:var(--lienzo-2); border:1px solid var(--linea-suave); border-radius:12px;
  padding:14px 16px; margin-top:18px; }
.pie-portal b{ color:var(--tinta); font-weight:600; }
.ubic{ font-family:var(--mono); color:var(--naranja); font-size:13px; }

/* ---------- vitrina de la entrada ---------- */
.vitrina{
  position:relative; border:1px solid var(--linea); border-radius:20px; overflow:hidden;
  background:var(--vidrio); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:22px; display:grid; gap:14px; align-content:center; min-height:330px;
  box-shadow:0 24px 60px rgba(8,12,24,.18);
}
.vitrina::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.13; transition:background .9s ease;
  background:radial-gradient(70% 70% at 50% 25%, var(--tono,var(--azul)), transparent 72%);
}
.vitrina > *{ position:relative; z-index:1; }
.vit-logo{
  width:128px; height:128px; margin-inline:auto; border-radius:22px; background:#fff;
  border:2px solid var(--tono,var(--azul)); display:grid; place-items:center; padding:12px;
  transition:border-color .9s ease, transform .6s ease;
}
.vit-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.vit-txt{ text-align:center; }
.vit-txt h2{ font-size:20px; font-weight:800; }
.vit-txt p{ font-size:13px; color:var(--apagado); margin-top:4px; }
.vit-pasa{ opacity:0; transform:translateY(8px); }
.vit-entra{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease; }
.vit-puntos{ display:flex; gap:7px; justify-content:center; }
.vit-puntos i{ width:7px; height:7px; border-radius:50%; background:var(--linea); transition:background .4s, width .4s; }
.vit-puntos i.act{ width:20px; border-radius:99px; background:var(--tono,var(--azul)); }
.vit-pie{ text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--apagado); }
@media (prefers-reduced-motion: reduce){ .vit-pasa,.vit-entra{ transition:none; transform:none; opacity:1; } }

/* ---------- entrada ---------- */
.entrada{ min-height:100dvh; display:grid; place-items:center; padding:var(--gutter); }
.entrada .doble{ display:grid; gap:20px; width:min(880px,100%); align-items:center; }
@media (min-width:820px){ .entrada .doble{ grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:819px){ .vitrina{ min-height:0; padding:18px; } .vit-logo{ width:96px; height:96px; } }
.entrada form{
  width:min(390px,100%); background:var(--vidrio); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px); border:1px solid var(--linea);
  border-radius:20px; padding:26px; display:grid; gap:14px; box-shadow:0 24px 60px rgba(8,12,24,.22);
}
.entrada .cab{ display:flex; align-items:center; gap:12px; }
.entrada .cab svg{ width:44px; height:44px; flex:none; }
.entrada h1{ font-size:27px; font-weight:800; }
.entrada .lema{ font-size:12px; color:var(--apagado); margin-top:3px; }
.entrada .pie-e{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:12px; color:var(--apagado); flex-wrap:wrap; }
.entrada a{ color:var(--naranja); text-decoration:none; font-weight:600; }
.entrada a:hover{ text-decoration:underline; }

@media (max-width:420px){
  .logo small{ display:none; }
  .logo b{ font-size:17px; }
  .barra .reloj b{ font-size:13px; }
  .ventana{ padding:16px; border-radius:14px; }
  .marco{ padding-block:14px 48px; }
}