* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #F5F7FA;
    padding: 20px;
}

/* LOGIN, sistema PASE */

.login-page {
    min-height: calc(100vh - 40px);
    margin: -20px;
    padding: 40px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F7FA;
}

.login-container {
    width: 100%;
    max-width: 900px;
    min-height: 520px;
    display: flex;
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
}

/* El panel que esta a lado*/

.login-info {
    width: 45%;
    padding: 50px 40px;
    background: #003B6F;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-info::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 184, 28, 0.12);
    top: -80px;
    right: -80px;
}

.login-info::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(42, 92, 56, 0.35);
    bottom: -70px;
    left: -60px;
}

.login-logo {
    position: relative;
    z-index: 1;
    margin-bottom: 35px;
}

.login-logo h1 {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.login-logo .linea {
    width: 60px;
    height: 4px;
    background: #FFB81C;
    border-radius: 5px;
    margin-bottom: 20px;
}

.login-info h2 {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 20px;
}

.login-info p {
    position: relative;
    z-index: 1;
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.9;
}

.login-institucion {
    position: relative;
    z-index: 1;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.8rem;
    opacity: 0.85;
}

/* Formulario */

.login-formulario {
    width: 55%;
    padding: 55px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-formulario h2 {
    color: #003B6F;
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.login-subtitulo {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 35px;
}

.login-campo {
    margin-bottom: 22px;
}

.login-campo label {
    display: block;
    color: #003B6F;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.login-campo input {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #D8DDE3;
    border-radius: 8px;
    background: #FAFBFC;
    color: #333;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

.login-campo input:focus {
    border-color: #2A5C38;
    background: white;
    box-shadow: 0 0 0 3px rgba(42, 92, 56, 0.10);
}

.login-campo input::placeholder {
    color: #A5A5A5;
}

.login-button {
    width: 100%;
    padding: 13px;
    margin-top: 8px;
    border: none;
    border-radius: 8px;
    background: #2A5C38;
    color: white;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-button:hover {
    background: #003B6F;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 59, 111, 0.20);
}

.login-button:active {
    transform: translateY(0);
}

/*Responsive*/

@media (max-width: 750px) {
    .login-container {
        flex-direction: column;
        max-width: 500px;
    }

    .login-info,
    .login-formulario {
        width: 100%;
    }

    .login-info {
        padding: 35px 30px;
    }

    .login-logo {
        margin-bottom: 20px;
    }

    .login-logo h1 {
        font-size: 2.4rem;
    }

    .login-institucion {
        margin-top: 25px;
    }

    .login-formulario {
        padding: 40px 30px;
    }
}

/*Registro desde el login*/

.login-registro {
    margin-top: 22px;
    text-align: center;
    font-size: 0.85rem;
    color: #777;
}

.login-registro a {
    margin-left: 5px;
    color: #003B6F;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.login-registro a:hover {
    color: #2A5C38;
    text-decoration: underline;
}

/* Panele principal*/

/* Marca */

/* Usuario */

/*Contenido del panel*/

/* =====================================================
   ENCABEZADO PASE
   ===================================================== */

.encabezado-pase {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #10376A;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

/*.subtitulo-panel {
    color: #2A5C38;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.encabezado-panel h1 {
    color: #003B6F;
    font-size: 34px;
    font-weight: 600;
    margin: 8px 0;
}

.encabezado-panel p {
    color: #666666;
    margin: 0;
    font-size: 15px;
}*/

/* Imagen superior */

.imagen-encabezado {
    display: block;
    width: 60%;
    max-width: 2048px;
    height: auto;
    margin: 0 auto;
}

.menu-pase {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #10376a;
    margin: 0;
    padding: 0;
    border: none;
}

.menu-pase a {
    display: block;
    padding: 16px 28px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: background-color 0.2s ease;
}

.menu-pase a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/*  CONTENIDO DEL PANEL */

.contenido-panel {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 55px 0;
}

/* ENCABEZADO DEL CONTENIDO */

.encabezado-panel {
    margin-bottom: 40px;
    position: relative;
    padding-left: 20px;
    border-left: 5px solid #FFB81C;
}

.encabezado-panel h1 {
    color: #003B6F;
    font-size: 38px;
    font-weight: 800;
    margin: 8px 0;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0, 59, 111, 0.05);
    gap: 12px;
}

.encabezado-panel h1 {
    font-size: 34px;
    font-weight: 500; 
    margin: 0 0 8px 0;
    letter-spacing: -0.5px; 
    transform: translateY(2px);
}

/* MI CUENTA */

.seccion-cuenta {
    margin-top: 40px;
    padding: 25px 0;
}

.contenido-cuenta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.contenido-cuenta h2 {
    margin: 0 0 8px 0;
    color: #003B6F;
    font-size: 23px;
    font-weight: 600;
}

.contenido-cuenta p {
    margin: 0 0 18px 0;
    color: #666666;
    font-size: 15px;
}

/* Botón modificar perfil */

.contenido-cuenta .boton-secundario {
    display: inline-block;
    padding: 11px 24px;
    background-color: #003B6F; /* Fondo azul */
    color: #FFFFFF; /* Texto blanco */
    border: 1px solid #003B6F;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 59, 111, 0.2); /* Sombra suave */
}

/* CERRAR SESIÓN*/

/* PIE DE PÁGINA PASE */

.footer-panel {
    width: 100%;
    margin: 0;
    padding: 10px 0; 
    background: #123b6f;
    max-height: 240px; 
    display: flex;
    align-items: center; 
    justify-content: center;
    overflow: hidden;
    border-radius: 0 0 12px 12px;
}

.imagen-pie {
    display: block;
    width: 95%;
    max-width: 2048px;
    height: auto;
    margin: 0 auto;
}

/* Info del usuario*/

/*Donde seleccionan que proyecto desean ver*/

.proyectos-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 45px;
}

/* Tarjetas */

.proyecto-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente todo el contenido */
    align-items: flex-start;
    min-height: 200px;
    padding: 30px 35px;
    box-sizing: border-box;
    text-decoration: none;
    background-color: #FFFFFF;
    border: 1px solid #E1E5E9;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

.proyecto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 59, 111, 0.12);
}

.proyecto-principal {
    border-top: 5px solid #2A5C38;
}

.proyecto-secundario {
    border-top: 5px solid #003B6F;
}

.proyecto-card h2 i {
    margin-right: 8px;
    color: inherit; 
    font-size: 0.9em;
}

.proyecto-principal h2 {
    color: #2A5C38;
}

.proyecto-secundario h2 {
    color: #003B6F;
}

.proyecto-card p {
    color: #666666;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.flecha-proyecto {
    position: absolute;
    bottom: 20px;
    right: 25px;
    color: #003B6F;
    font-size: 24px;
    opacity: 0.5;
    transition: opacity 0.3s, transform 0.3s;
}

.proyecto-card:hover .flecha-proyecto {
    opacity: 1;
    transform: translateX(5px);
}

/*  Mi cuenta*/

.seccion-cuenta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-top: 2px solid #F0F2F5;
    border-bottom: 2px solid #F0F2F5;
    margin-bottom: 30px;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.seccion-cuenta h2 {
    color: #003B6F;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 5px;
}

.seccion-cuenta p {
    color: #777777;
    font-size: 14px;
    margin: 0;
}

.boton-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #003B6F; /* Azul */
    color: #FFFFFF; /* Letras blancas */
    border: 1px solid #003B6F;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none; /* Quita el subrayado */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 59, 111, 0.2);
}

.boton-secundario:hover {
    background-color: #00294D; /* Azul más oscuro */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 59, 111, 0.3);
}

/* Administracion*/

/* footer*/

.footer-panel {
    border-top: 1px solid #E5E7EB;
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    color: #888888;
    font-size: 12px;
}

/* Responsive*/

@media (max-width: 750px) {
    .proyectos-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 550px) {
    .contenido-panel {
        width: 92%;
        padding: 35px 0;
    }

    .encabezado-panel h1 {
    font-size: 32px;
    font-weight: 600; 
    color: #003B6F;
    margin: 0 0 8px 0;
    }

    .seccion-cuenta {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .footer-panel {
        flex-direction: column;
        gap: 5px;
    }
}

/*Administracion de usuarios */

.contenido-admin {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 0;
}

/* Encabezado */

.encabezado-admin {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;
    margin-bottom: 30px;
}

.encabezado-admin > div > span {
    color: #2A5C38;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.encabezado-admin h1 {
    color: #003B6F;
    font-size: 30px;
    font-weight: 600;
    margin: 7px 0;
}

.encabezado-admin p {
    color: #666666;
    font-size: 14px;
    margin: 0;
}

/* Botón agregar */

.boton-agregar {
    background-color: #2A5C38;
    color: #FFFFFF;
    text-decoration: none;
    padding: 11px 17px;
    border-radius: 5px;
    font-size: 13px;
    white-space: nowrap;
}

.boton-agregar:hover {
    background-color: #1F462B;
}

/* Contenedor tabla */

.tabla-contenedor {
    background-color: #FFFFFF;
    border: 1px solid #E1E5E9;
    border-radius: 8px;
    overflow: hidden;
}

.tabla-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px;
    border-bottom: 1px solid #E5E7EB;
}

.tabla-superior h2 {
    color: #333333;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.tabla-superior span {
    color: #888888;
    font-size: 13px;
}

/* Tabla */

.tabla-scroll {
    overflow-x: auto;
}

.tabla-contenedor table {
    width: 100%;
    border-collapse: collapse;
}

.tabla-contenedor th {
    background-color: #F5F7FA;
    color: #555555;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    padding: 13px 15px;
    border-bottom: 1px solid #E1E5E9;
}

.tabla-contenedor td {
    color: #444444;
    font-size: 13px;
    padding: 15px;
    border-bottom: 1px solid #EEEEEE;
    vertical-align: middle;
}

.tabla-contenedor tbody tr:hover {
    background-color: #FAFBFC;
}

/* Etiquetas de rol */

.etiqueta-rol {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.etiqueta-rol.admin {
    color: #003B6F;
    background-color: #EAF1F8;
}

.etiqueta-rol.usuario {
    color: #2A5C38;
    background-color: #EAF2EC;
}

/* Acciones */

.acciones-usuario {
    display: flex;
    gap: 8px;
}

.acciones-usuario a {
    text-decoration: none;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
}

.accion-editar {
    color: #003B6F;
    border: 1px solid #003B6F;
}

.accion-editar:hover {
    background-color: #003B6F;
    color: #FFFFFF;
}

.accion-eliminar {
    color: #A33A3A;
    border: 1px solid #D8A5A5;
}

.accion-eliminar:hover {
    background-color: #A33A3A;
    color: #FFFFFF;
}

/* Sin usuarios */

.sin-usuarios {
    text-align: center;
    color: #888888 !important;
    padding: 35px !important;
}

/* Regresar */

/* Responsive */

@media (max-width: 750px) {
    .encabezado-admin {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Formulario para agregar usuario*/

.formulario-contenedor {
    width: 100%;
    max-width: 780px;
    background: #FFFFFF;
    border: 1px solid #E1E5E9;
    border-radius: 8px;
    padding: 32px 36px;
    box-sizing: border-box;
}

/* Separación entre campos */

.campo-formulario {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
}

/* Etiquetas */

.campo-formulario label {
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
}

/* Campos */

.campo-formulario input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 12px;
    background-color: #FFFFFF;
    border: 1px solid #D7DCE1;
    border-radius: 5px;
    color: #333333;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.campo-formulario input:hover {
    border-color: #B9C1C9;
}

.campo-formulario input:focus {
    border-color: #003B6F;
    box-shadow:
        0 0 0 3px rgba(0, 59, 111, 0.07);
}

/* Texto de ayuda */

.campo-formulario small {
    color: #888888;
    font-size: 11px;
    line-height: 1.5;
    margin-top: 6px;
}

/* Tipo de usuario */

.rol-informativo {
    width: fit-content;
    padding: 8px 12px;
    background-color: #EAF2EC;
    border: 1px solid #D5E5D9;
    border-radius: 5px;
    color: #2A5C38;
    font-size: 12px;
    font-weight: 600;
}

/*Botones*/

.botones-formulario {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #E5E7EB;
}

.boton-cancelar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    box-sizing: border-box;
    padding: 0 16px;
    color: #555555;
    background-color: #FFFFFF;
    border: 1px solid #D7DCE1;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
    transition: 0.2s ease;
}

.boton-cancelar:hover {
    background-color: #F5F7FA;
    border-color: #BFC6CD;
}

.boton-guardar {
    min-height: 40px;
    padding: 0 18px;
    color: #FFFFFF;
    background-color: #2A5C38;
    border: 1px solid #2A5C38;
    border-radius: 5px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s ease;
}

.boton-guardar:hover {
    background-color: #1F462B;
    border-color: #1F462B;
}

/* Mensajes del formulario*/

.mensaje-formulario {
    width: 100%;
    max-width: 780px;
    box-sizing: border-box;
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 13px;
}

.mensaje-formulario.error {
    color: #8A3030;
    background-color: #FBECEC;
    border: 1px solid #E8C5C5;
}

/*Responsive*/

@media (max-width: 600px) {
    .formulario-contenedor {
        padding: 25px 20px;
    }

    .botones-formulario {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .boton-cancelar,
    .boton-guardar {
        width: 100%;
    }
}

.regresar-admin {
    display: inline-block;
    margin-top: 14px;
    color: #003B6F;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}

.regresar-admin:hover {
    text-decoration: underline;
}

/* Mesnajes de gestion*/

.mensaje-exito {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 12px 15px;
    background-color: #EAF2EC;
    border: 1px solid #D5E5D9;
    border-radius: 5px;
    color: #2A5C38;
    font-size: 13px;
}

.mensaje-error {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 12px 15px;
    background-color: #FBECEC;
    border: 1px solid #E8C5C5;
    border-radius: 5px;
    color: #8A3030;
    font-size: 13px;
}

/* Perfil*/

.seccion-cuenta.perfil {
    display: block;
    margin-top: 25px;
}

.perfil-titulo {
    margin-bottom: 25px;
}

.perfil-titulo h2 {
    margin-bottom: 5px;
}

.perfil-titulo p {
    margin: 0;
}

/* Campos */

.campo-perfil {
    margin-bottom: 18px;
}

.campo-perfil label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.campo-perfil input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    background-color: #fff;
}

.campo-perfil input:focus {
    outline: none;
    border-color: #777;
}

.campo-perfil small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #777;
}

/* Botones */

.perfil-botones {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #E5E7EB;
}

.boton-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2A5C38; /* Verde */
    color: #FFFFFF; /* Letras blancas */
    border: 1px solid #2A5C38;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(42, 92, 56, 0.2);
}

.boton-principal:hover {
    background-color: #1F462B; /* Verde más oscuro */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(42, 92, 56, 0.3);
}

/* Mensaje */

.mensaje-perfil {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 12px 15px;
    border-left: 3px solid #555;
    background-color: #f5f5f5;
    font-size: 14px;
}

/* Estilo del botón "Regresar al login" */

.volver-login {
    display: flex;
    justify-content: flex-end; /* Alinea el botón hacia la derecha */
    padding-right: 65px; /* Un poco de espacio para que no toque el borde */
}

.boton-volver-login {
    background-color: #003366; /* Azul marino igual al de la imagen */
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: normal;
    text-decoration: none; /* Quita el subrayado del enlace */
    display: inline-block;
    transition: background-color 0.3s ease;
}

.boton-volver-login:hover {
    background-color: #002244; /* Un azul un poco más oscuro al pasar el mouse */
}

/* =========================================================
   CONSULTA DE DATOS (consultaPotencia.php)
   Voltaje y corriente / Potencia
   ========================================================= */

/* colores del sistema PASE */

:root {
    --pase-azul: #003B6F;
    --pase-verde: #2A5C38;
    --pase-amarillo: #FFB81C;
    --pase-lila: #8E5CC4;
    --pase-naranja: #C2410C;
    --pase-rojo: #E3344B;
    --pase-blanco: #FFFFFF;
    --pase-gris-texto: #666666;
}

/* lo que oculta el JS con el atributo hidden se oculta siempre */

[hidden] {
    display: none !important;
}

/* ---------- estructura de la pagina ---------- */

.potencia-contenido {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 35px 0 50px;
}

/* titulo con su icono */

.potencia-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.potencia-titulo h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--pase-verde);
}

.potencia-titulo h1 i {
    margin-right: 10px;
    font-size: 22px;
    color: var(--pase-verde);
}

/* mensaje de error */

.mensaje-potencia {
    margin-bottom: 25px;
    padding: 13px 16px;
    background: #FFF4D6;
    border: 1px solid var(--pase-amarillo);
    border-radius: 8px;
    color: #6B5200;
    font-size: 14px;
}

.mensaje-potencia i {
    margin-right: 7px;
}

/* filtros a la izquierda e imagen a la derecha */

.potencia-principal {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 35px;
    align-items: start;
}

/* ---------- panel de filtros ---------- */

.potencia-filtros {
    padding: 25px;
    background: var(--pase-blanco);
    border: 1px solid #E1E5E9;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 59, 111, 0.08);
}

.potencia-filtros h2 {
    margin: 0 0 22px;
    font-size: 21px;
    color: var(--pase-azul);
}

.potencia-filtros h2 i {
    margin-right: 7px;
    color: var(--pase-verde);
}

.filtro-grupo {
    margin-bottom: 25px;
}

.filtro-grupo > label {
    display: block;
    margin-bottom: 9px;
    font-weight: 600;
    color: #333333;
}

/* ---------- botones de tipo: Voltaje y Corriente / Potencia ---------- */

.grupo-tipo {
    min-width: 0;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.grupo-tipo legend {
    margin-bottom: 8px;
    padding: 0;
    font-weight: 600;
}

.tipo-sencillo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* el radio se oculta pero sigue funcionando con teclado */

.tipo-sencillo input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tipo-sencillo label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 14px 10px;
    border: 2px solid #D0D5DD;
    border-radius: 10px;
    background: var(--pase-blanco);
    color: var(--pase-azul);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tipo-sencillo label i {
    font-size: 22px;
    color: var(--pase-verde);
}

.tipo-sencillo label:hover {
    border-color: var(--pase-azul);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 59, 111, 0.12);
}

.tipo-sencillo input:checked + label {
    background: linear-gradient(135deg, #003B6F, #0B5394);
    border-color: var(--pase-azul);
    color: var(--pase-blanco);
    box-shadow: 0 6px 16px rgba(0, 59, 111, 0.28);
}

.tipo-sencillo input:checked + label i {
    color: var(--pase-amarillo);
}

.tipo-sencillo input:focus-visible + label {
    outline: 3px solid var(--pase-amarillo);
    outline-offset: 2px;
}

/* ---------- calendario ---------- */

.calendario-contenedor {
    margin-top: 5px;
    padding: 10px;
    background: var(--pase-blanco);
    border: 1px solid #D8DDE3;
    border-radius: 10px;
}

.calendario-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.calendario-cabecera strong {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--pase-azul);
}

/* flechas para cambiar de mes */

.btn-mes {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: var(--pase-azul);
    color: var(--pase-blanco);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-mes:hover {
    background: #00294D;
    transform: scale(1.05);
}

/* dias de la semana y dias del mes en 7 columnas */

.calendario-semana,
.calendario-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendario-semana span {
    padding: 4px 0;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #777777;
}

/* dia sin datos (no se puede elegir) */

.dia-calendario {
    min-height: 30px;
    padding: 0;
    border: 1px solid #E1E5E9;
    border-radius: 6px;
    background: #F5F7FA;
    color: #999999;
    font-family: inherit;
    font-size: 11px;
    cursor: not-allowed;
}

/* espacios antes del dia 1 */

.dia-calendario.vacio {
    visibility: hidden;
}

/* dia con datos */

.dia-calendario.disponible {
    background: var(--pase-blanco);
    color: var(--pase-azul);
    border-color: #B8C7D6;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dia-calendario.disponible:hover {
    background: #EAF2EC;
    color: var(--pase-verde);
    border-color: var(--pase-verde);
    transform: scale(1.04);
}

/* dia elegido */

.dia-calendario.seleccionado {
    background: var(--pase-verde);
    color: var(--pase-blanco);
    border-color: var(--pase-verde);
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(42, 92, 56, 0.20);
}

.dia-calendario.seleccionado:hover {
    background: #1F462B;
    color: var(--pase-blanco);
}

/* pie del calendario con el boton "Quitar seleccion" */

.calendario-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--pase-gris-texto);
}

.boton-quitar-fechas {
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--pase-azul);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.ayuda-calendario {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.4;
    color: #777777;
}

/* ---------- texto de lo seleccionado y botones del formulario ---------- */

.potencia-seleccionada-info {
    margin: 8px 0 20px;
    padding: 9px 10px;
    background: #EAF1F8;
    border-left: 4px solid var(--pase-azul);
    border-radius: 6px;
    color: var(--pase-azul);
    font-size: 12px;
    font-weight: 600;
}

/* boton "Aplicar filtros" */

.boton-aplicar-potencia {
    width: 100%;
    padding: 12px 18px;
    border: 1px solid var(--pase-verde);
    border-radius: 8px;
    background: var(--pase-verde);
    color: var(--pase-blanco);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.boton-aplicar-potencia:hover {
    background: #1F462B;
    border-color: #1F462B;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(42, 92, 56, 0.20);
}

.boton-aplicar-potencia i {
    margin-right: 7px;
}

/* botones de limpiar (rojo) y volver al panel (amarillo) */

.botones-filtro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

.boton-filtro-extra {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 8px;
    font-size: 1.15rem;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.boton-filtro-extra:hover {
    transform: translateY(-1px);
    opacity: 0.95;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.boton-filtro-limpiar {
    background: var(--pase-rojo);
    color: var(--pase-blanco);
}

.boton-filtro-pase {
    background: var(--pase-amarillo);
    color: var(--pase-azul);
}

/* ---------- imagen de los paneles ---------- */

.paneles-potencia {
    width: 100%;
}

.paneles-imagen-contenedor {
    position: relative;
    width: 100%;
    max-width: 1096px;
    margin: 0 auto;
}

.paneles-imagen {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ---------- burbujas sobre la imagen ---------- */

/* su tamano es un porcentaje del ancho de la imagen, para que no se encimen */

.burbuja-potencia {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.7%;
    max-width: 40px;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--pase-rojo);
    color: var(--pase-blanco);
    font-family: inherit;
    font-size: clamp(6px, 0.8vw, 11px);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(227, 52, 75, 0.35);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.burbuja-potencia span {
    user-select: none;
}

.burbuja-potencia:hover {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 5px 12px rgba(227, 52, 75, 0.45);
}

/* leyenda que aparece arriba al pasar el mouse (texto de data-info) */

.burbuja-potencia::after {
    content: attr(data-info);
    position: absolute;
    bottom: 110%;
    left: 50%;
    z-index: 20;
    transform: translateX(-50%) translateY(4px);
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--pase-azul);
    color: var(--pase-blanco);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.burbuja-potencia:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* burbujas de bloque (Pb): cada una con su color, el de su recuadro en la imagen */

.burbuja-potencia.burbuja-azul {
    background: var(--pase-azul);
    box-shadow: 0 3px 8px rgba(0, 59, 111, 0.35);
}

.burbuja-potencia.burbuja-naranja {
    background: var(--pase-naranja);
    box-shadow: 0 3px 8px rgba(194, 65, 12, 0.35);
}

.burbuja-potencia.burbuja-lila {
    background: var(--pase-lila);
    box-shadow: 0 3px 8px rgba(142, 92, 196, 0.40);
}

.burbuja-potencia.burbuja-verde {
    background: var(--pase-verde);
    box-shadow: 0 3px 8px rgba(42, 92, 56, 0.35);
}

/* la leyenda de las Pb tiene varias lineas y el color de su burbuja */

.burbuja-azul::after,
.burbuja-naranja::after,
.burbuja-lila::after,
.burbuja-verde::after {
    white-space: pre;
    text-align: center;
    font-size: 12px;
}

.burbuja-azul::after { background: var(--pase-azul);
}

.burbuja-naranja::after { background: var(--pase-naranja);
}

.burbuja-lila::after { background: var(--pase-lila);
}

.burbuja-verde::after { background: var(--pase-verde);
}

/* Pb4x3 esta en la orilla derecha: su leyenda se alinea a la izquierda
   para que no se salga de la imagen */

.burbuja-verde::after {
    left: auto;
    right: 0;
    transform: translateY(4px);
}

.burbuja-verde:hover::after {
    transform: translateY(0);
}

/* cualquier burbuja seleccionada se pone amarilla */

.burbuja-potencia.seleccionada {
    background: var(--pase-amarillo);
    color: var(--pase-azul);
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 4px 10px rgba(255, 184, 28, 0.45);
}

/* globos de voltaje y corriente ("V1, C1"): pildora en lugar de circulo */

.burbuja-potencia.globo-doble {
    width: auto;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    padding: 0.5em 0.95em;
    border-radius: 999px;
    font-size: clamp(9px, 1vw, 14px);
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.burbuja-potencia.globo-doble:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

/* ---------- resultados ---------- */

.resultados-potencia {
    margin-top: 40px;
    padding: 30px;
    background: var(--pase-blanco);
    border: 1px solid #E1E5E9;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 59, 111, 0.08);
}

/* titulo "Resultados" y pestanas de tabla/grafica */

.resultados-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.resultados-cabecera h2 {
    margin: 0;
    font-size: 21px;
    color: var(--pase-azul);
}

.resultados-cabecera h2 i {
    margin-right: 8px;
    color: var(--pase-verde);
}

.resultados-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pestanas-vista {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(0, 59, 111, 0.07);
}

.pestana-vista {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pase-azul);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.pestana-vista i {
    font-size: 0.85rem;
    opacity: 0.8;
}

.pestana-vista:hover:not(.activa) {
    background: rgba(0, 59, 111, 0.08);
}

.pestana-vista.activa {
    background: var(--pase-azul);
    color: var(--pase-blanco);
}

.pestana-vista.activa i {
    opacity: 1;
}

.pestana-vista:focus-visible,
.boton-quitar-fechas:focus-visible {
    outline: 3px solid var(--pase-amarillo);
    outline-offset: 2px;
}

/* maximos de voltaje y corriente */

.resumen-indicadores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 14px 0 18px;
}

.indicador {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-left: 4px solid var(--pase-amarillo);
    background: rgba(0, 59, 111, 0.05);
}

.indicador-valor {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pase-azul);
}

.indicador-texto {
    font-size: 0.85rem;
    color: var(--pase-gris-texto);
}

/* titulo "Energia" arriba de la tabla de potencia */

.titulo-tabla-resultados {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--pase-azul);
}

/* ---------- tabla ---------- */

/* OJO: .tabla-contenedor tambien la usa la tabla de administrador.php */

.tabla-contenedor {
    width: 100%;
    max-height: 400px;
    margin-top: 18px;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid #E1E5E9;
    border-radius: 10px;
    background: var(--pase-blanco);
}

/* en consulta la tabla puede ser muy larga (un dia por minuto son 1,440 filas) */

.tabla-desplazable {
    max-height: 520px;
    overflow: auto;
}

.tabla-resultados-potencia {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--pase-blanco);
}

/* encabezado fijo arriba al desplazar la tabla */

.tabla-resultados-potencia th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 14px;
    background: var(--pase-azul);
    color: var(--pase-blanco);
    border-bottom: 1px solid var(--pase-azul);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.tabla-resultados-potencia td {
    padding: 11px 14px;
    border-bottom: 1px solid #E5E7EB;
    color: #333333;
    font-size: 14px;
    text-align: center;
}

.tabla-resultados-potencia tbody tr:last-child td {
    border-bottom: none;
}

.tabla-resultados-potencia tbody tr:hover {
    background: #F5F7FA;
}

/* columnas con valores en verde */

.unidad-columna {
    color: var(--pase-verde) !important;
    font-weight: 700;
}

/* ---------- grafica ---------- */

.grafica-contenedor {
    position: relative;
    width: 100%;
    height: 430px;
    margin-top: 18px;
    padding: 18px;
    background: #F5F7FA;
    border: 1px solid #D8DDE3;
    border-radius: 10px;
}

.grafica-contenedor canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ---------- pantallas medianas y celular ---------- */

@media (max-width: 1000px) {
    .potencia-principal {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 25px;
    }

    .potencia-filtros {
        padding: 20px;
    }
}

/* filtros arriba e imagen abajo */

@media (max-width: 900px) {
    .potencia-principal {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .potencia-titulo {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 600px) {
    .potencia-contenido {
        width: 94%;
        padding-top: 25px;
    }

    .potencia-titulo h1 {
        font-size: 22px;
    }

    .potencia-filtros {
        padding: 18px;
    }

    .potencia-filtros h2 {
        font-size: 19px;
    }

    .calendario-contenedor {
        padding: 8px;
    }

    .calendario-semana,
    .calendario-dias {
        gap: 3px;
    }

    .calendario-semana span {
        font-size: 9px;
    }

    .dia-calendario {
        min-height: 27px;
        font-size: 10px;
    }

    /* la leyenda de las burbujas puede partirse en varias lineas */

    .burbuja-potencia::after {
        width: max-content;
        max-width: 180px;
        font-size: 11px;
        white-space: pre-line;
    }

    .resultados-potencia {
        padding: 20px 15px;
    }

    .resultados-cabecera h2 {
        font-size: 19px;
    }

    .tabla-resultados-potencia th,
    .tabla-resultados-potencia td {
        padding: 9px 6px;
    }

    .grafica-contenedor {
        height: 350px;
        padding: 12px;
    }
}

/* ---------- menu del administrador ---------- */

.menu-admin {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-bottom: 45px;
}

/* cada tarjeta toma su color de estas variables */

.acento-verde { --acento: #2A5C38; --fondo-acento: rgba(42, 92, 56, 0.10);
}

.acento-azul { --acento: #003B6F; --fondo-acento: rgba(0, 59, 111, 0.10);
}

.acento-celeste { --acento: #1F6FB2; --fondo-acento: rgba(31, 111, 178, 0.10);
}

.acento-amarillo { --acento: #B7791F; --fondo-acento: rgba(255, 184, 28, 0.18);
}

.tarjeta-admin {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 140px;
    padding: 26px 28px 26px 32px;
    background: #FFFFFF;
    border: 1px solid #E1E5E9;
    border-radius: 14px;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* barra de color a la izquierda */

.tarjeta-admin::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5px;
    background: var(--acento);
}

.tarjeta-admin:hover {
    transform: translateY(-4px);
    border-color: var(--acento);
    box-shadow: 0 12px 28px rgba(0, 59, 111, 0.12);
}

.icono-admin {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--fondo-acento);
    color: var(--acento);
    font-size: 26px;
    transition: background 0.25s ease, color 0.25s ease;
}

.tarjeta-admin:hover .icono-admin {
    background: var(--acento);
    color: #FFFFFF;
}

.texto-admin {
    flex: 1;
}

.texto-admin h2 {
    margin: 0 0 6px;
    color: #1E2A36;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.texto-admin p {
    margin: 0;
    color: #6B7480;
    font-size: 14px;
    line-height: 1.5;
}

.flecha-admin {
    flex-shrink: 0;
    color: var(--acento);
    font-size: 18px;
    opacity: 0.4;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.tarjeta-admin:hover .flecha-admin {
    opacity: 1;
    transform: translateX(4px);
}

.tarjeta-admin:focus-visible {
    outline: 3px solid #FFB81C;
    outline-offset: 3px;
}

@media (max-width: 750px) {
    .menu-admin {
        grid-template-columns: 1fr;
    }

    .tarjeta-admin {
        min-height: 0;
        padding: 20px 20px 20px 24px;
    }

    .icono-admin {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
}

/* ---------- detalles del menu de usuario estandar ---------- */

.icono-proyecto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 22px;
    transition: background 0.3s ease, color 0.3s ease;
}

.proyecto-principal .icono-proyecto {
    background: rgba(42, 92, 56, 0.10);
    color: #2A5C38;
}

.proyecto-secundario .icono-proyecto {
    background: rgba(0, 59, 111, 0.10);
    color: #003B6F;
}

/* al pasar el mouse el icono se rellena */

.proyecto-principal:hover .icono-proyecto {
    background: #2A5C38;
    color: #FFFFFF;
}

.proyecto-secundario:hover .icono-proyecto {
    background: #003B6F;
    color: #FFFFFF;
}

.proyecto-card h2 {
    margin: 0;
    line-height: 1.3;
}

/* la flecha toma el color de su tarjeta */

.proyecto-principal .flecha-proyecto {
    color: #2A5C38;
}

.flecha-proyecto i {
    font-size: 20px;
}

.proyecto-card:focus-visible {
    outline: 3px solid #FFB81C;
    outline-offset: 3px;
}

/* ---------- detalles de mi cuenta ---------- */

.cuenta-con-icono {
    flex-direction: row;
    align-items: center;
    gap: 18px;
}

/* mismo estilo de icono que las tarjetas del menu */

.icono-mi-cuenta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 12px;
    background: rgba(0, 59, 111, 0.10);
    color: #003B6F;
    font-size: 24px;
    transition: background 0.3s ease, color 0.3s ease;
}

.cuenta-con-icono:hover .icono-mi-cuenta {
    background: #003B6F;
    color: #FFFFFF;
}

.contenido-cuenta .boton-secundario i {
    margin-right: 8px;
}

/* =========================================================
   AJUSTES RESPONSIVOS GENERALES
   ========================================================= */

img {
    max-width: 100%;
}

.menu-pase {
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .imagen-encabezado {
        width: 85%;
    }

    .menu-pase a {
        padding: 14px 16px;
    }
}

@media (max-width: 600px) {
    body {
        padding: 10px;
    }

    .login-page {
        margin: -10px;
    }

    .imagen-encabezado {
        width: 100%;
    }

    .menu-pase a {
        padding: 10px 12px;
        font-size: 12px;
    }

    .encabezado-panel h1 {
        font-size: 24px;
    }

    .contenido-panel {
        padding: 25px 0;
    }

    .volver-login {
        padding-right: 0;
        justify-content: center;
    }

    .perfil-botones {
        flex-direction: column-reverse;
    }

    .perfil-botones .boton-secundario,
    .perfil-botones .boton-principal {
        width: 100%;
    }
}

/* =========================================================
   ACTUALIZAR DATOS (actualizar_datos.php, solo administradores)
   ========================================================= */

.actualizar-descripcion {
    margin: 0;
    font-size: 15px;
    color: #666666;
}

.actualizar-form {
    padding: 30px 35px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}

/* zona para elegir o arrastrar los archivos */

.zona-archivo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 20px;
    border: 2px dashed #B8C4D2;
    border-radius: 8px;
    background: #F8FAFC;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.zona-archivo:hover {
    border-color: #003B6F;
    background: #EEF4FA;
}

.zona-archivo i {
    font-size: 34px;
    color: #2A5C38;
}

.zona-archivo span {
    font-size: 15px;
    font-weight: 600;
    color: #003B6F;
    word-break: break-all;
}

.zona-archivo small {
    font-size: 12px;
    color: #777777;
}

/* el input invisible cubre toda la zona, asi se pueden soltar archivos encima */

.zona-archivo input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.zona-archivo:focus-within {
    outline: 3px solid #FFB81C;
    outline-offset: 2px;
}

/* lista de lo que hace el sistema con cada archivo */

.actualizar-reglas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0 24px;
    padding: 16px 18px;
    list-style: none;
    background: #EEF4FA;
    border-left: 4px solid #003B6F;
    border-radius: 8px;
    font-size: 13px;
    color: #333333;
}

.actualizar-reglas i {
    width: 18px;
    margin-right: 6px;
    text-align: center;
    color: #003B6F;
}

/* boton cargar mientras procesa */

.boton-principal:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* resultado de cada archivo */

.actualizar-resumen {
    margin-top: 25px;
    padding: 24px 30px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}

.actualizar-resumen h2 {
    margin: 0 0 4px 0;
    font-size: 18px;
    color: #003B6F;
    word-break: break-all;
}

.actualizar-resumen h2 i {
    margin-right: 6px;
}

/* archivo cargado */

.resumen-exito {
    border-left: 5px solid #2A5C38;
}

.resumen-exito h2 i {
    color: #2A5C38;
}

/* archivo rechazado */

.resumen-rechazado {
    border-left: 5px solid #C62828;
}

.resumen-rechazado h2 {
    color: #C62828;
}

/* base, tabla y fechas del archivo, o el motivo del rechazo */

.resumen-archivo {
    margin: 0 0 18px 0;
    font-size: 14px;
    color: #666666;
}

/* cifras: agregados, omitidos y corregidos */

.resumen-cifras {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 18px;
}

.cifra {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    border-top: 4px solid #D0D5DD;
    border-radius: 8px;
    background: #F8FAFC;
}

.cifra-numero {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
}

.cifra-texto {
    margin-top: 4px;
    font-size: 13px;
    color: #555555;
}

.cifra-nuevos { border-top-color: #2A5C38;
}

.cifra-nuevos .cifra-numero { color: #2A5C38;
}

.cifra-existentes { border-top-color: #003B6F;
}

.cifra-existentes .cifra-numero { color: #003B6F;
}

.cifra-corregidos { border-top-color: #FFB81C;
}

.cifra-corregidos .cifra-numero { color: #9A6B00;
}

/* linea con el total de la tabla antes y despues */

.resumen-cambio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    border-left: 4px solid #FFB81C;
    border-radius: 8px;
    background: #FFF6E0;
    font-size: 14px;
    color: #333333;
}

.resumen-cambio i,
.resumen-cambio strong {
    color: #003B6F;
}

/* tabla con las lineas que tienen error */

.tabla-errores {
    overflow-x: auto;
}

.tabla-errores table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tabla-errores th {
    padding: 10px 14px;
    background: #003B6F;
    color: #FFFFFF;
    font-weight: 600;
    text-align: left;
}

.tabla-errores td {
    padding: 10px 14px;
    border-bottom: 1px solid #E5E7EB;
}

.tabla-errores td:first-child {
    width: 70px;
    font-weight: 600;
    color: #C62828;
}

/* avisos en rojo */

.aviso-errores {
    margin: 12px 0 0 0;
    padding: 10px 14px;
    border-left: 4px solid #C62828;
    background: #FDECEC;
    font-size: 13px;
    color: #7A1A1A;
}

.actualizar-aviso-general {
    margin-top: 25px;
}

/* celular */

@media (max-width: 600px) {
    .actualizar-form,
    .actualizar-resumen {
        padding: 22px 18px;
    }

    .resumen-cifras {
        grid-template-columns: 1fr;
    }
}

/* aviso de columnas que no venian en el archivo */

.aviso-faltantes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px 0;
    padding: 10px 14px;
    border-left: 4px solid #FFB81C;
    border-radius: 8px;
    background: #FFF6E0;
    font-size: 13px;
    color: #6B5200;
}

.aviso-faltantes i {
    color: #9A6B00;
}