/* ============================================
   FONDOS PARA LA PÁGINA DE LOGIN
   Paleta de grises: #2c3e50 (gris oscuro), #95a5a6 (gris medio), #ecf0f1 (gris claro)
   ============================================ */

/* OPCIÓN 1: Gradiente de Grises */
.auth-bg-gradient {
    background: linear-gradient(135deg, #ecf0f1 0%, #d5dbdc 25%, #bdc3c7 50%, #95a5a6 75%, #7f8c8d 100% );
}

/* OPCIÓN 2: Cuadrícula de Ciudad */
.auth-bg-grid {
    background-color: #ecf0f1;
    background-image:
    /* Líneas principales */
    repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(149, 165, 166, 0.3) 80px, rgba(149, 165, 166, 0.3) 83px ), repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(149, 165, 166, 0.3) 80px, rgba(149, 165, 166, 0.3) 83px ),
    /* Líneas secundarias */
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(127, 140, 141, 0.2) 40px, rgba(127, 140, 141, 0.2) 41px ), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(127, 140, 141, 0.2) 40px, rgba(127, 140, 141, 0.2) 41px );
}

/* OPCIÓN 3: Patrón de Puntos */
.auth-bg-dots {
    background-color: #ecf0f1;
    background-image: radial-gradient(circle, rgba(149, 165, 166, 0.4) 2px, transparent 2px), radial-gradient(circle, rgba(127, 140, 141, 0.3) 1.5px, transparent 1.5px);
    background-size: 40px 40px, 20px 20px;
    background-position: 0 0, 20px 20px;
}

/* OPCIÓN 4: Ondas en Grises */
.auth-bg-waves {
    background: linear-gradient(180deg, #ecf0f1 0%, #d5dbdc 50%, #ecf0f1 100%);
    position: relative;
}

    .auth-bg-waves > * {
        position: relative;
        z-index: 1;
    }

    .auth-bg-waves::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 300px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2395a5a6' fill-opacity='0.3' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,112C1248,107,1344,117,1392,122.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E") no-repeat top center;
        background-size: cover;
        z-index: 0;
    }

    .auth-bg-waves::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 300px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%232c3e50' fill-opacity='0.2' d='M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,197.3C672,192,768,160,864,149.3C960,139,1056,149,1152,165.3C1248,181,1344,203,1392,213.3L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom center;
        background-size: cover;
        z-index: 0;
    }

/* OPCIÓN 5: Líneas Diagonales */
.auth-bg-lines {
    background: linear-gradient(135deg, #f8f4fb 0%, #f0f1f4 100%);
    background-image: repeating-linear-gradient( 45deg, transparent, transparent 40px, rgba(221, 222, 224, 0.10) 40px, rgba(221, 222, 224, 0.10) 42px ), repeating-linear-gradient( -45deg, transparent, transparent 40px, rgba(35, 48, 60, 0.06) 40px, rgba(35, 48, 60, 0.06) 42px );
}

/* OPCIÓN 6: Mapa de Calles */
.auth-bg-streets {
    background-color: #f5f6f8;
    background-image:
    /* Calles principales */
    linear-gradient(rgba(221, 222, 224, 0.12) 3px, transparent 3px), linear-gradient(90deg, rgba(221, 222, 224, 0.12) 3px, transparent 3px),
    /* Calles secundarias */
    linear-gradient(rgba(35, 48, 60, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(35, 48, 60, 0.06) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 30px 30px, 30px 30px;
    background-position: -3px -3px, -3px -3px, -1px -1px, -1px -1px;
}

/* OPCIÓN 7: Luz Radiante */
.auth-bg-light {
    background: radial-gradient(ellipse at top left, rgba(221, 222, 224, 0.15), transparent 60%), radial-gradient(ellipse at top right, rgba(35, 48, 60, 0.12), transparent 60%), radial-gradient(ellipse at bottom, rgba(221, 222, 224, 0.10), transparent 60%), #fafbfc;
}

/* OPCIÓN 8: Bloques de Color */
.auth-bg-blocks {
    background: linear-gradient(135deg, rgba(221, 222, 224, 0.08) 25%, transparent 25%), linear-gradient(225deg, rgba(35, 48, 60, 0.06) 25%, transparent 25%), linear-gradient(315deg, rgba(221, 222, 224, 0.06) 25%, transparent 25%), linear-gradient(45deg, rgba(35, 48, 60, 0.04) 25%, transparent 25%);
    background-size: 400px 400px;
    background-color: #fafbfc;
}