/* Reporte para clientes. La interfaz reutiliza `estilos.css` (la vista previa usa
   la misma fila de diapositivas que la pieza de celular); aquí van sus piezas propias.
   La página se lee en cuatro pasos numerados: queries, CSV, loterías y reporte;
   lo que comparte con la pieza para usuarios (pasos, queries, CSV, avisos) va en
   `pasos.css`. */

/* ---------- 3 · Loterías ---------- */

.loterias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 12px;
}
/* El mes de la rifa manda sobre las tarjetas: va arriba, a todo el ancho, con
   el botón que copia las del mes anterior al lado. */
.loterias .fila-mes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.loterias .mes-rifa { flex: 0 1 280px; }
.rifa {
  display: grid; gap: 12px; align-content: start; min-width: 0;
  background: var(--panel-alto); border: 1px solid var(--borde); border-radius: 10px;
  padding: 14px 16px;
}
.rifa header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rifa h3 { margin: 0; font-size: 14px; }
.rifa .estado {
  border: 1px solid var(--borde); border-radius: 999px; padding: 2px 10px;
  font-size: 11.5px; color: var(--tenue); white-space: nowrap;
}
.rifa .estado.listo { border-color: var(--lima); color: var(--lima); }
.rifa .descripcion { margin: -6px 0 0; }
.rifa .copiar { justify-self: start; font-size: 12.5px; }
.rifa .campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.rifa .campos .ancho { grid-column: 1 / -1; }
.rifa .foto { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rifa .miniatura {
  width: 72px; height: 54px; flex: 0 0 72px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--fondo); border: 1px dashed var(--borde); border-radius: 8px;
  color: var(--tenue); font-size: 10.5px; text-align: center;
}
.rifa .miniatura img { width: 100%; height: 100%; object-fit: contain; }
.rifa .foto .boton { padding: 7px 14px; font-size: 12.5px; }
.rifa .guardado { margin: -4px 0 0; font-size: 12px; color: var(--tenue); }
.rifa .guardado:empty { display: none; }
.rifa .guardado.error { color: #f3a08f; }

/* ---------- 4 · Reporte ---------- */

.lateral h2 { display: flex; align-items: center; gap: 8px; }

/* Logo del cliente junto al nombre: el botón con la misma letra que los demás
   (heredaba los 12 px de la etiqueta), la miniatura con ancho propio y «Quitar»
   como acción secundaria discreta, no como enlace azul subrayado. */
/* «Qué mostrar»: un interruptor por parte contratada. */
.vistas {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 14px;
  font-size: 12px; color: var(--tenue); min-width: 0;
}
.vistas .interruptores { display: flex; gap: 8px; flex-wrap: wrap; }
.interruptor {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--panel-alto);
  color: var(--tenue); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none;
}
.interruptor input { accent-color: var(--lima); width: 16px; height: 16px; margin: 0; cursor: pointer; }
.interruptor:has(input:checked) { border-color: var(--lima); color: var(--texto); }
.interruptor:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.controles .logo-cliente { min-width: 0; }
@media (min-width: 560px) {
  /* Miniatura, botón y «Quitar» no caben en una columna de 215 px: dos columnas. */
  .controles .logo-cliente { grid-column: span 2; }
}
.controles .fila-logo { flex-wrap: wrap; }
.controles .fila-logo .boton { font-size: 14px; padding: 0 16px; }
.controles .fila-logo .miniatura-logo { flex: 0 0 96px; justify-content: center; padding: 0 8px; }
.controles .fila-logo .enlace { color: var(--tenue); text-decoration: none; font-size: 13px; }
.controles .fila-logo .enlace:hover { color: var(--texto); text-decoration: underline; }

/* Selector de grupo sobre la lista: un grupo a la vez, con cuántas compañías tiene. */
.selector-grupo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; margin-bottom: 12px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
}
.selector-grupo button {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  border: 0; border-radius: 7px; padding: 7px 8px;
  background: transparent; color: var(--tenue);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.selector-grupo button:hover:not(:disabled) { color: var(--texto); }
.selector-grupo button[aria-selected="true"] { background: var(--lima); color: var(--tinta); }
.selector-grupo button:disabled { opacity: 0.4; cursor: default; }
.selector-grupo .cuenta {
  min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); font-size: 11px;
}
.selector-grupo button[aria-selected="true"] .cuenta { background: rgba(0, 0, 0, 0.15); }

.lateral { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow: auto; }
/* Nombre arriba y lo del periodo debajo: en una fila, el resumen le quitaba el
   ancho al nombre y este se partía letra por letra. */
.companias button { flex-direction: column; align-items: stretch; gap: 2px; }
.companias button > span:first-child { font-weight: 600; overflow-wrap: anywhere; }
.companias .meta { white-space: normal; }

@media (max-width: 1100px) {
  .lateral { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .barra { flex-wrap: wrap; padding: 14px 16px; }
  main.reporte { padding: 16px 16px 48px; }
  .resumen-paso { display: none; }
  .rifa .campos { grid-template-columns: 1fr; }
}