/**
 * CazaOfertas - HOJA UNICA DE TEMA
 * --------------------------------
 * Los tokens de color viven AQUI y solo aqui. Se carga con <link>, nunca se copia el
 * bloque :root a otra pagina (regla del ecosistema, decision 2026-08-14): en otro proyecto
 * los tokens acabaron copiados en 128 de 136 paginas, 47 variables divergieron y un mismo
 * bug quedo replicado 108 veces. Si aparece un segundo :root con colores en este repo, eso
 * es la señal de que se rompio la regla.
 *
 * Los valores salen de la paleta que ya usaba public/index.html, extraida tal cual para no
 * cambiar el aspecto de lo existente.
 */

:root {
    /* Fondos */
    --co-fondo: #0f1117;
    --co-superficie: #1a1a2e;
    --co-superficie-alta: #16213e;
    --co-borde: #333;

    /* Texto */
    --co-texto: #fff;
    --co-texto-tenue: #888;
    --co-texto-debil: #555;

    /* Acentos y estados */
    --co-acento: #e94560;
    --co-acento-fuerte: #ff4d6d;
    --co-info: #00bcd4;
    --co-ok: #00ff88;
    --co-aviso: #ff9800;
    --co-error: #ff4444;

    /* Formas */
    --co-radio: 8px;
    --co-radio-sm: 6px;
    --co-fuente: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Piezas compartidas por las pantallas de acceso ---- */
.co-pantalla-auth {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--co-fondo);
    color: var(--co-texto);
    font-family: var(--co-fuente);
    padding: 24px;
}

.co-tarjeta {
    background: var(--co-superficie);
    border: 1px solid var(--co-borde);
    border-radius: var(--co-radio);
    padding: 32px;
    width: 100%;
    max-width: 380px;
}

.co-tarjeta h1 {
    margin: 0 0 4px;
    font-size: 22px;
    color: var(--co-acento);
}

.co-sub {
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--co-texto-tenue);
}

.co-campo {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    margin-bottom: 12px;
    background: var(--co-fondo);
    border: 1px solid var(--co-borde);
    border-radius: var(--co-radio-sm);
    color: var(--co-texto);
    font-size: 14px;
    font-family: inherit;
}

.co-campo:focus {
    outline: none;
    border-color: var(--co-acento);
}

.co-boton {
    width: 100%;
    padding: 11px;
    background: var(--co-acento);
    color: var(--co-texto);
    border: none;
    border-radius: var(--co-radio-sm);
    font-size: 14px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
}

.co-boton:hover { background: var(--co-acento-fuerte); }
.co-boton:disabled { opacity: .55; cursor: default; }

.co-enlace {
    background: none;
    border: none;
    color: var(--co-info);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.co-separador {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    color: var(--co-texto-debil);
    font-size: 12px;
}

.co-separador::before,
.co-separador::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--co-borde);
}

.co-aviso {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: var(--co-radio-sm);
    font-size: 13px;
    line-height: 1.45;
    display: none;
}

.co-aviso.error { display: block; background: rgba(255, 68, 68, .12); color: var(--co-error); }
.co-aviso.ok { display: block; background: rgba(0, 255, 136, .10); color: var(--co-ok); }
.co-aviso.info { display: block; background: rgba(0, 188, 212, .10); color: var(--co-info); }

/* Franja de "confirma tu correo" que el panel muestra arriba del todo. */
.co-franja-verificacion {
    background: var(--co-aviso);
    color: var(--co-fondo);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

.co-franja-verificacion button {
    margin-left: 10px;
    background: var(--co-fondo);
    color: var(--co-aviso);
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}