/* =====================================================================
   Colombia Dex — Layout Principal y Estilos Base
   Estética: álbum coleccionable / guía de campo.
   Fuentes: Cinzel + Cormorant Garamond + Mulish
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Mulish:wght@400;500;600;700;800&display=swap');

:root{
  --paper:#f4eedd; --paper-2:#efe7d2; --sidebar:#faf5e7; --panel:#fbf7ec;
  --ink:#3a352b; --ink-soft:#6f6757; --ink-faint:#9c937f;
  --line:#d9cfb4; --line-soft:#e7ddc4;
  --gold:#e9b53d; --gold-deep:#c8911f; --gold-light:#f8e08a;
  --leaf:#6f9c63; --leaf-deep:#4f7a48;
  --co-yellow:#f6c63c; --co-blue:#1f4e8c; --co-red:#c1372e;
  --radius:16px; --radius-sm:10px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:'Mulish',system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(circle at 14% 18%, rgba(111,156,99,.06), transparent 40%),
    radial-gradient(circle at 88% 82%, rgba(233,181,61,.07), transparent 42%),
    var(--paper);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(58,53,43,.05) 1px, transparent 1px);
  background-size:22px 22px; opacity:.5;
}

/* ===================== SHELL ===================== */
.cdx{ position:relative; z-index:1; display:grid; grid-template-columns:236px minmax(0,1fr) 326px; min-height:100vh; }

/* ----------------------- SIDEBAR ----------------------- */
.cdx-side{ background:var(--sidebar); border-right:1px solid var(--line); padding:26px 18px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.cdx-brand{ display:flex; align-items:center; gap:11px; margin-bottom:24px; padding-left:6px; }
.cdx-brand__bird{ width:36px; height:36px; flex:none; }
.cdx-brand__txt{ font-family:'Cinzel',serif; font-weight:700; font-size:.78rem; letter-spacing:.12em; line-height:1.15; }
.cdx-brand__txt span{ color:var(--leaf-deep); }

.cdx-nav{ display:flex; flex-direction:column; gap:2px; }
.cdx-nav>a{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--radius-sm); color:var(--ink-soft); text-decoration:none; font-weight:700; font-size:.82rem; transition:.18s; position:relative; }
.cdx-nav>a svg{ width:19px; height:19px; flex:none; stroke-width:1.7; }
.cdx-nav>a small{ display:block; font-weight:600; font-size:.68rem; color:var(--ink-faint); }
.cdx-nav>a:hover{ background:#fff; color:var(--ink); }
.cdx-nav>a.is-active{ background:linear-gradient(180deg,#fff,#fcf8ee); color:var(--leaf-deep); box-shadow:0 6px 16px -10px rgba(79,122,72,.5); }
.cdx-nav>a.is-active::before{ content:""; position:absolute; left:-18px; top:8px; bottom:8px; width:4px; border-radius:0 4px 4px 0; background:linear-gradient(var(--leaf),var(--gold)); }

.cdx-nav__group{ margin-top:16px; padding:0 13px 6px; font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.16em; color:var(--gold-deep); text-transform:uppercase; display:flex; align-items:center; gap:7px; }
.cdx-nav__group::after{ content:""; flex:1; height:1px; background:var(--line); }

.cdx-nav__submenu{ display:flex; flex-direction:column; gap:1px; margin-bottom:4px; }
.cdx-nav__subitem{ display:flex; align-items:center; gap:10px; padding:8px 13px 8px 26px; font-size:.82rem; font-weight:600; color:var(--ink-soft); text-decoration:none; border-radius:8px; transition:.16s; }
.cdx-nav__subitem:hover{ background:#fff; color:var(--ink); }
.cdx-nav__subitem.is-active{ color:var(--leaf-deep); font-weight:800; background:linear-gradient(90deg, rgba(111,156,99,.12), transparent); }
.cdx-nav__subitem-dot{ width:7px; height:7px; border-radius:50%; background:var(--line); flex:none; transition:.16s; }
.cdx-nav__subitem:hover .cdx-nav__subitem-dot{ background:var(--ink-faint); }
.cdx-nav__subitem.is-active .cdx-nav__subitem-dot{ background:var(--leaf); box-shadow:0 0 0 3px rgba(111,156,99,.2); }
.cdx-nav__empty{ padding:6px 26px; font-size:.74rem; font-style:italic; color:var(--ink-faint); }

.cdx-side__foot{ margin-top:auto; padding-top:18px; }
.cdx-side__foot .lbl{ font-size:.66rem; font-weight:800; color:var(--ink-soft); letter-spacing:.08em; }
.cdx-progress{ height:7px; border-radius:999px; background:var(--line-soft); overflow:hidden; margin-top:6px; }
.cdx-progress i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--leaf),var(--gold)); transition:width .6s cubic-bezier(.4,0,.2,1); }
.cdx-side__foot .cnt{ font-size:.68rem; color:var(--ink-faint); margin-top:5px; }

/* ----------------------- MAIN AREA ----------------------- */
.cdx-main{ padding:28px 32px 64px; min-width:0; position:relative; }
.cdx-doodle{ position:absolute; opacity:.18; pointer-events:none; color:var(--leaf); z-index:0; }

.cdx-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:8px; position:relative; z-index:1; flex-wrap:wrap; }
.cdx-title{ font-family:'Cinzel',serif; font-weight:700; font-size:clamp(1.15rem,2.4vw,1.7rem); letter-spacing:.03em; margin:0; line-height:1.12; }
.cdx-title em{ color:var(--leaf-deep); font-style:normal; }
.cdx-title .sub{ display:block; font-family:'Mulish'; font-weight:700; font-size:.72rem; letter-spacing:.2em; color:var(--gold-deep); margin-top:7px; }

.cdx-search{ position:relative; }
.cdx-search input{ width:240px; max-width:46vw; padding:11px 16px 11px 40px; border-radius:999px; border:1px solid var(--line); background:#fff; font-family:'Mulish'; font-size:.85rem; color:var(--ink); box-shadow:inset 0 1px 2px rgba(58,53,43,.06); }
.cdx-search input:focus{ outline:none; border-color:var(--leaf); box-shadow:0 0 0 3px rgba(111,156,99,.18); }
.cdx-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ink-faint); }

.cdx-rule{ position:relative; z-index:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); margin:14px 0 26px; }

/* ----------------------- REJILLA ----------------------- */
/* Nota: El diseño interno de la tarjeta está en user_coleccion/card.css
*/
.cdx-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:26px 18px; position:relative; z-index:1; }
.cdx-empty{ grid-column:1/-1; text-align:center; color:var(--ink-faint); font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem; padding:50px 10px; }

/* ===================== TOAST NOTIFICATION ===================== */
.cdx-toast-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border-left: 4px solid var(--gold);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 14px 20px;
    border-radius: 8px;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 90%;
    max-width: 460px;
    animation: cdxToastIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.4s ease;
}
.cdx-toast-content { display: flex; align-items: center; gap: 12px; font-family: 'Mulish', sans-serif; font-size: 0.82rem; color: var(--ink); }
.cdx-toast-content strong { display: block; color: var(--leaf-deep); font-size: 0.88rem; }
.cdx-toast-content p { margin: 2px 0 0 0; color: var(--ink-soft); line-height: 1.3; }
.cdx-toast-icon { font-size: 1.3rem; }
.cdx-toast-close { background: none; border: none; font-size: 1.2rem; color: var(--ink-faint); cursor: pointer; }
.cdx-toast-close:hover { color: #c1372e; }

@keyframes cdxToastIn {
    from { top: -50px; opacity: 0; transform: translateX(-50%) scale(0.9); }
    to { top: 20px; opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ===================== RESPONSIVE / MOBILE ===================== */

/* Ocultos por defecto en escritorio */
.cdx-mobile-bar { display: none; }
.cdx-overlay { display: none; }

/* TABLETS (Ocultamos el panel de detalle lateral) */
@media (max-width: 1080px) {
    .cdx { grid-template-columns: 236px 1fr; }
    .cdx-detail { display: none; }
}

/* CELULARES (Menú Hamburguesa, Rejilla fluida y Espacios ajustados) */
@media (max-width: 768px) {
    /* Destruimos la cuadrícula global para permitir scroll natural */
    .cdx { display: block; padding-top: 60px; }

    /* Barra Superior Fija */
    .cdx-mobile-bar {
        display: flex; align-items: center; justify-content: space-between;
        position: fixed; top: 0; left: 0; right: 0; height: 60px;
        background: var(--sidebar); border-bottom: 1px solid var(--line);
        padding: 0 15px; z-index: 50; box-shadow: 0 4px 12px rgba(58,53,43,0.05);
    }
    .cdx-menu-btn {
        background: none; border: none; color: var(--ink); cursor: pointer;
        padding: 5px; display: grid; place-items: center;
    }
    .cdx-menu-btn svg { width: 28px; height: 28px; }
    .cdx-mobile-brand { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.1em; color: var(--ink); }
    .cdx-mobile-brand span { color: var(--leaf-deep); }

    /* Sidebar transformado en Cajón (Drawer) */
    .cdx-side {
        position: fixed; top: 0; left: 0; bottom: 0; width: 280px; height: 100vh;
        z-index: 100; transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        background: var(--sidebar); box-shadow: none;
    }
    .cdx-side.is-open {
        transform: translateX(0);
        box-shadow: 10px 0 25px rgba(0,0,0,0.15);
    }

    /* Velo Oscuro */
    .cdx-overlay {
        display: block; position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px);
        z-index: 90; opacity: 0; pointer-events: none;
        transition: opacity 0.35s;
    }
    .cdx-overlay.is-active { opacity: 1; pointer-events: auto; }

    /* Ajustes del Main y Buscador */
    .cdx-main { padding: 20px 15px 80px; }
    .cdx-head { flex-direction: column; align-items: flex-start; gap: 15px; margin-bottom: 25px;}
    .cdx-search { width: 100%; }
    .cdx-search input { width: 100%; max-width: 100%; }

    /* Cuadrícula de Cartas en móvil */
    .cdx-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px 15px; }
}

/* CELULARES PEQUEÑOS (iPhone SE, etc) */
@media (max-width: 380px) {
    .cdx-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ===================== SHELL ===================== */
.cdx { 
    position: relative; 
    z-index: 1; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}

/* Solo aplicamos la cuadrícula de 2 o 3 columnas en pantallas grandes (Tablets/Escritorio) */
@media (min-width: 1081px) {
    .cdx {
        display: grid; 
        /* Por defecto, 2 columnas (Sidebar + Contenido) */
        grid-template-columns: 236px minmax(0, 1fr); 
    }
    
    /* Si el layout contiene un panel de detalle, forzamos las 3 columnas */
    .cdx:has(.cdx-detail-wrapper) {
        grid-template-columns: 236px minmax(0, 1fr) 326px;
    }
}