/* ==========================================================================
   Panel de administración — se carga encima de bateria.css
   Barra lateral fija, contenido amplio, tarjetas de indicadores y tablas
   pensadas para leer datos, no para contestar formularios.
   ========================================================================== */

body.admin{
  padding:0;
  background:var(--papel);
  font-size:15px;
}

.adm{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh;
  background:linear-gradient(to right,#0f1c17 236px,transparent 236px)}

/* ---------- Barra lateral ------------------------------------------------ */

.adm-side{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  background:#0f1c17;color:#dfe9e3;
  padding:20px 14px;
}
.adm-marca{
  display:flex;align-items:center;gap:10px;
  padding:4px 10px 22px;
  font-weight:750;font-size:16px;letter-spacing:-.01em;color:#fff;
}
.adm-marca .logo{
  width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#00875B,#3FBF8F);color:#fff;
  font-size:14px;font-weight:800;
}
.adm-marca small{display:block;font-size:11px;font-weight:500;color:#8fa89c;letter-spacing:0}

.adm-nav{display:flex;flex-direction:column;gap:3px}
.adm-nav a{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:9px;
  color:#b9cbc1;text-decoration:none;font-weight:550;font-size:14.5px;
  transition:background .12s ease,color .12s ease;
}
.adm-nav a svg{width:18px;height:18px;flex:0 0 auto;opacity:.85}
.adm-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.adm-nav a.activo{background:rgba(63,191,143,.16);color:#fff;box-shadow:inset 3px 0 0 #3FBF8F}
.adm-nav .sep{height:1px;background:rgba(255,255,255,.08);margin:12px 6px}

.adm-pie{margin-top:auto;padding:12px 10px 2px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.adm-pie .quien{color:#8fa89c;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-pie a{color:#dfe9e3;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-weight:600}
.adm-pie a:hover{color:#fff}
.adm-pie svg{width:16px;height:16px}

/* ---------- Contenido ---------------------------------------------------- */

.adm-main{min-width:0}
.adm-content{max-width:1180px;margin:0 auto;padding:26px 32px 60px}

.admin .header{padding:4px 0 10px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.admin .header h1{font-size:25px}
.admin .subtitle{font-size:14.5px}

.admin .card{border-radius:14px;padding:20px 22px;margin:14px 0}
.admin .section-title h2{font-size:17px}

/* ---------- Indicadores -------------------------------------------------- */

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:14px 0}
.kpi{
  background:var(--papel-alto);border:1px solid var(--linea);border-radius:14px;
  padding:16px 18px;box-shadow:var(--sombra);position:relative;overflow:hidden;
}
.kpi .rotulo{font-size:12.5px;font-weight:650;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.04em}
.kpi .valor{font-size:30px;font-weight:780;letter-spacing:-.03em;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .nota{font-size:13px;color:var(--tinta-2);margin-top:2px}
.kpi.verde .valor{color:var(--senal)}
.kpi.ambar .valor{color:var(--aviso)}
.kpi.rojo .valor{color:var(--alerta)}
.kpi .icono{position:absolute;right:14px;top:14px;opacity:.14}
.kpi .icono svg{width:34px;height:34px}

/* ---------- Tablas ------------------------------------------------------- */

.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:12px;margin-top:14px}
.admin .tabla-wrap .example-table{border:0}
.admin .tabla-wrap .example-table th,
.admin .tabla-wrap .example-table td{border:0;border-bottom:1px solid var(--linea)}
.admin .tabla-wrap .example-table tr:last-child td{border-bottom:0}
.admin .tabla-wrap .example-table th{
  font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-2);
  background:var(--papel-hund);position:sticky;top:0;z-index:1;
}
.admin .tabla-wrap .example-table tbody tr:hover td{background:var(--papel-hund)}
.admin .example-table td{padding:11px 12px;font-size:14px}

/* ---------- Píldoras y botones ------------------------------------------- */

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap;
}
.pill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--senal-suave);color:var(--senal)}
.pill.pend{background:var(--aviso-suave);color:var(--aviso)}
.pill.off{background:var(--papel-hund);color:var(--tinta-3)}
.pill.mal{background:var(--alerta-suave);color:var(--alerta)}

.admin button,.admin .btn{font-size:14.5px;padding:10px 16px}
.btn-sm,.admin .btn-sm{font-size:13px !important;padding:6px 11px !important;border-radius:8px}
.btn-peligro,.admin .btn-peligro{background:var(--alerta);color:#fff;border-color:var(--alerta)}
.btn-peligro:hover:not(:disabled){background:#8d1709}
.btn-fantasma{background:transparent;color:var(--tinta-2);border:1.5px solid var(--linea-alta)}
.btn-fantasma:hover:not(:disabled){background:var(--papel-hund);color:var(--tinta)}
a.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn svg,button svg{width:18px;height:18px;flex:0 0 auto}

.barra-acciones{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 14px;margin-top:14px;border-radius:12px;
  background:var(--alerta-suave);color:var(--alerta);font-weight:600;font-size:14px;
}
.barra-acciones[hidden]{display:none}

/* ---------- Gráficas ----------------------------------------------------- */

.grafica{width:100%;height:auto;display:block}
.grafica text{font-family:var(--fuente)}
.dona-wrap{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;align-items:center;margin-top:14px}
.tres .dona-wrap{grid-template-columns:1fr;gap:16px}
.tres .dona-wrap svg{max-width:170px;margin:0 auto}
.leyenda{display:flex;flex-direction:column;gap:7px}
.leyenda .fila{display:grid;grid-template-columns:12px minmax(0,1fr) auto 46px;gap:10px;align-items:center;font-size:14px}
.leyenda .fila > span{white-space:nowrap}
.leyenda .punto{width:12px;height:12px;border-radius:3px}
.leyenda .n{color:var(--tinta-2);font-variant-numeric:tabular-nums}
.leyenda .p{font-weight:750;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}

.minibar{height:7px;border-radius:99px;background:var(--papel-hund);overflow:hidden;min-width:60px}
.minibar span{display:block;height:100%;background:var(--senal);border-radius:99px}

.tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.tres .card{margin:0}

/* ---------- Móvil -------------------------------------------------------- */

@media (max-width:900px){
  .adm{grid-template-columns:1fr;background:none}
  .adm-side{
    position:sticky;top:0;z-index:40;height:auto;
    flex-direction:row;align-items:center;gap:10px;padding:10px 12px;overflow-x:auto;
  }
  .adm-marca{padding:0 6px 0 0}
  .adm-marca small{display:none}
  .adm-nav{flex-direction:row;gap:2px}
  .adm-nav a{padding:8px 10px;white-space:nowrap;font-size:13.5px}
  .adm-nav a span{display:none}
  .adm-nav a.activo span{display:inline}
  .adm-nav .sep{display:none}
  .adm-pie{margin:0 0 0 auto;padding:0;border:0}
  .adm-pie .quien{display:none}
  .adm-content{padding:18px 14px 50px}
  .dona-wrap{grid-template-columns:1fr}
  .dona-wrap svg{max-width:220px;margin:0 auto}
}

@media print{
  .adm-side{display:none !important}
  .adm{display:block}
  .adm-content{padding:0;max-width:none}
  .kpi,.card{box-shadow:none}
  .grafica{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .leyenda .punto,.minibar span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.adm-saldo{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;margin-bottom:10px;border-radius:10px;
  background:rgba(255,255,255,.06);font-size:13px;color:#b9cbc1;
}
.adm-saldo b{font-size:17px;font-variant-numeric:tabular-nums}
@media (max-width:900px){.adm-saldo{margin:0 8px 0 0;padding:6px 10px}}

/* ---------- Campos: un solo tamaño en todo el panel ---------------------- */
/* bateria.css los hace de 16px porque están pensados para responder en el
   celular. En el panel se ven desproporcionados junto a las tablas. */

.admin input[type=text],.admin input[type=email],.admin input[type=password],
.admin input[type=number],.admin input[type=date],.admin input[type=tel],
.admin input[type=search],.admin select,.admin textarea{
  font-size:14.5px;
  padding:9px 12px;
  border-radius:9px;
  border-width:1.5px;
  min-height:40px;
}
.admin textarea{min-height:88px}
.admin select{
  background-position:calc(100% - 17px) 50%, calc(100% - 11px) 50%;
  padding-right:40px;
  text-overflow:ellipsis;
}
.admin label{font-size:13px;margin-bottom:5px}

/* Los campos sueltos dentro de una fila de tabla o barra de acciones */
.admin td input,.admin td select,.admin .fila-form input,.admin .fila-form select{
  min-height:36px;padding:7px 11px;font-size:14px;
}

/* Casillas y radios con el color del sistema, no el azul del navegador */
.admin input[type=checkbox],.admin input[type=radio]{
  width:17px;height:17px;accent-color:var(--senal);cursor:pointer;margin:0;
  vertical-align:middle;
}

/* Quita las flechitas de los campos numéricos: estorban más que ayudan */
.admin input[type=number]{-moz-appearance:textfield}
.admin input[type=number]::-webkit-outer-spin-button,
.admin input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Fila de filtros: todo alineado abajo y a la misma altura */
.fila-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.fila-form > div{flex:1;min-width:150px}
.fila-form button,.fila-form .btn{min-height:40px}


/* Ver la contraseña también en el ingreso al panel */
.campo-clave{position:relative;display:block}
.campo-clave input{padding-right:50px}
.ver-clave{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;padding:0;display:grid;place-items:center;
  background:transparent;border:0;border-radius:8px;color:var(--tinta-3);cursor:pointer;
}
.ver-clave:hover{background:var(--papel-hund);color:var(--tinta)}
.ver-clave svg{width:19px;height:19px}
.pista{margin:6px 0 0;font-size:13px;color:var(--tinta-2)}
.pista.mal{color:var(--alerta);font-weight:600}