/*
 * SOLO SANDBOX LOCAL. Capa de estilo "angular" sobre loyenta.css: ángulos agudos tomados de la diagonal
 * del isotipo (~34°), vidrio, fondo en movimiento y animaciones suaves. Para volver al estilo
 * redondeado basta con no cargar este archivo (vistas/base.ts).
 *
 * Valores para ajustar: --ritmo (duración de las animaciones), --corte (tamaño de las esquinas
 * cortadas), --fondo-opacidad y --fondo-desenfoque (barras del fondo).
 */

:root {
  --ritmo: 1.6;
  --corte: 14px;
  --corte-sm: 8px;
  --inclinacion: 10px;
  --fondo-opacidad: .5;
  --fondo-desenfoque: 18px;
  --desacelera: cubic-bezier(.16, 1, .3, 1);
  --radio: 0px;
  --radio-sm: 0px;
}

body { overflow-x: clip; }

/* --- Formas: esquinas cortadas en la diagonal del logo ------------------------------------ */
.caja, .tarjeta, .estadistica, .ingreso .caja {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte)));
}
.tarjeta { --corte: 26px; }
.cliente, .opcion-icono span, details.desplegable, .codigo-tarjeta img, .inscripcion-qr img {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--corte-sm)) 0, 100% var(--corte-sm), 100% 100%, var(--corte-sm) 100%, 0 calc(100% - var(--corte-sm)));
}
/* Con clip-path el borde de las esquinas se corta: las cajas se separan del fondo por su color. */
.caja, .estadistica { border: 0; box-shadow: none; }

/* Botones: paralelogramo con los extremos inclinados, como la cápsula diagonal del logo. */
.boton {
  border-radius: 0;
  padding-inline: 24px;
  clip-path: polygon(var(--inclinacion) 0, 100% 0, calc(100% - var(--inclinacion)) 100%, 0 100%);
  transition: transform .18s var(--desacelera), background-color .15s ease, box-shadow .15s ease;
}
.boton:hover { transform: scale(1.03); }
.boton:active { transform: scale(.97); }
/* El contorno de foco quedaría recortado por clip-path: se dibuja por dentro. */
.boton:focus-visible { outline: none; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--marca-texto) 70%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--marca) 80%, #000); }
.boton.chico { --inclinacion: 7px; }
.boton.borde { box-shadow: inset 0 0 0 1px var(--borde); border: 0; }

/* Campos rectos con barra inferior de color al escribir. */
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=url], textarea {
  border-radius: 0; border-bottom-width: 2px;
}
input:focus, textarea:focus { box-shadow: none; border-color: var(--borde); border-bottom-color: var(--marca); background: color-mix(in srgb, var(--marca) 4%, #fff); }
.con-prefijo .prefijo { border-radius: 0; border-bottom-width: 2px; }
.casilla { border-radius: 0; }
.aviso { border-radius: 0; border-left: 4px solid color-mix(in srgb, var(--marca) 70%, #000); }
.aviso.error { border-left-color: var(--error); }
.aviso.pausa { border-left-color: #D97706; }
.aviso.exito { border-left-color: var(--menta); }
.ejemplo { border-radius: 0; border-left: 4px solid var(--violeta); }

/* Encabezado del negocio con el borde inferior inclinado. */
.hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); padding-bottom: 92px; }
.sube { margin-top: -64px; }

/* Pasos y sellos: rombos. */
.pasos .num { border-radius: 0; width: 36px; height: 36px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sellos { gap: 6px; }
.sello { border-radius: 2px; transform: rotate(45deg) scale(.7); }
.sello svg { width: 62%; height: 62%; transform: rotate(-45deg); }
.sello img { transform: rotate(-45deg); }

/* Tarjeta: franja diagonal en lugar del círculo decorativo. */
.tarjeta::after {
  border-radius: 0; width: 90px; height: 260%; top: -80%; right: 18%;
  transform: rotate(34deg); background: color-mix(in srgb, var(--marca-texto) 9%, transparent);
}
.tarjeta::before {
  content: ""; position: absolute; width: 36px; height: 260%; top: -80%; right: 4%;
  transform: rotate(34deg); background: color-mix(in srgb, var(--marca-texto) 6%, transparent);
}
.progreso .barra, .cliente .mini-barra { border-radius: 0; }
.progreso .barra i, .cliente .mini-barra i { border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.tarjeta .listo { border-radius: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }

/* Panel */
.pestanas a { border-radius: 0; }
.estadistica { position: relative; }
.estadistica::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; background: var(--violeta); }
.colores button { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border: 0; box-shadow: none; width: 38px; height: 38px; }
.etiqueta-estado { border-radius: 0; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); padding: 2px 12px; }
.titulo-seccion .icono { transform: skewX(-8deg); }

/* --- Vidrio ------------------------------------------------------------------------------ */
.pagina-cliente .caja, .ingreso .caja {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 55%), transparent 42%),
    color-mix(in oklab, #fff 62%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), inset 0 0 0 1px rgb(255 255 255 / 70%);
}
/* Vidrio tinta: la tarjeta de sellos, lo que más debe resaltar. */
.pagina-cliente .tarjeta {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 14%), transparent 45%),
    linear-gradient(140deg, color-mix(in srgb, var(--marca) 94%, #fff) 0%, color-mix(in srgb, var(--marca) 93%, transparent) 45%, color-mix(in srgb, var(--marca-oscuro) 95%, transparent) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pagina-cliente .caja, .ingreso .caja { background: #fff; }
  .pagina-cliente .tarjeta { background: linear-gradient(140deg, color-mix(in srgb, var(--marca) 88%, #fff) 0%, var(--marca) 40%, var(--marca-oscuro) 100%); }
}

/* --- Fondo en movimiento: barras inclinadas del logo, detrás de todo ------------------------ */
.fondo-mov { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 45%) 32%, rgb(0 0 0 / 45%) 68%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 45%) 32%, rgb(0 0 0 / 45%) 68%, #000 100%);
}
.fondo-mov .pista { position: absolute; left: 0; width: 100vw; will-change: transform; animation: cruza var(--dur, 100s) linear infinite; animation-delay: var(--retraso, 0s); }
.fondo-mov .pista i {
  display: block; width: var(--largo, 46vw); height: var(--alto, 64px); opacity: var(--fondo-opacidad);
  background: var(--color, var(--marca)); filter: blur(var(--desenfoque, var(--fondo-desenfoque)));
  transform: rotate(-34deg); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
@keyframes cruza { from { transform: translateX(-60vw); } to { transform: translateX(110vw); } }
@media (max-width: 700px) { .fondo-mov { -webkit-mask-image: none; mask-image: none; opacity: .55; } }

/* Prismas con volumen asomándose detrás de la caja principal (máximo dos). */
.con-prismas { position: relative; isolation: isolate; }
.con-prismas > :not(.prisma) { position: relative; z-index: 1; }
.prisma {
  position: absolute; z-index: 0; width: 120px; height: 38px; pointer-events: none;
  background:
    radial-gradient(120% 140% at 20% 0%, rgb(255 255 255 / 55%), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--color, var(--marca)) 92%, #fff), color-mix(in srgb, var(--color, var(--marca)) 70%, #000));
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  transform: rotate(-34deg);
  animation: flota calc(8s * var(--ritmo) / 1.6) ease-in-out infinite alternate;
}
.prisma.p1 { top: -14px; right: -26px; }
.prisma.p2 { bottom: 40px; left: -34px; width: 90px; height: 30px; --color: var(--marca-oscuro); animation-delay: -3s; }
@keyframes flota { from { translate: 0 -10px; } to { translate: 0 10px; } }
@media (max-width: 480px) { .prisma.p1 { right: -10px; } .prisma.p2 { display: none; } }

/* --- Animaciones de entrada (una sola vez) -------------------------------------------------- */
@keyframes aparece { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sello-entra { from { opacity: 0; transform: rotate(45deg) scale(.3); } to { opacity: 1; transform: rotate(45deg) scale(.7); } }
@keyframes dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.hero .contenedor > * { animation: aparece calc(.6s * var(--ritmo)) var(--desacelera) both; }
.hero .contenedor > :nth-child(2) { animation-delay: calc(.06s * var(--ritmo)); }
.hero .contenedor > :nth-child(3) { animation-delay: calc(.12s * var(--ritmo)); }
.sube > * { animation: aparece calc(.6s * var(--ritmo)) var(--desacelera) both; }
.sube > :nth-child(2) { animation-delay: calc(.1s * var(--ritmo)); }
.sube > :nth-child(3) { animation-delay: calc(.18s * var(--ritmo)); }
.sube > :nth-child(4) { animation-delay: calc(.24s * var(--ritmo)); }
.ingreso .caja { animation: aparece calc(.6s * var(--ritmo)) var(--desacelera) both; }
.pagina-cliente .sello { animation: sello-entra calc(.45s * var(--ritmo)) var(--desacelera) both; animation-delay: calc((.25s + var(--i, 0) * .06s) * var(--ritmo)); }
.pagina-cliente .sello.lleno svg [pathLength] { stroke-dasharray: 1; animation: dibuja calc(.5s * var(--ritmo)) var(--desacelera) both; animation-delay: calc((.45s + var(--i, 0) * .06s) * var(--ritmo)); }

/* --- Modo oscuro del panel y del ingreso ---------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  body.panel {
    --fondo: #081127; --blanco: #0F1B36; --texto: #E6EAF5; --texto-2: #A7B3CB; --borde: #22304F;
    --lavanda: #1C2550; --menta-suave: #0D3B2E; --aviso-suave: #3A2A0A; --error-suave: #3B1414;
    color-scheme: dark;
  }
  body.panel input[type=text], body.panel input[type=email], body.panel input[type=tel], body.panel input[type=number],
  body.panel input[type=url], body.panel textarea { background: #0B1630; color: var(--texto); border-color: var(--borde); }
  body.panel input:focus, body.panel textarea:focus { background: #0E1B3A; }
  body.panel .con-prefijo .prefijo { background: #0B1630; }
  body.panel .estadistica, body.panel .cliente, body.panel .opcion-icono span, body.panel .caja { background: var(--blanco); color: var(--texto); }
  body.panel .opcion-icono input:checked + span { background: #1C2550; color: #C7CBFF; }
  body.panel .ejemplo { color: #DCD8FF; }
  /* El aviso usa --marca-suave (mezcla con blanco): en oscuro se pasa a un violeta profundo. */
  body.panel .aviso { background: #1C2550; color: var(--texto); }
  /* Los colores oscuros de la paleta desaparecían sobre el fondo: cuadrados con borde en vez de rombos. */
  body.panel .colores button { clip-path: none; width: 32px; height: 32px; box-shadow: 0 0 0 1px #3A4A70; }
  body.panel .aviso.exito { color: #A7F3D0; }
  body.panel .aviso.pausa { color: #FCD34D; }
  body.panel .aviso.error { color: #FCA5A5; }
  body.panel .etiqueta-estado.ok { color: #A7F3D0; }
  body.panel .etiqueta-estado.no { background: #1A2744; color: var(--texto-2); }
  body.panel .etiqueta-estado.anulada { color: #FCD34D; }
  body.panel .guardar { background: linear-gradient(transparent, var(--fondo) 30%); }
  body.panel a { color: #A5B4FC; }
  body.panel .boton.claro { background: #1C2550; color: #C7CBFF; }
  body.panel .boton.borde { color: var(--texto); }
  body.panel .ingreso { background: radial-gradient(90% 60% at 100% 0%, #1C2550, transparent), var(--fondo); }
  body.panel .ingreso .caja {
    background: linear-gradient(135deg, rgb(255 255 255 / 9%), transparent 42%), color-mix(in oklab, #0F1B36 55%, transparent);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), inset 0 0 0 1px rgb(255 255 255 / 10%);
  }
}