/* ══════════════════════════════════════════════════════════════
   Edunoly · EstilosConfiguracion.css
══════════════════════════════════════════════════════════════ */

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--fondo);
    color: var(--texto);
    min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════════
   NAVEGACIÓN — igual que PaginaInicio y PaginaContacto
══════════════════════════════════════════════════════════════ */
.barraNav {
    background: linear-gradient(to right, var(--nav-inicio), var(--nav-fin));
    padding: 0 40px;
}

.menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1800px;
}

.menu .derecha { margin-left: auto; }

.menu li a {
    text-decoration: none;
    color: var(--nav-texto);
    padding: 20px;           /* mismo padding que PaginaInicio */
    display: block;
    font-size: 16px;         /* mismo tamaño que PaginaInicio */
    font-family: Arial, Helvetica, sans-serif;
}

.menu li a:hover,
.menu li.activo > a {
    background-color: var(--nav-hover);
}

.logo { display: inline-block; padding: 20px; }
.logo img { vertical-align: middle; }

/* ── Menú de sesión / dropdown ── */
.menuSesion {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.fotoPerfil {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    object-fit: cover;
    display: block;
}

.dropdown {
    position: absolute !important;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: white;
    min-width: 170px;
    list-style: none;
    padding: 8px 0;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.menu > li { position: relative; }

.dropdown li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

.dropdown li a:hover { background-color: #f2f2f2; }

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
.config-hero {
    background: linear-gradient(135deg, var(--fondo-oscuro) 0%, var(--fondo) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
    padding: 2.5rem 40px 2rem;
}

.config-hero-inner { max-width: 1100px; margin: 0 auto; }

.etiqueta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acento);
    margin-bottom: .4rem;
}

.config-hero h1 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: var(--texto);
    margin-bottom: .4rem;
}

.config-hero p { font-size: 14px; color: var(--texto-suave); font-weight: normal; }

/* ══════════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════════ */
.config-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ══════════════════════════════════════════════════════════════
   SECCIONES
══════════════════════════════════════════════════════════════ */
.config-seccion {
    background: color-mix(in srgb, var(--texto) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
    border-radius: 16px;
    padding: 28px;
}

.seccion-header { margin-bottom: 24px; }
.seccion-titulo { font-size: 16px; font-weight: 700; color: var(--texto); margin-bottom: .3rem; }
.seccion-sub    { font-size: 13px; color: var(--texto-suave); font-weight: normal; }

/* ══════════════════════════════════════════════════════════════
   GRID DE TEMAS
══════════════════════════════════════════════════════════════ */
.temas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.tema-card {
    border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--texto) 15%, transparent);
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    position: relative;
}

.tema-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }

.tema-card.activo {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent);
}

.tema-preview { height: 90px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.tema-preview-nav  { height: 20px; width: 100%; flex-shrink: 0; }
.tema-preview-body { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.tema-preview-barra { height: 6px; border-radius: 3px; opacity: .7; }
.tema-preview-barra.corta { width: 55%; }

.tema-check {
    position: absolute; top: 8px; right: 8px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--acento);
    display: none; align-items: center; justify-content: center;
    font-size: 12px; color: white; font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.tema-card.activo .tema-check { display: flex; }

.tema-info   { padding: 10px 12px; background: rgba(0,0,0,.65); }
.tema-nombre { font-size: 13px; font-weight: 600; color: #ffffff !important; }
.tema-desc   { font-size: 11px; color: rgba(255,255,255,.65) !important; margin-top: 2px; }

/* Miniaturas fijas — colores intencionales del tema representado */
.p-verde   .tema-preview-nav   { background: linear-gradient(to right, #47ad79, #092422); }
.p-verde   .tema-preview-body  { background: #104541; }
.p-verde   .tema-preview-barra { background: #47ad79; }

.p-negro   .tema-preview-nav   { background: linear-gradient(to right, #2a2a2a, #0a0a0a); }
.p-negro   .tema-preview-body  { background: #1a1a1a; }
.p-negro   .tema-preview-barra { background: #e0e0e0; }

.p-blanco  .tema-preview-nav   { background: linear-gradient(to right, #f0f0f0, #d0d0d0); }
.p-blanco  .tema-preview-body  { background: #ffffff; }
.p-blanco  .tema-preview-barra { background: #333333; }

.p-azul    .tema-preview-nav   { background: linear-gradient(to right, #1a6fa8, #0a2540); }
.p-azul    .tema-preview-body  { background: #0d2f4a; }
.p-azul    .tema-preview-barra { background: #4fb3e8; }

.p-purpura .tema-preview-nav   { background: linear-gradient(to right, #7c3aed, #1e0a3c); }
.p-purpura .tema-preview-body  { background: #1e0a3c; }
.p-purpura .tema-preview-barra { background: #a78bfa; }

.p-rojo    .tema-preview-nav   { background: linear-gradient(to right, #c0392b, #2c0a0a); }
.p-rojo    .tema-preview-body  { background: #2c0a0a; }
.p-rojo    .tema-preview-barra { background: #e74c3c; }

/* ══════════════════════════════════════════════════════════════
   FILAS DE OPCIONES
══════════════════════════════════════════════════════════════ */
.opcion-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--texto) 8%, transparent);
    gap: 16px;
    flex-wrap: wrap;
}

.opcion-fila:last-child { border-bottom: none; }
.opcion-info  { flex: 1; min-width: 180px; }
.opcion-nombre { font-size: 14px; font-weight: 500; color: var(--texto); }
.opcion-desc   { font-size: 12px; color: var(--texto-suave); margin-top: 3px; }

/* ── Toggle switch ── */
.toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
    position: absolute; inset: 0; cursor: pointer;
    background: color-mix(in srgb, var(--texto) 20%, transparent);
    border-radius: 24px; transition: background .2s;
}

.toggle-slider::before {
    content: ''; position: absolute;
    width: 18px; height: 18px; left: 3px; top: 3px;
    background: white; border-radius: 50%; transition: transform .2s;
}

.toggle input:checked + .toggle-slider { background: var(--acento); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ── Select ── */
.opcion-select {
    background: color-mix(in srgb, var(--texto) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--texto) 15%, transparent);
    border-radius: 8px; color: var(--texto); font-family: inherit;
    font-size: 13px; padding: 7px 12px; outline: none; cursor: pointer;
    transition: border-color .15s;
}

.opcion-select:focus { border-color: var(--acento); }
.opcion-select option { background: var(--fondo-oscuro); color: var(--texto); }

/* ══════════════════════════════════════════════════════════════
   BOTONES
══════════════════════════════════════════════════════════════ */
.config-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }

.btn-cancelar {
    padding: 10px 22px; border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--texto) 20%, transparent);
    background: color-mix(in srgb, var(--texto) 7%, transparent);
    color: var(--texto-suave); font-family: inherit; font-size: 14px;
    font-weight: 500; cursor: pointer; transition: all .15s;
}

.btn-cancelar:hover { color: var(--texto); border-color: color-mix(in srgb, var(--texto) 35%, transparent); }

.btn-guardar {
    padding: 10px 28px; border-radius: 8px; border: none;
    background: var(--acento); color: var(--texto-sobre-claro);
    font-family: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: background .15s, transform .12s;
}

.btn-guardar:hover { opacity: .9; transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════════ */
.toast {
    position: fixed; bottom: 20px; right: 20px;
    background: var(--fondo-oscuro); color: var(--texto);
    border: 1px solid color-mix(in srgb, var(--texto) 15%, transparent);
    border-radius: 10px; padding: 12px 20px; font-size: 13px;
    font-weight: 500; z-index: 200;
    transform: translateY(60px); opacity: 0; transition: all .3s;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

.toast.show { transform: translateY(0); opacity: 1; }

.divisor { height: 1px; background: color-mix(in srgb, var(--texto) 8%, transparent); margin: 4px 0; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .config-layout { padding: 20px 16px; }
    .config-hero   { padding: 1.5rem 20px 1.2rem; }
    .temas-grid    { grid-template-columns: repeat(2, 1fr); }
}