/* =========================================================
   ESTILOS GENERALES
   Sistema de Control de Bienes ISTAM
   ========================================================= */

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f5f6f7;
    color: #333;
    overflow-x: hidden;
}


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

.barra-superior {
    background: linear-gradient(135deg, #8bc34a, #9bd653);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-header {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain;
    background: white;
    border-radius: 9px;
    padding: 5px;
}

.titulo-sistema h1 {
    color: white;
    font-size: 25px;
    margin: 0 0 4px 0;
}

.titulo-sistema p {
    color: white;
    font-size: 13px;
    margin: 0;
}


/* Usuario */

.usuario-header {
    background: rgba(255, 255, 255, 0.65);
    padding: 9px 13px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.usuario-datos {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #006633;
}

.usuario-datos small,
.usuario-datos strong {
    display: block;
}

.usuario-icono {
    font-size: 23px;
}

.boton-salir {
    color: #006633;
    text-decoration: none;
    font-weight: bold;
    padding: 7px 11px;
    border-left: 1px solid rgba(0, 102, 51, 0.25);
}

.boton-salir:hover {
    color: #003d20;
}


/* =========================================================
   MENÚ PRINCIPAL
   ========================================================= */

.menu-principal {
    background-color: #006633;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    flex-wrap: wrap;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 14px;
    background-color: rgba(0, 75, 38, 0.70);
    transition: 0.2s;
}

.menu-item:hover {
    background-color: #8bc34a;
    color: #003d20;
    transform: translateY(-1px);
}

.menu-activo {
    background-color: #a8db68;
    color: #004d28;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.menu-icono {
    font-size: 17px;
    line-height: 1;
}


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

.contenido {
    max-width: 1180px;
    width: calc(100% - 30px);
    margin: 0 auto;
    padding: 25px 0 30px 0;
}

.contenido h2 {
    color: #006633;
}


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

.boton {
    display: inline-block;
    background-color: #006633;
    color: white;
    padding: 9px 15px;
    border: none;
    border-radius: 7px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.boton:hover {
    background-color: #004d26;
    transform: translateY(-1px);
}

.boton-secundario {
    background-color: #8bc34a;
    color: white;
}

.boton-secundario:hover {
    background-color: #75aa38;
}


/* =========================================================
   PANEL PRINCIPAL
   ========================================================= */

.dashboard-cabecera {
    margin-bottom: 20px;
}

.dashboard-cabecera h2 {
    font-size: 25px;
    margin-bottom: 5px;
}

.bienvenida {
    color: #555;
}

.tarjetas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.tarjeta {
    background: white;
    border-radius: 12px;

    /* Tarjeta más alta */
    min-height: 155px;
    padding: 25px 20px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;

    border-top: 4px solid #8bc34a;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: 0.2s;
}

.tarjeta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

.tarjeta-icono {
    width: 60px;
    height: 60px;
    min-width: 60px;

    border-radius: 12px;
    background-color: #edf7df;

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

    font-size: 30px;
}

.tarjeta h3 {
    margin: 0 0 6px 0;
    color: #006633;
    font-size: 14px;
}

.tarjeta p {
    margin: 0;
    font-size: 30px;
    font-weight: bold;
    color: #333;
}


/* =========================================================
   CABECERA DE MÓDULOS
   ========================================================= */

.modulo-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.modulo-cabecera h2 {
    margin: 0 0 5px 0;
    font-size: 25px;
}

.modulo-cabecera p {
    margin: 0;
    color: #555;
}

.modulo-acciones {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}


/* =========================================================
   OPCIONES BIENES
   ========================================================= */

.opciones-bienes {
    display: flex;
    gap: 9px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.boton-opcion {
    display: inline-block;
    background: white;
    color: #006633;
    border: 1px solid #006633;
    padding: 8px 13px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.boton-opcion:hover {
    background-color: #edf7df;
}


/* =========================================================
   BUSCADOR
   ========================================================= */

.buscador-modulo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    width: 100%;
}

.buscador-campo {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #d4d9dd;
    border-radius: 8px;
    padding: 0 12px;
    min-width: 0;
}

.buscador-campo input {
    width: 100%;
    padding: 11px 5px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
}

.boton-limpiar {
    display: inline-block;
    background: white;
    color: #006633;
    border: 1px solid #b8d8c4;
    padding: 9px 14px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.boton-limpiar:hover {
    background-color: #edf7df;
}


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

.tabla-contenedor {
    width: 100%;
    overflow-x: auto;
    border-radius: 9px;
    background: white;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
}

table th,
table td {
    padding: 11px 13px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: middle;
}

table th {
    background-color: #006633;
    color: white;
    font-size: 14px;
}

table td {
    font-size: 14px;
}

table tbody tr:hover {
    background-color: #f6faf4;
}


/* =========================================================
   BOTONES DE ACCIONES
   ========================================================= */

.acciones-botones {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-accion {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid;
    transition: 0.2s;
    white-space: nowrap;
}

.btn-accion:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.btn-editar {
    background-color: white;
    color: #006633;
    border-color: #006633;
}

.btn-detalle {
    background-color: #8bc34a;
    color: white;
    border-color: #8bc34a;
}

.btn-acta {
    background-color: #8bc34a;
    color: white;
    border-color: #8bc34a;
}

.btn-devolucion,
.btn-estado {
    background-color: #006633;
    color: white;
    border-color: #006633;
}


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

.reportes-cabecera {
    margin-bottom: 20px;
}

.reportes-cabecera h2 {
    font-size: 25px;
    margin-bottom: 5px;
}

.reportes-cabecera p {
    color: #555;
}

.tarjetas-reportes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
    width: 100%;
}

.tarjeta-reporte {
    background: white;
    border-radius: 11px;
    border-top: 4px solid #8bc34a;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.reporte-icono {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 10px;
    background-color: #edf7df;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.reporte-info {
    min-width: 0;
}

.reporte-info h3 {
    margin: 0 0 5px 0;
    color: #006633;
}

.reporte-info p {
    margin: 0 0 11px 0;
    color: #555;
    font-size: 14px;
}

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

.pie-sistema {
    position: relative;
    margin-top: 10px;
    min-height: 68px;
    padding: 17px 30px;

    background-color: #006633;
    color: white;

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

/* Información central */
.pie-centro {
    text-align: center;
    font-size: 12px;
}

.pie-centro p {
    margin: 3px 0;
}

/* Lema del lado derecho */
.pie-lema {
    position: absolute;
    right: 30px;

    display: flex;
    align-items: center;
    gap: 8px;

    color: #cde7a4;
    font-size: 13px;
    font-style: italic;
}

/* Hoja */
.pie-hoja {
    font-size: 21px;
}


/* Adaptación para pantallas pequeñas */
@media (max-width: 750px) {

    .pie-sistema {
        flex-direction: column;
        gap: 8px;
    }

    .pie-lema {
        position: static;
        margin-top: 4px;
    }
}

/* =========================================================
   LOGIN
   ========================================================= */

.contenido-login {
    margin: 0;
    padding: 0;
    width: 100%;
}

.login-contenedor {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(
        135deg,
        #8bc34a 0%,
        #4f9f45 50%,
        #006633 100%
    );
}

.login-tarjeta {
    width: 100%;
    max-width: 560px;
    background: white;
    border-radius: 16px;
    padding: 25px 35px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.login-logo {
    width: 105px;
    height: auto;
    display: block;
    margin: 0 auto 10px auto;
    object-fit: contain;
}

.login-tarjeta h2 {
    font-size: 28px;
    color: #006633;
    margin-bottom: 6px;
}

.login-texto {
    color: #555;
    font-size: 15px;
    margin-bottom: 18px;
}

.campo-login {
    max-width: 480px;
    margin: 0 auto 14px;
    text-align: left;
}

.campo-login label {
    display: block;
    font-weight: bold;
    margin-bottom: 7px;
    color: #006633;
}

.campo-login input {
    width: 100%;
    padding: 11px;
    font-size: 15px;
    border: 1px solid #bbb;
    border-radius: 7px;
}

.boton-login {
    width: 100%;
    max-width: 480px;
    padding: 12px;
    background-color: #006633;
    color: white;
    border: none;
    border-radius: 7px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.boton-login:hover {
    background-color: #004d26;
}

.mensaje-error {
    color: #b00020;
    font-weight: bold;
    margin-bottom: 15px;
}

.login-institucional {
    margin-top: 16px;
    font-size: 13px;
    color: #555;
}

.firma-desarrollador {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}


/* =========================================================
   ACTA
   ========================================================= */

.acta {
    max-width: 850px;
    margin: 30px auto;
    background: white;
    padding: 35px;
    border: 1px solid #ccc;
}

.acta-encabezado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
}

.acta-logo {
    width: 90px;
    height: auto;
}

.acta-encabezado h2,
.acta-encabezado h3 {
    margin: 5px 0;
}

.tabla-acta {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0 25px 0;
}

.tabla-acta th,
.tabla-acta td {
    border: 1px solid #444;
    padding: 8px;
    text-align: left;
}

.tabla-acta th {
    width: 30%;
    background: #f2f2f2;
    color: black;
}

.firmas-acta {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 70px;
    text-align: center;
}

.firmas-acta div {
    width: 45%;
}


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

@media (max-width: 900px) {

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

    .barra-superior {
        padding: 14px 20px;
    }

    .titulo-sistema h1 {
        font-size: 21px;
    }
}

@media (max-width: 750px) {

    .modulo-cabecera {
        flex-direction: column;
        align-items: flex-start;
    }

    .buscador-modulo {
        flex-direction: column;
        align-items: stretch;
    }

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

    .barra-superior {
        flex-direction: column;
        align-items: stretch;
    }

    .usuario-header {
        justify-content: space-between;
    }
}

@media (max-width: 550px) {

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

    .contenido {
        width: calc(100% - 20px);
    }

    .menu-item {
        padding: 9px 11px;
        font-size: 13px;
    }
}


/* =========================================================
   IMPRESIÓN DEL ACTA
   ========================================================= */

@media print {

    header,
    nav,
    footer,
    .boton {
        display: none !important;
    }

    body {
        background: white;
        margin: 0;
    }

    .contenido {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .acta {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 15px;
        border: none;
        box-shadow: none;
        font-size: 12px;
        line-height: 1.25;
    }

    .acta p,
    .acta li {
        line-height: 1.25;
    }

    .tabla-acta th {
        width: 30%;
        background: #f2f2f2;
        color: #000 !important;
    }

    .firmas-acta {
        page-break-inside: avoid;
    }
}
/* =========================================================
   ASIGNACIONES
   ========================================================= */

/* Texto pequeño debajo del bien */
.texto-secundario {
    margin-top: 4px;
    color: #666;
    font-size: 12px;
}

/* Estado pendiente */
.estado-pendiente {
    display: inline-block;
    background-color: #fff1cc;
    color: #8a5a00;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
}

/* Estado devuelto */
.estado-devuelto {
    display: inline-block;
    background-color: #e5f4e0;
    color: #006633;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
}

/* Mensaje inferior de la tabla */
.resumen-tabla {
    margin-top: 14px;
    padding: 12px 14px;
    background-color: #edf7f0;
    color: #35634a;
    border-radius: 8px;
    font-size: 13px;
}

/* Tabla vacía */
.tabla-vacia {
    text-align: center;
    color: #666;
    padding: 25px !important;
}
/* =========================================================
   CUSTODIOS
   ========================================================= */

.estado-activo {
    display: inline-block;
    background-color: #e5f4e0;
    color: #006633;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
}

.estado-inactivo {
    display: inline-block;
    background-color: #f3e3e3;
    color: #9a1f1f;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
}

/* =========================================================
   FILTROS DE ASIGNACIONES
   ========================================================= */

.filtros-asignaciones {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    width: 100%;
}

.filtros-asignaciones .buscador-campo {
    flex: 1;
}

.filtro-select {
    min-width: 180px;
    padding: 10px 12px;
    background: white;
    color: #333;
    border: 1px solid #d4d9dd;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
}

.filtro-select:focus {
    border-color: #8bc34a;
}

@media (max-width: 750px) {
    .filtros-asignaciones {
        flex-direction: column;
        align-items: stretch;
    }

    .filtro-select {
        width: 100%;
    }
}

/* =========================================================
   PIE SIEMPRE AL FINAL DE LA PANTALLA
   ========================================================= */

/* La página ocupa toda la altura */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* El contenido ocupa el espacio disponible */
.contenido {
    flex: 1;
}

/* El pie se mantiene abajo */
.pie-sistema {
    margin-top: auto;
    width: 100%;
}