/* ==========================================================================
   cuentas.css — pantallas de cuenta (Paquete F, 27/09/2026)
   Aprobado en la fase 3 (bocetos, tandas 1 y 2): portada sin cuenta, entrar,
   solicitar acceso, crear cuenta, recuperar contraseña, avisos de cuenta,
   menú de la cuenta, panel de ADMIN, feedback, Mi cuenta y espectador. Solo
   usa los tokens de marca.css (--m-*): no define colores propios.

   Va SIEMPRE después de marca.css. En modo servidor la cargan todas las
   páginas (la cabecera con sesión sale en todas); en el PC (modo local) solo
   las pantallas de cuenta, así que el resto de la web no cambia ni un píxel.

   Dos cambios respecto al boceto aprobado, ninguno visible en él:
   - `.estado` (los chips de estado) solo se aplica con su color puesto
     (.ok/.aviso/.mal/.apagado), que es como los usan todas las pantallas de
     cuenta. Sin eso, el contador «100/100 · Completo» de Generar y del
     Constructor (que usa un <span class="estado"> sin color) cogía el
     borde y el punto de los chips.
   - Al final, el desplegable del botón ⋮ de la pestaña Usuarios (en el
     boceto era un botón sin menú).
   ========================================================================== */

/* Cabecera sin sesión: en lugar del menú, «Entrar» y «Solicitar acceso». */
.barra-acceso { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.barra-acceso a {
  display: inline-flex; align-items: center; min-height: var(--m-pulsable); padding: 0 14px;
  font-family: var(--m-letra); font-size: 14px; font-weight: 600; color: var(--m-texto);
  text-decoration: none; border: 1px solid transparent; border-radius: var(--m-radio);
}
.barra-acceso a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.barra-acceso a.acceso-pedir { border-color: var(--m-control); }
.barra-acceso a.acceso-pedir:hover { background: var(--m-elevada); border-color: var(--m-texto); text-decoration: none; }
.barra-acceso a[aria-current="page"] { color: var(--m-texto-2); }
.barra-acceso ~ .barra-idiomas, .barra-acceso + .barra-menu-btn { margin-left: 0; }
@media (max-width: 1100px) {
  .barra-acceso { margin-left: auto; margin-right: 8px; }
  .barra-acceso a.acceso-pedir { display: none; }
}

/* Portada sin cuenta: los dos botones bajo el titular y la nota de beta. */
.hero-acceso { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-acceso .boton-enlace { min-height: 44px; }
.nota-beta {
  display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0;
  font-size: 14px; line-height: 1.45; color: var(--m-texto-2);
}
.nota-beta b {
  font-family: var(--m-datos); font-weight: 500; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--m-texto); border: 1px solid var(--m-control);
  border-radius: var(--m-radio); padding: 3px 8px;
}

/* Columna estrecha de los formularios de cuenta. */
.cuenta-marco { padding: clamp(28px, 5vw, 64px) 20px 56px; }
.cuenta-col { max-width: 440px; margin: 0 auto; display: grid; gap: 20px; }
.cuenta-col .titulo-pagina, .cuenta-col .subtitulo-pagina { margin: 0; }
.cuenta-form { display: grid; gap: 16px; }
.cuenta-form .campo { margin: 0; display: grid; gap: 6px; }
.cuenta-form .campo .ayuda { margin: 0; }
.cuenta-form .boton-principal { width: 100%; }
.cuenta-form .fila-checkbox { display: flex; }
.cuenta-form .fila-checkbox label { display: flex; gap: 10px; cursor: pointer; }
.cuenta-enlaces {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  font-size: 14px; color: var(--m-texto-2);
}
.cuenta-enlaces a { color: var(--m-texto); text-decoration-color: var(--m-trazo); text-underline-offset: 3px; }
.cuenta-dato {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 10px 12px; border: 1px solid var(--m-linea); border-radius: var(--m-radio);
  font-size: 14px; color: var(--m-texto-2);
}
.cuenta-dato b { font-family: var(--m-datos); font-weight: 500; color: var(--m-texto); overflow-wrap: anywhere; }
.cuenta-letra-pequena { font-size: 13px; line-height: 1.5; color: var(--m-texto-2); margin: 0; }
.cuenta-letra-pequena a { color: var(--m-texto); text-decoration-color: var(--m-trazo); }
.cuenta-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Las contraseñas con el mismo aspecto que el resto de campos (marca.css
   solo cubre text, number, search y email). */
input[type=password] {
  width: 100%; box-sizing: border-box;
  background-color: var(--m-fondo);
  border: 1px solid var(--m-control); border-radius: var(--m-radio);
  color: var(--m-texto); font-family: var(--m-letra); font-size: 16px;
  min-height: var(--m-pulsable); padding: 8px 12px; box-shadow: none;
}
html[data-modo="dia"] input[type=password], html[data-modo="dia"] input[type=email] { background-color: #ffffff; }
input[type=password]:hover, input[type=email]:hover { border-color: var(--m-texto-2); }
input[type=password]:focus, input[type=email]:focus { outline: 2px solid var(--m-trazo); outline-offset: 2px; }
.cuenta-form input[type=email], .cuenta-form input[type=text], .cuenta-form textarea { width: 100%; box-sizing: border-box; }

/* Estado de la cuenta (caducada, desactivada, enlace caducado). */
.cuenta-estado {
  display: grid; gap: 14px; padding: 24px;
  background: var(--m-superficie); border: 1px solid var(--m-linea); border-radius: var(--m-radio);
}
.cuenta-estado .rotulo {
  font-family: var(--m-datos); font-weight: 500; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--m-aviso);
}
.cuenta-estado.apagada .rotulo { color: var(--m-texto-2); }
.cuenta-estado p { margin: 0; line-height: 1.55; color: var(--m-texto); }
.cuenta-estado p.suave { color: var(--m-texto-2); font-size: 14px; }

/* Confirmación (solicitud enviada, enlace enviado). */
.cuenta-hecho { border-left: 3px solid var(--m-exito); padding: 4px 0 4px 16px; display: grid; gap: 8px; }
.cuenta-hecho p { margin: 0; line-height: 1.55; }

/* ==========================================================================
   Tanda 2 (27/09/2026) — con sesión: menú de la cuenta, panel de ADMIN,
   feedback, Mi cuenta y espectador. PROPUESTA NUEVA.
   ========================================================================== */

/* Cabecera con sesión: «Feedback» y el botón de la cuenta con su menú. */
.barra-cuenta { position: relative; display: flex; align-items: center; gap: 4px; }
.barra-cuenta .bc-feedback {
  display: inline-flex; align-items: center; min-height: var(--m-pulsable); padding: 0 10px;
  font-size: 14px; font-weight: 600; color: var(--m-texto-2); text-decoration: none;
}
.barra-cuenta .bc-feedback:hover { color: var(--m-texto); text-decoration: underline; text-underline-offset: 6px; }
.bc-boton { display: inline-flex; align-items: center; gap: 8px; min-height: var(--m-pulsable); padding: 0 10px 0 12px; }
.bc-boton .bc-apodo { font-family: var(--m-datos); font-weight: 500; font-size: 13px; }
.bc-boton .bc-rol {
  font-family: var(--m-datos); font-size: 11px; color: var(--m-acento-texto); background: var(--m-aviso);
  border-radius: 9px; min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; box-sizing: border-box;
}
.bc-boton .bc-apodo { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-boton .bc-flecha { width: 10px; height: 10px; }
.bc-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px;
  background: var(--m-superficie); border: 1px solid var(--m-control); border-radius: var(--m-radio);
  display: none; padding: 6px 0;
}
.barra-cuenta.abierto .bc-menu { display: block; }
.bc-menu .bc-quien { padding: 8px 14px 10px; border-bottom: 1px solid var(--m-linea); margin-bottom: 6px; font-size: 13px; color: var(--m-texto-2); }
.bc-menu .bc-quien b { display: block; font-family: var(--m-datos); font-weight: 500; color: var(--m-texto); font-size: 14px; }
.bc-menu a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: var(--m-pulsable); padding: 0 14px; font-size: 14px; color: var(--m-texto); text-decoration: none;
}
.bc-menu a:hover { background: var(--m-elevada); }
.bc-menu a .bc-num { font-family: var(--m-datos); font-size: 12px; color: var(--m-aviso); }
.bc-menu hr { border: 0; border-top: 1px solid var(--m-linea); margin: 6px 0; }
.barra nav a.nav-cuenta { display: none; }
@media (max-width: 1100px) {
  .barra-cuenta { display: none; }
  .barra.menu-abierto nav a.nav-cuenta { display: flex; }
  .nav-cuenta-sep { border-top: 1px solid var(--m-linea); margin-top: 6px; padding-top: 6px; }
}

/* Chips de estado (de cuenta, de solicitud y de feedback). */
.estado:is(.ok, .aviso, .mal, .apagado) {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--m-datos); font-size: 12px;
  letter-spacing: .06em; border: 1px solid var(--m-control); border-radius: var(--m-radio);
  padding: 2px 8px; color: var(--m-texto); white-space: nowrap;
}
.estado:is(.ok, .aviso, .mal, .apagado)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado.ok { color: var(--m-exito); border-color: var(--m-exito); }
.estado.aviso { color: var(--m-aviso); border-color: var(--m-aviso); }
.estado.mal { color: var(--m-error); border-color: var(--m-error); }
.estado.apagado { color: var(--m-texto-2); }

/* Panel de ADMIN */
.admin-marco { max-width: var(--ancho-maximo); margin: 0 auto; padding: clamp(22px, 3vw, 40px) 24px 56px; display: grid; gap: 20px; }
.admin-marco .titulo-pagina, .admin-marco .subtitulo-pagina { margin: 0; }
.admin-resumen { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--m-texto-2); }
.admin-resumen b { font-family: var(--m-datos); font-weight: 500; color: var(--m-texto); font-size: 16px; margin-right: 4px; }
.admin-marco .pestanas { overflow-x: auto; }
.solicitudes { display: grid; gap: 14px; }
.solicitud { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: start; }
.solicitud .s-quien { display: grid; gap: 4px; }
.solicitud .s-nombre { font-family: var(--m-titulos); font-weight: 700; font-size: 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.solicitud .s-datos { font-family: var(--m-datos); font-size: 13px; color: var(--m-texto-2); }
.solicitud .s-mensaje { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--m-texto); max-width: 60ch; }
.solicitud .s-acciones { display: grid; gap: 10px; min-width: 260px; }
.solicitud .s-acciones label { font-size: 13px; font-weight: 600; }
.solicitud .s-acciones .s-fila { display: flex; gap: 8px; }
.solicitud .s-acciones .s-fila > * { flex: 1; }
.solicitud .s-acciones input[type=number] { width: 100%; box-sizing: border-box; }
.boton-peligro { color: var(--m-error); border-color: var(--m-error); }
.boton-peligro:hover { color: var(--m-error); border-color: var(--m-error); background: transparent; }
.admin-marco .tabla-datos { overflow-x: auto; }
.admin-marco .tabla-datos td.num, .admin-marco .tabla-datos td.fecha { font-family: var(--m-datos); font-size: 13px; white-space: nowrap; }
.admin-marco .tabla-datos td .apodo { font-family: var(--m-datos); font-weight: 500; }
.admin-marco .tabla-datos td .suave { color: var(--m-texto-2); font-size: 13px; }
.admin-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.admin-filtros select { min-width: 160px; }
.admin-dos { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
.feedback-lista { display: grid; gap: 14px; }
.fb-item { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 16px 24px; }
.fb-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fb-meta { font-family: var(--m-datos); font-size: 12.5px; color: var(--m-texto-2); }
.fb-texto { margin: 8px 0 0; line-height: 1.55; max-width: 70ch; }
.fb-captura {
  aspect-ratio: 16 / 10; width: 100%; border: 1px dashed var(--m-control); border-radius: var(--m-radio);
  display: grid; place-items: center; font-family: var(--m-datos); font-size: 12px; color: var(--m-texto-2);
  background: repeating-linear-gradient(135deg, transparent 0 10px, var(--m-cuadricula) 10px 20px);
}
.fb-lado { display: grid; gap: 8px; align-content: start; }
.fb-lado select, .fb-lado textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 860px) {
  .solicitud, .fb-item, .admin-dos { grid-template-columns: minmax(0, 1fr); }
  .solicitud .s-acciones { min-width: 0; }
}

/* Formulario de feedback: tipo como botones de radio grandes. */
.opciones-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones-radio label {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--m-pulsable); padding: 0 14px;
  border: 1px solid var(--m-control); border-radius: var(--m-radio); font-size: 14px; cursor: pointer;
}
.opciones-radio label:has(input:checked) { border-color: var(--m-texto); background: var(--m-elevada); font-weight: 600; }
.subir-captura {
  display: grid; gap: 6px; padding: 14px; border: 1px dashed var(--m-control); border-radius: var(--m-radio);
  font-size: 14px; color: var(--m-texto-2);
}
.subir-captura input[type=file] { font-size: 14px; color: var(--m-texto); }

/* Mi cuenta */
.cuenta-ancha { max-width: 640px; }
.zona-peligro { border-color: var(--m-error); }
.zona-peligro .seccion-titulo { color: var(--m-error); }
.cuenta-col .seccion { display: grid; gap: 16px; }
.cuenta-col .seccion .seccion-titulo { margin: 0; }

/* Espectador sin cuenta */
.banda-espectador {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  max-width: var(--ancho-maximo); margin: 16px auto 0; padding: 12px 16px; box-sizing: border-box;
  border: 1px solid var(--m-trazo); border-radius: var(--m-radio); background: var(--m-superficie);
}
.banda-espectador p { margin: 0; font-size: 14px; line-height: 1.5; }
.banda-espectador p b { font-family: var(--m-datos); font-weight: 500; }
.barra-espectador { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--m-texto-2); }
.barra-espectador .codigo { font-family: var(--m-datos); color: var(--m-texto); letter-spacing: .08em; }

.bc-boton .bc-icono { width: 18px; height: 18px; flex: none; }
/* Con sesión la cabecera lleva un botón más: se aprieta un poco el hueco y,
   entre 1101 y 1300 px, el botón de la cuenta queda solo con el icono (el
   apodo sale al abrir el menú). */
@media (min-width: 1101px) {
  .barra-interior:has(.barra-cuenta) { gap: 18px; }
}
@media (min-width: 1101px) and (max-width: 1300px) {
  .bc-boton .bc-apodo { display: none; }
}
@media (min-width: 1101px) and (max-width: 1180px) {
  .barra-interior:has(.barra-cuenta) { gap: 14px; }
  .barra-interior:has(.barra-cuenta) nav a { padding-left: 6px; padding-right: 6px; }
}
@media (min-width: 1101px) and (max-width: 1140px) {
  .barra-interior:has(.barra-cuenta) .bi-icono { display: none; }
}

/* Paquete F: el desplegable del botón ⋮ de cada fila de Usuarios. Es un
   <details> (se abre y se cierra sin JavaScript); dentro, las mismas acciones
   de siempre: alargar, desactivar o reactivar, y cambiar el rol. */
.admin-acciones { position: relative; display: inline-block; }
.admin-acciones > summary { list-style: none; cursor: pointer; }
.admin-acciones > summary::-webkit-details-marker { display: none; }
.admin-acciones-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 260px;
  display: grid; gap: 10px; padding: 14px;
  background: var(--m-superficie); border: 1px solid var(--m-control); border-radius: var(--m-radio);
}
.admin-acciones-menu .s-fila { display: flex; gap: 8px; }
.admin-acciones-menu .s-fila > * { flex: 1; }
.admin-acciones-menu label { font-size: 13px; font-weight: 600; }
.admin-acciones-menu input[type=number] { width: 100%; box-sizing: border-box; }
/* «Salir» del menú de la cuenta: un enlace que envía un formulario oculto
   (cerrar la sesión cambia algo, así que va por POST y con su código). */
.form-salir { display: none; }
/* La tabla de Usuarios recorta lo que se sale de ella (para poder deslizarla
   en el móvil); mientras un menú ⋮ está abierto, se deja ver entero. */
.admin-marco .tabla-datos:has(.admin-acciones[open]) { overflow: visible; }