/* ============================================================
   Rinri · hoja única de estilos
   Tokens de marca copiados de pyd-comunicacion-pwa (ciruela #611443,
   neutros desviados hacia el ciruela, sombras teñidas). Lo propio de
   esta app: el ámbar «en directo» y los colores de hablante de la cinta.
   ============================================================ */
:root {
  --primary: #611443;
  --primary-dark: #430d2e;
  --primary-soft: #9c5c85;
  --primary-tint: #f4eaf0;
  --on-tint: #430d2e;
  --band: #f4eaf0;
  --warm-band: #fbf1dd;

  --bg: #f2eef0;
  --card: #ffffff;
  --text: #1b1417;
  --muted: #6f6169;
  --border: #e4dae0;
  --input-bg: #ffffff;
  --toast-bg: #1b1417;
  --toast-fg: #ffffff;

  --ok: #2f7d5c;
  --warn: #8a5a00;
  --error: #b3382c;
  --info: #2b6ca8;
  --enlace: #611443;
  --sobre-hablante: #ffffff;
  /* Ámbar «en directo»: solo relleno (punto de grabación, vúmetro), nunca texto. */
  --live: #e8a838;

  /* Hablantes: la cinta y las iniciales de la transcripción. */
  --h0: #611443; --h1: #1f7a72; --h2: #95600f; --h3: #2b6ca8; --h4: #7d4596; --h5: #5b6b2a;

  --fs-xs: 0.74rem;
  --fs-sm: 0.84rem;
  --fs-base: 0.96rem;
  --fs-md: 1.08rem;
  --fs-lg: 1.3rem;
  --fs-xl: 1.7rem;

  --font-marca: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-texto: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-cifras: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 3px rgba(67, 13, 46, 0.09);
  --shadow-2: 0 6px 20px rgba(67, 13, 46, 0.14);
  --shadow-3: 0 14px 40px rgba(67, 13, 46, 0.24);
  --tap: 44px;
  --focus: 0 0 0 3px var(--card), 0 0 0 5px var(--primary-soft);
}

:root[data-theme='dark'] {
  --bg: #161014;
  --card: #21181e;
  --text: #eee6ea;
  --muted: #a9989f;
  --border: #3b2e36;
  --input-bg: #150f13;
  --primary-soft: #b06d97;
  --primary-tint: #2f2029;
  --on-tint: #e8c6dc;
  --band: #2f2029;
  --warm-band: #2a2417;
  --toast-bg: #eee6ea;
  --toast-fg: #1b1417;
  --ok: #57b489;
  --warn: #d9a441;
  --error: #e0705f;
  --info: #6ba4dd;
  --enlace: #e2a9cc;
  --sobre-hablante: #1b1417;
  --h0: #c56a9f; --h1: #4fb3a8; --h2: #d9a441; --h3: #6ba4dd; --h4: #b48ad0; --h5: #9db35a;
}

@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+1E00-1EFF; }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+1E00-1EFF; }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+1E00-1EFF; }

* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: var(--fs-base)/1.5 var(--font-texto); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-marca); font-weight: 600; line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
a { color: var(--enlace); }
.oculto, [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
.cifras { font-family: var(--font-cifras); font-variant-numeric: tabular-nums; }
.tenue { color: var(--muted); }

/* --- Barra superior --- */
.barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--primary); color: #fff;
}
.barra .marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 600 var(--fs-md)/1 var(--font-marca); }
.barra .marca img { width: 30px; height: 30px; border-radius: 8px; }
.barra .marca small { font: 400 var(--fs-xs)/1 var(--font-texto); opacity: 0.8; display: block; margin-top: 3px; }
.barra .hueco { flex: 1; }
.barra .boton-icono { color: #fff; }
.barra .boton-icono:hover { background: rgba(255, 255, 255, 0.12); }
.red-caida { background: var(--warm-band); color: var(--text); padding: 6px 16px; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }

main { width: 100%; max-width: 920px; margin: 0 auto; padding: 16px 16px 120px; }

/* --- Botones --- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap);
  padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer;
  font: 600 var(--fs-base)/1 var(--font-marca); text-decoration: none; transition: background 0.15s, transform 0.1s;
  background: var(--primary); color: #fff;
}
.boton:hover { background: var(--primary-dark); }
.boton:active { transform: scale(0.98); }
.boton:disabled { opacity: 0.5; cursor: not-allowed; }
.boton.secundario { background: var(--card); color: var(--primary); border-color: var(--border); }
:root[data-theme='dark'] .boton.secundario { color: var(--on-tint); }
.boton.secundario:hover { background: var(--primary-tint); }
.boton.peligro { background: var(--error); }
.boton.texto { background: none; color: var(--primary); padding: 0 10px; }
:root[data-theme='dark'] .boton.texto { color: var(--primary-soft); }
.boton.grande { min-height: 56px; font-size: var(--fs-md); padding: 0 26px; }
.boton.ancho { width: 100%; }
.boton-icono {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%;
  background: none; color: inherit; cursor: pointer;
}
.boton-icono svg, .boton svg { width: 20px; height: 20px; flex: none; }
.fila-botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* --- Formularios --- */
.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo > span { font-size: var(--fs-sm); font-weight: 600; }
.campo small { color: var(--muted); font-size: var(--fs-xs); }
/* Todos los tipos de texto, no solo `text`: el correo del alta de usuarios se
   quedaba con el tamaño por defecto del navegador (diminuto) por no estar aquí. */
input[type='text'], input[type='search'], input[type='email'], input[type='password'],
input[type='tel'], input[type='url'], input[type='number'],
input[type='date'], input[type='time'], input[type='datetime-local'],
select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font: inherit;
}
textarea { min-height: 90px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--primary-soft); }
.rejilla-2 { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .rejilla-2 { grid-template-columns: 1fr 1fr; } }
.interruptor { display: flex; gap: 12px; align-items: flex-start; padding: 12px; margin-bottom: 16px; border-radius: var(--radius-md); background: var(--band); cursor: pointer; }
.interruptor input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--primary); flex: none; }
.interruptor b { display: block; }
.interruptor small { color: var(--muted); }

/* --- Tarjetas y avisos --- */
.tarjeta { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-1); margin-bottom: 14px; overflow-wrap: anywhere; }
.aviso { border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 14px; border-left: 4px solid var(--warn); background: var(--warm-band); font-size: var(--fs-sm); }
.aviso.info { border-left-color: var(--info); background: var(--band); }
.aviso.error { border-left-color: var(--error); }
.aviso b { display: block; margin-bottom: 2px; }
.vacio { text-align: center; padding: 40px 16px; color: var(--muted); }
.vacio h2 { color: var(--text); }

/* --- Chips de estado --- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; background: var(--primary-tint); color: var(--on-tint); white-space: nowrap;
}
.chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.lista { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.chip.error { color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }
.chip.procesando, .chip.en_cola, .chip.subiendo { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); }
.chip.procesando::before, .chip.subiendo::before { animation: latido 1.2s ease-in-out infinite; }
.chip.pendiente_local { color: var(--warn); background: var(--warm-band); }
.chip.confidencial { color: var(--on-tint); }
.chip.confidencial::before { display: none; }
@keyframes latido { 50% { opacity: 0.25; } }

/* --- Lista de reuniones --- */
.cabecera-lista { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 8px 0 14px; }
.cabecera-lista h1 { margin: 0; }
.buscador { position: relative; margin-bottom: 16px; }
.buscador svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--muted); }
.buscador input { padding-left: 38px; }
.reuniones { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.reunion {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-1); text-decoration: none; color: var(--text); border: 1px solid transparent;
}
.reunion:hover { border-color: var(--border); box-shadow: var(--shadow-2); }
.reunion h3 { margin: 0; font-size: var(--fs-md); grid-column: 1; }
.reunion .chip { grid-column: 2; grid-row: 1; align-self: start; }
.reunion .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-sm); color: var(--muted); }
.reunion .fragmento-busqueda { grid-column: 1 / -1; margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); font-style: italic; }
.etiquetas-lista { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
li > .etiquetas-lista { margin: 4px 2px 0; }
.chip.etiqueta { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-soft); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-sm); cursor: pointer; }
button.chip.etiqueta:hover { background: var(--primary); color: #fff; }
.quitar-etiqueta { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 0.9em; line-height: 1; padding: 0 0 0 2px; }
.locales { display: grid; gap: 8px; margin-bottom: 18px; }
.local { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--card); border: 1px dashed var(--primary-soft); }
.local .fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.progreso { height: 6px; border-radius: 3px; background: var(--band); overflow: hidden; }
.progreso > i { display: block; height: 100%; background: var(--primary); width: 0; transition: width 0.3s; }
.proximamente { opacity: 0.85; border: 1px dashed var(--border); background: transparent; box-shadow: none; }
.proximamente h2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Botones flotantes de acción principal (pulgar) */
.acciones-fijas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; gap: 10px; justify-content: center;
  padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}
.acciones-fijas .boton { flex: 1 1 0; min-width: 0; max-width: 280px; box-shadow: var(--shadow-2); }
.punto-rec { width: 12px; height: 12px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }

/* --- Grabación (la «cinta») --- */
.estudio { display: grid; gap: 16px; justify-items: center; text-align: center; padding-top: 8px; }
.estudio .titulo-grab { font: 600 var(--fs-md)/1.3 var(--font-marca); color: var(--muted); margin: 0; }
.cronometro { font: 700 clamp(3rem, 15vw, 5.2rem)/1 var(--font-marca); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin: 0; }
.en-directo { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.en-directo i { width: 10px; height: 10px; border-radius: 50%; background: var(--live); animation: latido 1.2s ease-in-out infinite; }
.en-directo.pausa i { animation: none; background: var(--muted); }
.cinta { position: relative; width: 100%; height: 120px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-1); overflow: hidden; }
.cinta canvas { width: 100%; height: 100%; display: block; }
.estudio .aviso { text-align: left; width: 100%; }
.marcas-vivas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 28px; }
.marcas-vivas .chip::before { display: none; }
.controles-grab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; width: 100%; max-width: 420px; }
.boton-redondo {
  width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text);
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-1); justify-self: center;
}
.boton-redondo svg { width: 26px; height: 26px; }
.boton-parar { width: 84px; height: 84px; background: var(--primary); color: #fff; border: 0; box-shadow: var(--shadow-2); }
.boton-parar svg { width: 30px; height: 30px; }
.marcadores-grab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 480px; }
.marcadores-grab .boton { padding: 0 8px; font-size: var(--fs-sm); }

/* --- Diálogos --- */
dialog {
  border: 0; border-radius: var(--radius); padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px);
  background: var(--card); color: var(--text); box-shadow: var(--shadow-3);
}
dialog::backdrop { background: rgba(27, 20, 23, 0.55); }
dialog .dentro { padding: 20px; overflow: auto; max-height: calc(100vh - 32px); }
.texto-consentimiento { background: var(--band); border-radius: var(--radius-md); padding: 12px 14px; font-size: var(--fs-sm); margin: 8px 0 12px; white-space: pre-wrap; }
.metodos { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 14px; }
.metodos legend { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; padding: 0; }
.metodos label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); cursor: pointer; min-height: var(--tap); }
.metodos label:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); color: var(--on-tint); }
.metodos input { accent-color: var(--primary); }

/* --- Toast --- */
.toasts { position: fixed; left: 50%; translate: -50% 0; bottom: 90px; z-index: 50; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); }
.toast { background: var(--toast-bg); color: var(--toast-fg); padding: 12px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-3); font-size: var(--fs-sm); animation: entra 0.2s ease-out; }
.toast.error { border-left: 4px solid var(--error); }
@keyframes entra { from { opacity: 0; translate: 0 8px; } }

/* --- Detalle --- */
.cabecera-detalle { display: grid; gap: 6px; margin-bottom: 12px; }
.cabecera-detalle .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-sm); color: var(--muted); align-items: center; }
.titulo-editable { display: flex; gap: 6px; align-items: flex-start; }
.titulo-editable h1 { margin: 0; flex: 1; }
.pasos { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.pasos li { display: flex; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.pasos .marca-paso { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; border: 2px solid var(--border); }
.pasos .hecho .marca-paso { background: var(--ok); border-color: var(--ok); color: #fff; }
.pasos .error .marca-paso { background: var(--error); border-color: var(--error); color: #fff; }
.pasos .omitido { color: var(--muted); }
.marcadores-lista img { display: block; margin-top: 6px; max-width: 100%; max-height: 220px; border-radius: var(--radius-sm); }
.pasos .en-curso .marca-paso { border-color: var(--info); border-top-color: transparent; animation: gira 0.9s linear infinite; }
@keyframes gira { to { rotate: 360deg; } }

.reproductor { position: sticky; top: 58px; z-index: 10; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 12px; margin-bottom: 14px; display: grid; gap: 10px; }
.reproductor audio { width: 100%; height: 40px; }
.cinta-hablantes { position: relative; height: 28px; border-radius: 6px; background: var(--band); overflow: hidden; cursor: pointer; }
.cinta-hablantes span { position: absolute; top: 0; bottom: 0; opacity: 0.85; }
.cinta-hablantes .marca-cinta { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: 0.5; }
.cinta-hablantes .cabezal { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--text); border-radius: 2px; pointer-events: none; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: var(--fs-xs); color: var(--muted); align-items: center; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

.pestanas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.pestanas button {
  flex: none; min-height: var(--tap); padding: 0 14px; border: 0; background: none; color: var(--muted); cursor: pointer;
  font: 600 var(--fs-sm)/1 var(--font-marca); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.pestanas button[aria-selected='true'] { color: var(--primary); border-bottom-color: var(--primary); }
:root[data-theme='dark'] .pestanas button[aria-selected='true'] { color: var(--on-tint); border-bottom-color: var(--primary-soft); }

.transcripcion { display: grid; gap: 2px; }
.segmento { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 8px; border-radius: var(--radius-md); cursor: pointer; border-left: 3px solid transparent; }
.segmento:hover { background: var(--band); }
.segmento.actual { background: var(--primary-tint); border-left-color: var(--primary); }
.inicial { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--sobre-hablante); font: 600 var(--fs-sm)/1 var(--font-marca); }
.segmento .cab { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); }
.segmento .cab b { font-family: var(--font-marca); font-weight: 600; }
.segmento .cab time { color: var(--muted); font-size: var(--fs-xs); }
.segmento p { margin: 2px 0 0; }
.hablantes-editor { display: grid; gap: 8px; }
.hablantes-editor label { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; }

.prosa { line-height: 1.65; }
.prosa h1 { font-size: var(--fs-lg); } .prosa h2 { font-size: var(--fs-md); margin-top: 1.2em; } .prosa h3 { font-size: var(--fs-base); margin-top: 1em; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li { margin: 3px 0; }
.prosa blockquote { margin: 0.8em 0; padding: 4px 14px; border-left: 3px solid var(--primary-soft); color: var(--muted); }
.prosa code { font-family: var(--font-cifras); font-size: 0.9em; background: var(--band); padding: 1px 5px; border-radius: 4px; }
.prosa table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; font-size: var(--fs-sm); }
.prosa th, .prosa td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.prosa th { background: var(--band); }
.prosa hr { border: 0; border-top: 1px solid var(--border); margin: 1.2em 0; }

.tareas { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tareas li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--band); }
.tareas small { color: var(--muted); }
.lista-temas { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.mapa { width: 100%; height: 60vh; min-height: 360px; border-radius: var(--radius); background: var(--card); }
.mapa svg { width: 100%; height: 100%; }

.chat { display: grid; gap: 10px; margin-bottom: 12px; }
.burbuja { padding: 10px 14px; border-radius: var(--radius); max-width: 92%; }
.burbuja.yo { justify-self: end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.burbuja.ia { justify-self: start; background: var(--band); border-bottom-left-radius: 4px; }
.citas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cita { border: 1px solid var(--primary-soft); background: var(--card); color: var(--text); border-radius: var(--radius-pill); padding: 4px 10px; cursor: pointer; font: var(--fs-xs) var(--font-cifras); min-height: 32px; }
.form-pregunta { display: flex; gap: 8px; }
.form-pregunta input, .form-pregunta select { flex: 1; min-width: 0; }
.form-pregunta .boton { flex: none; }
.boton { white-space: nowrap; }

.marcadores-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.marcadores-lista button { display: grid; grid-template-columns: 64px 1fr; gap: 10px; width: 100%; text-align: left; padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; font: inherit; }
.exportar { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.exportar a { display: grid; gap: 2px; padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card); color: var(--text); text-decoration: none; }
.exportar a b { font-family: var(--font-marca); }
.exportar a small { color: var(--muted); }
.exportar a:hover { border-color: var(--primary-soft); }

/* --- Entrada --- */
/* ============================================================
   Portada / entrada: escena morada «image-forward». Fotos en duotono
   (filtro SVG #duotono-morado del index.html) bajo un velo oscuro, con
   el formulario encima. Mismo tratamiento en claro y en oscuro.
   ============================================================ */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.entrada {
  position: fixed; inset: 0; z-index: 40;
  overflow-y: auto; overscroll-behavior: contain;
  display: grid;
  /* `safe` evita que una tarjeta más alta que la pantalla se corte por arriba. */
  justify-items: center; align-content: safe center;
  background: #1a0713; /* base morada muy oscura (y respaldo si falla la foto) */
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
}
/* Capa de fotos */
.portada-slider { position: absolute; inset: 0; z-index: 0; }
.portada-slider .slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.2s ease-in-out;
  background: radial-gradient(120% 120% at 50% 30%, #7a2057 0%, #4a0f33 46%, #1a0713 100%);
}
.portada-slider .slide.activa { opacity: 1; }
.portada-slider .slide picture { position: absolute; inset: 0; display: block; }
.portada-slider .slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  filter: url(#duotono-morado) contrast(1.03);
  display: block;
}
/* Velo para que el texto y el formulario se lean siempre */
.portada-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(150% 95% at 50% 18%, rgba(26,7,19,0.10), rgba(26,7,19,0.58) 58%, rgba(26,7,19,0.92) 100%),
    linear-gradient(180deg, rgba(26,7,19,0.45) 0%, rgba(26,7,19,0.12) 34%, rgba(26,7,19,0.80) 100%);
}
/* Mismo tratamiento que la portada de la PWA de comunicación: el contenido va
   DIRECTO sobre la foto, sin tarjeta de cristal. Antes había un panel traslúcido
   con desenfoque y, justo en la zona central —la única que se ve en la PWA—, el
   desenfoque convertía la foto en una mancha plana. La legibilidad la dan el
   velo (.portada-scrim), la sombra del texto y el relleno propio de los campos. */
.entrada .tarjeta {
  position: relative; z-index: 2;
  width: 100%; max-width: 420px; text-align: center;
  padding: 30px 24px;
  /* Halo degradado en vez de panel: oscurece justo detrás del texto y se
     desvanece hacia los lados, así que la foto se sigue viendo (un velo plano o
     un desenfoque la borraban). Sobre fotos claras —una pared de carteles— sin
     esto el texto no se lee. */
  background: radial-gradient(115% 70% at 50% 50%, rgba(26,7,19,0.62) 0%, rgba(26,7,19,0.34) 55%, rgba(26,7,19,0) 100%);
  border: 0;
  box-shadow: none;
  text-shadow: 0 1px 12px rgba(26,7,19,0.95), 0 2px 26px rgba(26,7,19,0.75);
  color: #fff;
  animation: subeEntrada 0.6s cubic-bezier(0.2,0.7,0.2,1) both;
}
@keyframes subeEntrada { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.entrada .tarjeta h1 { color: #fff; margin: 0; font-size: clamp(1.9rem, 7vw, 2.4rem); letter-spacing: .3px; }
.entrada .tarjeta .tenue { color: rgba(255,255,255,0.95); }
.entrada img { width: 76px; height: 76px; border-radius: 20px; margin-bottom: 10px; box-shadow: 0 10px 26px rgba(0,0,0,0.45); }
.entrada details { margin-top: 20px; text-align: left; }
.entrada summary { cursor: pointer; color: rgba(255,255,255,0.8); font-size: var(--fs-sm); }
/* Ecualizador animado bajo el logo: la app es de audio, y lo dice. */
.logo-eq { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 26px; margin: 2px 0 10px; }
.logo-eq .eq-bar {
  width: 5px; height: 100%; border-radius: 3px; background: rgba(255,255,255,0.92);
  transform: scaleY(0.4); transform-origin: bottom center;
  animation: eq 1s ease-in-out infinite;
}
.logo-eq .eq-bar:nth-child(1) { animation-duration: 1.1s;  animation-delay: -0.20s; }
.logo-eq .eq-bar:nth-child(2) { animation-duration: 0.8s;  animation-delay: -0.50s; }
.logo-eq .eq-bar:nth-child(3) { animation-duration: 1.4s;  animation-delay: -0.10s; }
.logo-eq .eq-bar:nth-child(4) { animation-duration: 0.7s;  animation-delay: -0.35s; }
.logo-eq .eq-bar:nth-child(5) { animation-duration: 1.2s;  animation-delay: -0.60s; }
.logo-eq .eq-bar:nth-child(6) { animation-duration: 0.95s; animation-delay: -0.25s; }
.logo-eq .eq-bar:nth-child(7) { animation-duration: 1.05s; animation-delay: -0.45s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.28); } 50% { transform: scaleY(1); } }
/* Campos y botón sobre fondo oscuro: grandes y con presencia, que se usan
   con el móvil en la mano y a veces con poca luz. */
.entrada .campo { gap: 7px; }
.entrada .campo span {
  color: rgba(255,255,255,0.92);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .2px;
}
.entrada .campo input {
  /* Sin tarjeta detrás, el relleno propio del campo es lo que lo separa de la
     foto: un desenfoque corto (como los botones de comunicación) basta. */
  background: rgba(26,7,19,0.42); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 14px;
  padding: 15px 16px;
  font-size: 1.05rem;       /* >=16px: iOS no hace zoom al enfocar */
  min-height: 54px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.entrada .campo input::placeholder { color: rgba(255,255,255,0.55); }
.entrada .campo input:hover { border-color: rgba(255,255,255,0.6); }
.entrada .campo input:focus {
  outline: none;
  border-color: #fff; background: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}
/* Autorrelleno de Safari/Chrome: evita el amarillo y el texto negro ilegible. */
.entrada .campo input:-webkit-autofill,
.entrada .campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #4a0f33 inset;
  caret-color: #fff;
}
.entrada .boton.grande {
  background: #fff; color: var(--primary);
  min-height: 56px; font-size: 1.08rem; border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
}
.entrada .boton.grande:hover { background: #f4e9f0; }
/* Punto de grabación del logo: tapa el punto ámbar del icono con uno rojo que
   late, como el testigo de una grabadora.
   Las medidas NO son a ojo: en icon-192.png el punto ámbar ocupa de 140 a 166 px
   en los dos ejes, o sea centro al 79,7 % y diámetro 14 %. El rojo se pone ahí
   con un pelín de margen (16 %) para tapar el dentado del borde. Antes era del
   21 % y se salía por la esquina redondeada: ese era el «punto desplazado». */
.marca-logo { position: relative; display: inline-flex; line-height: 0; }
.marca-logo::after {
  content: ''; position: absolute;
  left: 71.7%; top: 71.7%; width: 16%; height: 16%;
  border-radius: 50%;
  background: #e5383b;
  box-shadow: 0 0 6px rgba(229,56,59,0.9);
  animation: testigo 1.5s ease-in-out infinite;
}
/* El latido NUNCA baja la opacidad: si lo hiciera asomaría el punto ámbar del
   icono de debajo y se vería «naranja y rojo» a la vez. Late cambiando a un rojo
   oscuro y apagando el resplandor, siempre opaco. */
@keyframes testigo {
  0%, 100% { background-color: #e5383b; box-shadow: 0 0 8px rgba(229,56,59,0.95); }
  50% { background-color: #7d1c1f; box-shadow: 0 0 2px rgba(229,56,59,0.35); }
}
@media (prefers-reduced-motion: reduce) { .marca-logo::after { animation: none; } }

/* Esqueletos de carga: anticipan la forma del texto que va a aparecer, en vez
   de una ruleta que no dice nada. El brillo se detiene con «reducir movimiento». */
.esqueleto { display: grid; gap: 10px; }
.esq-barra {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--border) 25%, var(--band) 37%, var(--border) 63%);
  background-size: 400% 100%;
  animation: brillo 1.5s ease-in-out infinite;
}
.esq-titulo { height: 20px; width: 55%; margin-bottom: 4px; }
@keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .esq-barra { animation: none; } }

/* ============================================================
   Microinteracciones de los iconos. Solo las que SIGNIFICAN algo:
   confirman la acción del botón (enviar sale, reintentar gira, la papelera
   se sacude) o indican estado (el micro late mientras graba). Nada decorativo.
   Se anulan enteras con «reducir movimiento».
   ============================================================ */
[data-icono] { transition: transform .18s cubic-bezier(.2,.7,.2,1); }
/* La acción «sale» del botón */
.boton:hover > [data-icono="enviar"] { transform: translate(2px, -2px); }
.boton:hover > [data-icono="descargar"] { transform: translateY(2px); }
.boton:hover > [data-icono="subir"] { transform: translateY(-2px); }
.boton:hover > [data-icono="volver"] { transform: translateX(-3px); }
.boton:hover > [data-icono="salir"] { transform: translateX(2px); }
/* Reintentar: gira media vuelta, que es lo que hace */
.boton:hover > [data-icono="reintentar"] { transform: rotate(180deg); }
/* Copiar y bandera: un pequeño salto al pulsar, como acuse de recibo */
.boton:active > [data-icono="copiar"],
.boton:active > [data-icono="bandera"] { transform: scale(.82); }
/* Papelera: se sacude para avisar de que es destructivo */
.boton:hover > [data-icono="basura"] { animation: sacudir .4s ease-in-out; }
@keyframes sacudir {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-9deg); }
  75% { transform: rotate(9deg); }
}
/* Lupa y lápiz: un guiño de escala */
.boton:hover > [data-icono="buscar"],
.boton:hover > [data-icono="lapiz"] { transform: scale(1.12); }
/* El micrófono late mientras se graba: aquí el movimiento SÍ informa. */
.grabando [data-icono="microfono"],
.boton.grabando > [data-icono="microfono"] { animation: latido 1.6s ease-in-out infinite; }
@keyframes latido {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.14); opacity: .75; }
}
/* Bluetooth parpadea mientras busca la grabadora */
.buscando [data-icono="bluetooth"] { animation: latido 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  [data-icono] { transition: none; }
  .boton:hover > [data-icono],
  .boton:active > [data-icono],
  .grabando [data-icono="microfono"],
  .buscando [data-icono="bluetooth"] { animation: none; transform: none; }
}

.sello-privacidad {
  margin: 2px 0 0; text-align: center;
  font-size: var(--fs-xs); line-height: 1.45;
  color: rgba(255,255,255,0.68);
}
/* Ayuda de instalación dentro de la portada: hay que leerla sobre el morado. */
.entrada .ayuda-instalar { border-top-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.92); }
.entrada .ayuda-instalar .tenue { color: rgba(255,255,255,0.7); }
.entrada .ayuda-instalar em { color: #fff; font-style: normal; font-weight: 600; }
.entrada [role="alert"] { color: #ffb4a8; }
@media (prefers-reduced-motion: reduce) {
  .logo-eq .eq-bar, .entrada .tarjeta { animation: none; }
  .portada-slider .slide { transition: none; }
}
/* Formulario de entrada: etiquetas a la izquierda y botón ancho debajo. */
.entrada-clave { text-align: left; margin-top: 18px; display: grid; gap: 14px; }
.entrada-clave [role="alert"]:empty { display: none; }
.entrada-clave [role="alert"] { color: #b3261e; font-size: var(--fs-sm); margin: 0; }
/* Ayuda para instalar la app (como en la PWA de comunicación). */
.ayuda-instalar { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); text-align: left; font-size: var(--fs-sm); }
.ayuda-instalar p { margin: 0 0 8px; }
.ayuda-titulo { font-weight: 600; }
/* Usuarios: contraseña recién generada y lista de accesos. */
.clave-nueva { border: 2px solid var(--primary); margin-bottom: 20px; }
.clave-generada { font-size: 1.25rem; letter-spacing: .08em; font-weight: 700; user-select: all; }
.campo-clave { margin: 4px 0; }
.lista-usuarios { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-usuarios li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lista-usuarios small { display: block; }
.alta-nextcloud { margin-top: 28px; }

@media (min-width: 760px) {
  main { padding-top: 24px; }
  .acciones-fijas { position: static; background: none; padding: 0; justify-content: flex-start; margin-bottom: 18px; }
  .acciones-fijas .boton { flex: none; }
}

/* --- Grabadora PLAUD --- */
.enlace-grabadora { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; color: var(--text); text-decoration: none; border: 1px solid transparent; }
.enlace-grabadora:hover { border-color: var(--primary-soft); box-shadow: var(--shadow-2); }
.enlace-grabadora b { display: block; font-family: var(--font-marca); }
.enlace-grabadora > svg { width: 18px; height: 18px; color: var(--muted); }
.icono-grabadora { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary); flex: none; }
.icono-grabadora svg { width: 24px; height: 24px; }
.cab-grabadora { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 14px; }
.cab-grabadora h2 { margin: 0; font-size: var(--fs-md); }
.datos-grabadora { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.dato { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: var(--radius-md); background: var(--band); min-width: 0; }
.dato > small:first-child { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dato b { font: 600 var(--fs-md)/1.2 var(--font-marca); font-variant-numeric: tabular-nums; }
.dato small { font-size: var(--fs-xs); }
.medidor { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 25%, transparent); overflow: hidden; }
.medidor i { display: block; height: 100%; background: var(--ok); }
.grabaciones-plaud { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.grabacion-plaud { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-1); cursor: pointer; min-height: var(--tap); }
.grabacion-plaud:has(input:checked) { outline: 2px solid var(--primary-soft); background: var(--primary-tint); }
.grabacion-plaud.hecha { cursor: default; opacity: 0.75; }
.grabacion-plaud input { width: 22px; height: 22px; accent-color: var(--primary); margin: 0; }
.grabacion-plaud .cuerpo { display: grid; gap: 2px; min-width: 0; }
.grabacion-plaud .meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--fs-sm); color: var(--muted); align-items: center; }
.chip.marcada { color: var(--warn); background: var(--warm-band); }
.chip.marcada::before { display: none; }
/* Hablante asignado sin seguridad: se avisa en voz baja (no es un error, es una
   suposición) y la pastilla de la inicial se dibuja punteada para localizarlo. */
.chip.probable { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.chip.probable::before { display: none; }
.inicial.probable { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--muted) 55%, transparent); opacity: .82; }
.grabadoras-vinculadas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.grabadoras-vinculadas li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--band); }
.grabadoras-vinculadas li > div { display: grid; gap: 2px; min-width: 0; }
.sincronizando { border-style: solid; margin-bottom: 14px; }
.cargando-plaud { display: flex; gap: 12px; align-items: center; }
.girando { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: gira 0.9s linear infinite; flex: none; }
.sin-verificar { border: 1px dashed var(--warn); }
@media (max-width: 480px) {
  .datos-grabadora { grid-template-columns: 1fr 1fr; }
  .datos-grabadora .dato:last-child { grid-column: 1 / -1; }
  .grabacion-plaud { grid-template-columns: auto 1fr; }
  .grabacion-plaud > .chip { grid-column: 2; justify-self: start; }
}
@media (max-width: 480px) {
  .cab-grabadora { grid-template-columns: auto 1fr; }
  .cab-grabadora .en-directo { grid-column: 1 / -1; }
}
.cab-seccion { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cab-seccion h2 { margin: 0; }
.fila-nombre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ajustes-grabadora { display: grid; gap: 6px; margin: 0 0 6px; }
.fila-ajuste { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 12px; border-radius: var(--radius-md); background: var(--band); }
.fila-ajuste dt { font-size: var(--fs-sm); color: var(--muted); }
.fila-ajuste dd { margin: 0; display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; font-weight: 600; }
.editor-ajuste { display: inline-flex; gap: 6px; align-items: center; }
.editor-ajuste select { width: auto; min-height: 36px; }
.boton.sin-verificar { border: 1px dashed var(--warn); }
.sin-verificar-bloque { margin-top: 14px; padding: 12px; border: 1px dashed var(--warn); border-radius: var(--radius-md); display: grid; gap: 10px; }
.sin-verificar-bloque h3 { margin: 0; display: flex; gap: 8px; align-items: center; font-size: var(--fs-base); }
.sin-verificar-bloque p { margin: 0; }
.crudo { font: var(--fs-xs)/1.5 var(--font-cifras); background: var(--band); padding: 8px 10px; border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }

/* Dónde se guarda: ruta de Nextcloud y enlace a la carpeta. */
.destino-nube, .ruta-nube { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.destino-nube svg, .ruta-nube svg { width: 18px; height: 18px; flex: none; }
.ruta-nube code { font-size: var(--fs-xs); word-break: break-all; }
.donde-esta .boton { margin-top: 12px; }

/* Logo de la portada: el testigo rojo algo mayor, acorde al tamaño del icono. */
.logo-entrada { margin-bottom: 10px; }
/* En la portada el icono es grande: el resplandor del latido se hace mayor (el
   aro sólido que había antes sobresalía de la esquina redondeada del icono). */
.logo-entrada::after { animation-name: testigo-grande; }
@keyframes testigo-grande {
  0%, 100% { background-color: #e5383b; box-shadow: 0 0 16px rgba(229,56,59,0.95); }
  50% { background-color: #7d1c1f; box-shadow: 0 0 4px rgba(229,56,59,0.4); }
}
/* El margen va en el envoltorio, no en la imagen: si no, el punto se descoloca
   porque el contenedor mide más que el icono. */
.entrada .logo-entrada img { margin-bottom: 0; }

/* Móvil: la foto se ve más (pantalla pequeña, la tarjeta ocupa casi todo) y se
   encuadra al centro para que no queden cabezas cortadas. */
@media (max-width: 560px) {
  .entrada { padding-left: 14px; padding-right: 14px; }
  .entrada .tarjeta { padding: 24px 14px; }
  .portada-slider .slide img { object-position: center center; }
  /* Velo como el de comunicación: claro en la zona central (donde se ve la foto)
     y más cerrado arriba y abajo, que es donde apoya el texto. */
  .portada-scrim {
    background:
      radial-gradient(150% 95% at 50% 20%, rgba(26,7,19,0.10), rgba(26,7,19,0.48) 58%, rgba(26,7,19,0.86) 100%),
      linear-gradient(180deg, rgba(26,7,19,0.42) 0%, rgba(26,7,19,0.08) 36%, rgba(26,7,19,0.76) 100%);
  }
}