/* COLORES DE TU MARCA */
        :root { 
            --orange: #F05D06; 
            --black: #212121; 
            --green: #d5f208; 
            --blue: #1c3ce5; 
            --light-input: #ecf0f3; 
            --lima-neon: #d5f208;
            --naranja: #ff6600;
            --azul-btn: #0000ff;
        }
        
        body { background-color: #f8f9fa; font-family: 'Tahoma', sans-serif; display: flex; flex-direction: column; min-height: 100vh; }
        
        /* HEADER */
        .header-admin { background: var(--black); color: white; padding: 0 40px; border-bottom: 5px solid var(--green); display: flex; align-items: center; position: relative; height: 70px; }
        .header-logo { max-height: 55px; width: auto; position: relative; z-index: 10; }
        .header-title-container { position: absolute; left: 0; right: 0; text-align: center; width: 100%; pointer-events: none; }
        .header-title-container h3 { margin: 0; display: inline-block; font-weight: normal; letter-spacing: 2px; pointer-events: auto; }

        /* TARJETA LOGIN - */
        .card-login {
            background-color: #D6F205;
            border: none;
            border-left: 10px solid var(--orange); 
            border-radius: 6px;
            box-shadow: 0 5px 20px rgba(0,0,0,2);
            padding: 5px 10px;
         }

        /* TITULOS */
        .login-title { font-size: 1.5rem; color: #000; margin-bottom: 5px; font-weight: normal; }
        .login-subtitle { color: #888; font-size: 0.9rem; margin-bottom: 25px; }

        /* LABELS (Etiquetas) */
        label {
            font-size: 0.45rem;
            font-weight: 800; /* Letra gruesa */
            color: #555;
            text-transform: uppercase; /* Todo mayúscula */
            margin-bottom: 5px;
            display: block;
        }

        /* INPUTS (Campos de texto) - Color azul claro como la foto */
        .form-control {
            background-color: var(--light-input); 
            border: 1px solid #ced4da;
            border-radius: 4px;
            height: 45px;
            font-size: 0.95rem;
        }
        .form-control:focus {
            background-color: #fff;
            border-color: var(--blue);
            box-shadow: 0 0 0 0.2rem rgba(28, 60, 229, 0.15);
        }

        /* BOTON AZUL */
        .btn-login {
            background-color: var(--blue);
            color: white;
            border: none;
            height: 48px;
            text-transform: uppercase;
            font-weight: 800;
            font-size: 1rem;
            border-radius: 4px;
            margin-top: 10px;
        }
        .btn-login:hover { background-color: #1530b5; color: white; }

        /* CAPTCHA ESTILO CAJA GRIS */
        .captcha-box {
            background-color: #343a40; /* Gris oscuro */
            color: #ffc107; /* Amarillo */
            padding: 10px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 1.1rem;
            text-align: center;
            width: 100%;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 45px;
        }
        .captcha-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

        /* FOOTER */
        .footer-sap { background-color: var(--black); color: white; padding: 20px; text-align: center; margin-top: auto; border-top: 5px solid var(--green); }
        .link-register { color: var(--orange); font-weight: bold; text-decoration: none; }
        .link-register:hover { text-decoration: underline; color: #d44d05; }
        
        

    /* CONTENEDOR CON SOMBRA */
    
    .hexagon-wrapper {
        filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));
        padding: 20px;
    }

    /* TARJETA HEXAGONAL ANCHA */
 /* Contenedor para la sombra del octágono */
    .octagon-wrapper {
        filter: drop-shadow(0 15px 35px rgba(0,0,0,0.9));
        padding: 20px;
    }

    /* LA TARJETA OCTAGONAL */
    .card-login {
        background-color: var(--lima-neon) !important;
        border: none !important;
        
        /* CORTE DE OCTÁGONO: Corta las 4 esquinas */
        clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
        
        /* Espaciado interno generoso para que el texto no toque los cortes */
        padding: 60px 80px !important;
        min-height: 450px;
        width: 100%;
        display: flex;
        align-items: center;
    }

    /* Estilo para los campos de entrada */
    .form-control {
        background-color: rgba(255, 255, 255, 0.8) !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        height: 45px;
        font-weight: 500;
    }

    /* Botón de acción masivo */
    .btn-login {
        background-color: var(--azul-btn) !important;
        color: white !important;
        font-weight: 900 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 4px solid #00008b !important;
        padding: 15px !important;
    }

    /* Captcha Grande y Legible */
    .captcha-row { display: flex; gap: 15px; align-items: stretch; margin-top: 10px; }
    .captcha-box { 
        flex: 0 0 180px; height: 65px; background: #000; 
        border-radius: 4px; overflow: hidden;
    }
    .captcha-input { height: 65px !important; font-size: 1.4rem !important; text-align: center; }