toast() inyecta:
======================================================================== */
.toast-host{
position:fixed;
z-index:var(--z-toast);
top:calc(var(--safe-top) + var(--sp-3));
left:50%;
transform:translateX(-50%);
width:min(440px, calc(100% - var(--sp-8)));
display:flex;
flex-direction:column;
gap:var(--sp-2);
pointer-events:none; /* el host no bloquea; cada toast si recibe clic */
}
.toast{
position:relative;
display:flex;
align-items:flex-start;
gap:var(--sp-3);
padding:var(--sp-4);
/* Reserva el ancho del boton de cerrar (ahora de 44px) mas aire, para que
el mensaje no quede debajo del boton */
padding-right:calc(var(--tap) + var(--sp-3));
border-radius:var(--r-md);
border:1px solid var(--border);
background:var(--surface);
box-shadow:var(--sh-3);
color:var(--text);
overflow:hidden;
cursor:pointer;
pointer-events:auto;
animation:toast-in var(--dur-slow) var(--ease-spring) both;
}
.toast.is-leaving{ animation:toast-out var(--dur) var(--ease-out) both; }
.toast__icon{
flex:0 0 auto;
width:24px; height:24px;
display:flex; align-items:center; justify-content:center;
border-radius:var(--r-full);
color:var(--primary);
background:var(--primary-soft);
}
.toast__icon svg{ width:15px; height:15px; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.toast__msg{
flex:1 1 auto;
min-width:0;
font-size:var(--fs-sm);
font-weight:var(--fw-medium);
line-height:var(--lh-snug);
overflow-wrap:anywhere; /* mensajes de la API pueden traer cadenas largas */
}
.toast__title{
display:block;
font-weight:var(--fw-bold);
margin-bottom:2px;
}
/* 44px: es el UNICO cierre manual del toast en celular, asi que tiene que
cumplir el area tactil minima (antes media 32x32) */
.toast__close{
position:absolute;
top:var(--sp-1); right:var(--sp-1);
width:var(--tap); height:var(--tap);
display:flex; align-items:center; justify-content:center;
border-radius:var(--r-full);
color:var(--text-soft);
transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.toast__close:hover{ color:var(--text); background:var(--surface-2); }
.toast__close svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
/* Barra de progreso: se agota en --toast-dur (la fija el JS) */
.toast__bar{
position:absolute;
left:0; bottom:0;
height:3px;
width:100%;
transform-origin:left center;
background:var(--primary);
opacity:.65;
animation:toast-bar var(--toast-dur, 4200ms) linear forwards;
}
.toast--success .toast__icon{ color:var(--success); background:var(--success-soft); }
.toast--success .toast__bar{ background:var(--success); }
.toast--error .toast__icon{ color:var(--danger); background:var(--danger-soft); }
.toast--error .toast__bar{ background:var(--danger); }
.toast--warning .toast__icon{ color:var(--warning); background:var(--warning-soft); }
.toast--warning .toast__bar{ background:var(--warning); }
.toast--info .toast__icon{ color:var(--primary); background:var(--primary-soft); }
.toast--info .toast__bar{ background:var(--primary); }
@keyframes toast-in{
from{ opacity:0; transform:translateY(-18px) scale(.96); }
to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes toast-out{
to{ opacity:0; transform:translateY(-12px) scale(.96); }
}
@keyframes toast-bar{
from{ transform:scaleX(1); }
to { transform:scaleX(0); }
}
/* En escritorio los toasts caen en la esquina superior derecha */
@media (min-width:1200px){
.toast-host{
left:auto;
right:var(--sp-6);
transform:none;
}
}
/* ===========================================================================
13. LOADER DE PANTALLA COMPLETA
======================================================================== */
.loader{
position:fixed;
inset:0;
z-index:var(--z-loader);
display:flex;
align-items:center;
justify-content:center;
background:var(--scrim);
-webkit-backdrop-filter:blur(14px) saturate(140%);
backdrop-filter:blur(14px) saturate(140%);
opacity:0;
transition:opacity var(--dur) var(--ease-out);
}
.loader[hidden]{ display:none; }
.loader.is-open{ opacity:1; }
.loader__box{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--sp-4);
padding:var(--sp-8);
border-radius:var(--r-lg);
background:var(--surface);
border:1px solid var(--border);
box-shadow:var(--sh-3);
animation:card-in var(--dur) var(--ease-spring) both;
}
.loader__ring{
width:44px; height:44px;
border-radius:50%;
border:3px solid var(--border);
border-top-color:var(--primary);
animation:spin 800ms linear infinite;
}
.loader__txt{
font-size:var(--fs-sm);
font-weight:var(--fw-semi);
color:var(--text-muted);
animation:pulse-soft 1.6s var(--ease-in-out) infinite;
}
@keyframes pulse-soft{
0%,100%{ opacity:.55; }
50% { opacity:1; }
}
/* ===========================================================================
14. SWITCH DE TEMA (morph sol <-> luna, puro CSS)
La luna se "talla": el core encoge y una mascara del color del boton
entra por arriba-derecha dejando la media luna.
======================================================================== */
.theme-toggle{
position:relative;
width:var(--tap); height:var(--tap);
display:flex; align-items:center; justify-content:center;
border-radius:var(--r-full);
border:1px solid var(--border);
background:var(--surface);
box-shadow:var(--sh-1);
color:var(--primary);
-webkit-tap-highlight-color:transparent;
transition:transform var(--dur) var(--ease-spring),
box-shadow var(--dur) var(--ease-out),
background-color var(--dur) var(--ease-in-out),
border-color var(--dur) var(--ease-in-out);
}
.theme-toggle:hover{ transform:translateY(-1px) rotate(-8deg); box-shadow:var(--sh-2); }
.theme-toggle:active{ transform:scale(.94); }
.theme-toggle__icon{
position:relative;
width:22px; height:22px;
display:block;
}
.theme-toggle__core{
position:absolute;
top:50%; left:50%;
width:14px; height:14px;
margin:-7px 0 0 -7px;
border-radius:50%;
background:currentColor;
transition:transform var(--dur-slow) var(--ease-spring);
}
/* Mascara del mismo color del boton: al entrar recorta el circulo */
.theme-toggle__mask{
position:absolute;
top:50%; left:50%;
width:14px; height:14px;
margin:-7px 0 0 -7px;
border-radius:50%;
background:var(--surface);
transform:translate(60%,-60%) scale(0);
transition:transform var(--dur-slow) var(--ease-spring),
background-color var(--dur) var(--ease-in-out);
}
/* 8 rayos hechos con box-shadow sobre un solo punto */
.theme-toggle__rays{
position:absolute;
top:50%; left:50%;
width:2.5px; height:2.5px;
margin:-1.25px 0 0 -1.25px;
border-radius:50%;
background:transparent;
color:currentColor;
box-shadow:
0 -10px 0 currentColor,
0 10px 0 currentColor,
-10px 0 0 currentColor,
10px 0 0 currentColor,
-7px -7px 0 currentColor,
7px -7px 0 currentColor,
-7px 7px 0 currentColor,
7px 7px 0 currentColor;
transform:scale(1) rotate(0deg);
opacity:1;
transition:transform var(--dur-slow) var(--ease-spring),
opacity var(--dur) var(--ease-out);
}
/* --- Estado luna: manual --- */
:root[data-theme="dark"] .theme-toggle__core{ transform:scale(1.18); }
:root[data-theme="dark"] .theme-toggle__mask{ transform:translate(38%,-38%) scale(1.05); }
:root[data-theme="dark"] .theme-toggle__rays{ transform:scale(.2) rotate(-70deg); opacity:0; }
/* --- Estado luna: automatico por sistema --- */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .theme-toggle__core{ transform:scale(1.18); }
:root:not([data-theme="light"]) .theme-toggle__mask{ transform:translate(38%,-38%) scale(1.05); }
:root:not([data-theme="light"]) .theme-toggle__rays{ transform:scale(.2) rotate(-70deg); opacity:0; }
}
/* ===========================================================================
15. SEGMENTED CONTROL (estilo iOS)
El JS posiciona la pildora con --seg-x y --seg-w; sin JS, el fallback
de 2 opciones ya funciona.
======================================================================== */
.segmented{
position:relative;
display:flex;
align-items:center;
gap:var(--sp-1);
padding:var(--sp-1);
border-radius:var(--r-full);
background:var(--surface-2);
border:1px solid var(--border);
isolation:isolate;
}
.segmented__pill{
position:absolute;
z-index:0;
top:var(--sp-1);
left:var(--sp-1);
height:calc(100% - var(--sp-2));
width:var(--seg-w, calc(50% - var(--sp-1) - 2px));
border-radius:var(--r-full);
background:var(--surface-raised);
box-shadow:var(--sh-2);
transform:translateX(var(--seg-x, 0px));
transition:transform var(--dur-slow) var(--ease-spring),
width var(--dur-slow) var(--ease-spring),
background-color var(--dur) var(--ease-in-out);
}
.segmented__btn{
position:relative;
z-index:1;
flex:1 1 0;
min-height:var(--tap);
padding:0 var(--sp-3);
border-radius:var(--r-full);
font-size:var(--fs-sm);
font-weight:var(--fw-semi);
color:var(--text-muted);
-webkit-tap-highlight-color:transparent;
transition:color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.segmented__btn:active{ transform:scale(.96); }
.segmented__btn.is-active{ color:var(--primary); }
/* ===========================================================================
16. VISTAS ANIMADAS
switchView() aplica las clases de salida/entrada segun la direccion.
======================================================================== */
.view{ display:block; }
.view[hidden],
.view.is-hidden{ display:none; }
.view--in-right{ animation:view-in-right var(--dur-slow) var(--ease-spring) both; }
.view--in-left { animation:view-in-left var(--dur-slow) var(--ease-spring) both; }
.view--out-left{ animation:view-out-left var(--dur) var(--ease-out) both; }
.view--out-right{animation:view-out-right var(--dur) var(--ease-out) both; }
@keyframes view-in-right{
from{ opacity:0; transform:translateX(34px); }
to { opacity:1; transform:translateX(0); }
}
@keyframes view-in-left{
from{ opacity:0; transform:translateX(-34px); }
to { opacity:1; transform:translateX(0); }
}
@keyframes view-out-left{
to{ opacity:0; transform:translateX(-28px); }
}
@keyframes view-out-right{
to{ opacity:0; transform:translateX(28px); }
}
/* Entrada escalonada de los hijos de una vista: se ve "armada", no volcada */
.stagger > *{ animation:stagger-in var(--dur-slow) var(--ease-out) both; }
.stagger > *:nth-child(1){ animation-delay:40ms; }
.stagger > *:nth-child(2){ animation-delay:80ms; }
.stagger > *:nth-child(3){ animation-delay:120ms; }
.stagger > *:nth-child(4){ animation-delay:160ms; }
.stagger > *:nth-child(5){ animation-delay:200ms; }
.stagger > *:nth-child(6){ animation-delay:240ms; }
.stagger > *:nth-child(7){ animation-delay:280ms; }
.stagger > *:nth-child(8){ animation-delay:320ms; }
@keyframes stagger-in{
from{ opacity:0; transform:translateY(10px); }
to { opacity:1; transform:translateY(0); }
}
/* ===========================================================================
17. SEPARADOR Y ENLACES
======================================================================== */
.divider{
display:flex;
align-items:center;
gap:var(--sp-3);
color:var(--text-soft);
font-size:var(--fs-xs);
font-weight:var(--fw-medium);
}
.divider::before,
.divider::after{
content:"";
flex:1 1 auto;
height:1px;
background:var(--border);
}
.divider--plain::before,
.divider--plain::after{ content:none; }
.link{
display:inline-flex;
align-items:center;
gap:var(--sp-1);
color:var(--primary);
font-weight:var(--fw-semi);
font-size:var(--fs-sm);
border-radius:var(--r-xs);
cursor:pointer;
transition:color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.link:hover{ opacity:.75; }
/* Subrayado que crece del centro: detalle de marca */
.link--underline{ position:relative; }
.link--underline::after{
content:"";
position:absolute;
left:0; right:0; bottom:-2px;
height:1.5px;
background:currentColor;
border-radius:var(--r-full);
transform:scaleX(0);
transition:transform var(--dur) var(--ease-out);
}
.link--underline:hover::after{ transform:scaleX(1); }
/* Enlaces que deben cumplir area tactil de 44px en movil */
.link--tap{ min-height:var(--tap); padding-inline:var(--sp-2); }
/* ===========================================================================
18. PIEZAS AUXILIARES COMPARTIDAS
======================================================================== */
/* --- Marca / logo --- */
.brand{ display:inline-flex; align-items:center; gap:var(--sp-3); }
/* El cuadro azul con degradado existia porque la marca era un SVG BLANCO
generico. Ahora es el isotipo REAL de CYC Facturacion, que ya trae su propio
azul: dejarle el fondo encima lo volvia azul sobre azul, invisible. Se queda
solo la caja, sin relleno ni sombra. */
.brand__mark{
width:44px; height:44px;
display:flex; align-items:center; justify-content:center;
border-radius:var(--r-sm);
color:var(--primary-ink);
}
/* El isotipo se lee igual en tema claro y oscuro (es azul sobre transparente),
por eso NO hace falta una version para fondo oscuro. */
.brand__mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.brand__mark svg{ width:24px; height:24px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.brand__name{
font-size:var(--fs-lg);
font-weight:var(--fw-black);
letter-spacing:var(--ls-tight);
}
.brand__name span{ color:var(--primary); }
/* --- Etiquetas de estado --- */
.badge{
display:inline-flex;
align-items:center;
gap:var(--sp-1);
padding:var(--sp-1) var(--sp-3);
border-radius:var(--r-full);
font-size:var(--fs-xs);
font-weight:var(--fw-semi);
background:var(--surface-2);
color:var(--text-muted);
border:1px solid var(--border);
}
/* Fondo = relleno semantico, texto = tinta: el badge es texto de 12px sobre
su propio *-soft y con el color de relleno daba 2.19-2.38:1 (falla AA). */
.badge--success{ background:var(--success-soft); color:var(--success-ink); border-color:transparent; }
.badge--danger { background:var(--danger-soft); color:var(--danger-ink); border-color:transparent; }
.badge--warning{ background:var(--warning-soft); color:var(--warning-ink); border-color:transparent; }
.badge--primary{ background:var(--primary-soft); color:var(--primary-ink-soft); border-color:transparent; }
/* --- Aviso / banner (usado por #validateBanner) --- */
.notice{
display:flex;
flex-direction:column;
gap:var(--sp-3);
padding:var(--sp-4);
border-radius:var(--r-md);
border:1px solid var(--border);
background:var(--surface-2);
animation:card-in var(--dur-slow) var(--ease-spring) both;
}
.notice__head{ display:flex; align-items:flex-start; gap:var(--sp-3); }
.notice__icon{
flex:0 0 auto;
width:36px; height:36px;
display:flex; align-items:center; justify-content:center;
border-radius:var(--r-full);
background:var(--warning-soft);
color:var(--warning);
}
.notice__icon svg{ width:19px; height:19px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.notice__title{ font-size:var(--fs-md); font-weight:var(--fw-bold); letter-spacing:var(--ls-tight); }
.notice__text{ font-size:var(--fs-sm); color:var(--text-muted); line-height:var(--lh-snug); }
.notice--warning{ background:var(--warning-soft); border-color:transparent; }
.notice--success{ background:var(--success-soft); border-color:transparent; }
.notice--success .notice__icon{ background:var(--surface); color:var(--success); }
.notice--danger{ background:var(--danger-soft); border-color:transparent; }
.notice--danger .notice__icon{ background:var(--surface); color:var(--danger); }
@media (min-width:768px){
.notice{ flex-direction:row; align-items:center; justify-content:space-between; }
}
/* --- Celebracion: check grande dibujandose + destellos ---
*/
.celebrate{
position:relative;
display:flex; align-items:center; justify-content:center;
width:96px; height:96px;
margin-inline:auto;
color:var(--success);
}
.celebrate__check{ width:80px; height:80px; overflow:visible; }
.celebrate__check circle{
fill:none; stroke:currentColor; stroke-width:2.5;
stroke-dasharray:151; stroke-dashoffset:151;
animation:draw-circle var(--dur-slow) var(--ease-out) forwards;
}
.celebrate__check path{
fill:none; stroke:currentColor; stroke-width:3.6;
stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:40; stroke-dashoffset:40;
animation:draw-check var(--dur-slow) var(--ease-out) 320ms forwards;
}
/* Destellos: un punto con 8 box-shadows que se expande y se apaga */
.celebrate::after{
content:"";
position:absolute;
top:50%; left:50%;
width:5px; height:5px;
margin:-2.5px 0 0 -2.5px;
border-radius:50%;
box-shadow:
0 -34px 0 var(--success), 0 34px 0 var(--primary),
-34px 0 0 var(--primary-2), 34px 0 0 var(--success),
-24px -24px 0 var(--primary), 24px -24px 0 var(--success),
-24px 24px 0 var(--success), 24px 24px 0 var(--primary-2);
opacity:0;
animation:sparkle var(--dur-xslow) var(--ease-out) 420ms forwards;
}
@keyframes draw-circle{ to{ stroke-dashoffset:0; } }
@keyframes sparkle{
0% { transform:scale(.2); opacity:0; }
35% { opacity:1; }
100%{ transform:scale(1.5); opacity:0; }
}
/* --- Skeleton de carga --- */
.skeleton{
position:relative;
overflow:hidden;
background:var(--surface-2);
border-radius:var(--r-sm);
min-height:14px;
}
.skeleton::after{
content:"";
position:absolute; inset:0;
transform:translateX(-100%);
background:linear-gradient(90deg, transparent, var(--border), transparent);
animation:shimmer 1.4s var(--ease-in-out) infinite;
}
@keyframes shimmer{ to{ transform:translateX(100%); } }
/* ===========================================================================
19. AJUSTES POR TAMANO (mobile-first: solo se SUBE)
======================================================================== */
@media (min-width:768px){
.container{ padding-inline:var(--sp-6); }
.btn{ padding-inline:var(--sp-8); }
}
@media (min-width:1200px){
.container{ padding-inline:var(--sp-8); }
}
/* Punteros finos (mouse): los hovers de elevacion solo aplican ahi, para que
en tactil no se queden "pegados" tras el tap */
@media (hover:none){
.btn:hover{ transform:none; }
.theme-toggle:hover{ transform:none; }
}
/* Impresion: fuera fondos vivos y cromos */
@media print{
body::before, body::after, .aurora{ display:none; }
.card{ box-shadow:none; border-color:var(--border-strong); }
.toast-host, .loader, .theme-toggle{ display:none!important; }
}
/* ===========================================================================
20. MOVIMIENTO REDUCIDO
Obligatorio: quien lo pide en su sistema recibe la misma interfaz,
sin animacion. Va AL FINAL para ganar en cascada.
======================================================================== */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important;
}
}