@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700&display=swap');

/* Paleta y tipografías tomadas de wwwroot/index.html de Dispatch */
:root{
  --bg:#0a0c0f;
  --panel:#0f1318;
  --border:#1e2530;
  --accent:#00e5a0;
  --accent2:#0099ff;
  --warn:#ff6b35;
  --muted:#3a4455;
  --text:#c8d6e5;
  --text-dim:#5a6a7e;
  --font-mono:'Share Tech Mono',ui-monospace,Consolas,monospace;
  --font-ui:'Barlow Condensed','Segoe UI Semibold',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:15px;
  padding-bottom:96px;
}

/* ── CABECERA ───────────────────────────────────────────────── */
header{
  display:flex;align-items:center;gap:24px;
  padding:10px 20px;
  border-bottom:1px solid var(--border);
  background:var(--panel);
  position:sticky;top:0;z-index:20;
}
.logo{
  font-family:var(--font-mono);
  font-size:18px;letter-spacing:4px;
  color:var(--accent);text-transform:uppercase;
}
.logo span{color:var(--text-dim)}
.header-sep{flex:1}
.conn-pill{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:var(--text-dim);
}
.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.conn-dot.ok{background:var(--accent);box-shadow:0 0 6px var(--accent)}
.time-display{font-family:var(--font-mono);font-size:13px;color:var(--text-dim);letter-spacing:2px}

/* ── ACCESO ─────────────────────────────────────────────────── */
.login-body{
  min-height:100vh;padding:0;
  display:flex;align-items:center;justify-content:center;
  background-image:radial-gradient(circle at 50% 0%,#101820 0%,var(--bg) 60%);
}
.login-card{
  width:340px;max-width:calc(100vw - 32px);
  background:var(--panel);border:1px solid var(--border);
  padding:32px 28px;
}
.login-card .logo{font-size:20px;text-align:center;letter-spacing:4px}
.login-card .subtitle{
  font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
  color:var(--text-dim);text-align:center;text-transform:uppercase;
  margin:6px 0 26px;
}
.login-card label{
  display:block;
  font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
  color:var(--text-dim);text-transform:uppercase;margin-bottom:6px;
}
.login-card input{
  width:100%;
  background:#0a0d11;border:1px solid var(--border);color:var(--text);
  font-family:var(--font-mono);font-size:14px;padding:10px 12px;outline:none;
}
.login-card input:focus{border-color:var(--accent)}
.field + .field{margin-top:16px}
.login-card button{
  width:100%;margin-top:24px;
  background:var(--accent);color:#04120c;border:none;
  font-family:var(--font-mono);font-size:13px;letter-spacing:3px;text-transform:uppercase;
  padding:12px;cursor:pointer;
}
.login-card button:hover{filter:brightness(1.15)}
.login-card .error{
  margin-top:18px;
  border:1px solid var(--warn);color:var(--warn);
  font-family:var(--font-mono);font-size:11px;line-height:1.5;
  padding:9px 11px;
}
.login-nota{
  margin-top:22px;text-align:center;
  font-family:var(--font-mono);font-size:9px;letter-spacing:1px;color:var(--muted);
}

/* ── PANELES ────────────────────────────────────────────────── */
.panel{background:var(--panel);border-bottom:1px solid var(--border)}
.panel-head{
  padding:8px 14px;
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
  color:var(--text-dim);text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.slot-badge{background:var(--muted);color:var(--bg);font-size:9px;padding:1px 6px;letter-spacing:1px}
.head-nota{margin-left:auto;letter-spacing:1px;color:var(--muted)}

/* ── FILTROS ────────────────────────────────────────────────── */
.filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:12px 14px}
.campo{display:flex;flex-direction:column;gap:4px;min-width:230px}
.campo--corto{min-width:140px}
.campo-label{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--text-dim)}
.dm-input,.dm-select{
  background:var(--bg);color:var(--text);
  border:1px solid var(--muted);border-radius:0;
  padding:6px 8px;
  font-family:var(--font-mono);font-size:11px;
  outline:none;
}
.dm-select{cursor:pointer}
.dm-select option{background:var(--bg)}
.dm-input:focus,.dm-select:focus{border-color:var(--accent)}
.acciones{display:flex;gap:8px;margin-left:auto}

.dm-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel);
  border:1px solid var(--muted);color:var(--text-dim);
  padding:6px 14px;border-radius:0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:1px;
  cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s;
}
.dm-btn--ok{color:var(--accent);border-color:var(--accent)}
.dm-btn--ok:hover{background:rgba(0,229,160,.1)}
.dm-btn--ok:active{background:rgba(0,229,160,.2)}
.dm-btn--azul{color:var(--accent2);border-color:var(--accent2)}
.dm-btn--azul:hover{background:rgba(0,153,255,.1)}
.dm-btn--gris:hover{color:var(--text);border-color:var(--text-dim)}
.dm-btn--off{opacity:.3;pointer-events:none}

/* ── LISTADO ────────────────────────────────────────────────── */
.lista-panel{border-bottom:none}
.tabla-scroll{overflow-x:auto}
.registro{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:11.5px}
.registro thead th{
  position:sticky;top:39px;z-index:5;
  background:var(--bg);
  text-align:left;font-weight:400;
  font-size:9px;letter-spacing:2px;color:var(--text-dim);
  padding:8px 10px;border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.registro td{
  padding:5px 10px;
  border-bottom:1px solid rgba(30,37,48,.55);
  white-space:nowrap;vertical-align:middle;
}
.fila{border-left:2px solid transparent;cursor:pointer;transition:background .15s}
.fila:hover{background:rgba(255,255,255,.02)}
.fila:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
.fila--sin-audio{cursor:default;color:var(--muted)}
.fila--sin-audio:hover{background:transparent}

.c-ind{font-family:var(--font-ui);font-size:15px;font-weight:600;letter-spacing:.5px;color:var(--text)}
.c-dmr,.c-id{color:var(--text-dim)}
.c-hora{color:var(--accent2)}
.c-icono{width:26px}
.c-icono img{display:block;opacity:.85;filter:saturate(.85)}
.c-fich{color:var(--text-dim);max-width:260px;overflow:hidden;text-overflow:ellipsis}
.carpeta{margin-left:8px;padding:1px 5px;background:var(--muted);color:var(--bg);font-size:9px;letter-spacing:1px}
.nulo{color:var(--muted)}
.mapa{color:var(--warn);text-decoration:none;border-bottom:1px dotted currentColor}
.mapa:hover{color:#ff9066;background:rgba(255,107,53,.08)}

/* Indicador de nivel: barras que se animan durante la reproducción */
.c-play{width:26px}
.indicador{display:flex;align-items:flex-end;gap:2px;height:14px}
.indicador i{width:2px;height:3px;background:var(--muted)}
.indicador--nulo{color:var(--muted)}
.fila--activa{background:rgba(0,229,160,.05);border-left-color:var(--accent)}
.fila--activa .c-ind{color:var(--accent)}
.fila--activa .indicador i{background:var(--accent)}
.fila--sonando .indicador i{animation:nivel .85s ease-in-out infinite}
.fila--sonando .indicador i:nth-child(2){animation-delay:.12s}
.fila--sonando .indicador i:nth-child(3){animation-delay:.24s}
.fila--sonando .indicador i:nth-child(4){animation-delay:.36s}
@keyframes nivel{0%,100%{height:3px}50%{height:13px}}

.vacio{
  padding:56px 14px;text-align:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--muted);
}

.paginacion{
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding:16px 14px 28px;
}
.pag-info{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:var(--text-dim)}

/* ── REPRODUCTOR ────────────────────────────────────────────── */
.reproductor{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--panel);
  border-top:1px solid var(--border);
}
.rx-indicator{height:3px;background:var(--muted)}
.rx-indicator.active{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse-bar 1s ease-in-out infinite}
@keyframes pulse-bar{0%,100%{opacity:1}50%{opacity:.5}}

.reproductor__fila{display:flex;align-items:center;gap:14px;padding:10px 20px}
.reproductor__icono{flex-shrink:0;opacity:.9}
.reproductor__info{min-width:150px;max-width:240px}
.reproductor__ind{
  font-family:var(--font-ui);font-size:19px;font-weight:700;letter-spacing:1px;
  color:var(--accent);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1;
}
.reproductor__meta{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:var(--text-dim)}
.reproductor audio{flex:1;height:36px;min-width:180px;filter:invert(.92) hue-rotate(180deg) saturate(.7)}
.encadenar{
  display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;
  font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:var(--text-dim);
}
.encadenar input{accent-color:var(--accent)}
.reproductor--error .reproductor__meta{color:var(--warn)}
.reproductor--error .reproductor__ind{color:var(--warn)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--muted)}

@media (max-width:900px){
  .acciones{margin-left:0}
  .campo,.campo--corto{min-width:calc(50% - 6px)}
  .c-fich,.c-id,.c-dmr{display:none}
  .head-nota{display:none}
  .reproductor__fila{flex-wrap:wrap;gap:10px}
  .reproductor audio{order:5;flex-basis:100%}
  body{padding-bottom:140px}
}

@media (prefers-reduced-motion:reduce){
  .fila--sonando .indicador i{animation:none;height:10px}
  .rx-indicator.active{animation:none}
}