/* ===========================
   Look & Feel — RADIOAFICION
   =========================== */

:root{
  --bg: #0b1220;
  --panel: #111827;
  --muted: #9aa4b2;
  --text: #e5e7eb;
  --accent: #3b82f6;    /* azul */
  --accent-weak: #1e40af;
  --danger: #dc2626;    /* rojo */
  --danger-weak: #7f1d1d;
  --warn: #f59e0b;      /* ámbar */
  --ok: #10b981;        /* verde */
  --card-free: rgba(59,130,246,0.12);  /* azul suave */
  --card-busy: rgba(220,38,38,0.10);   /* rojo suave */
  --card-busy-strong: rgba(220,38,38,0.18);
  --border: #243043;
  --shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02);
  --radius: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 800px at -10% -10%, #0e1526 30%, #0b1220 70%);
  color:var(--text);
  font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  letter-spacing:.2px;
}

/* ---------- Topbar ---------- */
.topbar{
  position: sticky; top:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 18px;
  background: linear-gradient(to bottom, rgba(17,24,39,.9), rgba(17,24,39,.6));
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar a{ color:#c7d2fe; text-decoration:none; margin-left:14px; }
.topbar a:hover{ text-decoration:underline; }

/* ---------- Layout ---------- */
.container{
  max-width:1100px; margin:22px auto; padding:0 16px;
}
h1{ font-size:22px; margin:8px 0 14px; }
h2{ font-size:18px; margin:0 0 10px; color:#cbd5e1; }

/* ---------- Panel / Cards ---------- */
.panel{
  background: linear-gradient(180deg, #0f172a, #0b1324);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  margin:16px 0;
}

/* ---------- Forms ---------- */
label{ display:block; margin:10px 0 4px; color:#cbd5e1; }
input[type="text"], input[type="password"], input[type="number"], input[type="date"], select{
  width:100%;
  background:#0b1220;
  border:1px solid #1f2a3c;
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  outline:none; transition:.18s border, .18s box-shadow;
}
input::placeholder{ color:#6b7280; }
input:focus, select:focus{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }

button, .btn{
  appearance:none; border:none; cursor:pointer;
  background:linear-gradient(180deg, #2563eb, #1d4ed8);
  color:white; padding:10px 14px; border-radius:12px; font-weight:600;
  box-shadow: 0 6px 16px rgba(37,99,235,.25);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
button:hover{ filter:brightness(1.06); }
button:active{ transform: translateY(1px); }
button[disabled]{ opacity:.6; cursor:not-allowed; }

a.ghost{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid #1f2a3c; color:#c7d2fe; text-decoration:none;
  padding:8px 12px; border-radius:12px; transition:.2s background, .2s border-color;
}
a.ghost:hover{ background:#0b1220; border-color:#31415c; }

/* ---------- Alerts ---------- */
.alert{
  background: #20141a; border:1px solid #3a1e27; color:#ffb4c4;
  border-radius:12px; padding:10px 12px; margin:10px 0;
}
.alert.success{
  background:#0f1f18; border-color:#1f4d3d; color:#bde6d8;
}

/* ---------- Tabla “grid” con tarjetas ---------- */
.table-grid{
  width:100%; border-collapse:separate; border-spacing:14px 12px;
}
.table-grid thead th{
  font-weight:700; text-align:left; color:#9fb4ff; padding:6px 6px 2px;
}
.table-grid tbody th{
  color:#cbd5e1; white-space:nowrap; font-weight:600; padding:6px 6px 6px 2px;
}

.table-grid td{
  vertical-align:top; padding:0; border:none;
}

td.free, td.busy{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  transition: background .25s ease, border-color .25s ease, transform .05s ease;
}

/* Libre: tono azul suave */
td.free{
  background: linear-gradient(180deg, var(--card-free), rgba(59,130,246,0.06));
}
td.free:hover{ border-color:#315aa8; }

/* Ocupado: rojo suave con header */
td.busy{
  background: linear-gradient(180deg, var(--card-busy), rgba(220,38,38,0.05));
  border-color:#3a2323;
}
td.busy:hover{ background: linear-gradient(180deg, var(--card-busy-strong), rgba(220,38,38,0.12)); }

/* Contenido de la celda como “tarjetas” internas si hay varias activaciones */
ul.cell-multi{ list-style:none; margin:0; padding:10px; display:flex; flex-direction:column; gap:.5rem; }
ul.cell-multi > li{
  background: rgba(255,255,255,0.02);
  border:1px solid #233049;
  border-radius:12px;
  padding:8px 10px;
}
ul.cell-multi > li strong{ color:#fff; }
ul.cell-multi > li .muted{ color:var(--muted); font-size:.88rem; }

/* En celda libre, el call-to-action como botón fantasma centrado */
td.free .activate-here{
  display:block; text-align:center; margin:12px; padding:12px;
  border-radius:12px; border:1px dashed #35518f; color:#bcd1ff;
  background: rgba(59,130,246,0.06);
}
td.free .activate-here:hover{ background: rgba(59,130,246,0.12); }

/* “Desde:” pequeñas */
.since{ color:var(--muted); font-size:.85rem; }

/* ---------- Tabla “listado” (histórico / usuarios) ---------- */
.table-list{
  width:100%;
  border-collapse:separate; border-spacing:0 8px;
}
.table-list thead th{
  text-align:left; font-weight:700; color:#cbd5e1; padding:8px 10px;
}
.table-list tbody tr{
  background: linear-gradient(180deg, #0f172a, #0b1324);
  border:1px solid var(--border);
  border-radius:12px;
}
.table-list tbody td{
  padding:10px; border-top:1px solid var(--border);
}
.table-list tbody tr:first-child td{ border-top:none; }

/* ---------- Links ---------- */
a{ color:#93c5fd; }
a:hover{ text-decoration:underline; }

/* ---------- Utilidades ---------- */
.inline{ display:inline; }
.muted{ color:var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .table-grid thead{ display:none; }
  .table-grid, .table-grid tbody, .table-grid tr, .table-grid td, .table-grid th{ display:block; width:100%; }
  .table-grid tbody th{ margin-top:12px; }
  .table-grid td{ margin:8px 0 14px; }
}

/* ---------- Botones de peligro / variantes ---------- */
button.danger{
  background: linear-gradient(180deg, #dc2626, #b91c1c);
  box-shadow: 0 6px 16px rgba(220,38,38,.25);
}
button.warn{
  background: linear-gradient(180deg, #f59e0b, #d97706);
  box-shadow: 0 6px 16px rgba(245,158,11,.25);
}

/* ---------- Formularios apilados en panel ---------- */
.panel form > *+*{ margin-top:8px; }