/* ============================================================
   Estilos propios del panel.

   El archivo app.css viene del diseno original y solo contiene
   las clases que ese diseno usaba. Lo que anadimos despues va
   aqui, para no depender de clases que no existen alli.
   ============================================================ */

/* ---------- Interruptor de encendido / apagado ---------- */
.switch {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.35rem;
    border-radius: 999px;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: hsl(var(--muted-foreground) / .35);
    transition: background-color .18s ease;
    flex-shrink: 0;
    vertical-align: middle;
}

.switch:hover { background: hsl(var(--muted-foreground) / .5); }

.switch.on { background: hsl(var(--primary)); }
.switch.on:hover { background: hsl(var(--primary) / .9); }

.switch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: .18rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    transition: left .18s ease;
    box-shadow: 0 1px 2px rgb(0 0 0 / .25);
}

.switch.on::after { left: calc(100% - 1.18rem); }

.switch:disabled { opacity: .5; cursor: not-allowed; }

/* Variante para formularios que se guardan enteros: el interruptor es la
   casilla de siempre, solo que escondida y pintada como interruptor. */
.switch-campo { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-campo:checked + .switch { background: hsl(var(--primary)); }
.switch-campo:checked + .switch::after { left: calc(100% - 1.18rem); }
.switch-campo:focus-visible + .switch { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }

/* ---------- Campos de solo lectura ---------- */
input[readonly],
textarea[readonly] {
    opacity: .6;
    cursor: not-allowed;
}

/* ---------- Texto con formato (terminos y condiciones) ---------- */
.contenido-rico { line-height: 1.7; }
.contenido-rico h1,
.contenido-rico h2,
.contenido-rico h3,
.contenido-rico h4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    margin: 1.4em 0 .5em;
    line-height: 1.3;
}
.contenido-rico h1 { font-size: 1.6rem; }
.contenido-rico h2 { font-size: 1.3rem; }
.contenido-rico h3 { font-size: 1.1rem; }
.contenido-rico p  { margin: 0 0 1em; }
.contenido-rico ul,
.contenido-rico ol { margin: 0 0 1em 1.4em; }
.contenido-rico ul { list-style: disc; }
.contenido-rico ol { list-style: decimal; }
.contenido-rico li { margin: .3em 0; }
.contenido-rico a  { color: hsl(var(--primary)); text-decoration: underline; }
.contenido-rico blockquote {
    margin: 1em 0;
    padding: .6em 1em;
    border-left: 3px solid hsl(var(--primary));
    background: hsl(var(--muted) / .5);
    border-radius: .35rem;
}
.contenido-rico hr {
    border: 0;
    border-top: 1px solid hsl(var(--border));
    margin: 1.5em 0;
}
.contenido-rico strong, .contenido-rico b { font-weight: 700; }

/* ---------- Imagen que no carga ---------- */
img.miniatura {
    object-fit: cover;
    background: hsl(var(--muted));
}

/* ============================================================
   Barra lateral de loterias
   ============================================================ */

/* Columna fija que se desplaza por su cuenta, sin arrastrar la pagina */
.barra-loterias {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;   /* al llegar al final no sigue la pagina */
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
    padding-right: .25rem;
}

.barra-loterias::-webkit-scrollbar { width: 5px; }
.barra-loterias::-webkit-scrollbar-track { background: transparent; }
.barra-loterias::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 999px;
}
.barra-loterias:hover::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / .45); }

/* Separador con el nombre del tipo */
.barra-titulo {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    text-align: center;
    width: 100%;
    margin: .5rem 0 .15rem;
    line-height: 1.2;
}

/* Icono de cada loteria.
   Ojo: aqui NO se pone border-radius. La forma la trae la clase
   forma-redonda / forma-suave / forma-cuadrada que se anade al mismo
   elemento, y como esas reglas estan declaradas mas arriba, cualquier
   border-radius escrito aqui las anularia. */
.barra-icono {
    position: relative;
    display: block;
    border: 2px solid hsl(var(--border));
    overflow: hidden;
    flex-shrink: 0;
    transition: transform .15s ease, border-color .15s ease;
}
.barra-icono:hover { transform: scale(1.06); border-color: hsl(var(--primary)); }

.barra-icono.favorito { border-color: hsl(45 93% 55%); }

.barra-icono.activo {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 2px hsl(var(--primary) / .3);
}

/* Estrellita sobre el icono favorito */
.barra-icono .estrella {
    position: absolute;
    top: -2px;
    right: -2px;
    width: .85rem;
    height: .85rem;
    color: hsl(45 93% 55%);
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / .4));
}

/* ---------- Version movil: tira horizontal ---------- */
.barra-movil {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: .5rem .25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.barra-movil::-webkit-scrollbar { display: none; }

.barra-movil .barra-icono {
    width: 3rem;
    height: 3rem;
}

@media (min-width: 1024px) {
    .barra-movil { display: none; }
}

/* ============================================================
   Selector de forma (Configuracion -> Identidad del sitio)
   El recuadro se marca solo con CSS, en cuanto se pulsa la opcion,
   sin esperar a guardar.
   ============================================================ */
.opcion-forma {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    padding: .625rem;
    border: 2px solid hsl(var(--border));
    border-radius: .5rem;
    background: hsl(var(--muted) / .3);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.opcion-forma:hover { border-color: hsl(var(--primary) / .4); }

.opcion-forma .muestra {
    width: 2.25rem;
    height: 2.25rem;
    background: hsl(var(--primary) / .7);
}

.opcion-forma .etiqueta {
    font-size: .625rem;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    color: hsl(var(--muted-foreground));
}

input:checked + .opcion-forma {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary) / .1);
}
input:checked + .opcion-forma .etiqueta { color: hsl(var(--primary)); }

/* ============================================================
   Cinta de datos del dia
   Va bajo el carrusel de la pagina principal y va pasando los
   animales calientes, frios o fijos de cada loteria.
   ============================================================ */
.cinta-datos {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid hsl(var(--border));
    border-radius: .5rem;
    background: hsl(var(--card));
    overflow: hidden;
    margin: 1rem 0;
}

/* Rotulo fijo de la izquierda */
.cinta-rotulo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    padding: .5rem .85rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    z-index: 2;
}

.cinta-rotulo .titulo {
    font-weight: 700;
    font-size: .8rem;
    line-height: 1.1;
    white-space: nowrap;
}

.cinta-rotulo .periodo {
    font-size: .62rem;
    opacity: .85;
    white-space: nowrap;
    margin-top: .1rem;
}

/* Zona que se desplaza */
.cinta-pista {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Difuminado en los bordes para que no corte en seco */
.cinta-pista::before,
.cinta-pista::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2rem;
    z-index: 2;
    pointer-events: none;
}
.cinta-pista::before { left: 0;  background: linear-gradient(to right, hsl(var(--card)), transparent); }
.cinta-pista::after  { right: 0; background: linear-gradient(to left,  hsl(var(--card)), transparent); }

.cinta-tren {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .45rem 0;
    white-space: nowrap;
    will-change: transform;
    animation: cinta-correr var(--cinta-duracion, 40s) linear infinite;
}

/* Al pasar el raton se detiene, para poder leerla */
.cinta-datos:hover .cinta-tren { animation-play-state: paused; }

@keyframes cinta-correr {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* La copia repetida del tren no debe contar como una sola caja:
   con display:contents sus hijos siguen siendo elementos del flex y
   las dos mitades miden exactamente lo mismo, que es lo que hace que
   el bucle no pegue un salto al reiniciarse. */
.cinta-tren > [aria-hidden="true"] { display: contents; }

/* Cada animal de la cinta */
.cinta-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
}

.cinta-item .loteria {
    font-size: .68rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: .02em;
}

.cinta-item img {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .375rem;
    object-fit: cover;
    flex-shrink: 0;
}

.cinta-item .numero {
    font-weight: 700;
    font-size: .82rem;
    color: hsl(var(--foreground));
}

.cinta-item .nombre {
    font-size: .78rem;
    color: hsl(var(--foreground));
}

.cinta-item .dato {
    font-size: .66rem;
    color: hsl(var(--muted-foreground));
}

/* La probabilidad va destacada: es el dato que importa */
.cinta-item .probabilidad {
    font-weight: 700;
    font-size: .68rem;
    color: hsl(var(--primary));
    background: hsl(var(--primary) / .1);
    border-radius: .25rem;
    padding: .05rem .3rem;
}

/* Separador entre loterias */
.cinta-separador {
    flex-shrink: 0;
    width: 1px;
    height: 1.4rem;
    background: hsl(var(--border));
}

@media (max-width: 640px) {
    .cinta-rotulo { padding: .4rem .6rem; }
    .cinta-rotulo .titulo { font-size: .72rem; }
    .cinta-rotulo .periodo { display: none; }
    .cinta-item .loteria { display: none; }
}

/* Si el sistema pide menos movimiento, se queda quieta */
@media (prefers-reduced-motion: reduce) {
    .cinta-tren { animation: none; }
    .cinta-pista { overflow-x: auto; }
}

/* ============================================================
   Formas de los contenedores
   Cada zona de la pagina elige la suya desde Configuracion.

   ESTE BLOQUE VA AL FINAL A PROPOSITO: estas clases se anaden
   al mismo elemento que otras (por ejemplo .barra-icono), asi que
   tienen que declararse las ultimas para que ganen siempre.
   ============================================================ */
.forma-redonda  { border-radius: 9999px; }
.forma-suave    { border-radius: .75rem; }
.forma-cuadrada { border-radius: 0; }

/* La imagen interior sigue la forma del contenedor */
.forma-redonda > img  { border-radius: 9999px; }
.forma-suave > img    { border-radius: .75rem; }
.forma-cuadrada > img { border-radius: 0; }