/* Panoola — tokens de proyecto + componentes del portafolio/detalle.
   Se carga después de tokens.css y main.css (ver views/layout/_meta.php).
   Extrae los tokens y patrones de _docs/dashboard-portafolio.html y
   _docs/detalle-cuenta-canal.html (mockups de referencia). */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
    /* Palette base Panoola */
    --pn-bg:         #F2F5F8;
    --pn-surface:    #FFFFFF;
    --pn-surface-2:  #EDF2F6;
    --pn-border:     #DCE4EC;
    --pn-border-soft:#E7EDF2;
    --pn-text:       #16212C;
    --pn-muted:      #5C6B7A;
    --pn-muted-2:    #8C9AA8;

    /* Estado (semaforo) */
    --pn-green:  #189A63;
    --pn-amber:  #C1810F;
    --pn-red:    #D2525C;
    --pn-signal: #0891A8;

    /* Formatos */
    --f-photo:    #5B79E8;
    --f-carousel: #A855C9;
    --f-reel:     #E2842E;
    --f-story:    #D6488F;

    /* Redes */
    --ch-fb: #3B5FCC;
    --ch-ig: #C13584;
    --ch-tt: #12A99A;
    --ch-li: #0A66C2;
}

html.theme-dark {
    --pn-bg:         #0A1119;
    --pn-surface:    #121C26;
    --pn-surface-2:  #17222C;
    --pn-border:     #243140;
    --pn-border-soft:#1B2733;
    --pn-text:       #E8EEF3;
    --pn-muted:      #8697A6;
    --pn-muted-2:    #5D6B79;

    --pn-green:  #43C98A;
    --pn-amber:  #E8A33D;
    --pn-red:    #E4636B;
    --pn-signal: #4DD8C7;

    --f-photo:    #7C9CFF;
    --f-carousel: #C792EA;
    --f-reel:     #FFA45C;
    --f-story:    #FF6FA8;
}

/* Panoola surface — ajusta el body cuando estamos en portafolio/detalle */
.pn-page {
    background: var(--pn-bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(15,30,45,0.05) 1px, transparent 0);
    background-size: 22px 22px;
    color: var(--pn-text);
    font-family: 'Inter', system-ui, sans-serif;
    min-height: calc(100vh - var(--header-h) - 60px);
    padding: 32px 24px 60px;
}
.pn-page .mono { font-family: 'IBM Plex Mono', monospace; }
.pn-page .display { font-family: 'Space Grotesk', sans-serif; }

.pn-wrap { max-width: 1240px; margin: 0 auto; }

/* Top bar */
.pn-topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; gap: 20px; flex-wrap: wrap;
}
.pn-topbar h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px; font-weight: 700; margin: 0;
    letter-spacing: -0.01em;
}
.pn-topbar .eyebrow {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--pn-muted-2); margin-top: 4px;
}

/* Period selector */
.pn-seg {
    display: inline-flex; background: var(--pn-surface); border: 1px solid var(--pn-border);
    border-radius: 10px; padding: 3px; gap: 2px;
}
.pn-seg a {
    padding: 7px 14px; font-size: 12.5px; color: var(--pn-muted);
    text-decoration: none; border-radius: 7px; font-weight: 500;
    transition: background .15s, color .15s;
}
.pn-seg a.active { background: var(--pn-signal); color: white; }
.pn-seg a:not(.active):hover { color: var(--pn-text); }

/* Brand grid */
.pn-brand-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Brand card */
.pn-brand-card {
    background: var(--pn-surface);
    border: 1px solid var(--pn-border);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,30,45,0.04);
    text-decoration: none; color: inherit; display: block;
    transition: border-color .15s;
}
.pn-brand-card:hover { border-color: var(--pn-muted-2); }
.pn-bc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px;
}
.pn-bc-title { display: flex; align-items: center; gap: 10px; }
.pn-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pn-status-dot.green { background: var(--pn-green); box-shadow: 0 0 8px rgba(24,154,99,0.28); }
.pn-status-dot.amber { background: var(--pn-amber); box-shadow: 0 0 8px rgba(193,129,15,0.28); }
.pn-status-dot.red   { background: var(--pn-red);   box-shadow: 0 0 8px rgba(210,82,92,0.28); }
.pn-bc-name { font-weight: 600; font-size: 13.5px; font-family: 'Space Grotesk', sans-serif; }
.pn-bc-channels { font-size: 10.5px; color: var(--pn-muted-2); margin-top: 2px; letter-spacing: .02em; }
.pn-bc-score { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; }
.pn-bc-score.green { color: var(--pn-green); }
.pn-bc-score.amber { color: var(--pn-amber); }
.pn-bc-score.red   { color: var(--pn-red); }
.pn-bc-body { padding: 0 16px 16px; }

/* Metric row + gauge */
.pn-metric-row { margin-bottom: 12px; }
.pn-metric-row:last-child { margin-bottom: 0; }
.pn-metric-label-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; color: var(--pn-muted); margin-bottom: 5px;
}
.pn-metric-label-row .val {
    font-family: 'IBM Plex Mono', monospace; color: var(--pn-text); font-size: 11.5px;
}
.pn-gauge {
    position: relative; height: 6px; border-radius: 4px;
    background: var(--pn-surface-2); border: 1px solid var(--pn-border-soft);
}
.pn-gauge-fill {
    position: absolute; top: 0; left: 0; height: 100%; border-radius: 4px;
}
.pn-gauge-fill.green { background: var(--pn-green); }
.pn-gauge-fill.amber { background: var(--pn-amber); }
.pn-gauge-fill.red   { background: var(--pn-red); }
.pn-gauge-target {
    position: absolute; top: -3px; width: 2px; height: 12px;
    background: var(--pn-text); opacity: .55; border-radius: 1px;
}

/* Piece segmented bar (Fotos/Carruseles/Reels/Historias) */
.pn-piece-bar {
    position: relative; height: 8px; border-radius: 4px;
    background: var(--pn-surface-2); border: 1px solid var(--pn-border-soft);
    display: flex; overflow: hidden;
}
.pn-piece-seg { height: 100%; }
.pn-piece-target {
    position: absolute; top: -3px; width: 2px; height: 14px;
    background: var(--pn-text); opacity: .6; border-radius: 1px; z-index: 2;
}
.pn-piece-legend {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 7px;
    font-size: 10px; color: var(--pn-muted-2);
}
.pn-piece-legend span { display: inline-flex; align-items: center; gap: 4px; }
.pn-legend-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

/* Detalle por canal — grid + channel columns */
.pn-channel-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px; align-items: start;
}
.pn-channel-col {
    border: 1px solid var(--pn-border-soft); border-radius: 12px;
    padding: 14px 15px; background: var(--pn-surface);
}
.pn-channel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.pn-ch-dot { width: 9px; height: 9px; border-radius: 50%; }
.pn-ch-name { font-weight: 600; font-size: 13px; }
.pn-ch-handle { font-size: 10.5px; color: var(--pn-muted-2); margin-left: auto; }
.pn-block-label {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--pn-muted-2); margin: 14px 0 8px;
}
.pn-block-label:first-of-type { margin-top: 0; }
.pn-fmt-row { margin-bottom: 9px; }
.pn-fmt-label {
    display: flex; align-items: center; gap: 6px; font-size: 10.5px;
    color: var(--pn-text); margin-bottom: 4px;
}
.pn-fmt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pn-fmt-label .val {
    margin-left: auto; font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; color: var(--pn-muted);
}
.pn-fmt-gauge {
    position: relative; height: 5px; border-radius: 3px;
    background: var(--pn-surface-2); border: 1px solid var(--pn-border-soft);
    margin-left: 13px;
}
.pn-fmt-fill {
    position: absolute; top: 0; left: 0; height: 100%; border-radius: 3px;
}
.pn-mini-row { margin-bottom: 10px; }
.pn-mini-label {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: var(--pn-text); margin-bottom: 4px;
}
.pn-mini-label .val { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--pn-muted); }
.pn-mini-gauge {
    position: relative; height: 6px; border-radius: 3px;
    background: var(--pn-surface-2); border: 1px solid var(--pn-border-soft);
}

.pn-empty {
    text-align: center; padding: 60px 20px; color: var(--pn-muted);
    background: var(--pn-surface); border: 1px dashed var(--pn-border);
    border-radius: 12px; font-size: 13px;
}

@media (max-width: 600px) {
    .pn-page { padding: 20px 14px 40px; }
    .pn-topbar { flex-direction: column; align-items: flex-start; }
}