@charset "utf-8";
/**********************************************************************
 * LABTRÓNICA
 * Sistema de Gestión del Laboratorio de Electrónica
 *
 * Archivo: tema_institucional.css
 *
 * Descripción:
 * Tema visual institucional del sistema.
 *
 * Autor:
 * Héctor Manuel Mariño Gómez
 *
 * Versión: 2.0
 **********************************************************************/

/*=====================================================
=                 CONFIGURACIÓN GENERAL                =
=====================================================*/

:root{

    /*=========================================
    =            COLORES DEL SISTEMA
    =========================================*/

    --color-principal: #0B5ED7;
    --color-principal-hover: #084298;
    --color-principal-suave: #EAF2FF;

    --color-exito: #198754;
    --color-exito-hover: #146C43;

    --color-advertencia: #FFC107;
    --color-advertencia-hover: #E0A800;
	
	--color-actualizacion: #EA580C;
	--color-actualizacion-hover: #C2410C;
	--color-actualizacion-suave: #FFF4E8;
	--color-actualizacion-icono: #FFE2C2;

    --color-error: #DC3545;
    --color-error-hover: #BB2D3B;

    --color-secundario: #6C757D;
    --color-secundario-hover: #5C636A;

    --color-fondo: #F4F6F9;
    --color-tarjeta: #FFFFFF;
    --color-encabezado: #F7F9FC;
    --color-borde: #D9E2EC;
    --color-icono-fondo: #D6E7FF;

    --color-texto: #495057;
    --color-texto-secundario: #5A6268;
    --color-texto-oscuro: #212529;

    /*=========================================
    =              TIPOGRAFÍA
    =========================================*/

    --fuente-principal: "Segoe UI", Arial, sans-serif;

    /*=========================================
    =             ESPACIADOS
    =========================================*/

    --espacio-pequeno: 10px;
    --espacio-normal: 20px;
    --espacio-grande: 30px;

    /*=========================================
    =           BORDES REDONDEADOS
    =========================================*/

    --radio-borde: 10px;

    /*=========================================
    =             SOMBRAS
    =========================================*/

    --sombra-tarjeta: 0 2px 8px rgba(0,0,0,0.10);

}

/*=====================================================
=                    BODY DEL SISTEMA                  =
=====================================================*/

*{

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body{

    font-family: var(--fuente-principal);
    font-size: 16px;
    color: var(--color-texto);
    background: var(--color-fondo);
    line-height: 1.6;

}

/*=====================================================
=              CONTENEDOR PRINCIPAL                    =
=====================================================*/

.lab-container{

    width: 92%;
    max-width: 1100px;
    margin: 60px auto 30px;

}

/*=====================================================
=              INDICADOR DE PROGRESO                  =
=====================================================*/

.lab-progress{

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 20px 24px;

    margin-bottom: 30px;

    background: var(--color-tarjeta);

    border: 1px solid var(--color-borde);

    border-left: 5px solid var(--color-principal);

    border-radius: 12px;

    box-shadow: var(--sombra-tarjeta);

}


/*=====================================================
=              NÚMERO DEL PASO                        =
=====================================================*/

.lab-progress-step{

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--color-principal);

    border-radius: 50%;

    color: #FFFFFF;

    font-size: 20px;

    font-weight: 700;

    flex-shrink: 0;

}


/*=====================================================
=              CONTENIDO DEL PROGRESO                 =
=====================================================*/

.lab-progress-content{

    flex: 1;

    min-width: 0;

}


.lab-progress-header{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 8px;

}


.lab-progress-title{

    margin: 0;

    color: var(--color-texto-oscuro);

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3;

}


.lab-progress-label{

    color: var(--color-principal);

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

}


.lab-progress-description{

    margin: 0 0 12px;

    color: var(--color-texto-secundario);

    font-size: 14px;

    line-height: 1.5;

}


/*=====================================================
=              BARRA DE PROGRESO                      =
=====================================================*/

.lab-progress-track{

    width: 100%;

    height: 8px;

    background: #DCE6F2;

    border-radius: 20px;

    overflow: hidden;

}


.lab-progress-bar{

    height: 100%;

    background: var(--color-principal);

    border-radius: inherit;

}

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

.lab-header{

    width: 92%;
    max-width: 1100px;
    margin: 30px auto 0;

    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    box-shadow: var(--sombra-tarjeta);

    overflow: hidden;

}

.lab-header-main{

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
    padding: 24px 28px;

    background: var(--color-tarjeta);

}

.lab-header-brand{

    display: flex;
    align-items: center;
    min-width: 0;

}

.lab-header-logos{

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

}

.lab-header-logo{

    display: block;
    object-fit: contain;

}

.lab-header-logo-ud{

    width: 64px;
    height: 64px;

}

.lab-header-logo-labtronica{

    width: 78px;
    height: 78px;

    max-width: none;
    max-height: none;

    object-fit: contain;
    flex-shrink: 0;

    filter: drop-shadow(
        0 4px 6px rgba(11,94,215,0.16)
    );

}

.lab-header-copy{

    min-width: 0;
    margin-left: 22px;

}

.lab-header-university{

    margin: 0;

    color: var(--color-texto-oscuro);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;

}

.lab-header-context{

    margin: 3px 0 0;

    color: var(--color-texto-secundario);
    font-size: 14px;
    line-height: 1.4;

}

.lab-header-context span{

    display: inline-block;
    margin: 0 5px;
    color: var(--color-principal);

}

.lab-header-system{

    margin: 8px 0 0;

    color: var(--color-principal);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;

}

.lab-header-meta{

    min-width: 200px;
    padding-left: 24px;

    border-left: 1px solid var(--color-borde);

}

.lab-header-meta-item{

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
    padding: 5px 0;

    font-size: 14px;

}

.lab-header-meta-item span{

    color: var(--color-texto-secundario);

}

.lab-header-meta-item strong{

    color: var(--color-texto-oscuro);
    font-weight: 700;
    text-align: right;

}

.lab-header-module{

    display: flex;
    align-items: center;

    gap: 14px;
    padding: 18px 28px;

    background: var(--color-encabezado);
    border-top: 1px solid var(--color-borde);

}

.lab-header-module-icon{

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: var(--color-principal);
    color: #FFFFFF;

    flex-shrink: 0;

}

.lab-header-module-icon i{

    margin: 0;
    font-size: 21px;
    line-height: 1;

}

.lab-header-module-title{

    margin: 0;

    color: var(--color-texto-oscuro);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;

}

.lab-header + .lab-container{

    margin-top: 30px;

}

/*=====================================================
=                     TARJETAS                         =
=====================================================*/

.lab-card{

    padding: 30px;
    margin-bottom: 30px;

    background: var(--color-tarjeta);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);

    transition: all .25s ease;

}

.lab-card-header{

    margin: -30px -30px 30px;
    padding: 28px 30px 18px;

    background: var(--color-encabezado);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 3px solid var(--color-principal);

}

.lab-title{

    display: flex;
    align-items: center;

    margin: 0;

    color: var(--color-principal);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;

}

.lab-subtitle{

    margin-top: 6px;

    color: var(--color-texto-secundario);
    font-size: 15px;

}

.lab-card p{

    color: #444444;
    font-size: 17px;
    line-height: 1.8;
    text-align: justify;

}
/*=====================================================
=          SECCIONES DE CONDICIONES                    =
=====================================================*/

.lab-condition-section{

    padding: 22px;

    margin-bottom: 18px;

    background: #F9FBFD;

    border: 1px solid var(--color-borde);

    border-radius: 10px;

}


/*=====================================================
=          TÍTULO DE CADA SECCIÓN                      =
=====================================================*/

.lab-condition-title{

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 0 0 16px;

    color: var(--color-texto-oscuro);

    font-size: 20px;

    font-weight: 700;

    line-height: 1.3;

}


.lab-condition-icon{

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--color-principal-suave);

    border-radius: 9px;

    color: var(--color-principal);

    flex-shrink: 0;

}


.lab-condition-icon i{

    margin: 0;

    padding: 0;

    font-size: 19px;

    line-height: 1;

}


/*=====================================================
=          LISTAS DE CONDICIONES                       =
=====================================================*/

.lab-condition-list{

    margin: 0;

    padding-left: 24px;

    color: var(--color-texto);

    font-size: 16px;

    line-height: 1.75;

}


.lab-condition-list li + li{

    margin-top: 7px;

}


/*=====================================================
=          PREGUNTAS FRECUENTES                        =
=====================================================*/

.lab-faq-item{

    padding: 15px 0;

    border-top: 1px solid var(--color-borde);

}


.lab-faq-item:first-of-type{

    padding-top: 0;

    border-top: none;

}


.lab-faq-item:last-child{

    padding-bottom: 0;

}


.lab-faq-question{

    display: block;

    margin-bottom: 5px;

    color: var(--color-principal);

    font-size: 16px;

    font-weight: 700;

}


.lab-faq-item p{

    margin: 0;

    color: var(--color-texto);

    font-size: 16px;

    line-height: 1.7;

    text-align: left;

}


/*=====================================================
=          DECLARACIÓN DEL ESTUDIANTE                  =
=====================================================*/

.lab-condition-warning{

    margin-bottom: 0;

    background: #FFF9E6;

    border-color: #F0D98A;

}


.lab-condition-warning .lab-condition-icon{

    background: #FFF0B8;

    color: #856404;

}


.lab-condition-warning .lab-condition-title{

    color: #856404;

}


.lab-condition-warning > p{

    margin: 0 0 14px;

    color: var(--color-texto);

    font-size: 16px;

    line-height: 1.7;

    text-align: left;

}
/*=====================================================
=          TARJETA CON IDENTIDAD VERDE                =
=====================================================*/

.lab-card-success .lab-card-header{

    background: #F0F9F4;

    border-bottom-color: var(--color-exito);

}


.lab-card-success .lab-title{

    color: var(--color-exito);

}


.lab-card-success .lab-icono{

    background: #DDF3E7;

    color: var(--color-exito);

}
/*=====================================================
=          TARJETA DE ACTUALIZACIÓN                   =
=====================================================*/

.lab-card-update .lab-card-header{

    background: var(--color-actualizacion-suave);

    border-bottom-color: var(--color-actualizacion);

}


.lab-card-update .lab-title{

    color: var(--color-actualizacion);

}


.lab-card-update .lab-icono{

    background: var(--color-actualizacion-icono);

    color: var(--color-actualizacion);

}
/*=====================================================
=              CONTENEDOR DE ICONOS                    =
=====================================================*/

.lab-icono{

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 12px;

    border-radius: 10px;
    background: var(--color-icono-fondo);
    color: var(--color-principal);

    flex-shrink: 0;

}

.lab-icono i{

    display: block;

    margin: 0;
    padding: 0;

    font-size: 22px;
    line-height: 1;

}

/*=====================================================
=          FORMULARIO INSTITUCIONAL                    =
=====================================================*/

.lab-form{

    margin: 0;

}


/*=====================================================
=          SECCIONES DEL FORMULARIO                    =
=====================================================*/

.lab-form-section{

    min-width: 0;

    margin: 0 0 24px;

    padding: 24px;

    background: #F9FBFD;

    border: 1px solid var(--color-borde);

    border-radius: 10px;

}


.lab-form-section:last-of-type{

    margin-bottom: 0;

}


.lab-form-section-title{

    padding: 0 10px;

    color: var(--color-principal);

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3;

}


/*=====================================================
=          DISTRIBUCIÓN DE CAMPOS                      =
=====================================================*/

.lab-form-grid{

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px 22px;

}


.lab-field{

    display: flex;

    flex-direction: column;

    min-width: 0;

}


.lab-field-full{

    grid-column: 1 / -1;

}


/*=====================================================
=          ETIQUETAS DEL FORMULARIO                    =
=====================================================*/

.lab-label{

    display: block;

    margin-bottom: 7px;

    color: var(--color-texto-oscuro);

    font-size: 15px;

    font-weight: 700;

    line-height: 1.4;

}


.lab-required{

    color: var(--color-error);

    font-weight: 700;

}


/*=====================================================
=          CAMPOS DE ENTRADA                           =
=====================================================*/

.lab-input,
.lab-select,
.lab-file-input{

    width: 100%;

    min-height: 46px;

    padding: 11px 13px;

    background: #FFFFFF;

    border: 1px solid #BCC7D3;

    border-radius: 8px;

    color: var(--color-texto-oscuro);

    font-family: var(--fuente-principal);

    font-size: 16px;

    line-height: 1.4;

    transition:
        border-color .20s ease,
        box-shadow .20s ease,
        background-color .20s ease;

}


.lab-input:hover,
.lab-select:hover,
.lab-file-input:hover{

    border-color: #8DA2B8;

}


.lab-input:focus,
.lab-select:focus,
.lab-file-input:focus{

    outline: none;

    border-color: var(--color-principal);

    box-shadow:
        0 0 0 3px rgba(11,94,215,0.16);

}


.lab-select{

    cursor: pointer;

}


.lab-file-input{

    padding: 8px;

    cursor: pointer;

}


.lab-file-input::file-selector-button{

    margin-right: 12px;

    padding: 8px 12px;

    background: var(--color-principal-suave);

    border: 1px solid #C9DEFF;

    border-radius: 6px;

    color: var(--color-principal);

    font-family: var(--fuente-principal);

    font-weight: 700;

    cursor: pointer;

}


/*=====================================================
=          ESTADOS DE VALIDACIÓN                       =
=====================================================*/

.lab-input.correcto,
.lab-select.correcto,
.lab-file-input.correcto{

    border-color: var(--color-exito);

    box-shadow:
        0 0 0 3px rgba(25,135,84,0.12);

}


.lab-input.incorrecto,
.lab-select.incorrecto,
.lab-file-input.incorrecto{

    border-color: var(--color-error);

    box-shadow:
        0 0 0 3px rgba(220,53,69,0.12);

}


/*=====================================================
=          AYUDAS Y MENSAJES                           =
=====================================================*/

.lab-field-help{

    display: block;

    margin-top: 7px;

    color: var(--color-texto-secundario);

    font-size: 14px;

    line-height: 1.55;

}


.lab-field-message{

    min-height: 21px;

    margin-top: 5px;


    color: var(--color-error);

    font-size: 14px;

    font-weight: 600;

    line-height: 1.45;

}


/*=====================================================
=          VISTA PREVIA DE FOTOGRAFÍA                  =
=====================================================*/

.lab-photo-preview{

    display: flex;

    justify-content: center;

    margin-top: 18px;

}


.lab-photo-preview img{

    width: 180px;

    height: 220px;

    display: none;

    object-fit: cover;

    background: #FFFFFF;

    border: 2px solid var(--color-borde);

    border-radius: 10px;

    box-shadow: var(--sombra-tarjeta);

}
/*=====================================================
=          ACEPTACIÓN DE CONDICIONES                   =
=====================================================*/

.lab-consent{

    margin-top: 24px;

    padding: 20px 22px;

    background: var(--color-principal-suave);

    border: 1px solid #C9DEFF;

    border-radius: 10px;

}


.lab-consent-label{

    display: flex;

    align-items: flex-start;

    gap: 14px;

    cursor: pointer;

}


.lab-consent-input{

    width: 21px;

    height: 21px;

    margin-top: 3px;

    accent-color: var(--color-principal);

    cursor: pointer;

    flex-shrink: 0;

}


.lab-consent-input:focus-visible{

    outline: 3px solid rgba(11,94,215,0.28);

    outline-offset: 3px;

}


.lab-consent-text{

    display: flex;

    flex-direction: column;

    gap: 3px;

    color: var(--color-texto);

    font-size: 16px;

    line-height: 1.55;

}


.lab-consent-text strong{

    color: var(--color-texto-oscuro);

    font-size: 16px;

    font-weight: 700;

}

/*=====================================================
=          ACEPTACIONES FINALES                        =
=====================================================*/

.lab-acceptance-group{

    margin-top: 24px;

    padding: 24px;

    background: #F9FBFD;

    border: 1px solid var(--color-borde);

    border-radius: 10px;

}


.lab-acceptance-heading{

    margin: 0 0 8px;

    color: var(--color-texto-oscuro);

    font-size: 19px;

    font-weight: 700;

    line-height: 1.3;

}


.lab-acceptance-intro{

    margin: 0 0 18px !important;

    color: var(--color-texto-secundario) !important;

    font-size: 15px !important;

    line-height: 1.6 !important;

    text-align: left !important;

}


.lab-acceptance-list{

    display: grid;

    gap: 12px;

}


/*=====================================================
=          ACEPTACIÓN INDIVIDUAL                       =
=====================================================*/

.lab-acceptance-item{

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 16px 18px;

    background: #FFFFFF;

    border: 1px solid var(--color-borde);

    border-radius: 10px;

    cursor: pointer;

    transition:
        border-color .20s ease,
        background-color .20s ease,
        box-shadow .20s ease;

}


.lab-acceptance-item:hover{

    border-color: #A9BCD0;

}


.lab-acceptance-item.is-checked{

    background: #F0F9F4;

    border-color: var(--color-exito);

    box-shadow:
        0 0 0 3px rgba(25,135,84,0.10);

}


.lab-acceptance-input{

    width: 21px;

    height: 21px;

    margin-top: 3px;

    accent-color: var(--color-exito);

    cursor: pointer;

    flex-shrink: 0;

}


.lab-acceptance-input:focus-visible{

    outline: 3px solid rgba(25,135,84,0.25);

    outline-offset: 3px;

}


.lab-acceptance-content{

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

}


.lab-acceptance-title{

    color: var(--color-texto-oscuro);

    font-size: 16px;

    font-weight: 700;

    line-height: 1.4;

}


.lab-acceptance-description{

    color: var(--color-texto-secundario);

    font-size: 14px;

    line-height: 1.6;

}

/*=====================================================
=          ENLACE A DOCUMENTOS                        =
=====================================================*/

.lab-document-link{

    display: inline-flex;

    align-items: center;

    gap: 7px;

    width: fit-content;

    margin-top: 7px;

    color: var(--color-principal);

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;

}


.lab-document-link:hover{

    color: var(--color-principal-hover);

    text-decoration: underline;

}


.lab-document-link:focus-visible{

    outline: 3px solid rgba(11,94,215,0.25);

    outline-offset: 3px;

    border-radius: 4px;

}


.lab-document-link i{

    margin: 0;

    font-size: 16px;

    line-height: 1;

}
/*=====================================================
=          ACCIONES DE CONFIRMACIÓN                    =
=====================================================*/

.lab-actions-confirmation{

    justify-content: space-between;

    align-items: center;

    margin-top: 26px;

}


.lab-actions-group{

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}
/*=====================================================
=          BOTONES DE NAVEGACIÓN                       =
=====================================================*/

.lab-actions-navigation{

    justify-content: space-between;

    margin-top: 24px;

}


.lab-actions-navigation .lab-btn{

    min-width: 210px;

}
/*=====================================================
=                     BOTONES                          =
=====================================================*/

.lab-btn{

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 44px;
    padding: 11px 20px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-family: var(--fuente-principal);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    user-select: none;

    transition:
        background-color .20s ease,
        border-color .20s ease,
        color .20s ease,
        box-shadow .20s ease,
        transform .20s ease;

}

.lab-btn i{

    margin: 0;
    padding: 0;

    font-size: 18px;
    line-height: 1;

}

.lab-btn:focus{

    outline: none;

}

.lab-btn:focus-visible{

    outline: 3px solid rgba(11,94,215,0.30);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px #FFFFFF;

}

.lab-btn:disabled,
.lab-btn.lab-btn-disabled{

    background: #E2E6EA;
    border-color: #D6D8DB;
    color: #8A929A;

    cursor: not-allowed;
    opacity: 0.85;
    box-shadow: none;
    transform: none;

}

.lab-btn:disabled:hover,
.lab-btn.lab-btn-disabled:hover{

    background: #E2E6EA;
    border-color: #D6D8DB;
    color: #8A929A;

    box-shadow: none;
    transform: none;

}

a.lab-btn.lab-btn-disabled{

    pointer-events: none;

}

.lab-btn:not(:disabled):active{

    transform: translateY(0);
    box-shadow: none;

}

.lab-btn-primary{

    background: var(--color-principal);
    border-color: var(--color-principal);
    color: #FFFFFF;

}

.lab-btn-primary:hover{

    background: var(--color-principal-hover);
    border-color: var(--color-principal-hover);
    color: #FFFFFF;

    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(11,94,215,0.20);

}

.lab-btn-success{

    background: var(--color-exito);
    border-color: var(--color-exito);
    color: #FFFFFF;

}

.lab-btn-success:hover{

    background: var(--color-exito-hover);
    border-color: var(--color-exito-hover);
    color: #FFFFFF;

    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(25,135,84,0.20);

}

.lab-btn-warning{

    background: var(--color-advertencia);
    border-color: var(--color-advertencia);
    color: var(--color-texto-oscuro);

}

.lab-btn-warning:hover{

    background: var(--color-advertencia-hover);
    border-color: var(--color-advertencia-hover);
    color: var(--color-texto-oscuro);

    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(255,193,7,0.25);

}

.lab-btn-secondary{

    background: var(--color-secundario);
    border-color: var(--color-secundario);
    color: #FFFFFF;

}

.lab-btn-secondary:hover{

    background: var(--color-secundario-hover);
    border-color: var(--color-secundario-hover);
    color: #FFFFFF;

    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(108,117,125,0.20);

}

.lab-btn-danger{

    background: #FFFFFF;
    border-color: var(--color-error);
    color: var(--color-error);

}

.lab-btn-danger:hover{

    background: var(--color-error);
    border-color: var(--color-error);
    color: #FFFFFF;

    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(220,53,69,0.20);

}

.lab-actions{

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 12px;
    margin-top: 24px;

}

/*=====================================================
=              BOTÓN DE ACTUALIZACIÓN                 =
=====================================================*/

.lab-btn-update{

    background: var(--color-actualizacion);

    border-color: var(--color-actualizacion);

    color: #FFFFFF;

}


.lab-btn-update:hover{

    background: var(--color-actualizacion-hover);

    border-color: var(--color-actualizacion-hover);

    color: #FFFFFF;

    transform: translateY(-2px);

    box-shadow: 0 5px 12px rgba(234,88,12,0.22);

}

/*=====================================================
=                     TABLAS                           =
=====================================================*/

/* Componentes pendientes de diseño. */

/*=====================================================
=                     ALERTAS                          =
=====================================================*/

/*=====================================================
=          ALERTA INFORMATIVA LABTRÓNICA               =
=====================================================*/

.lab-alert{

    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 22px 24px;

    margin-bottom: 30px;

    background: var(--color-principal-suave);

    border: 1px solid #C9DEFF;

    border-left: 5px solid var(--color-principal);

    border-radius: 12px;

    box-shadow: var(--sombra-tarjeta);

}


/*=====================================================
=              ICONO DE LA ALERTA                      =
=====================================================*/

.lab-alert-icon{

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #FFFFFF;

    border: 1px solid #C9DEFF;

    border-radius: 10px;

    color: var(--color-principal);

    flex-shrink: 0;

}


.lab-alert-icon i{

    margin: 0;

    padding: 0;

    font-size: 22px;

    line-height: 1;

}


/*=====================================================
=              CONTENIDO DE LA ALERTA                  =
=====================================================*/

.lab-alert-content{

    flex: 1;

    min-width: 0;

}


.lab-alert-title{

    margin: 0 0 8px;

    color: var(--color-principal);

    font-size: 19px;

    font-weight: 700;

    line-height: 1.3;

}


.lab-alert p{

    margin: 0 0 10px;

    color: var(--color-texto);

    font-size: 16px;

    line-height: 1.7;

}


.lab-alert p:last-of-type{

    margin-bottom: 10px;

}


.lab-alert ul{

    margin: 0;

    padding-left: 22px;

    color: var(--color-texto);

    line-height: 1.8;

}


.lab-alert li + li{

    margin-top: 2px;

}
/*=====================================================
=                 PIE DE PÁGINA                        =
=====================================================*/

.lab-footer{

    width: 92%;
    max-width: 1100px;
    margin: 0 auto 30px;

    background: var(--color-encabezado);
    border: 1px solid var(--color-borde);
    border-top: 4px solid var(--color-principal);
    border-radius: 12px;
    box-shadow: var(--sombra-tarjeta);

    overflow: hidden;

}

.lab-footer-legal{

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;
    padding: 16px 28px;

    color: var(--color-texto-secundario);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;

}

.lab-footer-separator{

    color: var(--color-principal);
    font-weight: 700;

}

.lab-footer-version-text{

    white-space: nowrap;

}

.lab-footer-version-text strong{

    color: var(--color-principal);
    font-weight: 700;

}

/*=====================================================
=                  RESPONSIVE                          =
=====================================================*/

@media (max-width: 768px){

 .lab-form-grid{
        grid-template-columns: 1fr;
    }

    .lab-field-full{
        grid-column: auto;
    }

    .lab-header-main{

        flex-direction: column;
        align-items: stretch;

    }

    .lab-header-meta{

        display: grid;
        grid-template-columns: repeat(2, 1fr);

        gap: 12px;
        width: 100%;
        padding-top: 18px;
        padding-left: 0;

        border-top: 1px solid var(--color-borde);
        border-left: none;

    }

    .lab-header-meta-item{

        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        gap: 2px;

    }

    .lab-header-meta-item strong{

        text-align: left;

    }

    .lab-actions{

        align-items: stretch;

    }

    .lab-btn{

        flex: 1 1 calc(50% - 6px);

    }
	
	    .lab-form-grid{

        grid-template-columns: 1fr;

    }

    .lab-field-full{

        grid-column: auto;

    }

}

@media (max-width: 560px){

    .lab-header{

        width: 94%;
        margin-top: 18px;

    }

    .lab-header-main{

        gap: 20px;
        padding: 20px;

    }

    .lab-header-brand{

        align-items: flex-start;

    }

    .lab-header-logo-labtronica{

        width: 60px;
        height: 60px;

    }

    .lab-header-copy{

        margin-left: 14px;

    }

    .lab-header-university{

        font-size: 15px;

    }

    .lab-header-context{

        font-size: 13px;

    }

    .lab-header-system{

        font-size: 18px;

    }

    .lab-header-meta{

        grid-template-columns: 1fr;
        gap: 2px;

    }

    .lab-header-meta-item{

        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        padding: 5px 0;

    }

    .lab-header-meta-item strong{

        text-align: right;

    }

    .lab-header-module{

        padding: 16px 20px;

    }

    .lab-header-module-title{

        font-size: 20px;

    }

    .lab-footer{

        width: 94%;
        margin-bottom: 18px;

    }

    .lab-footer-legal{

        flex-direction: column;

        gap: 4px;
        padding: 15px 20px;

    }

    .lab-footer-separator{

        display: none;

    }
    .lab-alert{

        gap: 12px;

        padding: 18px;

    }

    .lab-alert-icon{

        width: 40px;

        height: 40px;

    }

    .lab-alert-icon i{

        font-size: 20px;

    }

    .lab-alert-title{

        font-size: 18px;

    }

    .lab-progress{

        align-items: flex-start;

        gap: 14px;

        padding: 18px;

    }

    .lab-progress-step{

        width: 42px;

        height: 42px;

        font-size: 18px;

    }

    .lab-progress-header{

        flex-direction: column;

        align-items: flex-start;

        gap: 2px;

    }

    .lab-progress-title{

        font-size: 17px;

    }
	
	    .lab-condition-section{

        padding: 18px;

    }

    .lab-condition-title{

        align-items: flex-start;

        gap: 10px;

        font-size: 18px;

    }

    .lab-condition-icon{

        width: 36px;

        height: 36px;

    }

    .lab-condition-icon i{

        font-size: 18px;

    }

    .lab-condition-list{

        padding-left: 20px;

        font-size: 15px;

    }

    .lab-faq-item p{

        font-size: 15px;

    }
	    .lab-consent{

        padding: 17px;

    }

    .lab-consent-label{

        gap: 11px;

    }

    .lab-consent-text{

        font-size: 15px;

    }

    .lab-actions-navigation{

        flex-direction: column-reverse;

        align-items: stretch;

    }

    .lab-actions-navigation .lab-btn{

        width: 100%;

        min-width: 0;

    }
	
	    .lab-form-section{

        padding: 18px;

    }

    .lab-form-section-title{

        padding: 0 6px;

        font-size: 17px;

    }

    .lab-input,
    .lab-select,
    .lab-file-input{

        font-size: 16px;

    }

    .lab-photo-preview img{

        width: 165px;

        height: 205px;

    }
	
	    .lab-acceptance-group{

        padding: 18px;

    }

    .lab-acceptance-item{

        gap: 11px;

        padding: 15px;

    }

    .lab-acceptance-title{

        font-size: 15px;

    }

    .lab-acceptance-description{

        font-size: 13px;

    }

    .lab-actions-confirmation{

        flex-direction: column-reverse;

        align-items: stretch;

    }

    .lab-actions-group{

        flex-direction: column;

    }

    .lab-actions-group .lab-btn,
    .lab-actions-confirmation > .lab-btn{

        width: 100%;

    }
}

@media (max-width: 480px){

    .lab-actions{

        flex-direction: column;
        align-items: stretch;

        gap: 10px;

    }

    .lab-btn{

        width: 100%;
        min-height: 46px;
        padding: 12px 16px;

        flex: 1 1 auto;

    }

}

@media (max-width: 360px){

    .lab-btn{

        font-size: 15px;

    }

    .lab-btn i{

        font-size: 17px;

    }

}

@media (prefers-reduced-motion: reduce){

    .lab-btn{

        transition: none;

    }

    .lab-btn:hover,
    .lab-btn:active{

        transform: none;

    }

}