/* ============================================================
   style.css — PrometeoAdmin
   Tema: Claro moderno · Sidebar mini colapsable · Mobile-first
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Variables ── */
:root {
    /* Colores principales */
    --bg-body:        #f0f2f7;
    --bg-white:       #ffffff;
    --bg-sidebar:     #ffffff;
    --border:         #e5e9f2;

    /* Acento — rojo del sistema original */
    --accent:         #e84545;
    --accent-dark:    #c73333;
    --accent-light:   #fff0f0;

    /* Azul de acción */
    --blue:           #2563eb;
    --blue-light:     #eff6ff;

    /* Texto */
    --text-primary:   #1e293b;
    --text-secondary: #64748b;
    --text-muted:     #94a3b8;

    /* Sidebar dimensiones */
    --sidebar-full:   260px;
    --sidebar-mini:   68px;
    --topbar-h:       58px;

    /* Sombras */
    --shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:      0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --shadow-sidebar: 2px 0 20px rgba(0,0,0,.06);

    /* Transición */
    --trans:          all .22s cubic-bezier(.4,0,.2,1);
}

/* ── Reset base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: 'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    background: var(--bg-body);
    color: var(--text-primary);
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

/* ════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════ */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    transition: var(--trans);
}

.topbar-left {
    display: flex;
    align-items: center;
    height: 100%;
    min-width: var(--sidebar-full);
    padding-left: 16px;
    border-right: 1px solid var(--border);
    transition: var(--trans);
}

body.sidebar-mini .topbar-left {
    min-width: var(--sidebar-mini);
    justify-content: center;
    padding-left: 0;
}

/* Botón hamburguesa */
.btn-sidebar-toggle {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: var(--trans);
    flex-shrink: 0;
}
.btn-sidebar-toggle span {
    display: block;
    height: 2px;
    background: var(--text-secondary);
    border-radius: 2px;
    transition: var(--trans);
}
.btn-sidebar-toggle span:nth-child(1) { width: 20px; }
.btn-sidebar-toggle span:nth-child(2) { width: 14px; }
.btn-sidebar-toggle span:nth-child(3) { width: 20px; }
.btn-sidebar-toggle:hover span { background: var(--accent); }
.btn-sidebar-toggle:hover span:nth-child(2) { width: 20px; }

/* Brand / Logo */
.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 12px;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    transition: var(--trans);
}
.topbar-brand .brand-icon {
    width: 34px;
    height: 34px;
    background: var(--accent);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(232,69,69,.3);
}
.topbar-brand .brand-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.3px;
    transition: var(--trans);
}
.topbar-brand .brand-text span { color: var(--accent); }

body.sidebar-mini .topbar-brand .brand-text {
    opacity: 0;
    width: 0;
    margin-left: 0;
}

/* Topbar derecha */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.topbar-btn {
    width: 38px;
    height: 38px;
    border: none;
    background: none;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 15px;
    transition: var(--trans);
    position: relative;
    text-decoration: none;
}
.topbar-btn:hover {
    background: var(--bg-body);
    color: var(--text-primary);
}

/* Badge de notificación */
.topbar-btn .badge-dot {
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    top: 7px;
    right: 7px;
}

/* Avatar usuario */
.topbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    margin-left: 4px;
    letter-spacing: .5px;
    transition: var(--trans);
    box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
.topbar-avatar:hover { transform: scale(1.05); }

/* Separador vertical */
.topbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 6px;
}

/* ════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════ */
.sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: var(--sidebar-full);
    height: calc(100vh - var(--topbar-h));
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    overflow: hidden;
    overflow-y: auto;
    transition: var(--trans);
    z-index: 999;
    box-shadow: var(--shadow-sidebar);

    /* Scrollbar delgado */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

body.sidebar-mini .sidebar { width: var(--sidebar-mini); }

/* ── Secciones del menú ── */
.sidebar-section {
    padding: 10px 0 4px;
    border-bottom: 1px solid var(--border);
}
.sidebar-section:last-child { border-bottom: none; padding-bottom: 20px; }

.sidebar-section-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 0 16px 6px;
    white-space: nowrap;
    overflow: hidden;
    transition: var(--trans);
}
body.sidebar-mini .sidebar-section-label {
    opacity: 0;
    height: 0;
    padding-bottom: 0;
}

/* ── Ítems del menú ── */
.sidebar-item {
    position: relative;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    height: 42px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 9px;
    margin: 2px 8px;
    font-size: .84rem;
    font-weight: 500;
    transition: var(--trans);
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border: none;
    background: none;
    width: calc(100% - 16px);
    text-align: left;
}
.sidebar-link:hover {
    background: var(--bg-body);
    color: var(--text-primary);
    text-decoration: none;
}
.sidebar-link.active {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 600;
}
.sidebar-link.active .sidebar-icon { color: var(--accent); }

/* Ícono del ítem */
.sidebar-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: var(--trans);
}

/* Texto del ítem */
.sidebar-text {
    flex: 1;
    transition: opacity .18s ease, width .22s ease;
    overflow: hidden;
}
body.sidebar-mini .sidebar-text {
    opacity: 0;
    width: 0;
}

/* Flecha de submenú */
.sidebar-arrow {
    font-size: .65rem;
    transition: transform .22s ease, opacity .18s ease;
    flex-shrink: 0;
}
.sidebar-arrow.open { transform: rotate(90deg); }
body.sidebar-mini .sidebar-arrow { opacity: 0; width: 0; }

/* ── Submenús ── */
.sidebar-submenu {
    display: none;
    overflow: hidden;
}
.sidebar-submenu.open { display: block; }

.sidebar-submenu .sidebar-link {
    padding-left: 20px;
    height: 38px;
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 400;
}
.sidebar-submenu .sidebar-link:hover { color: var(--text-primary); }
.sidebar-submenu .sidebar-link.active {
    color: var(--accent);
    background: var(--accent-light);
}
.sidebar-submenu .sidebar-icon { font-size: 6px; color: var(--border); }
.sidebar-submenu .sidebar-link.active .sidebar-icon {
    color: var(--accent);
    font-size: 8px;
}

body.sidebar-mini .sidebar-submenu { display: none !important; }

/* ── Tooltip al colapsar ── */
body.sidebar-mini .sidebar-link::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(var(--sidebar-mini) - 4px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-primary);
    color: #fff;
    font-size: .75rem;
    padding: 5px 10px;
    border-radius: 7px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 9999;
    box-shadow: var(--shadow-md);
}
body.sidebar-mini .sidebar-link:hover::after { opacity: 1; }

/* ════════════════════════════════════════
   CONTENIDO PRINCIPAL
   ════════════════════════════════════════ */
.main-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

.page-content {
    margin-top: var(--topbar-h);
    margin-left: var(--sidebar-full);
    min-height: calc(100vh - var(--topbar-h));
    padding: 20px;
    transition: var(--trans);
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}
body.sidebar-mini .page-content { margin-left: var(--sidebar-mini); }

/* ════════════════════════════════════════
   NAVBAR INFO (barra de herramientas)
   ════════════════════════════════════════ */
.navbar-info {
    display: none; /* Reemplazada por topbar */
}

/* ════════════════════════════════════════
   OVERLAY MOBILE
   ════════════════════════════════════════ */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .4);
    z-index: 998;
    backdrop-filter: blur(2px);
    transition: opacity .25s ease;
}
.sidebar-overlay.active { display: block; }

/* ════════════════════════════════════════
   MOBILE — < 768px
   ════════════════════════════════════════ */
@media (max-width: 767px) {
    .topbar-left {
        min-width: auto;
        border-right: none;
        padding-left: 12px;
    }

    .sidebar {
        width: var(--sidebar-full) !important;
        transform: translateX(calc(-1 * var(--sidebar-full)));
        box-shadow: none;
    }
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: var(--shadow-md);
    }

    .page-content {
        margin-left: 0 !important;
        padding: 14px;
    }

    body.sidebar-mini .topbar-brand .brand-text {
        opacity: 1;
        width: auto;
    }
}

/* ════════════════════════════════════════
   ESTILOS HEREDADOS (compatibilidad)
   ════════════════════════════════════════ */
.full-box { margin: 0; padding: 0; box-sizing: border-box; width: 100%; }

.page-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 18px;
    padding: 0;
    list-style: none;
}
.page-nav-tabs li a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-secondary);
    background: var(--bg-white);
    border: 1px solid var(--border);
    transition: var(--trans);
    height: auto;
    line-height: normal;
    min-width: auto;
}
.page-nav-tabs li a:hover {
    background: var(--bg-body);
    color: var(--text-primary);
    border-color: var(--border);
}
.page-nav-tabs li a.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    pointer-events: none;
}

/* Formularios */
.form-control[readonly] { background-color: #f8fafc; }
.form-control:focus, .form-control:active {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
    border-color: var(--blue);
}

/* Paginación */
.page-link { transition: var(--trans); }
.page-link:hover, .page-link.active {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Tipografía heredada */
.roboto-medium { font-weight: 600; }
.roboto-condensed-light { font-weight: 300; }
.roboto-condensed-regular { font-weight: 400; }

/* Login */
.login-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1e3a5f 0%, #e84545 100%);
}
.login-content {
    width: 95%;
    max-width: 340px;
    background: #fff;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.btn-login {
    width: 100%;
    padding: 11px 0;
    display: block;
    border-radius: 9px;
    margin-top: 24px;
    background: var(--accent);
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: var(--trans);
}
.btn-login:hover { background: var(--accent-dark); transform: translateY(-1px); }

/* 404 */
.container-404 {
    background: linear-gradient(135deg, #1e3a5f, #e84545);
    color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tiles del home */
.tile-container { text-align: center; padding: 20px 25px; }
.tile {
    height: 160px;
    width: 160px;
    margin: 8px;
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: var(--trans);
    background: var(--bg-white);
    overflow: hidden;
}
.tile:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(232,69,69,.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--accent);
}
.tile-tittle {
    padding: 8px 10px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    transition: var(--trans);
}
.tile:hover .tile-tittle { background: var(--accent); color: #fff; border-color: var(--accent); }
.tile-icon { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.tile-icon > i { font-size: 40px; }
.tile:hover .tile-icon > i { color: var(--accent); }

table form { margin-bottom: 0; }