/* Rueda de negocios — hoja única. Sin dependencias externas: la parte
   pública se abre desde un celular en el piso del evento, muchas veces
   con red mala. */

:root {
  --fondo: #f7f7f5;
  --panel: #ffffff;
  --borde: #e3e2de;
  --texto: #1c1c1a;
  --suave: #6b6b66;
  --acento: #1f5f4b;
  --acento-claro: #e7f1ed;
  --alerta: #9a2f2f;
  --alerta-claro: #fbeaea;
  --aviso: #8a6100;
  --aviso-claro: #fdf3e0;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 14px rgba(0, 0, 0, .04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16171a;
    --panel: #1e2024;
    --borde: #32353b;
    --texto: #e9e9e6;
    --suave: #9a9c9f;
    --acento: #5fbfa0;
    --acento-claro: #1d2f2a;
    --alerta: #ef9a9a;
    --alerta-claro: #3a2222;
    --aviso: #e0b45a;
    --aviso-claro: #33291a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--acento); }

.contenedor { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---------- cabecera ---------- */
.cabecera {
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 10;
}
.cabecera .contenedor {
  display: flex; align-items: center; gap: 20px;
  min-height: 62px; flex-wrap: wrap;
}
.marca { font-weight: 650; text-decoration: none; color: var(--texto); font-size: 1.05rem; }
/* Red de seguridad: ninguna imagen de la cabecera puede romper el alto. */
.cabecera img { max-height: 40px; width: auto; }
/* Marca del evento: logo + nombre, en el sitio público y en el panel. */
.marca-evento { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca-evento img { height: 32px; width: auto; max-width: 130px; object-fit: contain; }
/* Marca del expositor dentro del panel */
.marca-expositor { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca-expositor img {
  height: 34px; width: auto; max-width: 96px; object-fit: contain;
}
.marca-expositor .inicial {
  height: 34px; width: 34px; border-radius: 7px; flex: none;
  background: var(--acento-claro); color: var(--acento);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.marca-expositor .textos { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marca-expositor .marca { font-size: 1rem; }
.marca-expositor small { color: var(--suave); font-size: .74rem; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--suave); font-size: .92rem; }
.nav a:hover, .nav a.activo { color: var(--texto); }
.idiomas { display: flex; gap: 4px; }
.idiomas a {
  padding: 2px 7px; border: 1px solid var(--borde); border-radius: 6px;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
}
.idiomas a.activo { background: var(--acento); color: #fff; border-color: var(--acento); }

main { padding: 28px 0 64px; }

h1 { font-size: 1.6rem; margin: 0 0 6px; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 32px 0 12px; }
h3 { font-size: 1rem; margin: 0 0 6px; }
.sub { color: var(--suave); margin: 0 0 22px; }

/* ---------- avisos ---------- */
.aviso {
  padding: 11px 14px; border-radius: var(--radio); margin-bottom: 16px;
  border: 1px solid transparent; font-size: .93rem;
}
.aviso.ok { background: var(--acento-claro); border-color: var(--acento); }
.aviso.error { background: var(--alerta-claro); border-color: var(--alerta); color: var(--alerta); }

/* ---------- tarjetas ---------- */
.rejilla {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.tarjeta {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra);
  display: flex; flex-direction: column;
}
.tarjeta .logo {
  height: 56px; width: auto; max-width: 100%; object-fit: contain;
  align-self: flex-start; margin-bottom: 12px;
}
.tarjeta .logo-vacio {
  height: 56px; width: 56px; border-radius: 8px; margin-bottom: 12px;
  background: var(--acento-claro); color: var(--acento);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.3rem;
}
.tarjeta p { color: var(--suave); font-size: .9rem; margin: 6px 0 0; }
.tarjeta .pie { margin-top: auto; padding-top: 14px; }

.etiqueta {
  display: inline-block; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--suave);
  border: 1px solid var(--borde); border-radius: 20px; padding: 2px 9px;
}
.cupos { font-size: .85rem; color: var(--acento); font-weight: 600; }
.cupos.agotado { color: var(--suave); font-weight: 400; }

/* ---------- formularios ---------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
label { display: block; font-size: .85rem; color: var(--suave); margin-bottom: 4px; }
input, select, textarea {
  font: inherit; padding: 9px 11px; border: 1px solid var(--borde);
  border-radius: 8px; background: var(--panel); color: var(--texto); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento);
}
textarea { min-height: 92px; resize: vertical; }
.campo { margin-bottom: 14px; }
.campo .error { color: var(--alerta); font-size: .82rem; margin-top: 4px; }
.dos-columnas { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .dos-columnas { grid-template-columns: 1fr; } }

.boton {
  display: inline-block; font: inherit; font-weight: 550; cursor: pointer;
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--acento);
  background: var(--acento); color: #fff; text-decoration: none; width: auto;
}
.boton:hover { filter: brightness(1.08); }
.boton.secundario { background: transparent; color: var(--texto); border-color: var(--borde); }
.boton.peligro { background: transparent; color: var(--alerta); border-color: var(--alerta); }
.boton.chico { padding: 5px 11px; font-size: .85rem; }
.boton[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- traducción con IA ---------- */
/* Cada par español/inglés vive en su propia tarjeta, con el botón en medio. */
.par-idiomas { margin-bottom: 20px; gap: 0; }
.par-idiomas > h3 { margin-bottom: 2px; }
.par-idiomas > .sub { margin-bottom: 14px; font-size: .88rem; }
.par-idiomas .campo label { font-weight: 600; color: var(--texto); }
.par-idiomas textarea::placeholder { font-style: italic; opacity: .75; }

.traducir-fila {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -6px 0 14px;
}
.traducir-estado { font-size: .82rem; color: var(--acento); }
.traducir-estado.error { color: var(--alerta); }

/* Enlace discreto: es un <button> por accesibilidad, pero se ve como enlace. */
.enlace {
  background: none; border: 0; padding: 0; width: auto; cursor: pointer;
  font: inherit; font-size: .8rem; color: var(--acento);
  text-decoration: underline; text-underline-offset: 2px;
}
.enlace[disabled] { opacity: .5; cursor: wait; text-decoration: none; }
/* El mensaje traducido se distingue del original de un vistazo. */
.mensaje.traducido {
  border-left: 2px solid var(--acento); padding-left: 8px;
  font-style: italic; color: var(--suave);
}

/* ---------- parrilla: una fila por día ---------- */
.ventana {
  display: grid; gap: 0 12px; align-items: end; margin-bottom: 10px;
  grid-template-columns: 1.5fr 1fr 1fr auto auto;
}
.ventana .campo { margin-bottom: 0; }
.ventana-estado { padding-bottom: 9px; white-space: nowrap; }
.ventana .etiqueta { border-color: var(--acento); color: var(--acento); }
.ventana .etiqueta.sin-generar { border-color: var(--borde); color: var(--suave); }
@media (max-width: 720px) {
  .ventana {
    grid-template-columns: 1fr 1fr; gap: 0 10px;
    border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 12px; margin-bottom: 12px;
  }
  .ventana .campo:first-child { grid-column: 1 / -1; margin-bottom: 10px; }
  .ventana-estado { grid-column: 1; padding-top: 10px; }
  .ventana .quitar { grid-column: 2; justify-self: end; margin-top: 10px; }
}

/* ---------- parrilla de horarios ---------- */
.dia { margin-bottom: 24px; }
.dia h3 { text-transform: capitalize; color: var(--suave); font-weight: 550;
          font-size: .9rem; letter-spacing: .02em; }
.horarios { display: flex; flex-wrap: wrap; gap: 8px; }
.horario {
  border: 1px solid var(--borde); background: var(--panel);
  border-radius: 8px; padding: 8px 12px; font-size: .9rem;
  text-decoration: none; color: var(--texto); min-width: 118px; text-align: center;
}
button.horario { font: inherit; cursor: pointer; width: auto; line-height: 1.4; }
.horario:hover:not([disabled]) { border-color: var(--acento); background: var(--acento-claro); }
.horario small { display: block; color: var(--acento); font-size: .74rem; }
.horario.lleno { color: var(--suave); border-style: dashed; }
.horario.lleno small { color: var(--suave); }
.horario.bloqueado { opacity: .55; }

/* ---------- cuadrícula de horarios × mesas ---------- */
.rejilla-horarios { font-size: .88rem; }
.rejilla-horarios th { vertical-align: bottom; }
.rejilla-horarios td.hora { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rejilla-horarios td.celda { text-align: center; }
.rejilla-horarios tbody tr:hover { background: transparent; }
.casilla { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
           margin: 0; font-size: .8rem; color: var(--suave); }
.casilla input { width: auto; }
.casilla input:checked + span { color: var(--alerta); font-weight: 600; }
.ocupada { font-size: .8rem; color: var(--acento); font-weight: 600; }

/* Horario elegible: se ve como los chips, pero es un radio. */
.horario.elegible { display: inline-flex; align-items: center; gap: 7px;
                    cursor: pointer; text-align: left; }
.horario.elegible input { width: auto; }
.horario.elegible:has(input:checked) { border-color: var(--acento);
                                       background: var(--acento-claro); }

/* ---------- tablas ---------- */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-weight: 600; }
tbody tr:hover { background: var(--acento-claro); }

.estado {
  display: inline-block; font-size: .78rem; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--borde); white-space: nowrap;
}
.estado.confirmada { background: var(--acento-claro); color: var(--acento); border-color: var(--acento); }
.estado.pendiente { background: var(--aviso-claro); color: var(--aviso); border-color: var(--aviso); }
.estado.en_espera { background: var(--aviso-claro); color: var(--aviso); border-color: var(--borde); }
.estado.rechazada, .estado.cancelada { background: var(--alerta-claro); color: var(--alerta); border-color: var(--alerta); }

/* Zona de pruebas: se distingue del resto para que nadie la confunda. */
.zona-pruebas { border-color: var(--alerta); background: var(--alerta-claro); }
.zona-pruebas h3 { color: var(--alerta); }

/* ---------- métricas ---------- */
.metricas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.metrica { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; }
.metrica .n { font-size: 1.7rem; font-weight: 650; letter-spacing: -.02em; }
.metrica .r { font-size: .8rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- QR ---------- */
.qr-rejilla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.qr-ficha { background: #fff; color: #111; border: 1px solid #ddd; border-radius: var(--radio);
            padding: 16px; text-align: center; }
.qr-ficha img { width: 100%; height: auto; max-width: 190px; }
.qr-ficha .nombre { font-weight: 600; margin-top: 8px; }
.qr-ficha .url { font-size: .72rem; color: #666; word-break: break-all; }

.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.linea { border: 0; border-top: 1px solid var(--borde); margin: 28px 0; }
.vacio { color: var(--suave); padding: 24px 0; }

@media print {
  .cabecera, .nav, .no-imprimir { display: none !important; }
  body { background: #fff; }
  .qr-ficha { break-inside: avoid; }
}