/* ─────────────────────────────────────────────
   Precios Luz España — Dashboard Styles
   ───────────────────────────────────────────── */

.ple-dashboard {
    --ple-bg:        #ffffff;
    --ple-surface:   #f8f9fa;
    --ple-surface2:  #f0f1f3;
    --ple-border:    rgba(0,0,0,0.08);
    --ple-text:      #1a1a2e;
    --ple-muted:     #6b7280;
    --ple-accent:    #4f46e5;
    --ple-low:       #16a34a;
    --ple-low-bg:    rgba(22,163,74,0.10);
    --ple-mid:       #d97706;
    --ple-mid-bg:    rgba(217,119,6,0.10);
    --ple-high:      #dc2626;
    --ple-high-bg:   rgba(220,38,38,0.10);
    --ple-radius:    12px;
    --ple-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ple-mono:      'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    background:    var(--ple-bg);
    color:         var(--ple-text);
    font-family:   var(--ple-font);
    font-size:     14px;
    line-height:   1.5;
    border-radius: var(--ple-radius);
    padding:       1.5rem 2rem;
    max-width:     100%;
    width:         100%;
    margin:        0 auto;
    box-sizing:    border-box;
}

.ple-dashboard *,
.ple-dashboard *::before,
.ple-dashboard *::after {
    box-sizing: border-box;
}

/* ── Cabecera ── */
.ple-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             0.75rem;
    margin-bottom:   1.5rem;
}

.ple-header-left {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}

.ple-icon {
    font-size:   2rem;
    line-height: 1;
}

.ple-title {
    font-size:   1.25rem;
    font-weight: 600;
    margin:      0 0 2px;
    color:       var(--ple-text);
}

.ple-subtitle {
    font-size: 12px;
    color:     var(--ple-muted);
    margin:    0;
}

.ple-header-right {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            4px;
}

.ple-date-badge {
    background:    var(--ple-surface2);
    border:        1px solid var(--ple-border);
    border-radius: 20px;
    padding:       3px 10px;
    font-size:     12px;
    font-family:   var(--ple-mono);
    color:         var(--ple-text);
}

.ple-updated {
    font-size: 11px;
    color:     var(--ple-muted);
}

/* ── Métricas ── */
.ple-metrics {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:                   10px;
    margin-bottom:         1.5rem;
}

.ple-metric {
    background:    var(--ple-surface);
    border:        1px solid var(--ple-border);
    border-top:    2px solid var(--ple-metric-color, var(--ple-accent));
    border-radius: var(--ple-radius);
    padding:       0.875rem 1rem;
}

.ple-metric-label {
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--ple-muted);
    margin:         0 0 6px;
}

.ple-metric-val {
    font-family: var(--ple-mono);
    font-size:   1.4rem;
    font-weight: 600;
    line-height: 1;
    color:       var(--ple-metric-color, var(--ple-text));
    margin:      0 0 4px;
}

.ple-metric-val span {
    font-size:   0.8rem;
    font-weight: 400;
    color:       var(--ple-muted);
}

.ple-metric-sub {
    font-size: 11px;
    color:     var(--ple-muted);
    margin:    0;
}

.ple-metric-skeleton {
    background:    var(--ple-surface);
    border:        1px solid var(--ple-border);
    border-radius: var(--ple-radius);
    height:        90px;
    animation:     ple-pulse 1.5s ease-in-out infinite;
}

@keyframes ple-pulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1;   }
}

/* ── Pills ── */
.ple-pill {
    display:       inline-block;
    padding:       2px 8px;
    border-radius: 4px;
    font-size:     11px;
    font-weight:   500;
    font-family:   var(--ple-mono);
}

.ple-pill-low  { background: var(--ple-low-bg);  color: var(--ple-low);  }
.ple-pill-mid  { background: var(--ple-mid-bg);  color: var(--ple-mid);  }
.ple-pill-high { background: var(--ple-high-bg); color: var(--ple-high); }

/* ── Etiquetas de sección ── */
.ple-section-label {
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--ple-muted);
    margin:         0 0 0.75rem;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.ple-section-label::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--ple-border);
}

/* ── Gráfico ── */
.ple-chart-section {
    margin-bottom: 1.5rem;
}

.ple-chart-wrap {
    background:    var(--ple-surface);
    border:        1px solid var(--ple-border);
    border-radius: var(--ple-radius);
    padding:       1.25rem;
    height:        280px;
    position:      relative;
    margin-bottom: 0.75rem;
}

.ple-legend {
    display:   flex;
    gap:       16px;
    flex-wrap: wrap;
}

.ple-legend-item {
    font-size: 12px;
    color:     var(--ple-muted);
    display:   flex;
    align-items: center;
    gap:       6px;
}

.ple-legend-item::before {
    content:       '';
    display:       inline-block;
    width:         10px;
    height:        10px;
    border-radius: 2px;
}

.ple-legend-low::before  { background: var(--ple-low);  }
.ple-legend-mid::before  { background: var(--ple-mid);  }
.ple-legend-high::before { background: var(--ple-high); }

/* ── Tabla ── */
.ple-table-section {
    margin-bottom: 1.25rem;
}

.ple-table-wrap {
    background:    var(--ple-surface);
    border:        1px solid var(--ple-border);
    border-radius: var(--ple-radius);
    overflow:      hidden;
    max-height:    400px;
    overflow-y:    auto;
}

.ple-table-wrap::-webkit-scrollbar { width: 6px; }
.ple-table-wrap::-webkit-scrollbar-track { background: var(--ple-surface); }
.ple-table-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }

.ple-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
}

.ple-table thead th {
    font-size:      10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--ple-muted);
    padding:        8px 12px;
    text-align:     left;
    border-bottom:  1px solid var(--ple-border);
    background:     var(--ple-surface);
    position:       sticky;
    top:            0;
}

.ple-table tbody tr {
    border-bottom: 1px solid var(--ple-border);
    transition:    background 0.15s;
}

.ple-table tbody tr:hover    { background: var(--ple-surface2); }
.ple-table tbody tr:last-child { border-bottom: none; }
.ple-table tbody tr.ple-now-row { background: rgba(79,70,229,0.08); }

.ple-table tbody td {
    padding:     7px 12px;
    font-family: var(--ple-mono);
    font-size:   12px;
    color:       var(--ple-text);
}

.ple-table tbody td:first-child { color: var(--ple-muted); }

.ple-now-badge {
    background:    rgba(79,70,229,0.12);
    color:         #4f46e5;
    font-size:     10px;
    padding:       2px 6px;
    border-radius: 4px;
    margin-left:   6px;
    font-family:   var(--ple-font);
    font-weight:   500;
}

/* Barra comparativa */
.ple-bar-wrap {
    width:         80px;
    height:        6px;
    background:    var(--ple-border);
    border-radius: 3px;
    overflow:      hidden;
}

.ple-bar-fill {
    height:        100%;
    border-radius: 3px;
    transition:    width 0.4s ease;
}

/* ── Pie ── */
.ple-footer {
    font-size:  11px;
    color:      var(--ple-muted);
    text-align: center;
    margin:     0;
}

.ple-footer a {
    color:           var(--ple-accent);
    text-decoration: none;
}

.ple-footer a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .ple-dashboard  { padding: 1rem; }
    .ple-header     { flex-direction: column; }
    .ple-header-right { align-items: flex-start; }
    .ple-chart-wrap { height: 220px; }
    .ple-bar-wrap   { display: none; }
    .ple-table thead th:last-child,
    .ple-table tbody td:last-child { display: none; }
}