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

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f6f8;
    color: #222;
}


/* ==========================================================
   CONTENEDOR PRINCIPAL DEL LOGIN
   ========================================================== */

.login-page {
    min-height: 100vh;

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

    padding: 20px;
}


/* ==========================================================
   TARJETA
   ========================================================== */

.login-card {
    width: 100%;
    max-width: 420px;

    background: #ffffff;

    padding: 32px;

    border-radius: 14px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.10);
}


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

.login-header {
    margin-bottom: 28px;
}

.login-header h1 {
    margin: 0 0 10px;

    font-size: 1.7rem;
    text-align: center;
}

.login-header p {
    margin: 0;

    text-align: center;

    color: #666;
    line-height: 1.5;
}


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

.form-group {
    display: flex;
    flex-direction: column;

    margin-bottom: 18px;
}

.form-group label {
    margin-bottom: 7px;

    font-weight: 600;
}

.form-group input {
    width: 100%;

    padding: 14px 15px;

    font-size: 16px;

    border: 1px solid #c9ced6;
    border-radius: 8px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input:focus {
    border-color: #555;

    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.08);
}


/* ==========================================================
   MENSAJE DE ERROR
   ========================================================== */

.mensaje-error {
    min-height: 22px;

    margin-bottom: 12px;

    font-size: 0.9rem;

    color: #b42318;
}


/* ==========================================================
   BOTÓN PRINCIPAL
   ========================================================== */

.btn-principal {
    width: 100%;

    min-height: 50px;

    border: none;
    border-radius: 8px;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    background: #222;
    color: white;
}

.btn-principal:disabled {
    opacity: 0.65;

    cursor: not-allowed;
}


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

@media (max-width: 480px) {

    .login-page {
        /*
            En móvil evitamos pegar completamente la tarjeta
            contra la parte superior o inferior.
        */
        align-items: flex-start;

        padding-top: 40px;
    }

    .login-card {
        padding: 24px 18px;

        box-shadow: none;
    }

    .login-header h1 {
        font-size: 1.45rem;
    }

}

/* ==========================================================
   LANDING - ENCABEZADO
   ========================================================== */

.app-header {
    display: flex;

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

    gap: 20px;

    padding: 18px 24px;

    background: #ffffff;

    border-bottom: 1px solid #e1e4e8;
}

.app-header h1 {
    margin: 0 0 5px;

    font-size: 1.35rem;
}

.app-header p {
    margin: 0;

    color: #666;
}


/* ==========================================================
   BOTÓN CERRAR SESIÓN
   ========================================================== */

.btn-logout {
    min-height: 44px;

    padding: 10px 18px;

    border: 1px solid #ccc;
    border-radius: 8px;

    background: #ffffff;

    font-size: 15px;

    cursor: pointer;
}


/* ==========================================================
   CONTENIDO DEL LANDING
   ========================================================== */

.landing-content {
    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    padding: 30px 20px;
}

.landing-card {
    padding: 24px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.08);
}

.landing-card h2 {
    margin-top: 0;
}


/* ==========================================================
   LANDING EN CELULAR
   ========================================================== */

@media (max-width: 600px) {

    .app-header {
        /*
            En móvil apilamos la información y el botón
            para evitar comprimir excesivamente el encabezado.
        */
        flex-direction: column;

        align-items: stretch;

        padding: 16px;
    }

    .btn-logout {
        width: 100%;
    }

    .landing-content {
        padding: 16px;
    }

    .landing-card {
        padding: 20px 16px;
    }

}

/* ==========================================================
   UTILIDADES
   ========================================================== */

.oculto {
    display: none !important;
}


/* ==========================================================
   MENÚ ADMINISTRADOR
   ========================================================== */

.menu-grid {
    display: grid;

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

    gap: 16px;

    margin-top: 24px;
}


.menu-card {
    display: flex;
    flex-direction: column;

    gap: 8px;

    min-height: 130px;

    padding: 20px;

    text-align: left;

    background: #ffffff;

    border: 1px solid #dfe3e8;
    border-radius: 10px;

    cursor: pointer;
}


.menu-card:hover {
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.08);
}


.menu-card-titulo {
    font-size: 1.05rem;
    font-weight: 700;
}


.menu-card-descripcion {
    color: #666;

    line-height: 1.4;
}


/* ==========================================================
   MANTENIMIENTO - RESUMEN
   ========================================================== */

.resumen-tareas {
    display: grid;

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

    gap: 12px;

    margin: 24px 0;
}


.resumen-card {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 18px;

    border: 1px solid #e0e3e7;
    border-radius: 10px;

    text-align: center;
}

.resumen-card span {
    min-height: 30px;

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

    text-align: center;
}

.resumen-card span {
    color: #666;
}


.resumen-card strong {
    font-size: 1.8rem;
}


/* ==========================================================
   BOTÓN PRINCIPAL PARA MANTENIMIENTO
   ========================================================== */

.btn-escanear {
    width: 100%;

    min-height: 58px;

    padding: 14px 20px;

    border: none;
    border-radius: 10px;

    background: #222;
    color: #ffffff;

    font-size: 18px;
    font-weight: 700;

    cursor: pointer;
}


/* ==========================================================
   LISTA DE PENDIENTES
   ========================================================== */

.seccion-pendientes {
    margin-top: 30px;
}


.seccion-pendientes h3 {
    margin-bottom: 14px;
}


.texto-secundario {
    color: #666;
}


/* ==========================================================
   TABLETA
   ========================================================== */

@media (max-width: 900px) {

    .menu-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width: 600px) {

    .menu-grid {
        grid-template-columns: 1fr;
    }


    .resumen-tareas {
        /*
            En móvil dejamos las tres cifras en horizontal
            mientras exista espacio suficiente.
        */
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 8px;
    }


    .resumen-card {
        padding: 12px 8px;

        text-align: center;
    }


    .resumen-card span {
        font-size: 0.78rem;
    }


    .resumen-card strong {
        font-size: 1.45rem;
    }


    .btn-escanear {
        /*
            Botón grande porque será una de las acciones
            principales del empleado desde el celular.
        */
        min-height: 62px;
    }

}

/* ==========================================================
   ÁREAS PENDIENTES
   ========================================================== */

.area-pendiente {
    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 16px;

    margin-bottom: 10px;

    background: #ffffff;

    border: 1px solid #e0e3e7;
    border-radius: 10px;
}


.area-pendiente-nombre {
    font-size: 1rem;
}


.area-pendiente-edificio {
    font-size: 0.9rem;

    color: #666;
}


/* ==========================================================
   AVISO DE TAREA EN PROCESO
   ========================================================== */

.aviso-tarea {
    margin-top: 14px;

    padding: 14px;

    border: 1px solid #d5d9de;
    border-radius: 8px;

    background: #f7f7f7;

    line-height: 1.4;
}


/* ==========================================================
   BOTÓN DE ESCANEO DESHABILITADO
   ========================================================== */

.btn-escanear:disabled {
    opacity: 0.55;

    cursor: not-allowed;
}


.lector-qr {
    margin-top: 16px;
}

#qrReader {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 12px;
}

.btn-secundario {
    width: 100%;
    min-height: 48px;

    border: 1px solid #ccc;
    border-radius: 8px;

    background: #ffffff;

    font-size: 16px;
    cursor: pointer;
}

/* ==========================================================
   CONTENIDO ADMINISTRATIVO
   ========================================================== */

.admin-content {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    padding: 24px;
}


/* ==========================================================
   TOOLBAR
   ========================================================== */

.admin-toolbar {
    display: flex;

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

    gap: 16px;

    margin-bottom: 24px;
}

.admin-toolbar h2 {
    margin: 0 0 5px;
}


/* ==========================================================
   FILTROS
   ========================================================== */

.admin-filtros {
    display: flex;
    flex-direction: column;

    gap: 6px;

    margin-bottom: 20px;
}

.admin-filtros input {
    width: 100%;

    padding: 13px 14px;

    font-size: 16px;

    border: 1px solid #ccc;
    border-radius: 8px;
}


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

.admin-card {
    display: flex;

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

    gap: 16px;

    padding: 16px;

    margin-bottom: 10px;

    background: #ffffff;

    border: 1px solid #e1e4e8;
    border-radius: 10px;
}


.admin-card-info {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.admin-card-acciones {
    display: flex;

    gap: 8px;
}


.estado-activo {
    color: #26734d;

    font-size: 0.9rem;
}


.estado-inactivo {
    color: #777;

    font-size: 0.9rem;
}


/* ==========================================================
   MODAL
   ========================================================== */

.modal {
    position: fixed;

    inset: 0;

    display: flex;

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

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.45);

    z-index: 1000;
}


.modal-contenido {
    width: 100%;
    max-width: 560px;

    height: auto;
    max-height: none;

    box-sizing: border-box;

    padding: 22px;

    background: #ffffff;

    border-radius: 12px;

    overflow: visible;
}


.modal-contenido h2 {
    margin-top: 0;
}

/* ==========================================================
   CHECKBOX
   ========================================================== */

.form-check {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;
}


.form-check input {
    width: 20px;
    height: 20px;
}


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

.btn-auto {
    width: auto;
}


.acciones-header {
    display: flex;

    align-items: center;

    gap: 10px;
}


/* ==========================================================
   ADMINISTRACIÓN EN MÓVIL
   ========================================================== */

@media (max-width: 600px) {

    .admin-content {
        padding: 16px;
    }


    .admin-toolbar {
        flex-direction: column;

        align-items: stretch;
    }


    .admin-toolbar .btn-principal {
        width: 100%;
    }


    .admin-card {
        flex-direction: column;

        align-items: stretch;
    }


    .admin-card-acciones {
        width: 100%;
    }


    .admin-card-acciones button {
        flex: 1;
    }


    .modal {
        /*
            En móvil alineamos el modal más arriba para evitar
            que el teclado cubra campos y acciones inferiores.
        */
        align-items: flex-start;

        padding: 12px;

        padding-top: 30px;
    }


    .modal-contenido {
        padding: 20px 16px;
    }


    .modal-acciones {
        /*
            Botones grandes y separados para facilitar el uso
            táctil.
        */
        flex-direction: column-reverse;
    }


    .modal-acciones button {
        width: 100%;

        min-height: 48px;
    }


    .acciones-header {
        width: 100%;
    }


    .acciones-header button {
        flex: 1;
    }
}

/* ==========================================================
   SELECTS DE FORMULARIOS
   ========================================================== */

.form-group select {
    width: 100%;

    padding: 14px 15px;

    font-size: 16px;

    border: 1px solid #c9ced6;
    border-radius: 8px;

    background: #ffffff;

    outline: none;
}


.form-group select:focus {
    border-color: #555;

    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.08);
}


/* ==========================================================
   QR ADMINISTRATIVO
   ========================================================== */

.modal-qr-contenido {
    text-align: center;
}


.qr-admin-contenedor {
    display: flex;

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

    margin: 24px 0;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #e0e3e7;
    border-radius: 12px;
}


.qr-admin-contenedor img {
    display: block;

    width: 100%;
    max-width: 300px;

    height: auto;
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 600px) {

    .qr-admin-contenedor {
        padding: 12px;
    }


    .qr-admin-contenedor img {
        max-width: 260px;
    }

}

/* ==========================================================
   SELECT ADMINISTRATIVO
   ========================================================== */

.admin-filtros select {
    width: 100%;

    padding: 13px 14px;

    font-size: 16px;

    border: 1px solid #ccc;
    border-radius: 8px;

    background: #ffffff;
}


/* ==========================================================
   ENCABEZADO DE ASIGNACIONES
   ========================================================== */

.asignaciones-encabezado {
    display: flex;

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

    gap: 16px;

    margin-bottom: 20px;
}


.asignaciones-encabezado h3 {
    margin: 0 0 5px;
}


.asignaciones-acciones {
    display: flex;

    gap: 8px;
}


/* ==========================================================
   EDIFICIOS
   ========================================================== */

.asignacion-edificio {
    margin-bottom: 18px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #e1e4e8;
    border-radius: 10px;
}


.asignacion-edificio h4 {
    margin: 0 0 14px;

    font-size: 1.05rem;
}


/* ==========================================================
   LISTA DE ÁREAS
   ========================================================== */

.asignacion-lista {
    display: grid;

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

    gap: 10px;
}


.asignacion-area {
    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 48px;

    padding: 10px 12px;

    border: 1px solid #e2e5e8;
    border-radius: 8px;

    cursor: pointer;
}


.asignacion-area input {
    width: 20px;
    height: 20px;

    flex-shrink: 0;
}


.asignacion-area span {
    line-height: 1.3;
}


/* ==========================================================
   GUARDAR
   ========================================================== */

.asignaciones-guardar {
    display: flex;

    justify-content: flex-end;

    margin-top: 22px;
}


/* ==========================================================
   MENSAJE DE ÉXITO
   ========================================================== */

.mensaje-exito {
    min-height: 22px;

    margin-top: 14px;

    color: #26734d;

    font-size: 0.9rem;
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 600px) {

    .asignaciones-encabezado {
        flex-direction: column;

        align-items: stretch;
    }


    .asignaciones-acciones {
        width: 100%;
    }


    .asignaciones-acciones button {
        flex: 1;
    }


    .asignacion-lista {
        /*
            Una sola columna en móvil para que cada opción
            tenga un área táctil grande.
        */
        grid-template-columns: 1fr;
    }


    .asignacion-area {
        min-height: 54px;
    }


    .asignaciones-guardar {
        /*
            El botón ocupa todo el ancho para facilitar
            su uso en celular/tableta.
        */
        display: block;
    }


    .asignaciones-guardar button {
        width: 100%;

        min-height: 52px;
    }

}

/* ==========================================================
   FORMULARIOS ADMINISTRATIVOS
   ========================================================== */

.admin-filtros input[type="search"] {
    width: 100%;

    padding: 13px 14px;

    font-size: 16px;

    border: 1px solid #ccc;
    border-radius: 8px;

    background: #ffffff;
}


.campo-formulario {
    display: flex;
    flex-direction: column;

    gap: 6px;

    margin-bottom: 16px;
}


.campo-formulario label {
    font-weight: 600;
}


.campo-formulario input,
.campo-formulario textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 12px 13px;

    font-size: 16px;

    border: 1px solid #ccc;

    border-radius: 8px;
}



/* ==========================================================
   LISTADO DE USUARIOS
   ========================================================== */

.usuarios-listado {
    margin-top: 20px;
}


.usuarios-grid {
    display: grid;

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

    gap: 16px;
}


.usuario-card {
    padding: 18px;

    background: #ffffff;

    border: 1px solid #e1e4e8;
    border-radius: 10px;
}


.usuario-card-cabecera {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;
}


.usuario-card h3 {
    margin: 0 0 5px;
}


.usuario-codigo {
    margin: 0;

    font-size: 0.9rem;

    color: #666;
}


/* ==========================================================
   ESTADO
   ========================================================== */

.estado-badge {
    display: inline-block;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 0.8rem;
    font-weight: 600;

    white-space: nowrap;
}


.estado-activo {
    background: #e6f4ea;
    color: #26734d;
}


.estado-inactivo {
    background: #f2f2f2;
    color: #666666;
}


/* ==========================================================
   ROLES
   ========================================================== */

.usuario-roles {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 16px;
}


.rol-badge {
    display: inline-block;

    padding: 5px 9px;

    border-radius: 6px;

    background: #eef2f7;

    font-size: 0.82rem;
}


.roles-fieldset {
    margin: 0 0 18px;

    padding: 14px;

    border: 1px solid #ddd;
    border-radius: 8px;
}


.roles-fieldset legend {
    padding: 0 6px;

    font-weight: 600;
}


#contenedorRoles {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.rol-opcion {
    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 42px;

    padding: 8px 11px;

    border: 1px solid #ddd;
    border-radius: 7px;

    cursor: pointer;
}


.rol-opcion input {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   ESTADO DEL USUARIO
   ========================================================== */

.usuario-activo-control {
    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 44px;

    margin-bottom: 16px;

    cursor: pointer;
}


.usuario-activo-control input {
    width: 20px;
    height: 20px;
}


/* ==========================================================
   ACCIONES DE TARJETA
   ========================================================== */

.usuario-card-acciones {
    display: flex;

    gap: 8px;

    margin-top: 18px;
}


.usuario-card-acciones button {
    flex: 1;
}


/* ==========================================================
   MODAL
   ========================================================== */

.modal-fondo {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

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

    padding: 16px;

    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.45);

    overflow-y: auto;
}


/*
    IMPORTANTE:

    .modal-fondo utiliza display:flex.

    Por eso necesitamos esta regla específica para que
    la clase .oculto realmente pueda ocultar el modal.
*/
.modal-fondo.oculto {
    display: none;
}



.modal-contenido {
    width: 100%;

    max-width: 560px;

    height: auto;
    max-height: none;

    margin: auto;

    box-sizing: border-box;

    padding: 22px;

    background: #ffffff;

    border-radius: 12px;

    overflow: visible;
}


.modal-pequeno {
    max-width: 460px;
}


.modal-encabezado {
    display: flex;

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

    gap: 12px;

    margin-bottom: 20px;
}

.modal-encabezado > div {
    min-width: 0;
}

.modal-encabezado h2 {
    margin: 0;

    line-height: 1.25;

    overflow-wrap: break-word;
}


.modal-cerrar {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    padding: 0;

    border: 0;

    background: transparent;

    font-size: 28px;

    cursor: pointer;
}


.modal-acciones {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 20px;
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 600px) {

    .usuarios-grid {
        grid-template-columns: 1fr;
    }


    .usuario-card-acciones {
        flex-direction: column;
    }


    .usuario-card-acciones button {
        width: 100%;

        min-height: 48px;
    }


    .modal-fondo {
        /*
            En móvil alineamos arriba para evitar problemas
            cuando aparece el teclado.
        */
        align-items: flex-start;

        padding: 10px;
    }


    .modal-contenido {
        padding: 16px;
    }


    .modal-acciones {
        flex-direction: column-reverse;
    }


    .modal-acciones button {
        width: 100%;

        min-height: 50px;
    }


    #contenedorRoles {
        flex-direction: column;
    }


    .rol-opcion {
        min-height: 48px;
    }

}

/* ==========================================================
   FILTROS DE TAREAS
   ========================================================== */

.tareas-filtros {
    display: grid;

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

    gap: 12px;

    margin-bottom: 14px;
}


.campo-filtro {
    display: flex;

    flex-direction: column;

    gap: 6px;

    min-width: 0;
}


.campo-filtro label {
    font-size: 0.9rem;

    font-weight: 600;
}


.campo-filtro input,
.campo-filtro select {
    width: 100%;

    min-width: 0;

    max-width: 100%;

    box-sizing: border-box;

    padding: 12px;

    min-height: 46px;

    border: 1px solid #ccc;

    border-radius: 8px;

    background: #ffffff;

    font-size: 16px;
}


/* ==========================================================
   ACCIONES DE FILTROS
   ========================================================== */

.tareas-filtro-acciones {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-bottom: 24px;
}


/* ==========================================================
   RESUMEN ADMINISTRATIVO
   ========================================================== */

.resumen-admin {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    margin-bottom: 24px;
}


/* ==========================================================
   LISTADO DE TAREAS
   ========================================================== */

.tareas-listado {
    margin-top: 20px;
}


.tareas-admin-grid {
    display: grid;

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

    gap: 16px;
}


.tarea-admin-card {
    padding: 18px;

    background: #ffffff;

    border: 1px solid #e1e4e8;
    border-radius: 10px;
}


.tarea-admin-cabecera {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 16px;
}


.tarea-admin-cabecera h3 {
    margin: 0 0 4px;
}


.tarea-admin-cabecera p {
    margin: 0;
}


/* ==========================================================
   DATOS DE TAREA
   ========================================================== */

.tarea-admin-dato {
    display: flex;

    justify-content: space-between;

    gap: 14px;

    padding: 9px 0;

    border-bottom: 1px solid #eeeeee;
}


.tarea-admin-dato:last-child {
    border-bottom: 0;
}


.tarea-admin-dato span {
    color: #666;

    font-size: 0.9rem;
}


.tarea-admin-dato strong {
    text-align: right;

    font-size: 0.92rem;
}


/* ==========================================================
   ESTADOS
   ========================================================== */

.estado-proceso {
    background: #fff3cd;
    color: #755b00;
}


.estado-cancelado {
    background: #fde8e8;
    color: #9b2c2c;
}


.estado-pendiente {
    background: #eef2f7;
    color: #555;
}


/* ==========================================================
   TABLETA
   ========================================================== */

@media (max-width: 950px) {

    .tareas-filtros {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .resumen-admin {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 650px) {

    .tareas-filtros {
        grid-template-columns: 1fr;
    }


    .tareas-filtro-acciones {
        flex-direction: column;
    }


    .tareas-filtro-acciones button {
        width: 100%;

        min-height: 50px;
    }


    .tareas-admin-grid {
        grid-template-columns: 1fr;
    }


    .resumen-admin {
        /*
            Conservamos dos columnas para que los contadores
            sigan siendo compactos en móvil.
        */
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .tarea-admin-dato {
        /*
            En pantallas pequeñas colocamos etiqueta y valor
            verticalmente para evitar texto comprimido.
        */
        flex-direction: column;

        gap: 4px;
    }


    .tarea-admin-dato strong {
        text-align: left;
    }


    .tarea-admin-cabecera {
        align-items: flex-start;
    }

}


/* ==========================================================
   ACCIONES DE TAREA
   ========================================================== */

.tarea-admin-acciones {
    display: flex;

    justify-content: flex-end;

    margin-top: 16px;
}


.tarea-admin-acciones button {
    min-width: 130px;
}


/* ==========================================================
   DETALLE DE TAREA
   ========================================================== */

.modal-detalle-tarea {
    max-width: 620px;
}


.detalle-tarea-encabezado {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 16px;

    padding-bottom: 16px;

    border-bottom: 1px solid #eeeeee;
}


.detalle-tarea-encabezado h3 {
    margin: 0 0 5px;
}


.detalle-tarea-encabezado p {
    margin: 0;
}


.detalle-tarea-datos {
    margin-top: 14px;
}


.detalle-tarea-fila {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    padding: 12px 0;

    border-bottom: 1px solid #eeeeee;
}


.detalle-tarea-fila:last-child {
    border-bottom: 0;
}


.detalle-tarea-fila span {
    color: #666666;
}


.detalle-tarea-fila strong {
    text-align: right;
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 650px) {

    .tarea-admin-acciones button {
        width: 100%;

        min-height: 48px;
    }


    .detalle-tarea-fila {
        flex-direction: column;

        gap: 5px;
    }


    .detalle-tarea-fila strong {
        text-align: left;
    }

}

.asignacion-area-contenido {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.asignacion-auditoria {
    font-size: 0.78rem;
    color: #777;
    line-height: 1.3;
}

/* ==========================================================
   FINALIZAR LIMPIEZA
   ========================================================== */

.btn-finalizar-limpieza {
    width: 100%;

    min-height: 50px;

    margin-top: 12px;

    padding: 13px 16px;

    border: 0;
    border-radius: 8px;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
}


.btn-finalizar-limpieza:disabled {
    opacity: 0.65;

    cursor: not-allowed;
}


/* ==========================================================
   CAPTURA DE FOTOGRAFÍAS
   ========================================================== */

.captura-foto {
    position: fixed;

    inset: 0;

    z-index: 1200;

    display: flex;

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

    padding: 16px;

    box-sizing: border-box;

    overflow-y: auto;

    background: rgba(0, 0, 0, 0.65);
}


.captura-foto.oculto {
    display: none;
}


.captura-foto-contenido {
    width: 100%;

    max-width: 560px;

    padding: 18px;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 12px;
}


#videoFoto,
.vista-previa-foto {
    display: block;

    width: 100%;

    min-height: 280px;

    max-height: 60vh;

    aspect-ratio: 4 / 3;

    object-fit: contain;

    background: #000000;

    border-radius: 10px;

    margin-top: 14px;
}


.captura-foto-acciones {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 16px;
}


.captura-foto-acciones button {
    flex: 1;

    min-width: 130px;

    min-height: 48px;
}


#comentarioEvidencia {
    width: 100%;

    box-sizing: border-box;

    resize: vertical;

    font-size: 16px;

    padding: 12px;

    border: 1px solid #ccc;
    border-radius: 8px;
}


@media (max-width: 650px) {

    .captura-foto {
        padding: 8px;
    }


    .captura-foto-contenido {
        min-height: calc(100vh - 16px);

        border-radius: 8px;
    }


    .captura-foto-acciones {
        flex-direction: column;
    }


    .captura-foto-acciones button {
        width: 100%;
    }

}


/* ==========================================================
   EVIDENCIAS EN DETALLE ADMINISTRATIVO
   ========================================================== */

.detalle-evidencias {
    margin-top: 26px;

    padding-top: 20px;

    border-top: 1px solid #eeeeee;
}


.detalle-evidencias h3 {
    margin-top: 0;
    margin-bottom: 16px;
}


.detalle-evidencias-grid {
    display: grid;

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

    gap: 14px;
}


.detalle-foto-card {
    display: flex;

    flex-direction: column;

    gap: 9px;

    padding: 12px;

    border: 1px solid #e1e4e8;
    border-radius: 10px;
}


.detalle-foto-imagen {
    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-radius: 8px;

    cursor: pointer;
}


.detalle-foto-comentario {
    margin: 0;

    padding: 9px;

    background: #f5f5f5;

    border-radius: 7px;

    font-size: 0.9rem;

    line-height: 1.4;
}


@media (max-width: 650px) {

    .detalle-evidencias-grid {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================
   REPORTES
   ========================================================== */

.reportes-filtros {
    display: grid;

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

    gap: 14px;

    margin-bottom: 16px;
}


.reportes-acciones {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-bottom: 24px;
}


.resumen-reportes {
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    margin-bottom: 24px;
}


.reportes-listado {
    margin-top: 20px;
}


.reportes-grid {
    display: grid;

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

    gap: 16px;
}


.reporte-card {
    padding: 18px;

    background: #ffffff;

    border: 1px solid #e1e4e8;
    border-radius: 10px;
}


.reporte-card-cabecera {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 14px;
}


.reporte-card-cabecera h3 {
    margin: 0 0 4px;
}


.reporte-card-cabecera p {
    margin: 0;
}


.reporte-dato {
    display: flex;

    justify-content: space-between;

    gap: 16px;

    padding: 9px 0;

    border-bottom: 1px solid #eeeeee;
}


.reporte-dato:last-child {
    border-bottom: 0;
}


.reporte-dato span {
    color: #666666;

    font-size: 0.9rem;
}


.reporte-dato strong {
    text-align: right;

    font-size: 0.92rem;
}


/* ==========================================================
   TABLETA
   ========================================================== */

@media (max-width: 950px) {

    .reportes-filtros {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .resumen-reportes {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 650px) {

    .reportes-filtros {
        grid-template-columns: 1fr;
    }


    .reportes-acciones {
        flex-direction: column;
    }


    .reportes-acciones button {
        width: 100%;

        min-height: 50px;
    }


    .reportes-grid {
        grid-template-columns: 1fr;
    }


    .resumen-reportes {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .reporte-dato {
        flex-direction: column;

        gap: 4px;
    }


    .reporte-dato strong {
        text-align: left;
    }

}

/* ==========================================================
   MI HISTORIAL
   ========================================================== */

.historial-filtros {
    display: grid;

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

    gap: 14px;

    width: 100%;
    max-width: 100%;
}


.historial-filtros .campo-filtro {
    min-width: 0;
}


.historial-filtros input[type="date"] {
    display: block;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;

    font-size: 16px;
}


.historial-acciones {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 16px;
    margin-bottom: 24px;
}


.historial-lista {
    display: grid;

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

    gap: 16px;

    margin-top: 20px;
}


.historial-card {
    padding: 18px;

    background: #ffffff;

    border: 1px solid #e1e4e8;
    border-radius: 10px;
}


.historial-card-cabecera {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 14px;
}


.historial-card-cabecera h3 {
    margin: 0 0 4px;
}


.historial-card-cabecera p {
    margin: 0;
}


.historial-dato {
    display: flex;

    justify-content: space-between;

    gap: 14px;

    padding: 9px 0;

    border-bottom: 1px solid #eeeeee;
}


.historial-dato:last-child {
    border-bottom: 0;
}


.historial-dato span {
    color: #666666;

    font-size: 0.9rem;
}


.historial-dato strong {
    text-align: right;

    font-size: 0.92rem;
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 600px) {

    .historial-filtros {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .historial-lista {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .historial-acciones {
        flex-direction: column;
    }


    .historial-acciones button {
        width: 100%;
    }


    .historial-dato {
        flex-direction: column;

        gap: 4px;
    }


    .historial-dato strong {
        text-align: left;
    }

}

/* ==========================================================
   ÁREAS AUTORIZADAS - MANTENIMIENTO
   ========================================================== */

.area-autorizada-card {
    padding: 16px;

    margin-bottom: 12px;

    background: #ffffff;

    border: 1px solid #e1e4e8;
    border-radius: 10px;
}


.area-autorizada-principal {
    display: flex;

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

    gap: 16px;
}


.area-autorizada-info {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.area-autorizada-nombre {
    font-size: 1rem;
}


.area-autorizada-edificio {
    color: #666666;

    font-size: 0.88rem;
}


/* ==========================================================
   BOTÓN NORMAL
   ========================================================== */

.btn-area-escanear {
    min-width: 115px;

    min-height: 44px;

    padding: 10px 16px;

    background-color: #2563eb;
    color: white;

    border: none;
    border-radius: 8px;

    font-size: 0.95rem;
    font-weight: 600;

    cursor: pointer;
}


.btn-area-escanear:disabled {
    opacity: 0.4;

    cursor: not-allowed;
}

.btn-area-escanear:hover:not(:disabled) {
    background-color: #1d4ed8;
}


/* ==========================================================
   ÁREA QUE ACTUALMENTE SE ESTÁ LIMPIANDO
   ========================================================== */

.area-autorizada-activa {
    border-width: 2px;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.08);
}


/* ==========================================================
   BOTÓN FINALIZAR
   ========================================================== */

.btn-area-finalizar {
    min-width: 120px;

    min-height: 48px;

    padding: 11px 18px;

    background-color: #2563eb;
    color: white;

    border: 0;
    border-radius: 8px;

    font-size: 1rem;
    font-weight: 700;

    cursor: pointer;
}


/* ==========================================================
   ACCIONES DEL ÁREA ACTIVA
   ========================================================== */

.area-activa-acciones {
    display: flex;

    justify-content: flex-end;

    margin-top: 14px;

    padding-top: 14px;

    border-top: 1px solid #eeeeee;
}


/* ==========================================================
   AGREGAR EVIDENCIA
   ========================================================== */

.btn-agregar-evidencia {
    min-height: 46px;

    padding: 11px 18px;

    background-color: #2563eb;
    color: white;

    border: 0;
    border-radius: 8px;

    font-size: 0.95rem;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, 0.12);
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 650px) {

    .area-autorizada-card {
        padding: 14px;
    }


    .area-autorizada-principal {
        gap: 10px;
    }


    .btn-area-escanear,
    .btn-area-finalizar {
        min-width: 100px;
    }


    .area-activa-acciones {
        justify-content: stretch;
    }


    .btn-agregar-evidencia {
        width: 100%;
    }

}

.login-logo {
    display: block;
    width: 160px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 20px;
}

/* ==========================================================
   EXCEPCIONES ADMINISTRATIVAS
   ========================================================== */

.excepciones-filtros {
    display: grid;

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

    gap: 14px;

    margin-bottom: 16px;
}


.excepciones-filtro-acciones {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-bottom: 24px;
}


.excepciones-listado {
    margin-top: 20px;
}


.excepciones-grid {
    display: grid;

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

    gap: 16px;
}


.excepcion-card {
    padding: 18px;

    background: #ffffff;

    border: 1px solid #e1e4e8;
    border-radius: 10px;
}


.excepcion-card-cabecera {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 14px;

    margin-bottom: 14px;
}


.excepcion-card-cabecera h3 {
    margin: 0 0 4px;
}


.excepcion-card-cabecera p {
    margin: 0;
}


.excepcion-dato {
    display: flex;

    justify-content: space-between;

    gap: 14px;

    padding: 9px 0;

    border-bottom: 1px solid #eeeeee;
}


.excepcion-dato span {
    color: #666666;

    font-size: 0.9rem;
}


.excepcion-dato strong {
    text-align: right;
}


.excepcion-card-acciones {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 16px;
}


/* ==========================================================
   TABLETA
   ========================================================== */

@media (max-width: 950px) {

    .excepciones-filtros {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 650px) {

    .excepciones-filtros {
        grid-template-columns: 1fr;
    }


    .excepciones-filtro-acciones {
        flex-direction: column;
    }


    .excepciones-filtro-acciones button {
        width: 100%;
    }


    .excepciones-grid {
        grid-template-columns: 1fr;
    }


    .excepcion-dato {
        flex-direction: column;

        gap: 4px;
    }


    .excepcion-dato strong {
        text-align: left;
    }


    .excepcion-card-acciones {
        flex-direction: column;
    }


    .excepcion-card-acciones button {
        width: 100%;
    }

}

/* ==========================================================
   EXCEPCIONES DE MANTENIMIENTO
   ========================================================== */

.area-excepcion-card {
    border-style: dashed;
}


.area-excepcion-vigencia {
    margin-top: 4px;

    font-size: 0.82rem;
    font-weight: 600;
}

.excepcion-areas-empleado {
    margin-top: 14px;
    margin-bottom: 18px;

    padding: 14px;

    border: 1px solid #e0e3e7;
    border-radius: 8px;
}


.excepcion-areas-empleado > strong {
    display: block;

    margin-bottom: 10px;
}


.excepcion-area-asignada {
    padding: 7px 0;

    border-bottom: 1px solid #eeeeee;

    font-size: 0.9rem;
}


.excepcion-area-asignada:last-child {
    border-bottom: 0;
}

.form-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;

    width: 18px;
    height: 18px;

    border: 2px solid #999;
    border-radius: 50%;

    cursor: pointer;
}

.form-check input[type="checkbox"]:checked {
    background-color: #198754;
    border-color: #198754;
}

.btn-reportar-incidencia {
    min-height: 46px;

    padding: 11px 18px;

    border-radius: 8px;

    font-weight: 700;

    cursor: pointer;
}


.area-activa-acciones {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}


@media (max-width: 650px) {

    .area-activa-acciones {
        flex-direction: column;
    }

    .btn-reportar-incidencia,
    .btn-agregar-evidencia {
        width: 100%;
    }

}

.incidencias-filtros {
    display: grid;

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

    gap: 14px;

    margin-bottom: 16px;
}


.incidencias-acciones {
    display: flex;

    justify-content: flex-end;

    margin-bottom: 24px;
}


.incidencias-grid {
    display: grid;

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

    gap: 16px;
}


.incidencia-card {
    padding: 18px;

    border: 1px solid #e0e3e7;
    border-radius: 10px;

    background: white;
}


.incidencia-card h3 {
    margin-top: 0;
}


@media (max-width: 650px) {

    .incidencias-filtros {
        grid-template-columns: 1fr;
    }


    .incidencias-grid {
        grid-template-columns: 1fr;
    }

}

.incidencia-foto-contenedor {
    display: flex;

    justify-content: center;

    margin-top: 16px;
}


.incidencia-foto-contenedor img {
    display: block;

    width: 100%;
    max-width: 600px;

    height: auto;

    border-radius: 10px;
}

.incidencia-card button {
    margin-top: 10px;
}

.alerta-tarea-pendiente {
    margin-bottom: 20px;

    padding: 16px;

    border: 1px solid #d8a500;
    border-radius: 10px;

    background-color: #fff8dc;
}

.alerta-tarea-pendiente strong {
    display: block;

    margin-bottom: 8px;
}

.alerta-tarea-pendiente p {
    margin: 4px 0;
}

input[type="date"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;

    font-size: 16px;
}

@supports (-webkit-touch-callout: none) {

    input[type="date"] {
        -webkit-appearance: none;
        appearance: none;

        display: block;

        width: 100%;
        max-width: 100%;

        padding-right: 10px;
    }

}

@supports (-webkit-touch-callout: none) {

    input[type="date"]::-webkit-date-and-time-value {
        text-align: left;
    }

    input[type="date"] {
        overflow: hidden;
    }

}

.areas-filtros {
    display: grid;

    grid-template-columns:
        minmax(180px, 260px)
        minmax(0, 1fr);

    gap: 14px;

    margin-bottom: 18px;
}


@media (max-width: 650px) {

    .areas-filtros {
        grid-template-columns: 1fr;
    }

}

.incidencias-bloqueadas {
    margin-top: 32px;
}


.incidencia-bloqueada-card {
    border-width: 2px;
}


.incidencia-error-sincronizacion {
    margin-top: 12px;
    margin-bottom: 14px;

    padding: 12px;

    border: 1px solid #e0e3e7;
    border-radius: 8px;
}


.incidencia-error-sincronizacion p {
    margin: 6px 0 0;

    overflow-wrap: anywhere;

    font-size: 0.9rem;
}

.incidencias-vistas {
    display: flex;

    gap: 10px;

    margin-bottom: 24px;

    flex-wrap: wrap;
}


.contador-bloqueadas {
    display: inline-flex;

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

    min-width: 22px;
    height: 22px;

    margin-left: 6px;

    padding: 0 6px;

    border-radius: 999px;

    font-size: 0.8rem;
    font-weight: 700;
}


.incidencia-bloqueada-card {
    border-width: 2px;
}


.incidencia-error-sincronizacion {
    margin-top: 12px;
    margin-bottom: 14px;

    padding: 12px;

    border: 1px solid #e0e3e7;
    border-radius: 8px;
}


.incidencia-error-sincronizacion p {
    margin: 6px 0 0;

    overflow-wrap: anywhere;

    font-size: 0.9rem;
}


@media (max-width: 650px) {

    .incidencias-vistas {
        flex-direction: column;
    }


    .incidencias-vistas button {
        width: 100%;
    }

}

.estado-reparacion {
    background-color: #FCB1A2;
    color: #6b4539;
}

.sincronizaciones-vistas {
    display: flex;

    gap: 10px;

    margin-bottom: 24px;

    flex-wrap: wrap;
}


@media (max-width: 650px) {

    .sincronizaciones-vistas {
        flex-direction: column;
    }

    .sincronizaciones-vistas button {
        width: 100%;
    }

}

.menu-card {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 16px;

    min-height: 135px;

    padding: 22px;

    border: 1px solid #dfe3e8;

    border-radius: 12px;

    background: #ffffff;

    text-align: left;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}


.menu-card:hover {
    transform: translateY(-3px);

    border-color: #c7ced7;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.07);
}


.menu-card:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);

    outline-offset: 2px;
}


/* ==========================================================
   ICONO
   ========================================================== */

.menu-card-icono {
    display: flex;

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

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    border-radius: 12px;
}


.menu-card-icono img {
    width: 28px;
    height: 28px;

    object-fit: contain;
}


/* ==========================================================
   CONTENIDO
   ========================================================== */

.menu-card-contenido {
    min-width: 0;
}


.menu-card-superior {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 7px;
}


.menu-card-titulo {
    font-size: 1.06rem;

    font-weight: 700;

    color: #1f2937;
}


.menu-card-descripcion {
    display: block;

    color: #667085;

    font-size: 0.92rem;

    line-height: 1.45;
}


/* ==========================================================
   CATEGORÍA
   ========================================================== */

.menu-card-categoria {
    padding: 3px 8px;

    border-radius: 999px;

    background: #f2f4f7;

    color: #667085;

    font-size: 0.7rem;

    font-weight: 600;
}


/* ==========================================================
   FLECHA
   ========================================================== */

.menu-card-flecha {
    color: #98a2b3;

    font-size: 1.7rem;

    transition: transform 0.18s ease;
}


.menu-card:hover .menu-card-flecha {
    transform: translateX(3px);
}

.menu-icono-azul {
    background: #eaf2ff;
}


.menu-icono-verde {
    background: #e7f8f0;
}


.menu-icono-morado {
    background: #f2eaff;
}


.menu-icono-naranja {
    background: #fff0e6;
}


.menu-icono-rojo {
    background: #ffeceb;
}


.menu-icono-celeste {
    background: #e6f8f8;
}


.menu-icono-rosa {
    background: #fdebf4;
}


.menu-icono-gris {
    background: #eef1f4;
}

.menu-grid-encabezado {
    display: flex;

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

    gap: 12px;

    margin-top: 28px;
    margin-bottom: 14px;
}


.menu-grid-encabezado h3 {
    margin: 0;
}


.menu-grid-encabezado span {
    color: #777777;

    font-size: 0.85rem;
}

.panel-admin-encabezado {
    display: flex;

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

    gap: 24px;

    margin-bottom: 8px;
}


.panel-admin-texto {
    min-width: 0;
}


.panel-admin-texto h2 {
    margin-top: 0;
    margin-bottom: 8px;
}


.panel-admin-texto p {
    margin: 0;
}


.panel-admin-logo {
    display: flex;

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

    flex-shrink: 0;

    width: 180px;
    min-height: 80px;
}


.panel-admin-logo img {
    display: block;

    max-width: 160px;
    max-height: 75px;

    width: auto;
    height: auto;

    object-fit: contain;
}

@media (max-width: 600px) {

    .panel-admin-encabezado {
        align-items: flex-start;
    }


    .panel-admin-logo {
        width: 100px;
        min-height: auto;
    }


    .panel-admin-logo img {
        max-width: 90px;
        max-height: 55px;
    }

}

.estado-cancelada {
    background: #fef3f2;
    color: #b42318;
    border: 1px solid #fecdca;
}

/* temporal
*/

/* ==========================================================
   DEBUG WEBVIEW - CAMARA Y VISTA PREVIA
   ========================================================== */
/* ==========================================================
   CÁMARA - WEBVIEW ANDROID
   ========================================================== */

#videoFoto {
    display: block !important;

    width: 100% !important;

    height: 400px !important;
    min-height: 400px !important;

    object-fit: cover !important;

    background: #000000;

    border-radius: 10px;

    margin-top: 14px;
}


#videoFoto.oculto {
    display: none !important;
}


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

#vistaPreviaFoto,
.vista-previa-foto {
    display: block !important;

    width: 100% !important;

    height: 400px !important;
    min-height: 400px !important;

    object-fit: contain !important;

    background: #000000;

    border-radius: 10px;

    margin-top: 14px;
}


#vistaPreviaFoto.oculto,
.vista-previa-foto.oculto {
    display: none !important;
}