/* Lo que comparten la suite (index.html) y el link del cliente (aprobar.html).
   Estilo «oscuro creativo»: negro profundo, imágenes protagonistas, un solo acento neón.
   --acento es lima en la suite; en el link del cliente se reemplaza por el color de su marca. */
:root{
  color-scheme:dark;
  --papel:#0a0a0a;   /* fondo */
  --hondo:#161616;   /* hundido: campos, huecos */
  --alto:#111111;    /* paneles y tarjetas */
  --elevado:#1c1c1c; /* hover, chips */
  --tinta:#f4f4f2; --suave:#8b8b86; --tenue:#5a5a56;
  --linea:#232323; --linea-fuerte:#333;
  --acento:#c6ff3d; --sobre-acento:#0a0a0a;
  --maiz:#ffb020; --azul:#4da3ff; --error:#ff4d6d; --morado:#b18cff;
  --radio:14px;
}
*{box-sizing:border-box}
html{background:var(--papel)}
body{margin:0;background:var(--papel);color:var(--tinta);font:14.5px/1.5 Geist,Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.serif{font-family:Geist,Inter,system-ui,sans-serif;font-weight:650;letter-spacing:-.035em}
.mono,.etiqueta{font-family:"Geist Mono",ui-monospace,monospace}
.etiqueta{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--suave)}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
dialog{background:var(--alto);color:var(--tinta)}
::selection{background:var(--acento);color:var(--sobre-acento)}
input,select,textarea{border:1px solid var(--linea);border-radius:10px;padding:9px 11px;background:var(--hondo);color:var(--tinta);font:inherit;width:100%}
input::placeholder,textarea::placeholder{color:var(--tenue)}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 18%,transparent)}
.btn{border:1px solid var(--linea-fuerte);background:transparent;border-radius:999px;padding:7px 14px;font-weight:500;font-size:13.5px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:var(--elevado);border-color:var(--suave)}
.btn.primario{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento);font-weight:600}
.btn.primario:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.chip{font:10.5px "Geist Mono",monospace;padding:3px 8px;border-radius:999px;background:var(--elevado);color:var(--tinta);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.punto{display:inline-block;width:7px;height:7px;border-radius:50%}
.seg{display:inline-flex;background:var(--hondo);padding:3px;border-radius:999px;gap:2px;border:1px solid var(--linea)}
.seg button{border:0;background:none;padding:5px 12px;border-radius:999px;font-size:13px;color:var(--suave)}
.seg button[aria-pressed=true]{background:var(--tinta);color:var(--papel);font-weight:600}
.seg button:disabled{opacity:.3;cursor:not-allowed}
.medidor{height:4px;background:var(--elevado);border-radius:9px;overflow:hidden;margin-top:6px}
.medidor i{display:block;height:100%;background:var(--acento);transition:width .4s}
.esqueleto{aspect-ratio:3/4;border-radius:12px;background:linear-gradient(100deg,var(--hondo) 40%,var(--elevado) 50%,var(--hondo) 60%) 0/300% 100%;animation:brillo 1.4s infinite linear}
@keyframes brillo{to{background-position:-300% 0}}
.aviso{color:var(--error);font-size:13px;margin:8px 0 0}
.err{color:var(--error);font-size:13px}
.nota{font-size:12.5px;color:var(--suave)}
.solo-movil{display:none}
@media (max-width:820px){.solo-movil{display:inline}}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--tinta);color:var(--papel);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:80;max-width:calc(100vw - 32px)}
.toast.ver{opacity:1;transform:translate(-50%,0)}
dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}
[hidden]{display:none!important}