/* ─── NostroLotto — Panel Admin ─────────────────────────────────────────────
   Estilo vintage minimalista inspirado en el logo:
     fondo crema #F5F0E1, textos púrpura oscuro #3D2B4F,
     acento lila #7B5EA7, dorado #C8963E
   ─────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Lato:wght@300;400;700&display=swap');

/* ─── Variables ──────────────────────────────────────────────────────────── */
:root {
  --primary:    #3D2B4F;
  --secondary:  #7B5EA7;
  --bg:         #F5F0E1;
  --bg-card:    #FDFAF2;
  --accent:     #C8963E;
  --text:       #2A1E35;
  --text-light: #6B5A7E;
  --border:     #C4B8D4;
  --success:    #4A7C59;
  --error:      #8B3A3A;
  --radius:     4px;
  --shadow:     2px 4px 12px rgba(61, 43, 79, 0.12);
}

/* ─── Reset mínimo ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  line-height: 1.6;
}

/* ─── Tipografía ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-bottom: 1rem; }
h3 { font-size: 1.2rem; }

a { color: var(--secondary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--primary); }

/* ─── Cabecera ───────────────────────────────────────────────────────────── */
.cabecera {
  background: var(--primary);
  padding: .75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.cabecera-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: var(--bg);
  letter-spacing: .04em;
}

.cabecera-titulo small {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: .7rem;
  font-weight: 300;
  opacity: .7;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cabecera-nav a {
  color: var(--bg);
  opacity: .8;
  font-size: .85rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  transition: opacity .2s, background .2s;
}

.cabecera-nav a:hover {
  opacity: 1;
  background: rgba(255,255,255,.1);
  color: var(--bg);
}

/* ─── Contenedor principal ───────────────────────────────────────────────── */
.contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ─── Flashes (mensajes de éxito/error) ─────────────────────────────────── */
.flash-lista {
  list-style: none;
  margin-bottom: 1.5rem;
}

.flash {
  padding: .75rem 1.2rem;
  border-radius: var(--radius);
  border-left: 4px solid;
  margin-bottom: .5rem;
  font-size: .9rem;
}

.flash-exito {
  background: #EDF7EF;
  border-color: var(--success);
  color: var(--success);
}

.flash-error {
  background: #FDF0F0;
  border-color: var(--error);
  color: var(--error);
}

/* ─── Tarjetas ───────────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

/* ─── Tabla de sorteos ───────────────────────────────────────────────────── */
.tabla-sorteos {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.tabla-sorteos thead {
  background: var(--primary);
  color: var(--bg);
}

.tabla-sorteos th {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .75rem 1rem;
  text-align: left;
}

.tabla-sorteos td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.tabla-sorteos tbody tr:hover { background: rgba(123, 94, 167, .05); }

.tabla-sorteos tbody tr:last-child td { border-bottom: none; }

/* ─── Badges de estado ───────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.badge-abierto    { background: #EDF7EF; color: var(--success); border: 1px solid var(--success); }
.badge-en_llenado { background: #FFF3CD; color: #856404;        border: 1px solid #FFCA2C; }
.badge-cerrado    { background: #FFF8EC; color: var(--accent);  border: 1px solid var(--accent); }
.badge-completado { background: var(--primary); color: var(--bg); }
.badge-desconocido{ background: #F0F0F0; color: #888; }
.badge-ganador   { background: #C8963E; color: #fff; font-weight: 700; }
.badge-perdedor  { background: #F0EAF0; color: #7B5EA7; border: 1px solid #C4B8D4; }

/* Badges de origen de inscripción */
.badge-web       { background: #F0F0F0; color: #666; border: 1px solid #DDD; }
.badge-zap       { background: #FFF3CD; color: #856404; border: 1px solid #FFCA2C; }
.badge-npeer     { background: #D1ECF1; color: #0C5460; border: 1px solid #BEE5EB; }

/* Badges de número de boleto en tabla de jugadores */
.badge-boleto-jugador {
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 600;
  color: #2E6B45;
  background: #EAF5EE;
  border: 1px solid #4A7C59;
  border-radius: 3px;
  padding: 0 .4rem;
  margin: 1px 2px;
  line-height: 1.6;
}
.badge-boleto-llenado {
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 600;
  color: #7A4F00;
  background: #FFF3D6;
  border: 1px dashed #C8963E;
  border-radius: 3px;
  padding: 0 .4rem;
  margin: 1px 2px;
  line-height: 1.6;
  opacity: .85;
  cursor: help;
}
.leyenda-boletos {
  display: inline-flex;
  gap: .25rem;
  margin-left: .5rem;
  vertical-align: middle;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

/* ─── Botones ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: .5rem 1.2rem;
  border-radius: var(--radius);
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .2s;
  text-align: center;
}

.btn-primary {
  background: var(--primary);
  color: var(--bg);
  border-color: var(--primary);
}

.btn-primary:hover {
  background: #2A1E35;
  border-color: #2A1E35;
  color: var(--bg);
}

.btn-secondary {
  background: transparent;
  color: var(--secondary);
  border-color: var(--secondary);
}

.btn-secondary:hover {
  background: var(--secondary);
  color: var(--bg);
}

.btn-peligro {
  background: transparent;
  color: var(--error);
  border-color: var(--error);
  font-size: .8rem;
  padding: .35rem .8rem;
}

.btn-peligro:hover {
  background: var(--error);
  color: white;
}

.btn-acento {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-acento:hover {
  background: #A87830;
  border-color: #A87830;
  color: white;
}

/* ─── Formularios ────────────────────────────────────────────────────────── */
.formulario {
  max-width: 520px;
}

.campo {
  margin-bottom: 1.25rem;
}

.campo label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-light);
  margin-bottom: .35rem;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .6rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: 'Lato', sans-serif;
  font-size: .95rem;
  transition: border-color .2s;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(123, 94, 167, .15);
}

.campo-ayuda {
  font-size: .78rem;
  color: var(--text-light);
  margin-top: .3rem;
}

/* ─── Login especial ────────────────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(123, 94, 167, .08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(61, 43, 79, .06) 0%, transparent 50%);
}

.login-tarjeta {
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2.5rem 2rem;
  box-shadow: 0 8px 32px rgba(61, 43, 79, .15);
  text-align: center;
}

.login-tarjeta img {
  width: 160px;
  margin-bottom: 1.5rem;
}

.login-tarjeta h1 {
  font-size: 1.6rem;
  margin-bottom: .25rem;
}

.login-tarjeta .subtitulo {
  font-size: .85rem;
  color: var(--text-light);
  margin-bottom: 2rem;
  font-style: italic;
}

.login-tarjeta .campo {
  text-align: left;
}

.login-tarjeta .btn {
  width: 100%;
  margin-top: .5rem;
  padding: .75rem;
  font-size: 1rem;
}

/* ─── Sección de resultados SSE ─────────────────────────────────────────── */
.resultado-sorteo {
  display: none;
  background: var(--primary);
  color: var(--bg);
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  animation: aparecer .5s ease;
}

.resultado-sorteo.visible { display: block; }

.resultado-sorteo h3 {
  color: var(--bg);
  font-size: 1.2rem;
  margin-bottom: .5rem;
}

.numero-ganador {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  color: var(--accent);
  font-weight: 600;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Invoice display ────────────────────────────────────────────────────── */
.invoice-box {
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1rem;
}

.invoice-bolt11 {
  font-family: monospace;
  font-size: .75rem;
  word-break: break-all;
  color: var(--text-light);
  background: #F0EBF8;
  padding: .5rem;
  border-radius: var(--radius);
  margin-top: .5rem;
}

/* ─── Barra de acciones ──────────────────────────────────────────────────── */
.acciones {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.acciones-tabla {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

/* ─── Vacío ──────────────────────────────────────────────────────────────── */
.vacio {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-light);
  font-style: italic;
}

.vacio::before {
  content: "✦";
  display: block;
  font-size: 2rem;
  margin-bottom: .5rem;
  opacity: .4;
}

/* ─── Separador ornamental ───────────────────────────────────────────────── */
.ornamento {
  text-align: center;
  color: var(--border);
  margin: 1.5rem 0;
  font-size: 1.2rem;
  letter-spacing: .5rem;
}

/* ─── Pie de página ──────────────────────────────────────────────────────── */
.pie {
  text-align: center;
  padding: 1.5rem;
  font-size: .75rem;
  color: var(--text-light);
  border-top: 1px solid var(--border);
  margin-top: 3rem;
}

/* ─── Logo flotante (esquina inferior derecha, fijo al viewport) ─────────── */
.logo-flotante {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 220px;
  height: auto;
  z-index: 50;
  pointer-events: none;
}

/* ─── Indicador de conexión SSE ─────────────────────────────────────────── */
.estado-sse {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  color: var(--text-light);
}

.sse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
}

.sse-dot.conectado {
  background: var(--success);
  animation: pulsar 2s infinite;
}

@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ─── Indicador de conectividad LNBits ──────────────────────────────────── */
.lnbits-estado {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  padding: .15rem .5rem;
  border-radius: .8rem;
  border: 1px solid transparent;
  margin-left: .75rem;
}

.lnbits-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lnbits-desconocido .lnbits-dot { background: #ccc; }
.lnbits-desconocido { color: var(--text-light); border-color: #ccc; }

.lnbits-conectado .lnbits-dot {
  background: var(--success);
  animation: pulsar 2s infinite;
}
.lnbits-conectado { color: var(--success); border-color: var(--success); }

.lnbits-degradado .lnbits-dot { background: var(--warning, #e8a000); }
.lnbits-degradado { color: var(--warning, #e8a000); border-color: var(--warning, #e8a000); }

.lnbits-desconectado .lnbits-dot { background: var(--danger, #e53e3e); }
.lnbits-desconectado {
  color: var(--danger, #e53e3e);
  border-color: var(--danger, #e53e3e);
  animation: parpadear 1s infinite;
}

@keyframes parpadear {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ─── Panel top ────────────────────────────────────────────────────────── */
.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ─── Acordeón de sorteos ────────────────────────────────────────────────── */
.sorteo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
  overflow: hidden;
}

.sorteo-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
  flex-wrap: wrap;
}

.sorteo-card-header:hover { background: rgba(123,94,167,.05); }

.sorteo-card-info {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1;
  min-width: 200px;
}

.sorteo-nombre {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
}

.sorteo-card-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--text-light);
}

.meta-item { white-space: nowrap; }
.meta-item.muted { opacity: .7; }

.sorteo-card-toggle {
  font-size: .75rem;
  color: var(--text-light);
  transition: transform .25s;
  flex-shrink: 0;
  display: inline-block;
}

.sorteo-card-toggle.abierto { transform: rotate(90deg); }

/* Cuerpo oculto por defecto; JS lo muestra */
.sorteo-card-body {
  border-top: 1px solid var(--border);
  display: none;
  padding: 1.25rem;
}

.sorteo-card-body.visible { display: block; }

/* ─── Resultado del sorteo completado ────────────────────────────────── */
.resultado-completado {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin: 0 0 1rem 0;
  border-radius: var(--radius);
  border-left: 4px solid transparent;
}
.resultado-ganado {
  background: #FFF8EF;
  border-left-color: var(--accent);
}
.resultado-desierto {
  background: #F5F0F8;
  border-left-color: var(--secondary);
}
.resultado-icono {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.resultado-etiqueta {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-light);
  margin-bottom: .2rem;
}
.resultado-numero {
  font-size: 1.1rem;
  color: var(--primary);
}
.resultado-numero strong {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--accent);
}
.resultado-jugador {
  font-family: monospace;
  font-size: .85rem;
  color: var(--text-light);
  margin: .2rem 0;
}
.resultado-premio {
  font-size: .9rem;
  color: var(--primary);
}
.resultado-premio strong {
  color: var(--accent);
}

/* ─── Detalles del sorteo ─────────────────────────────────────────────── */
.sorteo-detalles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.detalles-bloque {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
}

.detalles-titulo {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-light);
  margin-bottom: .75rem;
}

.mini-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mini-tabla td { padding: .25rem 0; vertical-align: top; }
.mini-tabla td:first-child { color: var(--text-light); width: 40%; }

.stat-big {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: var(--primary);
  line-height: 1;
  margin-bottom: .25rem;
}

.stat-big span { font-size: .8rem; font-family: 'Lato',sans-serif; color: var(--text-light); margin-left: .3rem; }
.stat-small { font-size: .85rem; color: var(--text-light); margin-top: .5rem; }

/* ─── Secciones colapsables dentro de la tarjeta ─────────────────────── */
.seccion { margin-bottom: .75rem; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }

.seccion-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  cursor: pointer;
  background: var(--bg);
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .06em;
  user-select: none;
  transition: background .15s;
}

.seccion-header:hover { background: rgba(123,94,167,.06); }

.seccion-header-accent {
  background: rgba(200,150,62,.08);
  color: var(--accent);
  border-bottom: 1px solid rgba(200,150,62,.2);
}

.seccion-header-accent:hover { background: rgba(200,150,62,.14); }

.seccion-chevron { font-size: .75rem; display: inline-block; transition: transform .2s; }
.seccion-chevron.abierto { transform: rotate(90deg); }

.seccion-body { background: var(--bg-card); }
.seccion-body.oculto { display: none; }

.tabla-compact th, .tabla-compact td { padding: .5rem .75rem; }

/* ─── Layout de añadir jugador ───────────────────────────────────────── */
.add-jugador-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.25rem;
  align-items: start;
}

.invoice-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem;
}

.invoice-panel-titulo {
  font-family: 'Playfair Display', serif;
  color: var(--success);
  font-size: 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.invoice-panel-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-light);
  font-size: .85rem;
  font-style: italic;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 6px;
  min-height: 200px;
}

.campo-preview-premio {
  padding: .6rem .9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--accent);
  font-weight: 700;
}

/* ─── Acciones del sorteo ─────────────────────────────────────────────── */
.sorteo-acciones {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: .75rem;
}

/* ─── Panel de logs ────────────────────────────────────────────────────── */
.log-chevron {
  display: inline-block;
  transition: transform .2s;
  font-size: .75rem;
  color: var(--text-light);
}
.log-chevron.abierto { transform: rotate(90deg); }

.log-contador {
  font-size: .7rem;
  background: var(--secondary);
  color: #fff;
  padding: .1rem .45rem;
  border-radius: 10px;
  min-width: 1.2rem;
  text-align: center;
}
.log-panel {
  height: 260px;
  min-height: 80px;
  max-height: none;
  resize: vertical;
  overflow-y: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: .8rem;
  line-height: 1.5;
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: 6px;
  padding: .5rem .75rem;
}

/* Timer progresivo — sorteo cerrado esperando resultado de LNBits */
.cuenta-progresiva {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .04em;
}

.log-entrada {
  display: block;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
}

.log-entrada:last-child { border-bottom: none; }

.log-entrada-header {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  padding: .2rem 0;
}

.log-entrada:hover .log-entrada-header { background: rgba(255,255,255,.04); }

.log-expand-icon {
  flex-shrink: 0;
  font-size: .6rem;
  color: #6c7086;
  display: inline-block;
  transition: transform .15s;
}

.log-entrada.expandida .log-expand-icon { transform: rotate(90deg); }

.log-detalle {
  display: none;
  margin: .15rem 0 .4rem 1.6rem;
  padding: .35rem .6rem;
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  border-left: 2px solid rgba(123,94,167,.5);
  font-size: .77rem;
  word-break: break-all;
  color: #cdd6f4;
}

.log-entrada.expandida .log-detalle { display: block; }

.log-detalle-body {
  white-space: pre-wrap;
  color: #cdd6f4;
  margin-bottom: .3rem;
}

.log-detalle-meta {
  margin-top: .3rem;
  padding-top: .3rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

.log-detalle-meta div,
.log-detalle-info {
  color: #6c7086;
  margin-top: .15rem;
}

.log-detalle-key { opacity: .75; }
.log-detalle-val { color: #cdd6f4; word-break: break-all; }

.log-ts {
  color: #6c7086;
  flex-shrink: 0;
}

.log-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 3px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.log-badge-error   { background: #8B3A3A; color: #fff; }
.log-badge-warning { background: #e8a000; color: #1e1e2e; }
.log-badge-info    { background: #7B5EA7; color: #fff; }

/* npeer — colores por tipo de mensaje (igual que el playground web) */
.log-badge-broadcast { background: #58a6ff; color: #0d1117; }
.log-badge-dm        { background: #3fb950; color: #0d1117; }
.log-badge-status    { background: #d29922; color: #0d1117; }
.log-badge-lesson    { background: #bc8cff; color: #0d1117; }
.log-badge-request   { background: #f78166; color: #0d1117; }
.log-badge-response  { background: #39d8c8; color: #0d1117; }

/* Nostr — badges por tipo de mensaje generado por la app */
.log-badge-nostr-ganador { background: #f5c542; color: #1e1e2e; }
.log-badge-nostr-dm      { background: #3fb950; color: #0d1117; }
.log-badge-nostr-bc      { background: #7B5EA7; color: #fff; }
.log-badge-zap           { background: #f5a623; color: #1e1e2e; }
.log-badge-zap-rechazo   { background: #e74c3c; color: #fff; }

/* Nostr — bloque de mensaje completo en el detalle expandible */
.log-nostr-msg {
  margin: 0 0 .4rem 0;
  padding: .5rem .65rem;
  background: rgba(123,94,167,.12);
  border-left: 3px solid #7B5EA7;
  border-radius: 4px;
  font-family: inherit;
  font-size: .78rem;
  white-space: pre-wrap;
  color: #cdd6f4;
  word-break: break-word;
  line-height: 1.55;
}

.log-msg { word-break: break-word; }

.log-vacio {
  text-align: center;
  color: #6c7086;
  padding: 1.5rem 0;
  font-style: italic;
}

.log-filtros {
  display: flex;
  gap: .35rem;
}

.log-filtro-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-light);
  padding: .2rem .6rem;
  border-radius: 4px;
  font-size: .75rem;
  cursor: pointer;
  transition: all .15s;
}

.log-filtro-btn:hover {
  border-color: var(--secondary);
  color: var(--secondary);
}

.log-filtro-btn.activo {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}

.log-borrar-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: .15rem .5rem;
  border-radius: 4px;
  font-size: .85rem;
  cursor: pointer;
  margin-left: .5rem;
}
.log-borrar-btn:hover {
  border-color: #c0392b;
  color: #c0392b;
}

/* ─── Responsive mínimo ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cabecera { padding: .75rem 1rem; }
  .cabecera-titulo { font-size: 1rem; }
  .contenedor { padding: 1rem; }
  .tabla-sorteos { font-size: .8rem; }
  .tabla-sorteos th, .tabla-sorteos td { padding: .5rem .6rem; }
}