/* =====================================================
   FUENTES Y AJUSTES GENERALES
===================================================== */

@font-face{
    font-family:'Medori';
    src:url('../fonts/meedori-sans-regular.ttf') format('truetype');
}

.am-module-page{
    background:#f4f8fb;
}



/* =====================================================
   DASHBOARD PRINCIPAL
===================================================== */

.am-panel{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    max-width:1200px;

    margin:0 auto;

    padding:20px;
}



/* =====================================================
   CABECERA DASHBOARD
===================================================== */

.am-header{

    text-align:center;

    margin-bottom:20px;
}

.am-logo{

    width:120px;

    display:block;

    margin:0 auto 10px auto;
}

.am-header h1{

    font-family:'Medori',sans-serif;

    font-size:48px;

    color:#0C9AAA;

    margin:0;

    letter-spacing:4px;
}

.am-header p{

    color:#091330;

    font-size:20px;

    font-weight:600;

    margin-top:15px;
}



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

.am-menu{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px;
}

.am-btn{

    width:180px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:white;

    color:#091330;

    font-size:18px;

    font-weight:700;

    border-radius:22px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    transition:.3s;
}

.am-btn:hover{

    transform:translateY(-6px);

    background:#0C9AAA;

    color:white;

    box-shadow:
    0 15px 35px rgba(12,154,170,.35);
}



/* =====================================================
   ESTRUCTURA DE TODOS LOS MODULOS
===================================================== */

.am-module-page{

    max-width:1800px;

    margin:0 auto;

    padding:8px 15px;
}



/* =====================================================
   MENU SUPERIOR DE MODULOS
===================================================== */

.am-top-navigation{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:5px;

    margin-bottom:5px;
}




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

.am-nav-link{

    text-decoration:none;

    color:#091330;

    font-size:12px;

    font-weight:600;

    padding:6px 9px;

    border-radius:8px;

    background:white;

    box-shadow:
    0 2px 6px rgba(0,0,0,.04);

    transition:.2s;
}


/* =====================================================
   MODULO ACTIVO
===================================================== */

.am-nav-link.active{

    background:#0C9AAA;

    color:white;

    box-shadow:
    0 4px 12px rgba(12,154,170,.25);
}



/* =====================================================
   LOGO PEQUEÑO DE MODULOS
===================================================== */

.am-mini-logo{

    display:flex;

    justify-content:flex-end;

    margin-bottom:10px;
}

.am-mini-logo img{

    width:50px;
}



/* =====================================================
   TITULO DEL MODULO
===================================================== */

.am-page-title{

    font-family:'Medori',sans-serif;

    font-size:24px;

    color:#0C9AAA;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:8px;
}



/* =====================================================
   DESCRIPCION DEL MODULO
===================================================== */

.am-page-description{

    font-size:14px;

    color:#7b8794;

    margin-bottom:15px;
}



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

.am-content{

    max-width:1400px;

    margin:0 auto;
}

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

.am-card-module{

    background:white;

    border-radius:18px;

    padding:25px;

    box-shadow:
    0 4px 20px rgba(0,0,0,.08);
}

.am-back-nav{
    margin: 10px 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.am-back-btn{
    display: inline-block;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #333;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s;
}

.am-back-btn:hover{
    background: #333;
    color: #fff;
}

.am-back-arrow{
    text-decoration: none;
    font-size: 28px;
    font-weight: 700;
    color: #333;
    transition: 0.2s;
}

.am-back-arrow:hover{
    opacity: .7;
}



/* =====================================================
   RESPONSIVE: TABLET (1024px / 768px) Y MOVIL (390px)
   Solo presentacion. Sobrescribe estilos en linea con !important.
===================================================== */

.am-module-page,
.am-module-page *{
    box-sizing:border-box;
}

.am-module-page img,
.am-module-page video,
.am-module-page canvas{
    max-width:100%;
}

.am-qr-imagen img,
.am-qr-imagen canvas{
    max-width:100%;
    height:auto;
}


/* ---------- Tablet grande: hasta 1100px ---------- */

@media (max-width:1100px){

    .am-top-navigation{
        flex-wrap:wrap;
        gap:8px;
    }

    .am-nav-link{
        font-size:14px;
        padding:10px 14px;
    }

    .am-module-page .cliente-btn-ver,
    .am-module-page .cliente-btn-editar,
    .am-module-page .am-back-btn{
        min-height:40px;
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        font-size:13px !important;
        padding:8px 14px !important;
    }

    .am-module-page .clientes-tabs{
        flex-wrap:wrap;
        gap:10px !important;
    }

    .am-module-page .clientes-tab{
        padding:10px 16px !important;
    }

    .am-btn{
        width:160px;
        height:70px;
    }

    .am-header h1{
        font-size:40px;
    }
}


/* ---------- Tablet: hasta 768px ---------- */

@media (max-width:768px){

    .am-module-page{
        padding:8px 10px;
    }

    .am-header h1{
        font-size:34px;
        letter-spacing:3px;
    }

    .am-header p{
        font-size:17px;
    }

    .am-btn{
        width:calc(33.333% - 10px);
        min-width:140px;
    }

    .am-page-title{
        font-size:22px;
    }

    .am-module-page .cliente-card{
        padding:18px;
    }

    .am-module-page .cliente-ficha input:not([type="radio"]):not([type="checkbox"]),
    .am-module-page .cliente-ficha select,
    .am-module-page .cliente-ficha textarea,
    .am-module-page #am-acceso-codigo,
    .am-module-page #am-lectura-codigo,
    .am-module-page .clientes-search input,
    .am-module-page form[method="get"] input,
    .am-module-page form[method="get"] select{
        width:100% !important;
        max-width:100% !important;
        min-height:46px;
        font-size:16px !important;
    }

    .am-module-page .cliente-ficha .am-btn-action{
        width:100%;
        min-height:48px;
        font-size:16px;
    }

    .am-module-page #frecuencia-opciones label{
        padding:8px 0;
        font-size:16px;
    }

    /* Acceso y Lectura: formulario y cámara a todo el ancho */
    .am-module-page #am-acceso-form button,
    .am-module-page #am-lectura-form button{
        display:flex !important;
        width:100% !important;
        margin:10px 0 0 !important;
        min-height:48px;
        font-size:16px !important;
    }

    .am-module-page #am-camara-iniciar,
    .am-module-page #am-camara-parar{
        width:100% !important;
        min-height:50px;
    }

    .am-module-page #am-camara-visor{
        max-width:100% !important;
    }

    .am-module-page #am-lectura-panel,
    .am-module-page #am-acceso-panel{
        max-width:100% !important;
    }

    /* Historial: filtros apilados */
    .am-module-page form[method="get"]{
        flex-direction:column;
        align-items:stretch !important;
    }

    .am-module-page .am-tabla-accesos th,
    .am-module-page .am-tabla-accesos td{
        font-size:14px;
    }

    .am-module-page .am-nav-interna a{
        flex:1 1 auto;
        text-align:center;
    }

    /* Entradas */
    .am-module-page .am-entrada-crear{
        min-height:44px;
        min-width:96px;
    }

    .am-module-page #am-entrada-qr button{
        flex:1 1 140px;
        min-height:46px;
    }
}


/* ---------- Movil: hasta 600px ---------- */

@media (max-width:600px){

    /* Menu de modulos: una sola tira deslizable para no ocupar la pantalla */
    .am-top-navigation{
        flex-wrap:nowrap;
        justify-content:flex-start;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        padding-bottom:6px;
        scrollbar-width:none;
    }

    .am-top-navigation::-webkit-scrollbar{
        display:none;
    }

    .am-nav-link{
        flex:0 0 auto;
        white-space:nowrap;
        min-height:44px;
        display:inline-flex;
        align-items:center;
    }

    .am-mini-logo img{
        width:40px;
    }

    .am-back-nav{
        flex-wrap:wrap;
    }

    .am-back-btn{
        min-height:44px;
        display:inline-flex;
        align-items:center;
        padding:8px 18px;
    }

    .am-back-arrow{
        min-width:44px;
        min-height:44px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    /* Panel principal: dos botones por fila */
    .am-panel{
        padding:12px;
        justify-content:flex-start;
    }

    .am-menu{
        gap:10px;
        width:100%;
    }

    .am-btn{
        width:calc(50% - 5px);
        min-width:0;
        height:64px;
        font-size:16px;
        border-radius:18px;
    }

    .am-logo{
        width:90px;
    }

    .am-header h1{
        font-size:28px;
        letter-spacing:2px;
    }

    .am-header p{
        font-size:15px;
        margin-top:8px;
    }

    .am-module-page .cliente-card{
        padding:14px;
        border-radius:14px;
    }

    /* Tarjetas de resultado de Acceso y Lectura */
    .am-module-page #am-acceso-panel{
        padding:14px !important;
    }

    .am-module-page #am-acceso-panel h2{
        font-size:24px !important;
    }

    .am-module-page #am-acceso-panel p[style*="font-size:32px"]{
        font-size:26px !important;
    }

    .am-module-page #am-acceso-panel p[style*="font-size:24px"]{
        font-size:20px !important;
    }

    .am-module-page #am-lectura-hoy > div:first-child{
        font-size:22px !important;
    }

    /* Historial de entradas: cada registro es una tarjeta */
    .am-module-page .am-tabla-he,
    .am-module-page .am-tabla-he tbody{
        display:block;
        width:100%;
    }

    .am-module-page .am-tabla-he thead{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
    }

    .am-module-page .am-tabla-he tr.am-he-fila{
        display:block;
        margin:0 0 12px;
        padding:10px 12px;
        background:#fff;
        border:1px solid #e5e7eb !important;
        border-radius:14px;
    }

    .am-module-page .am-tabla-he tr.am-he-fila > td{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        padding:5px 0 !important;
        white-space:normal !important;
        text-align:right;
    }

    .am-module-page .am-tabla-he tr.am-he-fila > td::before{
        flex:0 0 auto;
        font-weight:600;
        color:#7b8794;
        text-align:left;
    }

    .am-module-page .am-tabla-he tr.am-he-fila > td:nth-child(1)::before{ content:"Fecha"; }
    .am-module-page .am-tabla-he tr.am-he-fila > td:nth-child(2)::before{ content:"Código"; }
    .am-module-page .am-tabla-he tr.am-he-fila > td:nth-child(3)::before{ content:"Tipo"; }
    .am-module-page .am-tabla-he tr.am-he-fila > td:nth-child(4)::before{ content:"Estado"; }
    .am-module-page .am-tabla-he tr.am-he-fila > td:nth-child(5)::before{ content:"Accesos restantes"; }

    .am-module-page .am-tabla-he tr.am-he-fila > td:nth-child(6){
        display:block;
        text-align:left;
        padding-top:10px !important;
    }

    .am-module-page .am-tabla-he tr.am-he-fila > td:nth-child(6) > div{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
    }

    .am-module-page .am-tabla-he tr.am-he-fila > td:nth-child(6) button{
        flex:1 1 100px;
        min-height:44px;
    }

    .am-module-page .am-tabla-he tr.am-he-qr:not([hidden]),
    .am-module-page .am-tabla-he tr.am-he-qr:not([hidden]) > td{
        display:block;
        padding:0 !important;
        text-align:center;
    }

    /* Entradas */
    .am-module-page .am-entradas-fila li{
        gap:10px;
    }
}