/* ==========================================================================
   «Ayúdanos a mejorar» (templates/partials/mejora.php · assets/js/mejora.js · docs/mejoras.md)
   Bloque al final de la página («¿Te ha sido útil?» + botón), botón flotante solo en escritorio
   y panel (<dialog class="hoja">: ventana en escritorio, hoja desde abajo en el móvil).
   Referencias de Mobbin: Uxcel y Confluence (tipos en pastillas), Grok (tipo + texto),
   Givingli y ABY Journal (grabar: contador grande y botón de parar redondo).
   Letra mínima 16 px; tocables de 44 px como mínimo. Sin estilos en línea (CSP).
   ========================================================================== */

/* ---------- Bloque al final de la página ---------- */
.mejora { padding: var(--e-6) 0 var(--seccion); }
.mejora__caja { display: grid; gap: var(--e-4); max-width: 56rem; margin-inline: auto; padding: var(--e-5); border: 1px solid var(--borde); border-radius: var(--r-4); background: linear-gradient(170deg, var(--lila-50), #fff 70%); }
.mejora__util { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); padding-bottom: var(--e-4); border-bottom: 1px solid var(--borde); }
.mejora__pregunta { margin: 0; font-weight: 800; color: var(--tinta); }
.mejora__botones { display: flex; gap: var(--e-2); }
.mejora__voto { min-height: 44px; padding: .45rem 1.1rem; border-radius: 11px; }
.mejora__voto[aria-pressed="true"] { --b-fondo: var(--morado); --b-color: #fff; }
.mejora__voto:disabled { opacity: 1; }
.mejora__voto:disabled:not([aria-pressed="true"]) { opacity: .5; }
.mejora__gracias { flex-basis: 100%; margin: 0; color: var(--tinta-2); }
.mejora__gracias .boton--enlace { font-weight: 700; }
.mejora__avisar { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3) var(--e-4); align-items: start; }
.mejora__texto p { margin: .25rem 0 0; color: var(--tinta-2); }
.mejora__titulo { margin: 0; font-size: var(--t-lg); line-height: 1.3; letter-spacing: -.01em; }
.mejora__abrir { grid-column: 1 / -1; white-space: normal; text-align: left; }
@media (min-width: 48rem) {
  .mejora__avisar { grid-template-columns: auto 1fr auto; align-items: center; }
  .mejora__abrir { grid-column: auto; }
}

/* ---------- Botón flotante (solo pantallas anchas: en el móvil taparía barras fijas y contenido) ---------- */
.mejora-flotante { display: none; }
@media (min-width: 64rem) {
  .mejora-flotante:not([hidden]) { position: fixed; z-index: 45; right: var(--e-5); bottom: var(--e-5); display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .6rem 1.1rem; border: 1.5px solid var(--morado); border-radius: var(--r-redondo); background: #fff; color: var(--morado); box-shadow: var(--s-2, 0 18px 40px -20px rgb(14 3 40 / .45)); font: 700 1rem/1.2 var(--f); text-decoration: none; transition: transform var(--transicion), opacity var(--transicion), background-color var(--transicion); }
  .mejora-flotante:hover { background: var(--lila-50); transform: translateY(-1px); text-decoration: none; }
  .mejora-flotante.is-oculto { opacity: 0; pointer-events: none; transform: translateY(8px); }
}
@media print { .mejora, .mejora-flotante, .mejora-hoja { display: none !important; } }

/* ---------- Panel ---------- */
.mejora-hoja .hoja__cabeza h2 { font-size: 1.35rem; }
.mejora-form { margin: 0; }
.mejora-form__pagina { display: flex; gap: .5rem; align-items: baseline; margin: 0 0 var(--e-4); color: var(--tinta-2); overflow-wrap: anywhere; }
.mejora-form__pagina .icono { flex: none; color: var(--icono); }
.mejora-form__tipos { margin: 0 0 var(--e-4); padding: 0; border: 0; min-width: 0; }
.mejora-form__tipos legend { margin-bottom: var(--e-2); padding: 0; font-weight: 800; color: var(--tinta); }
.mejora-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.mejora-chip { position: relative; display: inline-flex; }
.mejora-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mejora-chip span { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .9rem; border: 1.5px solid var(--borde-campo); border-radius: var(--r-redondo); background: #fff; color: var(--tinta); font-weight: 600; line-height: 1.25; transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion); }
.mejora-chip span .icono { color: var(--icono); }
.mejora-chip:hover span { border-color: #c4b3ec; background: var(--lila-50); }
.mejora-chip input:checked + span { border-color: var(--morado); background: var(--morado); color: #fff; }
.mejora-chip input:checked + span .icono { color: #fff; }
.mejora-chip input:focus-visible + span { outline: 3px solid var(--morado); outline-offset: 2px; }
.mejora-form__campo textarea { min-height: 7rem; }
.mejora-form__opcional { font-weight: 500; color: var(--tinta-2); }
.mejora-form__nota { margin: var(--e-3) 0 0; color: var(--tinta-2); }
.mejora-form__error { margin: var(--e-3) 0 0; padding: .7rem .9rem; border-radius: var(--r-2); background: var(--rojo-fondo); color: var(--rojo-texto); font-weight: 600; }
.mejora-form__cuenta, .mejora-form__hecho { display: grid; justify-items: center; gap: var(--e-3); text-align: center; }
.mejora-form__cuenta[hidden], .mejora-form__hecho[hidden] { display: none; }
.mejora-form__cuenta h3, .mejora-form__hecho h3 { margin: 0; font-size: 1.3rem; }
.mejora-form__cuenta p, .mejora-form__hecho p { margin: 0; max-width: 28rem; color: var(--tinta-2); }
.mejora-form__acciones-cuenta { display: grid; gap: .6rem; width: 100%; max-width: 22rem; }
.mejora-form__acciones-cuenta .boton { width: 100%; }
.mejora-form__acciones-cuenta .boton-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 50px; padding: .6rem 1rem; border: 1px solid #747775; border-radius: var(--r-2); background: #fff; color: #1f1f1f; font: 500 1rem/1.25 Roboto, "Segoe UI", Arial, sans-serif; text-decoration: none; }
.mejora-form__acciones-cuenta .boton-google[hidden] { display: none; }
.mejora-form__acciones-cuenta .boton-google:hover { background: #f8f8f8; box-shadow: 0 1px 3px rgb(60 64 67 / .3); }
.boton-google__g { width: 20px; height: 20px; flex: none; }
.mejora-form__volver { min-height: 44px; }
.mejora-form__check { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--verde-fondo); color: var(--verde-texto); }
.mejora-form__check .icono { width: 2rem; height: 2rem; stroke-width: 2.4; }
.mejora-form__hecho h3:focus { outline: none; }
.mejora-hoja .hoja__pie { flex-wrap: nowrap; }
.mejora-hoja .hoja__pie .boton { min-height: 48px; }
.mejora-hoja .hoja__pie [data-mejora-enviar] { flex: 1 1 auto; max-width: 14rem; }
.mejora-hoja .hoja__pie [hidden] { display: none; }
@media (max-width: 39.99rem) {
  .mejora-hoja .hoja__cuerpo { padding-inline: 1rem; }
  .mejora-hoja .hoja__pie { padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); }
  .mejora-hoja .hoja__pie [data-mejora-enviar] { max-width: none; }
}
/* Móvil en horizontal: poca altura, que el panel ocupe lo que hay y se pueda desplazar */
@media (max-height: 30rem) {
  dialog.mejora-hoja { max-height: 96vh; }
  .mejora-form__campo textarea { min-height: 4.5rem; }
}

/* ---------- Voz (assets/js/mejora-voz.js): botón grande, contador visible, parar = enviar ---------- */
.mejora-voz { margin: 0 0 var(--e-4); padding: var(--e-3); border: 1.5px dashed var(--borde-campo); border-radius: var(--r-3); background: var(--lila-50); }
.mejora-voz[hidden] { display: none; }
.mejora-voz [hidden] { display: none !important; }
.mejora-voz__boton { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 64px; padding: .5rem; border: 0; border-radius: var(--r-2); background: transparent; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.mejora-voz__boton:hover .mejora-voz__circulo { background: var(--morado-hover); transform: scale(1.04); }
.mejora-voz__boton:focus-visible { outline: 3px solid var(--morado); outline-offset: 2px; }
.mejora-voz__boton:disabled { opacity: .6; cursor: wait; }
.mejora-voz__circulo { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--morado); color: #fff; box-shadow: 0 10px 22px -10px rgb(122 18 242 / .9); transition: transform var(--transicion), background-color var(--transicion); }
.mejora-voz__circulo .icono { width: 26px; height: 26px; }
.mejora-voz__boton-texto { display: grid; gap: .1rem; }
.mejora-voz__boton-texto strong { font-size: 1.0625rem; }
.mejora-voz__boton-texto span { color: var(--tinta-2); }
.mejora-voz__ayuda { margin: .5rem 0 0; color: var(--tinta-2); }
.mejora-voz__grabando { display: grid; justify-items: center; gap: .5rem; padding: .4rem 0; text-align: center; }
.mejora-voz__estado { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 800; color: var(--rojo-texto); }
.mejora-voz__punto { width: .8rem; height: .8rem; border-radius: 50%; background: var(--rojo); }
.mejora-voz__tiempo { margin: 0; font: 800 clamp(2.2rem, 1.8rem + 2vw, 2.8rem)/1 var(--f); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--tinta); }
.mejora-voz__max { font-size: 1rem; font-weight: 600; color: var(--tinta-2); letter-spacing: 0; }
.mejora-voz__nivel { display: flex; align-items: center; gap: 5px; height: 36px; }
.mejora-voz__nivel span { width: 6px; height: 100%; border-radius: 3px; background: var(--morado-vivo); transform: scaleY(.15); transform-origin: center; transition: transform 80ms linear; }
.mejora-voz__parar { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-width: 14rem; min-height: 64px; padding: .7rem 1.6rem; border: 0; border-radius: var(--r-redondo); background: var(--rojo); color: #fff; font: 800 1.0625rem/1.2 var(--f); cursor: pointer; box-shadow: 0 12px 26px -12px rgb(192 38 74 / .9); }
.mejora-voz__parar:hover { background: #9b1c3b; }
.mejora-voz__parar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.mejora-voz__parar .icono { width: 24px; height: 24px; fill: currentColor; }
.mejora-voz__descartar { min-height: 44px; color: var(--tinta-2); }
.mejora-voz__enviando { display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 64px; font-weight: 700; }
.mejora-voz__girando { width: 1.4rem; height: 1.4rem; border: 3px solid var(--lila-200); border-top-color: var(--morado); border-radius: 50%; animation: mejora-girar .8s linear infinite; }
.mejora-voz__aviso { margin: .6rem 0 0; padding: .6rem .8rem; border-radius: var(--r-2); background: #fff; border: 1px solid var(--borde); color: var(--tinta); }
@keyframes mejora-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) { .mejora-grabando .mejora-voz__punto { animation: mejora-latir 1.2s ease-in-out infinite; } }
@keyframes mejora-latir { 50% { opacity: .25; } }
@media (max-width: 39.99rem) { .mejora-voz__parar { width: 100%; min-width: 0; } }
/* Mientras graba o sube, solo valen «Parar y enviar» y «Borrar y no enviar» (cerrar el panel también para y envía) */
.mejora-grabando .mejora-hoja .hoja__pie, .mejora-subiendo .mejora-hoja .hoja__pie { display: none; }
.mejora-voz-enlace[hidden] { display: none; }

/* ---------- Administración: /cuenta/admin/mejoras/ (templates/cuentas/admin/mejoras.php) ---------- */
.mj-admin .aviso .icono { flex: none; }
.mj-pagina { margin: 0 0 1rem; padding: 0; overflow: hidden; }
.mj-pagina__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 56px; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.mj-pagina__cabeza::-webkit-details-marker { display: none; }
.mj-pagina[open] > .mj-pagina__cabeza { border-bottom: 1px solid var(--borde); }
.mj-pagina__titulo { display: grid; gap: .1rem; min-width: 0; overflow-wrap: anywhere; }
.mj-pagina__marcas { display: flex; flex-wrap: wrap; gap: .4rem; }
.mj-marca { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: var(--r-redondo); background: var(--lila-100); color: var(--tinta); font-weight: 600; white-space: nowrap; }
.mj-marca--nuevo { background: var(--morado); color: #fff; }
.mj-marca--investigar { background: var(--ambar-fondo); color: var(--ambar-texto); }
.mj-pagina__acciones { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 1rem 0; }
.mj-pagina__acciones form, .mj-aviso__acciones form { margin: 0; }
.mj-pagina > .aviso { margin: .8rem 1rem 0; }
.mj-avisos { display: grid; gap: .6rem; margin: 0; padding: .8rem 1rem 1rem; list-style: none; }
.mj-aviso { padding: .8rem .9rem; border: 1px solid var(--borde); border-radius: var(--r-2); background: #fff; }
.mj-aviso__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.mj-aviso__texto { margin: .5rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.mj-aviso__voz { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 0; color: var(--tinta-2); }
.mj-aviso__fuente { margin: .4rem 0 0; overflow-wrap: anywhere; }
.mj-aviso__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .7rem; }
.mj-aviso__acciones .boton { white-space: normal; }
.mj-estado { padding: .15rem .6rem; border-radius: var(--r-redondo); font-weight: 700; }
.mj-estado--nuevo { background: var(--morado); color: #fff; }
.mj-estado--revisado { background: var(--lila-100); color: var(--etiqueta); }
.mj-estado--resuelto { background: var(--verde-fondo); color: var(--verde-texto); }