/* ============================================
   ADMIN THEME — "Warm Professional"
   Tema visual ADITIVO para paginas admin.
   Scoped bajo .admin-layout para no afectar paginas publicas.

   REGLA: Solo propiedades aditivas (tipografia, focus, hover).
   NO sobreescribir background/border/box-shadow de componentes
   que ya tienen estilos propios en pages/*.css.
   ============================================ */

/* ============================================
   1. TIPOGRAFIA — Poppins en headings del admin
   ============================================ */
.admin-layout .page-header h1,
.admin-layout .page-header h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.admin-layout .page-header p {
    color: var(--warm-gray-500);
}

/* Headings dentro de modales */
.admin-layout .modal-header h2,
.admin-layout .modal-header h3 {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* ============================================
   2. TABLAS — Header tipografico + hover rows
   ============================================ */
.admin-layout table thead th {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--warm-gray-600);
}

.admin-layout table tbody tr {
    transition: background var(--transition-fast);
}

.admin-layout table tbody tr:hover {
    background: var(--bg-admin-hover);
}

/* ============================================
   3. INPUTS — Focus glow (solo focus, no base)
   ============================================ */
.admin-layout input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):focus,
.admin-layout textarea:focus,
.admin-layout select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 85, 163, 0.12);
    outline: none;
}

/* ============================================
   4. BOTONES — Hover suave (solo hover, no base)
   ============================================ */
.admin-layout .btn-action:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-warm-sm);
}

/* ============================================
   5. SCROLLBAR — Main content (Webkit)
   ============================================ */
.admin-layout .main-content::-webkit-scrollbar {
    width: 6px;
}

.admin-layout .main-content::-webkit-scrollbar-track {
    background: var(--warm-gray-100);
}

.admin-layout .main-content::-webkit-scrollbar-thumb {
    background: var(--warm-gray-300);
    border-radius: var(--radius-pill);
}

.admin-layout .main-content::-webkit-scrollbar-thumb:hover {
    background: var(--warm-gray-500);
}