@charset "utf-8";
/* ============================================================
   modulos/admin.css

   Se carga después de base.css, panel.css y app.css. Solo lo que es de
   esta área: todo lo común (tarjetas, botones, campos, cifras, tablas,
   avisos, cabecera de pantalla) ya viene de ahí.

   La administración de la aplicación es la misma pantalla que
   `web/panel-admin.html`, con las acciones que aquella deja fuera a
   propósito: dar permisos, bloquear, borrar, crear cuentas y mover saldos.
   Por eso casi todo es panel.css tal cual —`.metricas`, `.bloque`,
   `.ajuste`, `.palanca`, `.tabla-panel`, `.estado`, `.etiqueta`,
   `.btn-panel`, `.btn-peligro`— y aquí solo va lo que no existe allí: el
   índice de saltos, la fila de gestión que se abre debajo de un usuario, las
   listas de referidos, ayuda y modelos, y los rótulos de grupo del control.

   Prefijo `adm-`: diez áreas escriben hojas a la vez.
   ============================================================ */

/* Las cifras de arriba llevan cada una el tono de su familia con `.tono-*`
   de app.css: es el mismo color para lo mismo en toda la aplicación. */

/* ---------- el índice de la pantalla ----------
   Una tira de botones planos, con el número de lo que espera una decisión
   en el mismo lavado coral que el contador de la columna del panel. En el
   móvil se desplaza de lado en vez de partirse en tres líneas. */
.adm-saltos {
  display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none;
  margin: calc(-1 * var(--e-2)) 0 var(--p-e-45);
  padding-bottom: 2px;
}
.adm-saltos::-webkit-scrollbar { display: none; }
.adm-saltos button {
  flex: none; display: inline-flex; align-items: center; gap: .375rem;
  min-height: 2.75rem; padding: 0 var(--e-3);
  font-size: var(--p-sm); font-weight: 600; color: var(--tinta-2);
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-full);
  cursor: pointer;
}
.adm-saltos button:hover { color: var(--tinta); border-color: var(--tinta-3); }
.adm-saltos-cuenta {
  font-size: var(--p-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  padding: .0625rem .4375rem; border-radius: var(--r-full);
  background: var(--racha-lavado); color: var(--racha-tinta);
}
/* El título al que se salta recibe el foco para el teclado; el anillo
   alrededor de un h2 lo pintaría como si fuera un botón. */
.adm-panel h2[tabindex="-1"]:focus { outline: none; }

/* ---------- piezas pequeñas que comparten los bloques ---------- */
.adm-panel .bloque-cuerpo > p + p,
.adm-panel .bloque-cuerpo > p + .aviso,
.adm-panel .bloque-cuerpo > .aviso + p { margin-top: var(--e-3); }
.adm-aviso { margin-top: var(--e-4); }
.adm-botonera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
/* `.btn-panel` no parte línea (panel.css), y aquí hay rótulos largos —«Ver
   todas las cuentas, también las que no han traído a nadie»— que a 320 px
   medían 400 y se llevaban la página de lado. Fuera de las filas de tabla,
   el rótulo parte antes que desbordar. */
.adm-botonera .btn-panel, .adm-pie-bloque .btn-panel { white-space: normal; text-align: left; }
.adm-panel .bloque-cuerpo > .adm-botonera { margin-top: var(--e-3); }
.adm-rotulo { margin-top: var(--e-4); font-size: var(--p-sm); color: var(--tinta-3); }
.adm-rotulo + .adm-botonera { margin-top: var(--e-2) !important; }
.adm-nota { font-size: var(--p-sm); color: var(--tinta-3); }
.adm-sub {
  font-family: var(--texto); font-size: var(--p-xs); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3);
  margin: var(--e-5) 0 var(--e-2);
}
.adm-panel .bloque-cuerpo > .adm-sub:first-child { margin-top: 0; }
.adm-etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-1); }
/* Un correo, una clave de modelo o un código de referido no tienen dónde
   partirse: sin `anywhere` empujaban la fila fuera de la pantalla. */
.adm-correo {
  display: block; font-size: var(--p-sm); font-weight: 400; color: var(--tinta-3);
  overflow-wrap: anywhere;
}

/* El buscador de la cabecera de un bloque, a la medida del de la plantilla. */
.adm-buscar {
  font: inherit; font-size: var(--p-sm);
  min-height: 2.75rem; padding: .375rem .625rem;
  width: 15rem; max-width: 100%;
  border: 1px solid var(--linea); border-radius: 6px;
  background: var(--papel); color: var(--tinta);
}
@media (max-width: 34rem) { .adm-buscar { width: 100%; } }

/* Una lista de definiciones corta, en fila: rótulo pequeño encima, dato
   debajo y en tabular. Es la voz de `.metrica` a la escala de una línea. */
.adm-datos {
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5);
  margin: var(--e-3) 0 0;
}
.adm-datos dt {
  font-size: var(--p-xs); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-3);
}
.adm-datos dd { margin: .125rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---------- el control de la plataforma ---------- */
/* El rótulo de grupo es el de la columna del panel (`.panel-grupo > h2`):
   once letras en mayúscula espaciada, no un titular. */
.adm-grupo + .adm-grupo { border-top: 1px solid var(--linea); }
.adm-grupo-tit {
  font-family: var(--texto); font-size: var(--p-xs); font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-3);
  padding: var(--e-4) var(--e-4) var(--e-1);
}
.adm-grupo-nota {
  display: block; padding: 0 var(--e-4) var(--e-2); max-width: 46rem;
  font-size: var(--p-sm); color: var(--tinta-3);
}
.adm-control-pie {
  padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linea);
  font-size: var(--p-sm); color: var(--tinta-3);
}
/* panel.css solo da medida a los campos de número, texto y desplegable de
   una fila; el de hora y el de búsqueda no aparecen aquí. El de texto largo
   (el aviso) sí, y a 16rem ya lo sujeta la regla de 34rem de panel.css. */

/* ---------- la tabla de usuarios ---------- */
.adm-persona { display: block; font-weight: 600; overflow-wrap: anywhere; }
.adm-yo { font-weight: 400; color: var(--tinta-3); }
.adm-marcas { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
/* La celda de la persona lleva nombre, correo y marcas: tres líneas no caben
   en los 40 px de fila del panel, y aquí sí conviene que crezca antes que
   partir a la persona en tres columnas que sacaban la tabla de la pantalla. */
.adm-tabla-usuarios td.principal,
.adm-tabla td.principal { padding-block: var(--e-2); }
.adm-tabla-usuarios td.principal { min-width: 14rem; }

/* La fila que se abre debajo. Lleva el lavado de la tabla para leerse como
   «de la fila de arriba» y no como otra persona. */
.adm-tabla-usuarios tbody tr.adm-detalle,
.adm-tabla-usuarios tbody tr.adm-detalle:hover { background: var(--papel-2); }
.adm-tabla-usuarios tbody tr.adm-detalle > td { height: auto; padding: var(--e-4); border-bottom: 1px solid var(--linea); }
/* Con la gestión abierta, la persona y su fila de gestión son una sola
   cosa: el filete entre las dos las partía en dos registros. */
.adm-tabla-usuarios tbody tr.adm-usuario:has(+ tr.adm-detalle:not([hidden])) > td { border-bottom-color: transparent; }

.adm-gestion { display: grid; gap: var(--e-4); }
.adm-permisos { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e-6); }
.adm-permisos > legend {
  padding: 0; margin-bottom: var(--e-2);
  font-size: var(--p-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-3);
}
/* Un interruptor con su frase al lado, pulsable entero: la etiqueta es el
   objetivo, y la palanca de dentro ya llega a 44 px con su pseudo-elemento. */
.adm-interruptor {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 2.75rem; cursor: pointer;
}
.adm-interruptor b { display: block; font-weight: 500; }
.adm-interruptor small { display: block; font-size: var(--p-xs); color: var(--tinta-3); }
.adm-interruptor:has(input:disabled) { cursor: not-allowed; }

.adm-limite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.adm-campo-corto { display: grid; gap: .125rem; }
.adm-campo-corto b { font-size: var(--p-sm); font-weight: 600; }
.adm-campo-corto small { font-size: var(--p-xs); color: var(--tinta-3); }
.adm-limite input[type="number"],
.adm-campo-corto input[type="number"] {
  font: inherit; font-size: var(--p-base); font-variant-numeric: tabular-nums;
  width: 6.5rem; min-height: var(--panel-toque); padding: .375rem .5rem;
  border: 1px solid var(--linea); border-radius: 6px;
  background: var(--papel); color: var(--tinta);
}
.adm-motivo { font-size: var(--p-sm); color: var(--racha-tinta); overflow-wrap: anywhere; }
.adm-motivo b { font-weight: 700; }

/* A 390 px la tabla de cinco columnas no se desplaza de lado: cada persona
   pasa a ser una ficha apilada, como hace `table.datos` en base.css. Una
   tabla que hay que arrastrar con el pulgar para ver el botón de «Gestionar»
   es una tabla en la que nadie gestiona nada. La caja con tope de altura de
   panel.css se quita aquí: con fichas apiladas, la página ya desplaza. */
@media (max-width: 45rem) {
  #adm-usuarios .tabla-envoltorio-panel { max-height: none; overflow: visible; }
  /* La cabecera se oculta como `.solo-lectores` y no con `display: none`,
     para que el lector de pantalla siga teniendo los rótulos. Pero entera en
     bloque, fila y celdas: como grupo de tabla `overflow` no le aplica, y su
     fila de 400 px —con las celdas pegajosas de panel.css— seguía ensanchando
     la página aunque no se viera. */
  .adm-tabla-usuarios thead,
  .adm-tabla-usuarios thead tr,
  .adm-tabla-usuarios thead th { display: block; position: static; }
  .adm-tabla-usuarios thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .adm-tabla-usuarios,
  .adm-tabla-usuarios tbody { display: block; }
  .adm-tabla-usuarios tbody tr.adm-usuario {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3);
    padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea-suave);
  }
  .adm-tabla-usuarios tbody tr.adm-usuario[hidden] { display: none; }
  .adm-tabla-usuarios tbody tr.adm-usuario > td { display: block; height: auto; padding: 0; border: 0; }
  .adm-tabla-usuarios td.principal { grid-column: 1 / -1; min-width: 0; }
  /* Las fechas y las fotos pasan a una línea de texto pequeño con su rótulo,
     que en la tabla lo ponía la cabecera. */
  .adm-tabla-usuarios tbody tr.adm-usuario > td.fecha,
  .adm-tabla-usuarios tbody tr.adm-usuario > td.num {
    grid-column: 1; text-align: left; font-size: var(--p-xs); color: var(--tinta-3);
  }
  /* El rótulo lo trae el HTML en `data-etiqueta`, como la tabla de referidos
     (`.ref-tabla`) y `table.datos` de la plantilla. Escrito aquí dentro
     —`content: "Alta: "`— quedaba fuera del alcance de `i18n.js`, que traduce
     recorriendo el DOM y no puede ver lo que pinta una hoja de estilo: la
     plataforma se sirve en dieciséis idiomas y estas tres líneas salían en
     español dentro de una pantalla en turco o en japonés. Puesto en un
     atributo, quien pinta la fila ya lo traduce con el diccionario. */
  .adm-tabla-usuarios tbody tr.adm-usuario > td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; }
  .adm-tabla-usuarios tbody tr.adm-usuario > td.acciones-fila { grid-column: 2; grid-row: 2 / span 3; align-self: center; width: auto; }
  .adm-tabla-usuarios tbody tr.adm-detalle { display: block; }
  .adm-tabla-usuarios tbody tr.adm-detalle > td { display: block; }
}

/* ---------- reportes ---------- */
.adm-tabla td.acciones-fila { vertical-align: middle; }
@media (max-width: 45rem) {
  #adm-reportes .tabla-envoltorio-panel { max-height: none; overflow: visible; }
  .adm-tabla thead, .adm-tabla thead tr, .adm-tabla thead th { display: block; position: static; }
  .adm-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .adm-tabla, .adm-tabla tbody { display: block; }
  .adm-tabla tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3);
    padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea-suave);
  }
  .adm-tabla tbody tr > td { display: block; height: auto; padding: 0; border: 0; grid-column: 1; }
  .adm-tabla tbody tr > td.acciones-fila { grid-column: 2; grid-row: 1 / span 3; width: auto; }
}

/* Tres bloques vacíos seguidos con el aire de `.vacio` (48 px arriba y
   abajo) eran media pantalla diciendo «nada». En el panel un vacío dice qué
   falta y cede el sitio. */
.adm-panel .vacio { padding: var(--e-5) var(--e-4); }

/* ---------- las listas: ayuda, referidos, pagos y modelos ---------- */
.adm-lista { list-style: none; }
.adm-lista > li { padding: var(--e-4); border-bottom: 1px solid var(--linea-suave); }
.adm-lista > li:last-child { border-bottom: 0; }
.adm-lista > li > * + * { margin-top: var(--e-2); }
.adm-lista > li[hidden] { display: none; }

/* La cabecera de una entrada: lo principal en negrita y sus píldoras al
   lado, que bajan de línea antes que aplastar el texto. */
.adm-modelo-cab, .adm-contacto-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); }
.adm-modelo-cab > b, .adm-contacto-cab > b { font-weight: 600; overflow-wrap: anywhere; }

.adm-contacto-meta { font-size: var(--p-sm); color: var(--tinta-3); overflow-wrap: anywhere; }
/* El mensaje lo escribió una persona con sus saltos de línea, y se leen. */
.adm-contacto-texto { white-space: pre-wrap; font-size: var(--p-base); color: var(--tinta-2); max-width: 46rem; overflow-wrap: anywhere; }
/* Lo atendido se apaga con color de texto y no con opacidad: a media luz el
   mensaje no llegaba a 4,5:1 y a veces hay que volver a leerlo. */
.adm-contacto.atendido .adm-modelo-cab > b,
.adm-contacto.atendido .adm-contacto-texto { color: var(--tinta-3); font-weight: 500; }

.adm-importe {
  font-family: var(--display); font-size: var(--p-lg); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

.adm-ref-cab { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--e-3); align-items: start; }
.adm-ref-cab .avatar { width: 2.5rem; height: 2.5rem; }
.adm-ref-quien { min-width: 0; }
.adm-ref-quien > * + * { margin-top: .125rem; }
/* El saldo es lo que se viene a mirar: en la tinta de acierto, que es el
   color del dinero ganado en la pantalla de referidos. */
.adm-ref-saldo dd { color: var(--acierto-tinta); }
.adm-ref-controles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3) var(--e-4); }
.adm-sin-coincidencias { padding: var(--e-4); }
.adm-pie-bloque { border-top: 1px solid var(--linea); padding-block: var(--e-3); }

.adm-modelo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.adm-modelo > div { min-width: 0; flex: 1 1 16rem; }
.adm-modelos { margin-top: var(--e-3); border: 1px solid var(--linea-suave); border-radius: var(--panel-radio); }

/* ---------- las ventanas: enlace de contraseña y todas las cuentas ---------- */
.adm-modal-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.adm-modal-cab h3 { display: flex; align-items: center; gap: var(--e-2); }
.adm-modal-texto { color: var(--tinta-2); font-size: var(--t-sm); margin-bottom: var(--e-4); }
.adm-modal .campo input { font-size: var(--t-sm); }
.adm-modal-ancha { max-width: 44rem; }
.adm-modal-lista {
  max-height: 65dvh; overflow: auto;
  border: 1px solid var(--linea); border-radius: var(--panel-radio);
  font-size: var(--p-base);
}

/* ---------- crear una cuenta ---------- */
/* La medida de la tarjeta de acceso: un formulario de dos campos estirado a
   960 px obliga a recorrer la pantalla para ir de la etiqueta al campo. */
.adm-crear { max-width: 34rem; }
.adm-crear .adm-permisos { margin-bottom: var(--e-5); }
.adm-crear .consentimiento { font-size: var(--t-base); color: var(--tinta); }
.adm-crear-salida:not(:empty) { margin-top: var(--e-5); }
.adm-enlace { margin: var(--e-3) 0; }
.adm-enlace input { font-size: var(--t-sm); }