/* ═══════════════════════════════════════════════════════════
   Panel del organizador (admin.html)

   Va DESPUES de styles.css y solo agrega lo que existe nada mas en el
   panel: pestañas, filas de la bandeja, editor de sorteos, recibos. Los
   colores, la tipografia, los botones, los campos y la barra de arriba
   salen de styles.css, para que el panel y la pagina publica no se
   separen con el tiempo.

   Misma paleta "Raspadito" que la pagina publica, mas densidad: aqui se
   trabaja.
   ═══════════════════════════════════════════════════════════ */

.panel { max-width: 1180px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }

.panel__aviso {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .9rem 1.15rem; margin-bottom: 2rem;
  background: var(--sello-suave);
  border-left: 4px solid var(--sello);
  border-radius: 8px;
  color: var(--sello); font-size: .9rem; line-height: 1.5;
}
.panel__aviso b { display: block; }

.pestanas { display: flex; gap: .4rem; border-bottom: 2px solid var(--linea-suave); margin-bottom: 2rem; flex-wrap: wrap; }
.pestana {
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: .8rem 1.1rem; margin-bottom: -2px;
  color: var(--tenue); font: inherit; font-weight: 600; font-size: .95rem;
  cursor: pointer; transition: color .16s, border-color .16s;
}
.pestana:hover { color: var(--tinta); }
.pestana[aria-selected="true"] { color: var(--verde); border-bottom-color: var(--verde); }
.pestana .globo {
  display: inline-block; margin-left: .4rem; padding: .05rem .5rem;
  background: var(--dorado); color: var(--tinta);
  border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 700;
}
.pestana .globo--alerta { background: var(--sello); color: #FFFFFF; }

.panel__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.panel__cabeza h2 {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: 2.3rem; letter-spacing: .02em; line-height: 1;
}

.fila {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 1rem; align-items: center;
  padding: 1.1rem 1.25rem; margin-bottom: .7rem;
  background: var(--superficie);
  border-radius: 12px;
  border-left: 5px solid var(--dorado);
  box-shadow: 0 4px 14px rgba(20,38,30,.07);
}
.fila h3 { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; }
.fila__meta { margin: 0; font-size: .85rem; color: var(--tenue); }
.fila__meta b { color: var(--tinta); font-weight: 600; }
.fila__acciones { display: flex; gap: .45rem; flex-wrap: wrap; }
.fila .btn { padding: .45rem 1rem; font-size: .82rem; }
.fila--bloque { display: block; }

/* El ganador, ya registrado, en la fila del sorteo. */
.fila__ganador {
  display: inline-block; margin: .5rem 0 0;
  padding: .3rem .7rem; border-radius: 6px;
  background: var(--dorado-suave); color: var(--tinta);
  font-size: .88rem;
}
.fila__ganador b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: .04em; }

/* El formulario para registrarlo. Ocupa todo el ancho de la fila, debajo
   de los botones. */
.ganador {
  grid-column: 1 / -1;
  display: grid; gap: .8rem;
  margin-top: .3rem; padding-top: 1rem;
  border-top: 2px dashed var(--linea);
}
.ganador .g-num { font-family: var(--display); font-size: 1.5rem; letter-spacing: .08em; }
.ganador .g-quien { font-size: .88rem; color: var(--tinta-2); }

/* Dinero cobrado al que le faltaron boletos. Es el unico estado de esta
   pantalla que no puede esperar, y se ve desde el otro lado del cuarto. */
.fila--revision { border-left-color: var(--sello); box-shadow: 0 0 0 2px var(--sello), 0 4px 14px rgba(20,38,30,.07); }

.marbete {
  display: inline-block; padding: .12rem .55rem;
  border-radius: 6px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.marbete--abierto   { background: var(--verde-suave); color: var(--verde); }
.marbete--cerrado   { background: var(--superficie-2); color: var(--tenue); }
.marbete--pendiente { background: var(--dorado-suave); color: var(--dorado-sombra); }
.marbete--aprobado  { background: var(--verde-suave); color: var(--verde); }
.marbete--rechazado { background: var(--sello-suave); color: var(--sello); }
/* Cobro por pasarela. Neutro a proposito: dice de donde vino el pago, no
   si algo anda bien o mal. Lo que urge se marca con .fila--revision. */
.marbete--pasarela  { background: var(--superficie-2); color: var(--tinta-2); }

.forma { display: grid; gap: 1.1rem; max-width: 780px; }
.forma--angosta { max-width: 34rem; }
/* Los pasos del acceso agrupan varios campos en un div; sin esto quedan pegados. */
.forma > [id^="paso"] { display: grid; gap: 1rem; }
.forma__par { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.forma textarea { min-height: 84px; resize: vertical; }
.forma input[type=file] { font: inherit; font-size: .85rem; color: var(--tinta-2); }
.forma__titulo {
  margin: 1rem 0 0;
  font-family: var(--display); font-weight: 400;
  font-size: 1.6rem; letter-spacing: .03em; color: var(--verde);
}
.forma__estado { margin: 0; font-size: .9rem; font-weight: 600; min-height: 1.4em; }
.forma__estado.ok  { color: var(--verde); }
.forma__estado.mal { color: var(--sello); }

.bloque {
  padding: 1.1rem;
  background: var(--superficie);
  border: 1px solid var(--linea-suave);
  border-radius: 12px;
  display: grid; gap: .75rem; margin-bottom: .7rem;
}
.bloque__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.bloque__cabeza b { font-size: .9rem; }
.miniatura { width: 100%; max-width: 190px; border-radius: 8px; aspect-ratio: 16/10; object-fit: cover; }

.recibo { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 1.25rem; align-items: start; }
.recibo__datos p { margin: 0 0 .3rem; font-size: .88rem; color: var(--tenue); }
.recibo__datos h3 { margin: 0 0 .5rem; }
.recibo__nums { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; padding: 0; }
.recibo__nums li {
  list-style: none;
  border: 2px dashed var(--verde); color: var(--verde);
  border-radius: 6px;
  padding: .05rem .5rem;
  font-family: var(--display); font-size: 1.1rem; letter-spacing: .04em;
}
/* Como pago y con que referencia: lo que sirve cuando el comprador llama
   a aclarar. */
.recibo__pago {
  background: var(--fondo);
  border-radius: 8px;
  padding: .9rem; display: grid; gap: .3rem;
}
.recibo__pago p { margin: 0; font-size: .85rem; color: var(--tenue); }
.recibo__pago-metodo {
  font-size: .75rem !important; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta) !important;
}
.recibo__pago-ref { word-break: break-all; }

.recibo__alerta {
  margin: 0 0 .6rem; padding: .6rem .75rem;
  background: var(--sello-suave); border-left: 4px solid var(--sello);
  border-radius: 6px;
  font-size: .86rem !important; color: var(--tinta) !important;
}

/* Las CLABE de las cuentas en el editor. */
.c-clabe { font-variant-numeric: tabular-nums; }

.vacio { padding: 3rem 1rem; text-align: center; color: var(--tenue); }

.nota { margin: 0 0 1.5rem; max-width: 65ch; color: var(--tinta-2); }

.separado     { margin-top: 1rem; }
.separado-mas { margin-top: 1.5rem; }

.mfa__qr {
  background: #FFFFFF;              /* el QR necesita fondo claro para leerse */
  padding: .75rem;
  border-radius: var(--r-control);
  box-shadow: var(--sombra);
  max-width: 15rem;
}

.selector {
  padding: .6rem .9rem;
  background: var(--superficie);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-control);
  color: var(--tinta);
  font: inherit;
  font-size: .92rem;
}

@media (max-width: 1024px) {
  .forma__par { grid-template-columns: 1fr; }
  .recibo { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .fila { grid-template-columns: 1fr; }
}