/* =====================================================================
   Modernización — componentes reutilizables (.mz-*)
   Tema hosting506. Cargado desde header.tpl.
   Se usa al migrar páginas viejas al sistema "modern-register".
   Ver MODERNIZACION-TEMA.md
   ===================================================================== */

/* Título de sección dentro de .modern-register-section */
.mz-section-title{font-size:16px;font-weight:600;color:#0a2038;margin:26px 0 12px}
.mz-section-title:first-child{margin-top:6px}

/* Grilla de métricas (números grandes) */
.mz-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 6px}
.mz-stat-card{background:#f8fafc;border:1px solid #e8edf2;border-radius:10px;padding:18px 20px;text-align:center;transition:box-shadow .2s}
.mz-stat-card:hover{box-shadow:0 4px 14px rgba(10,32,56,.08)}
.mz-stat-value{font-size:26px;font-weight:700;color:#0a2038;line-height:1}
.mz-stat-label{font-size:12px;color:#64748b;margin-top:7px;text-transform:uppercase;letter-spacing:.3px}

/* Grilla de tarjetas (categorías, accesos rápidos, etc.) */
.mz-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mz-card{display:block;background:#f8fafc;border:1px solid #e8edf2;border-radius:10px;padding:16px 18px;transition:box-shadow .2s,border-color .2s;color:inherit;text-decoration:none}
.mz-card:hover{box-shadow:0 4px 14px rgba(10,32,56,.08);border-color:#cdd9e5;text-decoration:none;color:inherit}
.mz-card h5{margin:0 0 6px;font-size:15px;color:#0a2038}
.mz-card p{margin:0;font-size:13px;color:#64748b}
.mz-card-icon{color:#1a6bef;margin-right:6px}

/* Badge de conteo / tamaño */
.mz-count-badge{display:inline-block;min-width:20px;padding:1px 7px;border-radius:10px;background:#e8edf2;color:#0a2038;font-size:11px;font-weight:600}

/* Lista de items (descargas / anuncios / artículos) */
.mz-list .mz-list-item{display:block;padding:14px 16px;border:1px solid #e8edf2;border-radius:10px;margin-bottom:10px;background:#fff;transition:box-shadow .2s;color:inherit;text-decoration:none}
.mz-list .mz-list-item:hover{box-shadow:0 4px 14px rgba(10,32,56,.08);text-decoration:none;color:inherit}
.mz-list .mz-list-item h5{margin:0 0 4px;font-size:15px;color:#0a2038}
.mz-list .mz-list-item .mz-meta{margin:0;font-size:13px;color:#64748b}

/* Breadcrumb dentro de una sección moderna */
.mz-breadcrumb{font-size:13px;color:#64748b;margin:0 0 16px}
.mz-breadcrumb a{color:#1a6bef;text-decoration:none}
.mz-breadcrumb a:hover{text-decoration:underline}

/* Cuerpo de artículo (knowledgebase, etc.) — texto legible */
.mz-article-body{font-size:14.5px;line-height:1.7;color:#3a4654}
.mz-article-body img{max-width:100%;height:auto}
.mz-article-body h1,.mz-article-body h2,.mz-article-body h3,.mz-article-body h4{color:#0a2038}
.mz-article-title{font-size:22px;font-weight:700;color:#0a2038;margin:0 0 6px}
.mz-tags{font-size:12px;color:#94a3b8;margin:0 0 14px}

/* Tarjeta de artículo / contenido (anuncios, etc.) */
.mz-article{border:1px solid #e8edf2;border-radius:10px;padding:18px 20px;margin-bottom:14px;background:#fff;transition:box-shadow .2s}
.mz-article:hover{box-shadow:0 4px 14px rgba(10,32,56,.08)}
.mz-article .mz-meta{font-size:12px;color:#94a3b8;margin-bottom:6px}
.mz-article h3,.mz-article h5{margin:0 0 8px;font-size:18px;line-height:1.3}
.mz-article h3 a,.mz-article h5 a{color:#0a2038;text-decoration:none}
.mz-article h3 a:hover,.mz-article h5 a:hover{color:#1a6bef}
.mz-article .excerpt{color:#4a5568;font-size:14px;margin-bottom:12px}

@media(max-width:768px){.mz-stat-grid,.mz-card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.mz-stat-grid,.mz-card-grid{grid-template-columns:1fr}}

/* =====================================================================
   Sidebar — altura = columna de contenido; scroll interno del menú
   ===================================================================== */
@media (min-width: 768px) {
    .site-holder .box-holder {
        position: relative;
    }

    .site-holder .left-sidebar {
        position: absolute !important;
        top: 0;
        bottom: 0;
        left: 0;
        width: 200px !important;
        height: auto !important;
        min-height: 100%;
    }

    .site-holder .box-holder > .content {
        margin-left: 200px !important;
        min-width: 0;
    }

    .site-holder.mini-sidebar .left-sidebar {
        width: 60px !important;
    }

    .site-holder.mini-sidebar .box-holder > .content {
        margin-left: 60px !important;
    }

    .sidebar-holder {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-holder::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-holder::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.22);
        border-radius: 999px;
    }

    .sidebar-holder::-webkit-scrollbar-track {
        background: transparent;
    }

    /* Submenú expandido: flujo normal + scroll en el holder, no empuja el footer */
    .site-holder:not(.mini-sidebar) .sidebar-holder .nav > li.submenu > ul {
        position: static;
        width: 100%;
        margin-left: 0 !important;
        margin-top: 0;
        box-shadow: none;
    }

    /* Hover/active sin saltar: compensar border-left de 4px */
    .sidebar-holder .nav > li > a:hover,
    .sidebar-holder .nav > li.active > a {
        transform: none;
        padding-left: 4px;
    }

    .sidebar-holder .nav > li ul > li > a:hover,
    .sidebar-holder .nav > li ul > li.active > a {
        transform: none;
        padding: 10px 0 10px 31px;
    }
}