/* public/theme.css - Tema compartido (Admin / Monitor / Validador) */
:root{
  --bg:#0b1220;
  --panelA: rgba(15,27,46,.92);
  --panelB: rgba(11,18,32,.85);
  --glass: rgba(2,6,23,.35);
  --stroke: rgba(148,163,184,.18);
  --stroke2: rgba(148,163,184,.12);

  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#38bdf8;

  --red:#ef4444;
  --orange:#fb923c;
  --yellow:#f59e0b;
  --green:#22c55e;

  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --shadowSm: 0 10px 30px rgba(0,0,0,.25);
  --radius:18px;
  --radiusSm:14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 500px at 20% 0%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(900px 550px at 90% 10%, rgba(34,197,94,.14), transparent 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(245,158,11,.10), transparent 60%),
    var(--bg);
  min-height:100vh;
}

/* Contenedor principal */
.wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px;
  display: grid;
  gap: 16px;
}
@media (max-width: 980px){
  .wrap{ padding: 14px; }
}

/* Panels / cards */
.panel, .card, .header{
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(15,27,46,.88), rgba(11,22,40,.80));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.header{
  background: linear-gradient(180deg, var(--panelA), var(--panelB));
}

/* Section headers inside cards */
.cardHead, .panelHead{
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  min-width:0;
}

/* Inputs */
.input, input[type="text"], input[type="password"], input[type="number"], select, textarea{
  color: var(--text);
}
.input{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: var(--radiusSm);
  border:1px solid var(--stroke);
  background: var(--glass);
  min-width: 240px;
}
.input label{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.input input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:14px;
  letter-spacing:.6px;
  text-transform:uppercase;
}

/* Buttons */
.btn, button{
  border:1px solid rgba(56,189,248,.35);
  background: rgba(56,189,248,.12);
  color: var(--text);
  padding:10px 14px;
  border-radius: var(--radiusSm);
  cursor:pointer;
  font-weight:650;
  letter-spacing:.2px;
  transition:.15s ease;
}
.btn:hover, button:hover{ transform: translateY(-1px); background: rgba(56,189,248,.18); }
.btn:active, button:active{ transform: translateY(0px); opacity:.9; }
.btn:disabled, button:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* Small helpers */
.muted{ color: var(--muted); }
.sepLine{ height:1px; background: rgba(148,163,184,.12); margin: 10px 0; }

/* Table responsiveness (admin/auditoría) */
.tableWrap{
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
table{
  width:100%;
  border-collapse: collapse;
}
th, td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  text-align:left;
}
th{
  font-size:12px;
  color: var(--muted);
  font-weight:800;
  letter-spacing:.2px;
}
td{
  font-size:13px;
}
@media (max-width: 720px){
  th, td{ padding: 9px 10px; }
}

/* Code/terminal blocks */
.terminal{
  background: rgba(2,6,23,.45);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 16px;
  padding: 12px 14px;
  overflow:auto;
  box-shadow: var(--shadowSm);
}
.terminal, .terminal code, code.terminal{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.4;
}
.terminal .dim{ color: rgba(148,163,184,.75); }
.terminal .ok{ color: var(--green); }
.terminal .bad{ color: var(--red); }

/* Truncation/wrapping helpers */
.ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.wrapText{ overflow-wrap:anywhere; word-break:break-word; white-space:normal; }