/*  Panel de PanDaaS.
    Sin frameworks: son ocho páginas y una hoja de estilos propia pesa menos
    que el CSS de Bootstrap que igual habría que sobrescribir. */

:root{
  --fondo:#f4f6f9; --panel:#ffffff; --borde:#e3e8ee; --texto:#1f2733; --suave:#5b6675;
  --acento:#0284c7; --acento-claro:#38bdf8; --acento-suave:#e0f2fe;
  --ok:#15803d; --ok-fondo:#dcfce7; --alerta:#b45309; --alerta-fondo:#fef3c7;
  --error:#b91c1c; --error-fondo:#fee2e2; --chip:#eef2f7;
}
@media (prefers-color-scheme:dark){
  :root{
    --fondo:#0f141b; --panel:#151c25; --borde:#26303c; --texto:#e6edf3; --suave:#9aa7b6;
    --acento:#38bdf8; --acento-claro:#7dd3fc; --acento-suave:#0c2d3f;
    --ok:#4ade80; --ok-fondo:#052e16; --alerta:#fbbf24; --alerta-fondo:#3a2c05;
    --error:#f87171; --error-fondo:#3b1010; --chip:#1d2733;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--fondo);color:var(--texto);
     font:15px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
     background:var(--chip);padding:.14em .4em;border-radius:4px}

/* ---- estructura ---- */
.barra{display:flex;align-items:center;gap:26px;padding:0 26px;height:58px;
       background:var(--panel);border-bottom:1px solid var(--borde);
       position:sticky;top:0;z-index:20}
.barra .logo{display:flex;align-items:center;gap:10px}
.barra .logo img{height:26px;display:block}
.barra nav{display:flex;gap:4px;flex:1}
.barra nav a{padding:7px 13px;border-radius:7px;color:var(--suave);font-size:.92rem;font-weight:500}
.barra nav a:hover{background:var(--fondo);text-decoration:none}
.barra nav a.activo{background:var(--acento-suave);color:var(--acento)}
.barra .yo{display:flex;align-items:center;gap:12px;font-size:.86rem;color:var(--suave)}
.contenido{max-width:1180px;margin:0 auto;padding:26px}

h1{font-size:1.55rem;margin:0 0 4px}
h2{font-size:1.1rem;margin:28px 0 12px}
.subtitulo{color:var(--suave);margin:0 0 22px}

/* ---- tarjetas ---- */
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:12px;
         padding:20px 22px;margin-bottom:20px}
.tarjeta > h2:first-child{margin-top:0}

.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:22px}
.metrica{background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:16px 18px}
.metrica .rotulo{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.metrica .valor{font-size:1.9rem;font-weight:600;line-height:1.2;margin-top:2px}
.metrica .pie{font-size:.82rem;color:var(--suave)}

/* ---- tablas ---- */
.tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla th{text-align:left;font-size:.73rem;text-transform:uppercase;letter-spacing:.05em;
          color:var(--suave);padding:0 14px 9px 0;border-bottom:1px solid var(--borde);white-space:nowrap}
.tabla td{padding:10px 14px 10px 0;border-bottom:1px solid var(--borde);vertical-align:middle}
.tabla tr:last-child td{border-bottom:none}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.envoltorio-tabla{overflow-x:auto}
.vacio{color:var(--suave);padding:22px 0;text-align:center}

/* ---- formularios ---- */
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:.82rem;color:var(--suave);font-weight:500}
.campo .ayuda{font-size:.78rem;color:var(--suave)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  font:inherit;font-size:.92rem;padding:9px 11px;border:1px solid var(--borde);border-radius:8px;
  background:var(--panel);color:var(--texto);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento-claro);outline-offset:-1px;border-color:var(--acento)}
textarea{min-height:74px;resize:vertical}
.acciones{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}

.boton{display:inline-block;font:inherit;font-size:.9rem;font-weight:500;padding:9px 17px;
       border-radius:8px;border:1px solid var(--borde);background:var(--panel);color:var(--texto);
       cursor:pointer;text-decoration:none}
.boton:hover{background:var(--fondo);text-decoration:none}
.boton.primario{background:var(--acento);border-color:var(--acento);color:#fff}
.boton.primario:hover{opacity:.9;background:var(--acento)}
.boton.peligro{color:var(--error);border-color:var(--error)}
.boton.chico{padding:5px 11px;font-size:.82rem}

/* ---- avisos y estados ---- */
.aviso{padding:12px 16px;border-radius:9px;margin-bottom:18px;font-size:.92rem;border:1px solid transparent}
.aviso.ok{background:var(--ok-fondo);color:var(--ok);border-color:var(--ok)}
.aviso.error{background:var(--error-fondo);color:var(--error);border-color:var(--error)}
.aviso.alerta{background:var(--alerta-fondo);color:var(--alerta);border-color:var(--alerta)}

.chip{display:inline-block;font-size:.74rem;padding:3px 9px;border-radius:99px;
      background:var(--chip);color:var(--suave);font-weight:500;white-space:nowrap}
.chip.ok{background:var(--ok-fondo);color:var(--ok)}
.chip.alerta{background:var(--alerta-fondo);color:var(--alerta)}
.chip.error{background:var(--error-fondo);color:var(--error)}

/* ---- gráfico de consumo: barras con CSS, sin librería ---- */
.grafico{display:flex;align-items:flex-end;gap:3px;height:130px;margin:6px 0 4px}
.grafico .barra{flex:1;min-width:3px;background:var(--acento);border-radius:3px 3px 0 0;
                position:relative;min-height:2px;opacity:.85}
.grafico .barra:hover{opacity:1}
.grafico .barra.conerror{background:var(--alerta)}
.grafico-pie{display:flex;justify-content:space-between;font-size:.76rem;color:var(--suave)}

/* ---- token recién creado ---- */
.secreto{background:var(--acento-suave);border:1px solid var(--acento);border-radius:10px;
         padding:16px 18px;margin-bottom:20px}
.secreto .valor{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;
                letter-spacing:.06em;word-break:break-all;margin:8px 0 4px;font-weight:600}
.secreto p{margin:0;font-size:.86rem;color:var(--suave)}

/* ---- login ---- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login .caja{width:100%;max-width:390px;background:var(--panel);border:1px solid var(--borde);
             border-radius:14px;padding:32px}
.login img{height:38px;display:block;margin:0 auto 22px}
.login .campo{margin-bottom:14px}
.login .boton{width:100%;justify-content:center;text-align:center}

.filtros{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.filtros .campo{min-width:170px}

footer{text-align:center;color:var(--suave);font-size:.82rem;padding:26px}

@media(max-width:760px){
  .barra{gap:12px;padding:0 14px;overflow-x:auto}
  .contenido{padding:18px 14px}
}