/* styles.css — tema oscuro compartido por todo el panel OCPP.
   Antes cada página repetía (con variaciones) este mismo bloque inline. */

:root {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --bg:        #0b0d10;
  --panel:     #0f1318;
  --panel-2:   #10161e;
  --field:     #11161d;
  --line:      #1e232b;
  --line-2:    #1c222b;
  --border:    #232a34;
  --border-2:  #283140;
  --text:      #e6e6e6;
  --head:      #b8c2d1;
  --muted:     #9aa6b2;
}

* { box-sizing: border-box; }

body { margin:0; background:var(--bg); color:var(--text); }

/* ---------- Encabezado de página ---------- */
/* No es sticky: la barra de navegación (.nv) ya lo es. */
.page-header { padding:16px 20px; border-bottom:1px solid var(--line); background:var(--panel); }
h1 { margin:0; font-size:18px; letter-spacing:.3px; }

.wrap { padding:20px; }
.wrap.narrow { max-width:1100px; margin:0 auto; }
.wrap.slim   { max-width:820px;  margin:0 auto; }

/* ---------- Filas de controles ---------- */
.toolbar,
.row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; }
.spacer { flex:1 1 auto; }

.input, .select {
  background:var(--field); color:var(--text);
  border:1px solid var(--border); border-radius:8px; padding:8px 10px;
}

.btn {
  cursor:pointer; background:#1b2530; color:var(--text);
  border:1px solid var(--border-2); border-radius:8px; padding:8px 12px;
}
.btn:hover { background:#223043; }
.btn:disabled { opacity:.55; cursor:default; }
.btn-xs { padding:4px 8px; font-size:12px; border-radius:6px; }
.btn-ghost { background:transparent; border-color:#2c3746; }
.btn-primary { background:#133652; border-color:#1f4e73; }
.btn-primary:hover { background:#184262; }
.btn-danger { background:#5b1f26; border-color:#7a2c35; }
.btn-danger:hover { background:#6a242c; }

/* ---------- Utilidades ---------- */
.muted { color:var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.nowrap, .time { white-space:nowrap; }
.right { text-align:right; }
.num   { text-align:center; }
.hr { border:0; border-top:1px solid var(--line); margin:14px 0; }

/* ---------- Mensajes ---------- */
.ok    { background:#122b18; border:1px solid #1f6a3b; color:#b5ffd4; padding:10px; border-radius:8px; margin-bottom:12px; }
.error { background:#2b1212; border:1px solid #6a1f1f; color:#ffb1b1; padding:10px; border-radius:8px; margin-bottom:12px; }

/* ---------- Badges ---------- */
.badge { font-size:12px; border-radius:999px; padding:2px 8px; border:1px solid transparent; }
.badge.on,  .st-active    { background:#0f2e16; color:#7dffb0; border-color:#1f6a3b; }
.badge.off                { background:#2e1313; color:#ff7d7d; border-color:#6a1f1f; }
.badge.na,  .st-other     { background:#23272e; color:#a4acb8; border-color:#2e3642; }
.st-completed             { background:#14202e; color:#8ecaff; border-color:#2a4a6a; }

/* ---------- Tablas ---------- */
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; border-bottom:1px solid var(--line-2); padding:10px 8px; vertical-align:middle; }
thead th {
  font-weight:600; color:var(--head); background:var(--panel);
  box-shadow:0 1px 0 var(--line-2);
}

/* ---------- Tarjetas ---------- */
.card {
  background:var(--panel-2); border:1px solid var(--border);
  border-radius:12px; padding:16px;
}
.card h3 { margin:0; font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.2px; }

/* ---------- Modal genérico ---------- */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; z-index:200; }
.overlay.open { display:flex; align-items:center; justify-content:center; }
.modal {
  background:var(--panel-2); border:1px solid var(--border-2); border-radius:12px;
  width:min(760px, 94vw); max-height:84vh; display:flex; flex-direction:column;
}
.modal__head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line-2); }
.modal__head h2 { margin:0; font-size:15px; flex:1; }
.modal__body { padding:14px 16px; overflow:auto; }
.modal__body table th { position:static; box-shadow:none; }

/* ---------- Tablas como tarjetas en móvil ---------- */
@media (max-width: 980px) {
  .table-cards table,
  .table-cards thead,
  .table-cards tbody,
  .table-cards th,
  .table-cards td,
  .table-cards tr { display:block; }

  .table-cards thead { display:none; }

  .table-cards tr {
    border:1px solid var(--border); border-radius:12px;
    margin-bottom:16px; background:var(--panel-2); padding:8px;
  }
  .table-cards td {
    border-bottom:1px solid var(--line-2); padding:12px 8px;
    display:flex; flex-direction:column; gap:6px;
  }
  .table-cards td:last-child { border-bottom:none; }
  .table-cards td::before {
    content: attr(data-label);
    font-weight:600; color:var(--muted); font-size:12px;
    text-transform:uppercase; letter-spacing:.5px;
  }
}