/* GrabaYa (25/10/2026): la base visual de docs/rediseno/marca-grabaya.md. Fondo crema, bloques blancos, texto
   grafito y un solo color fuerte, el rojo REC, para el botón principal, grabar y la sección activa (nunca decorativo).
   Sin modo oscuro. El color de cada canal no pinta la interfaz: solo sus marcas pequeñas (la muestra del filtro, la
   inicial sobre su color); los textos van en grafito. */
@font-face{font-family:"Figtree";font-style:normal;font-display:swap;font-weight:300 900;src:url("figtree-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-display:swap;font-weight:300 900;src:url("figtree-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  color-scheme: light;
  /* La marca, con sus nombres. */
  --rojo:#F2541B; --grafito:#1D1E1C; --crema:#F6F1EA; --crema-clara:#FBF7F2; --blanco:#FFFFFF;
  --piedra:#8E8B87; --gris-enlace:#615F5C; --arena:#E5DCCF; --rojo-error:#C62F2F; --ambar:#C98A12;
  --f-revisar:#3E63A8; --f-grabar:#F2541B; --f-editando:#3F8F6B;     /* las fases del tablero, fijas para todos */
  --r-tarjeta:20px; --r-control:16px;                                /* tarjetas; botones y campos */
  /* Los nombres de siempre de la hoja, sobre la marca. El texto secundario va en «gris enlace»: el «piedra» sobre
     crema no llega al contraste mínimo en letra pequeña (3,2:1); el piedra queda para lo que no es texto. */
  --bg:var(--crema); --surface:var(--blanco); --surface2:var(--crema-clara); --line:var(--arena);
  --fg:var(--grafito); --muted:var(--gris-enlace); --faint:var(--arena); --ink:var(--crema-clara); --soft:#4A4846;
  --danger:var(--rojo-error); --verde:var(--f-editando); --ok:var(--f-editando); --amarillo:var(--ambar);
  --primario:var(--rojo); --sobre-primario:#FFFFFF;
  /* Del prototipo (docs/rediseno/prototipo-panel.html): los separadores entre filas, el borde de la barra de abajo y
     las pistas vacías de los medidores. */
  --separador:#F0E9DF; --borde-barra:#DCD2C4; --pista:#EDE5DA; --apagado:#B9B2A8;
  --sombra-barra:0 6px 20px rgba(29,30,28,.10); --velo:rgba(29,30,28,.38);
  /* El ámbar y el verde de la marca no llegan a 4,5:1 como letra pequeña sobre crema o blanco: para texto, un tono
     más oscuro; los de la marca, para barras, puntos y fondos. */
  --ambar-texto:#946410; --verde-texto:#2F7556; --revisar-texto:var(--f-revisar);
  --resalte:#FBE3D6;                                                /* una frase con duda en el guion */
  /* El color de cada canal (--canal) y el de su texto encima salen de su ficha: /panel/marca.css (app/panel/datos.py). */
  --s-guia:var(--fg); --s-guion:var(--fg); --s-dudas:var(--fg); --s-grabar:var(--fg);
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* El modo oscuro (25/10/2026): sigue el ajuste del móvil o del ordenador, sin botón. Los mismos colores de la marca:
   fondo grafito, tarjetas y barra en un grafito algo más claro, texto en crema clara y el rojo REC igual. Los colores
   que se usan como texto o marca, aclarados hasta leerse sobre las tarjetas (4,5:1 el texto; 3:1 lo demás). */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg:var(--grafito); --surface:#2A2B28; --surface2:#252623; --line:#3D3E3A; --separador:#33342F;
    --borde-barra:#3D3E3A; --pista:#3A3B37; --apagado:#5E5C58;
    --fg:var(--crema-clara); --muted:#A5A19C; --soft:#D6D1C9; --faint:#3D3E3A; --ink:var(--grafito);
    --danger:#F07067; --f-revisar:#7B9BE0; --f-editando:#5FB98E; --verde:var(--f-editando); --ok:var(--f-editando);
    --ambar-texto:var(--ambar); --verde-texto:var(--f-editando); --revisar-texto:var(--f-revisar);
    --sombra-barra:0 6px 20px rgba(0,0,0,.35); --velo:rgba(0,0,0,.55);
    --resalte:rgba(242,84,27,.24);
  }
}
.logo .filo{display:none}
@media (prefers-color-scheme: dark){.logo .filo{display:inline}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--fg)}
/* 19/10/2026: la página llena siempre la pantalla entera, también lo que va bajo la barra de estado. En el iPhone,
   como app instalada (barra de estado translúcida), una página más corta que la pantalla se queda con la altura de
   la pantalla menos la barra de estado y la barra de abajo flotaba con una franja vacía debajo; las largas, no. */
html{min-height:calc(100% + env(safe-area-inset-top,0px))}
body{min-height:100vh;min-height:100dvh}
body{font-family:var(--font);font-size:16px;line-height:1.35;margin:0;font-weight:400;font-variant-numeric:tabular-nums;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(104px + env(safe-area-inset-bottom,0px));-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:8px}

.p0{--paso:var(--s-guia)}.p1{--paso:var(--s-guion)}.p2{--paso:var(--s-dudas)}.p3{--paso:var(--s-grabar)}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:12px 10px}
.cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
h1{font-size:28px;font-weight:800;letter-spacing:-.5px;line-height:1.15;margin:0}
.resumen{font-size:14px;color:var(--fg);font-weight:600}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:flex;align-items:center;gap:6px;flex:none;min-height:34px;padding:6px 12px;border-radius:999px;border:.5px solid var(--line);background:var(--surface);color:var(--fg);font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none}
.chip:has(i){padding-left:7px}
.chip i{width:20px;height:20px;border-radius:50%;background:var(--canal-etq,var(--piedra));color:var(--canal-etq-texto,#fff);display:inline-grid;place-items:center;font-style:normal;font-size:10px;font-weight:800;line-height:1}
.chip[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}

main{display:flex;flex-direction:column;gap:22px;padding-top:4px}
.paso h2{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg);margin:0 0 8px 2px}
.paso h2 .n{color:var(--muted);font-weight:500;letter-spacing:0}

.tarjetas{display:flex;flex-direction:column;gap:8px}

.card{position:relative;display:block;width:100%;background:var(--surface);border-radius:10px;padding:11px 12px 10px 12px;overflow:hidden}
.card:active{background:var(--surface2)}
.card.err{box-shadow:inset 0 0 0 1px var(--danger)}
.l1{display:flex;align-items:flex-start;gap:8px}
.canal{font-size:12px;font-weight:600;color:var(--fg);margin-bottom:2px}
.titulo{flex:1;min-width:0;font-size:15.5px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* En las tarjetas, el canal se ve en el color del título (sin franja ni nombre; 17/10/2026). */
.card .titulo,.idea .titulo{color:var(--fg)}
.cambio{width:8px;height:8px;border-radius:50%;background:var(--fg);flex:none;margin-top:6px}
.barra{display:flex;gap:4px;margin:10px 0 9px}
.barra i{flex:1;height:4px;border-radius:2px;background:var(--faint)}
.barra i.ok{background:var(--muted)}
.barra i.aqui{background:var(--fg)}
.l3{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.que{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.accion{flex:none;font-size:13.5px;font-weight:700;color:var(--fg)}
.accion::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--fg);margin-right:6px;vertical-align:1px}
.accion.rojo{color:var(--danger)}
.accion.rojo::before{background:var(--danger)}
.estado{flex:none;font-size:13.5px;color:var(--muted)}
.spin{display:inline-block;width:10px;height:10px;border:2px solid var(--muted);border-right-color:transparent;border-radius:50%;margin-right:6px;vertical-align:-1px;animation:g 1s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.vacio{color:var(--muted);text-align:center;padding:40px 0}
.cab .resumen{margin-left:auto}
.mas-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:22px;line-height:1;text-align:center;color:var(--fg)}
#ideas{gap:8px}
.x{width:32px;height:32px;margin:-6px -6px 0 0;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:16px}
.x:active{background:var(--faint);color:var(--fg)}
.rapidos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.rapido{padding:7px 12px;border-radius:999px;border:1px solid var(--line);font-size:14px;color:var(--fg)}
.idea{position:relative;display:grid;grid-template-columns:44px 1fr 26px;gap:10px;width:100%;background:var(--surface);border-radius:10px;padding:11px 12px 11px 12px;overflow:hidden}
.idea:active{background:var(--surface2)}
.nota{display:flex;flex-direction:column;align-items:center;gap:1px;padding-top:2px}
.nota b{width:40px;height:40px;border-radius:50%;background:var(--sc);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.nota span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.icuerpo{min-width:0}
.imeta{font-size:12.5px;color:var(--muted);margin-top:5px;display:flex;flex-wrap:wrap;gap:4px 10px}
.imeta .nueva{background:var(--fg);color:var(--ink);font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:5px}
.iporque{font-size:13.5px;color:var(--muted);margin-top:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.iaviso{font-size:12.5px;color:var(--ambar-texto);margin-top:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.iaviso-bloque{border-left:4px solid var(--amarillo)}
.iaviso-bloque ul{margin:4px 0 0;padding-left:18px}
.otras{margin:14px auto 0;padding:10px;color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px;text-align:center}
.dnota{display:flex;align-items:baseline;gap:8px;margin:12px 0 4px}
.dnota b{width:60px;height:60px;border-radius:50%;background:var(--sc);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.dnota span{color:var(--muted);font-size:14px}
.criterios{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.crit{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:14px}
.crit .val{color:var(--muted)}
.crit i{grid-column:1/-1;height:4px;border-radius:2px;background:var(--faint);position:relative;overflow:hidden}
.crit i::after{content:"";position:absolute;inset:0 auto 0 0;background:var(--fg)}
.ref{display:block;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--fg);text-decoration:none}
.ref .sub{color:var(--muted);font-size:13px;margin-top:2px}
.casilla{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:15px}
.casilla input{width:20px;height:20px;accent-color:var(--fg)}
.motivo{width:100%;min-height:90px;margin:0 0 14px;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:15px}
.opcion{display:block;width:100%;padding:14px 0;border-top:1px solid var(--line);font-size:16px}
#perfil,#canales{gap:22px}
.edp{background:var(--surface);border-radius:10px;padding:10px;margin-top:10px;display:flex;flex-direction:column;gap:8px}
.edp .motivo,.edita .motivo{margin:0;min-height:72px;font-size:16px}
.edcab{display:flex;justify-content:space-between;align-items:center}
.edbtns{display:flex;gap:6px}
.edbtns button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);text-align:center;color:var(--muted)}
.edin{width:100%;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:16px}
.editando{font-size:13px;color:var(--muted);margin-bottom:8px}
.sec h2{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:0 0 8px 2px}
.panel{background:var(--surface);border-radius:10px;overflow:hidden}
.fila{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;width:100%}
.fila+.fila{border-top:.5px solid var(--separador)}
.fila .izq{min-width:0}
.fila .sub{color:var(--muted);font-size:13px;margin-top:2px}
.fila .ok{color:var(--muted);font-size:13.5px;flex:none}
.btnp{flex:none;padding:7px 12px;border-radius:var(--r-control);background:var(--primario);color:var(--sobre-primario);font-size:14px;font-weight:700}
.btns{flex:none;padding:7px 12px;border-radius:8px;border:1px solid var(--line);font-size:14px;font-weight:600}
.aviso{background:var(--surface);border-radius:10px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:inset 0 0 0 1px var(--line)}
.aviso.err{box-shadow:inset 0 0 0 1px var(--danger)}
.medidor{padding:12px}
.medidor+.medidor{border-top:1px solid var(--line)}
.medidor .top{display:flex;justify-content:space-between;font-size:15px;font-variant-numeric:tabular-nums}
.medidor .top span{color:var(--muted)}
.medidor i{display:block;height:6px;border-radius:3px;background:var(--faint);margin-top:8px;position:relative;overflow:hidden}
.medidor i::after{content:"";position:absolute;inset:0 auto 0 0;width:0;background:var(--fg)}
.gastos{padding:4px 12px 12px;font-size:14px}
.gastos div{display:flex;justify-content:space-between;padding:5px 0;font-variant-numeric:tabular-nums}
.gastos span{color:var(--muted)}
.desplegar{width:100%;padding:12px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;text-align:center}
.campo{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted);margin-bottom:12px}
.campo input{padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:16px}
.tecnico{color:var(--muted);font-size:13px;padding:0 12px 12px;word-break:break-word}
/* Lo que es código de verdad (el mensaje técnico de un error, en Administración), sí en monoespaciada. */
.codigo{color:var(--muted);font-size:13px;padding:0 12px 12px;font-family:ui-monospace,Menlo,monospace;word-break:break-word}
.opcion .sub{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}


.detalle{position:fixed;inset:0;z-index:15;background:var(--bg);overflow-y:auto;
  padding:calc(env(safe-area-inset-top,0px) + 8px) max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.dtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.volver{padding:8px 0;font-weight:600}
.mas{padding:6px 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:14px}
.dcanal{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--fg)}
.dcanal::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--canal)}
.dtitulo{font-size:19px;font-weight:700;margin:4px 0 0;text-wrap:balance}
.dbarra{display:flex;gap:4px;margin:14px 0 4px}
.dbarra div{flex:1;font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.dbarra div::before{content:"";height:4px;border-radius:2px;background:var(--faint)}
.dbarra .ok::before{background:var(--muted)}
.dbarra .aqui{color:var(--fg);font-weight:700}
.dbarra .aqui::before{background:var(--fg)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:14px 0}
.tab{padding:10px;font-size:14.5px;color:var(--muted);border-bottom:2px solid transparent}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--fg);font-weight:600}
.gancho{background:var(--surface);border-radius:10px;padding:12px;margin-bottom:14px}
.etq{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.puntos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:p}
.puntos>li{display:grid;grid-template-columns:24px 1fr;gap:8px;counter-increment:p}
.puntos>li::before{content:counter(p);color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px;padding-top:1px}
.pt{font-weight:600}
.apoyos{margin:4px 0 0;padding-left:16px;color:var(--soft);font-size:14.5px}
.pantalla{font-size:13px;color:var(--muted);margin-top:4px}
.duda{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--s-dudas);color:var(--ink);font-size:12px;font-weight:700;vertical-align:1px}
.bloque{background:var(--surface);border-radius:10px;padding:12px;margin-bottom:10px;font-size:15px}
.bloque .sub{color:var(--muted);font-size:13.5px;margin-top:4px}
.grande{display:block;width:100%;text-align:center;margin-top:12px;padding:13px;border-radius:var(--r-control);background:var(--primario);color:var(--sobre-primario);font-weight:700}
.secundario{display:block;width:100%;text-align:center;margin-top:8px;padding:12px;border-radius:10px;border:1px solid var(--line);font-weight:600}
.pie{margin-top:24px;color:var(--muted);font-size:12.5px}

.velo{position:fixed;inset:0;background:var(--velo);z-index:20;display:flex;align-items:flex-end}
.hoja{width:100%;background:var(--surface);border-radius:16px 16px 0 0;padding:18px max(16px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.hoja h3{margin:0 0 4px;font-size:17px}
.hoja p{margin:0 0 16px;color:var(--muted);font-size:14.5px}
.hoja b{color:var(--fg)}
.botones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{padding:12px;border-radius:10px;font-weight:600;border:1px solid var(--line);text-align:center}
.btn.prim{background:var(--primario);border-color:var(--primario);color:var(--sobre-primario)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:10px;font-size:14px;max-width:calc(100% - 32px);text-align:center}

/* --- Lo que el prototipo hacía con estilos en línea (el panel no los admite) --- */
.w0::after{width:0%}.w5::after{width:5%}.w10::after{width:10%}.w15::after{width:15%}.w20::after{width:20%}.w25::after{width:25%}.w30::after{width:30%}.w35::after{width:35%}.w40::after{width:40%}.w45::after{width:45%}.w50::after{width:50%}.w55::after{width:55%}.w60::after{width:60%}.w65::after{width:65%}.w70::after{width:70%}.w75::after{width:75%}.w80::after{width:80%}.w85::after{width:85%}.w90::after{width:90%}.w95::after{width:95%}.w100::after{width:100%}
.n-rojo{--sc:var(--piedra)}.n-naranja{--sc:var(--ambar)}.n-verde{--sc:var(--f-editando)}.n-azul{--sc:var(--f-editando)}.n-sin{--sc:var(--arena)}
a{color:inherit}
a.card,a.idea,a.fila{text-decoration:none;color:inherit}
.dmeta{color:var(--muted);font-size:13.5px;margin-top:6px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.dos .bloque{margin:0}
.cifra{font-size:22px;font-weight:700}
.rojo-txt{color:var(--danger);font-weight:600}
.entre{display:flex;justify-content:space-between;gap:10px}
.cursiva{font-style:italic}
.claro{color:var(--fg)}
.sub-claro{color:var(--fg)}
.etq.arriba{margin-top:16px}
.otras{display:block}

/* --- Las pestañas del vídeo, sin JavaScript también (cada una con su enlace) --- */
.tab{text-decoration:none}
.pestana[hidden]{display:none}

/* --- Avisos de la página (errores de una acción, lo que acaba de pasar) --- */
.banda{border-radius:10px;padding:10px 12px;margin:8px 0 12px;font-size:14.5px;background:var(--surface)}
.banda.err{box-shadow:inset 0 0 0 1px var(--danger);color:var(--fg)}
.pruebas{background:#3a2a10;color:#ffcf87;font-size:12.5px;text-align:center;padding:4px 8px;margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px)))}

/* --- Formularios dentro de las hojas y de las páginas sin barra --- */
.hoja form{margin:0}
.hoja .motivo{display:block}
.hoja select,.hoja input[type=text],.campo select{width:100%;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:16px;margin-bottom:12px}
.hoja .casilla{margin:0 0 14px}
.hoja .opcion{text-align:left}
.hoja .lista-opciones{margin:-4px 0 6px}
/* 22/10/2026: la hoja «Más», con botones de verdad: uno debajo de otro, con su línea y su precio. */
.mas-lista{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.mas-b{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--fg);text-align:left;font:inherit;cursor:pointer}
.mas-b .t{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px}
.mas-b .t svg{width:18px;height:18px;flex:none}
.mas-b .precio{margin-left:auto;color:var(--muted);font-weight:500;font-size:14px;white-space:nowrap}
.mas-b .sub{color:var(--muted);font-size:13.5px;line-height:1.35}
.hoja .motivo.grande-texto{min-height:180px}
/* 22/10/2026: subir documentos a una idea nueva. */
.subir{display:block;margin:0 0 14px}
.subir input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.subir-b{display:block;padding:13px;border:1px dashed var(--line);border-radius:12px;text-align:center;font-weight:600;color:var(--fg);cursor:pointer}
.subir .sub{display:block;color:var(--muted);font-size:13px;margin-top:6px}
.subir-lista{display:block;color:var(--fg);font-size:13.5px;margin-top:6px}
.miniaturas{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.miniaturas a{display:block;position:relative;width:76px;height:76px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.miniaturas img{width:100%;height:100%;object-fit:cover}
.rv-idea-t{white-space:pre-wrap;max-height:260px;overflow:auto;font-size:14px;color:var(--soft)}
.miniaturas b{position:absolute;left:4px;top:4px;background:rgba(0,0,0,.65);color:#fff;font-size:11.5px;border-radius:6px;padding:1px 5px}
.solo{max-width:440px;margin:0 auto;padding-top:24px}
.solo h1{margin-bottom:12px}
.solo p{color:var(--muted)}
.solo form{display:flex;flex-direction:column;gap:2px}
.solo .grande{margin-top:8px}
.solo input{padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:16px}
.clave-nueva{font-family:ui-monospace,Menlo,monospace;word-break:break-all;font-size:15px}
.pie a,.pie button{color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:13px}
.pie form{display:inline}

/* --- La promesa, la guía y los textos --- */
.rev{border-radius:8px;padding:8px 10px;margin-top:8px;background:var(--surface2)}
.rev .q{font-size:14px}
.rev .sub{margin-top:2px}
.rev.no{box-shadow:inset 3px 0 0 var(--danger)}
.rev.dudoso{box-shadow:inset 3px 0 0 #d9a52b}
.rev.si{box-shadow:inset 3px 0 0 var(--muted)}
.rev .r-no{color:var(--danger);font-weight:700}
.rev .r-dudoso{color:#d9a52b;font-weight:700}
.rev .r-si{color:var(--muted);font-weight:700}
.prom-titulo{font-size:17px;font-weight:600}
.pre{white-space:pre-wrap}
details.bloque summary{cursor:pointer;color:var(--muted)}
.afirm{margin:6px 0 0;padding-left:16px;font-size:14px;color:var(--soft)}
.afirm li{margin-top:4px}
.origen{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.marca-ok{color:var(--muted)}
.marca-corr{color:var(--danger)}
.mas[aria-disabled=true]{opacity:.6}

/* --- Las páginas de detalle (en el prototipo, una capa encima) --- */
.detalle-pagina{padding-top:8px;padding-bottom:24px}
body:has(.detalle-pagina){padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
a.volver{text-decoration:none;color:var(--fg)}
h1 a.volver{margin-right:6px}
a.grande,a.secundario{text-decoration:none;color:inherit}
a.grande{color:var(--sobre-primario)}
a.duda{text-decoration:none}
.arriba-16{margin-top:16px}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
summary.fila{cursor:pointer}
.aviso .sub,.fila .sub{color:var(--muted);font-size:13px;margin-top:2px}
.card form{margin:0}
.card a{text-decoration:none;color:inherit}
.campo textarea.motivo{margin:0;color:var(--fg)}
.hoja{max-height:90vh;overflow-y:auto}
.spin{flex:none}
/* La comparación de voces (/panel/voz): las dos, lado a lado, también en el móvil */
.lado{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.lado>div{min-width:0;background:var(--surface);border-radius:10px;padding:10px;font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}
.lado .apoyos{font-size:13px;padding-left:14px}
.lado .error{color:var(--danger)}
/* El guion y las dudas, cada punto en su tarjeta (17/10/2026): sin colores nuevos. */
.tpunto{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px 11px;margin-bottom:10px}
.tpunto .num{color:var(--fg);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;padding-right:34px}
.tpunto .pt{color:var(--fg);font-size:16.5px;font-weight:600;line-height:1.3;margin-top:2px;padding-right:26px}
.tpunto .apoyos{margin-top:6px}
.tpunto .quitar{position:absolute;top:4px;right:4px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:15px}
.tpunto .quitar:active{background:var(--faint);color:var(--fg)}
.tpunto .sub{color:var(--muted);font-size:13.5px;margin-top:4px}
.tpunto .sub-claro{color:var(--fg)}
.acciones-duda{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px;margin-top:10px}
.acciones-duda .btn{padding:10px 6px;font-size:14px;white-space:nowrap}
.tpunto [data-edicion] .botones{margin-top:8px}
/* Tarjetas del guion: número y título en la misma fila (18/10/2026). */
.tpunto .cab{display:flex;align-items:baseline;justify-content:flex-start;gap:10px;margin-bottom:0;padding-right:30px}
.tpunto .cab .num{flex:none;min-width:1.2em;padding-right:0}
.tpunto .cab .pt{margin-top:0;padding-right:0}
.tpunto .etq-cierre{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;color:var(--fg)}

/* La guía de estudio, fácil de leer (18/10/2026): letra 1,5 px más grande, «En corto», la tabla lado a lado
   (una fila por aspecto y los valores debajo, para que quepa en un móvil), lo demás por tema y marcas pequeñas. */
.guia .bloque{font-size:16.5px;line-height:1.45}
.guia .bloque p{margin:8px 0 0}
.guia .bloque .sub{font-size:15px}
.guia .afirm{font-size:15.5px;color:var(--soft);padding-left:18px}
.guia .afirm li{margin-top:7px}
.guia details>summary{cursor:pointer;color:var(--muted);margin-top:8px}
.guia details.tema>summary{color:var(--fg);font-weight:600;margin-top:0}
.guia details.tema .n{color:var(--muted);font-weight:400;font-size:13px;margin-left:4px}
.guia .encorto p{font-size:17px;font-weight:500;color:var(--fg)}
.guia .quien{font-size:13px;font-weight:600;color:var(--muted);margin-right:4px;white-space:nowrap}
.guia .quien .mas{color:var(--verde-texto)}
.guia .quien .menos{color:var(--danger)}
.guia .fuente{font-size:13px;color:var(--muted)}
.m-origen{display:inline-block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;vertical-align:1px}
.m-oficial{color:var(--fg);border-color:var(--muted)}
.m-comp{font-size:12px;color:var(--muted);white-space:nowrap}
.ico{width:18px;height:18px;border-radius:4px;vertical-align:-3px;margin-right:4px}
.tabla-g{margin-top:6px}
.tabla-g .tg-cab,.tabla-g .tg-fila{display:grid;gap:10px}
.tabla-g.c2 .tg-cab,.tabla-g.c2 .tg-fila{grid-template-columns:repeat(2,minmax(0,1fr))}
.tabla-g.c3 .tg-cab,.tabla-g.c3 .tg-fila{grid-template-columns:repeat(3,minmax(0,1fr))}
.tabla-g.c4 .tg-cab,.tabla-g.c4 .tg-fila{grid-template-columns:repeat(4,minmax(0,1fr))}
.tabla-g .tg-cab div{font-weight:700;color:var(--fg);font-size:15px;overflow-wrap:anywhere}
.tabla-g .tg-asp{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tabla-g .tg-fila div{font-size:15px;line-height:1.35;overflow-wrap:anywhere}
/* Una duda que no se miró porque la comprobación llegó a su tope de gasto: distinta de «no se ha podido confirmar». */
.tpunto .etq-tope{display:inline-block;margin-top:6px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--muted);border-radius:4px;padding:1px 5px}
/* Idea: «Elegir esta idea» y «Descartar» en la misma fila. */
.dos-botones{display:grid;grid-template-columns:3fr 2fr;gap:8px;margin-top:12px}
.dos-botones .grande,.dos-botones .secundario{margin-top:0}
/* Guía (18/10/2026): cada fila de la tabla se toca y abre debajo lo que se dice de ese aspecto; «Además», abierto. */
.tabla-g details.tg-d>summary{cursor:pointer;margin-top:0;color:var(--fg)}
.tabla-g .tg-asp .n{float:right;letter-spacing:0;text-transform:none;color:var(--muted)}
.tabla-g details.tg-d[open] .tg-asp .n{color:var(--fg)}
.tabla-g .tg-det{margin:8px 0 2px;padding:8px 0 0 18px;border-top:1px dashed var(--line)}
.guia .ademas .tema-t{margin-top:12px;font-weight:600;font-size:15.5px}
.guia .ademas .tema-t:first-of-type{margin-top:6px}
.guia details.seguir>summary{margin-top:6px}

/* En el ordenador (18/10/2026): a partir de 800 px, todo en una columna centrada de 760 px como mucho — cabecera,
   chips, tarjetas, páginas de detalle, Sistema y las hojas. La barra de abajo sigue fija, con el fondo de lado a
   lado y sus botones en ese mismo ancho. En el móvil no cambia nada. */
/* El Tablero (19/10/2026): cuatro pasos. En el móvil, un botón por paso (el número grande y el nombre debajo) y
   solo las tarjetas del elegido; en el ordenador, cuatro columnas. Cada tarjeta: el título y una línea con el detalle;
   apagada y con el indicador girando si el agente está trabajando en ella. */
.ptabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 14px}
.ptab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 9px;border:1px solid var(--line);border-radius:12px;color:var(--fg);text-decoration:none}
.ptab b{font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.ptab span{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ptab.cero b{color:var(--faint)}
.ptab.sel{background:var(--fg);border-color:var(--fg);color:var(--ink)}
.ptab.sel span{color:var(--ink)}
.ptab.sel.cero b{color:var(--piedra)}
.columnas .col{display:none}
.columnas .col.sel{display:block}
.columnas .col h2{display:none}
.card .det{display:flex;align-items:center;gap:0;margin-top:6px;min-width:0}
.card .det .que{flex:1;min-width:0}
.card .det .accion{margin-left:10px}
.card.trabajando{opacity:.55}
@media (min-width:900px){
  body:has(> main#tablero){padding-left:max(16px,calc(50% - 590px));padding-right:max(16px,calc(50% - 590px))}
  .ptabs{display:none}
  .columnas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start;margin-top:12px}
  .columnas .col{display:block;background:var(--surface);border-radius:var(--r-tarjeta);padding:10px;min-height:120px}
  .columnas .col h2{display:flex;justify-content:space-between;margin:2px 4px 10px}
  .columnas .vacio{padding:24px 0;font-size:14px}
}

@media (min-width:800px){
  body{padding-left:max(16px,calc(50% - 380px));padding-right:max(16px,calc(50% - 380px))}
  .detalle{padding-left:max(16px,calc(50% - 380px));padding-right:max(16px,calc(50% - 380px))}
  .velo{justify-content:center}
  .hoja{max-width:760px}
  .otras{text-align:left;margin-left:0;padding-left:0}
}

/* Editar el guion en el sitio (18/10/2026): cada texto se toca y se cambia ahí. En reposo no se nota; al tocarlo,
   un fondo suave. «Deshacer» abajo, encima de la barra de pestañas. */
#guion-ed[data-editable] .ed{outline:none;border-radius:4px;cursor:text;-webkit-user-modify:read-write-plaintext-only}
#guion-ed[data-editable] .ed:focus{background:var(--surface2);box-shadow:0 0 0 2px var(--surface2)}
#guion-ed[data-editable] .ed:empty::before{content:"…";color:var(--muted)}
#guion-ed[data-editable] .apoyos li{padding:2px 0}
.deshacer{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:31;background:var(--fg);color:var(--bg);border-radius:10px;padding:8px 8px 8px 14px;display:flex;align-items:center;gap:12px;font-size:14px;max-width:calc(100% - 32px)}
.deshacer button{font-weight:700;padding:8px 12px;border-radius:12px;background:var(--bg);color:var(--fg)}
.deshacer span{white-space:nowrap}
/* Mover y añadir puntos en el sitio (18/10/2026): abajo a la derecha de cada tarjeta, pequeños y con dedo de sobra. */
.tpunto .acciones-punto{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}
.tpunto .acciones-punto button{min-width:38px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:14px;text-align:center}
.tpunto .acciones-punto button:active{background:var(--faint);color:var(--fg)}

/* --- La revisión guiada de un vídeo (19/10/2026, docs/prototipo-revision.html). Dentro del vídeo, el color del
   canal es el acento de toda la página: círculo del paso, botón principal, números, borde del gancho e iconos. --- */
.rvg{--a:var(--fg);line-height:1.45;padding-bottom:110px}
body:has(.rvg){padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.rvg svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rv-canal{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--a)}
.rv-canal::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--a)}
.rv-titulo{font-size:24px;font-weight:700;margin:4px 0 0;line-height:1.25;text-wrap:balance}
.rv-volver{display:inline-block;margin:16px 0 8px;font-weight:600;text-decoration:none;color:var(--soft)}
.rv-prog{display:flex;align-items:flex-start;margin:30px 0 24px}
/* 22/10/2026: 12 px entre el círculo y su nombre: el halo del paso de ahora (5 px) ya no tapa «GUION». */
.rv-prog>a,.rv-prog>span{flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);position:relative;text-align:center;text-decoration:none}
.rv-prog .bola{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--faint);color:var(--muted);position:relative;z-index:1}
.rv-prog>:not(:first-child)::before{content:"";position:absolute;top:19px;right:50%;width:100%;height:2px;background:var(--faint)}
.rv-prog .ok .bola{background:var(--ok);border-color:var(--ok);color:var(--ink)}
.rv-prog .ok{color:var(--soft)}
.rv-prog .ok+.ok::before{background:var(--ok)}  /* en cualquier orden: verde solo entre dos pasos hechos */
.rv-prog .aqui .bola{background:var(--a);border-color:var(--a);color:var(--ink);box-shadow:0 0 0 5px color-mix(in srgb,var(--a) 25%,transparent)}
.rv-prog .aqui{color:var(--fg)}
.rv-cab{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.rv-cab .ic{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--a) 18%,transparent);color:var(--a);display:grid;place-items:center;flex:none}
.rv-cab .ic svg{width:21px;height:21px}
.rv-cab small{display:block;color:var(--muted);font-size:13px}
.rv-cab h2{font-size:16.5px;margin:0;line-height:1.25}
.rv-bloque{background:var(--surface);border-radius:12px;padding:14px;margin-bottom:10px}
.rv-etq{display:flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.rv-etq svg.i{width:16px;height:16px;color:var(--a)}
.rv-grande{font-size:18px;font-weight:600;line-height:1.35}
.rv-sub{color:var(--muted);font-size:14.5px;margin-top:6px}
.rv-suave{color:var(--soft)}
.rv-arriba{margin-top:12px}
.rv-encorto{font-size:16.5px}
.rv-gancho{background:color-mix(in srgb,var(--a) 12%,var(--surface));border-radius:12px;padding:14px;margin-bottom:14px;border-left:4px solid var(--a)}
.rv-gancho ul{margin:8px 0 0;padding-left:18px;color:var(--soft);font-size:15.5px}
.rv-gancho > .ed{font-size:17px}
.rv-puntos{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.rv-punto{background:var(--surface);border-radius:10px}
/* 20/10/2026: asa (arrastrar), número, título y, a la derecha, lápiz y papelera de 48 px. La fila entera abre y cierra. */
.rv-punto .rv-fila{display:grid;grid-template-columns:auto 28px 1fr auto;gap:8px;padding:8px 2px 8px 2px;align-items:center;cursor:pointer}
.rv-asa{width:38px;height:48px;margin:-8px -4px;display:grid;place-items:center;color:var(--muted);touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.rv-asa .i{width:22px;height:22px}
.rv-punto[data-fijo] .rv-asa{visibility:hidden}
.rv-botones{display:flex;gap:2px}
.rv-ic{width:48px;height:48px;margin:-8px 0;border-radius:12px;color:var(--muted);display:grid;place-items:center}
.rv-ic .i{width:23px;height:23px}
.rv-ic:active{background:var(--surface2)}
.rv-lapiz[aria-pressed="true"]{background:color-mix(in srgb,var(--a) 22%,transparent);color:var(--a)}
.rv-gancho .rv-etq .rv-lapiz{margin:-14px -8px -14px auto}
.rvg .rv-listo{display:block;width:auto;margin:6px 14px 12px auto;min-height:44px;padding:0 26px}
.rvg .rv-gancho .rv-listo{margin:10px 0 0 auto}
.rv-confirma{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 12px 12px 62px}
.rv-confirma span{flex:1 1 100%;font-weight:600}
.rvg .rv-confirma button{width:auto;min-height:44px;min-width:76px;padding:10px 18px}
.rv-punto.arrastrando{position:relative;z-index:3;background:var(--surface2);box-shadow:var(--sombra-barra);transform:scale(1.02)}
.rv-punto.arrastrando .rv-asa{cursor:grabbing;color:var(--a)}
body.arrastrando-punto{-webkit-user-select:none;user-select:none;overscroll-behavior:none}
.rvg #guion-ed .con-nota{background:color-mix(in srgb,var(--amarillo) 22%,transparent);border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;box-shadow:0 0 0 2px color-mix(in srgb,var(--amarillo) 22%,transparent)}
.rv-nota{margin:8px 0 10px}
.rv-nota textarea{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:16px;line-height:1.4;padding:10px 12px;border-radius:10px;border:1px solid var(--amarillo);background:var(--bg);color:var(--fg);resize:none;min-height:64px}
.rv-nota-quitar{font-size:14px;color:var(--muted);min-height:40px;padding:0 2px}
.b2.apagado{opacity:.6}
.rv-punto .rv-cierre{padding:0 14px 12px 62px;color:var(--muted);font-size:13.5px;display:none}
.rv-punto.abierto .rv-cierre{display:block}
/* 20/10/2026: en la revisión guiada solo se escribe con el lápiz (.editando); si no, tocar un párrafo abre su nota. */
.rvg #guion-ed[data-editable] .ed{-webkit-user-modify:read-only;cursor:inherit}
.rvg #guion-ed [data-parrafo]{display:block}            /* todo el párrafo se puede tocar, no solo las letras */
.rvg #guion-ed[data-editable] [data-bloque]:not(.editando) [data-parrafo]{cursor:pointer}
.rvg #guion-ed[data-editable] .editando .ed{outline:none;border-radius:4px;cursor:text;-webkit-user-modify:read-write-plaintext-only;box-shadow:inset 0 -1px 0 var(--line)}
.rvg #guion-ed[data-editable] .editando .ed:focus{background:var(--surface2);box-shadow:0 0 0 2px var(--surface2)}
.rvg #guion-ed[data-editable] .editando .ed:empty::before{content:"…";color:var(--muted)}
.rv-prog .bola .rv-cuenta{position:absolute;top:-6px;right:-8px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--amarillo,#f2cc4d);color:var(--ink);font-size:11.5px;font-weight:800;display:grid;place-items:center;letter-spacing:0}
body:has(.rv-acciones) .deshacer{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
.rv-punto .n{width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--a) 20%,transparent);color:var(--a);display:grid;place-items:center;font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums}
.rv-punto .t{font-weight:600;font-size:17px}
.rv-punto ul{margin:0;padding:0 14px 12px 62px;color:var(--soft);font-size:15.5px;display:none}
.rv-punto.abierto ul{display:block}
.rv-punto li{margin-bottom:4px}
.rv-punto .rv-pantalla{list-style:none;color:var(--muted);font-size:13.5px}
.rv-duda{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:11px;font-weight:800;padding:1px 6px;border-radius:4px;background:var(--amarillo);color:var(--ink);vertical-align:2px;letter-spacing:0}
.rv-todo{display:inline-flex;gap:6px;align-items:center;font-size:14px;color:var(--soft);margin:0 0 12px 2px}
.rv-det{background:var(--surface);border-radius:12px;margin-bottom:10px}
.rv-det summary{padding:13px 14px;cursor:pointer;color:var(--soft);font-size:15px;display:flex;align-items:center;gap:8px}
.rv-det summary svg.i{color:var(--muted)}
.rv-det summary::after{content:"+";margin-left:auto;color:var(--muted);font-size:18px;line-height:1}
.rv-det[open] summary::after{content:"−"}
.rv-det .dentro{padding:0 14px 14px;color:var(--soft);font-size:15px;overflow-wrap:anywhere}
.rv-det .dentro p{margin:0 0 8px}
.rv-det .dentro ul{margin:0 0 8px;padding-left:18px}
.rv-contador{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.rv-contador .num{width:72px;height:72px;border-radius:50%;background:var(--amarillo);color:var(--ink);display:grid;place-items:center;font-size:34px;font-weight:900;font-variant-numeric:tabular-nums;flex:none}
.rv-contador small{display:block;color:var(--muted);font-size:13px}
.rv-contador .barritas{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.rv-contador .barritas i{width:22px;height:6px;border-radius:3px;background:var(--faint)}
.rv-contador .barritas i.on{background:var(--ok)}
.rv-cita{font-size:17px;line-height:1.4;margin:6px 0 10px;padding-left:12px;border-left:3px solid var(--amarillo)}
.rv-prop{background:color-mix(in srgb,var(--ok) 12%,var(--surface2));border-radius:10px;padding:12px;margin-top:12px}
/* 19/10/2026: datos que no se pudieron comprobar: un aviso arriba con «Volver a comprobar» y la lista aparte. */
.rv-sin{background:var(--surface);border-radius:12px;padding:14px;margin-bottom:14px;border-left:4px solid var(--amarillo)}
.rv-sin .rv-etq svg.i{color:var(--amarillo)}
.rv-sin form{margin-top:12px}
.rv-sin .b2{width:100%;justify-content:center}
.rv-sin-dato{padding:10px 0;border-top:1px solid var(--faint)}
.rv-sin-dato:first-child{border-top:0;padding-top:0}
.rv-sin-dato .rv-suave{font-size:13.5px;margin-top:4px}
.rv-prop .rv-etq,.rv-prop .rv-etq svg.i{color:var(--verde-texto)}
.rv-vs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.rv-clase{border-radius:12px;padding:14px;text-align:center;background:var(--surface)}
.rv-clase .av{width:52px;height:52px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;font-size:24px;font-weight:900;color:var(--ink)}
.rv-clase .av-a{background:var(--a)}.rv-clase .av-b{background:var(--soft)}
.rv-clase b{display:block;font-size:16px}
.rv-clase span{font-size:13px;color:var(--muted)}
.rv-tabla{width:100%;border-collapse:collapse;font-size:14.5px}
.rv-tabla th{text-align:left;font-size:13px;color:var(--a);padding:0 6px 8px;vertical-align:bottom}
.rv-tabla td{padding:10px 6px;border-top:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.rv-tabla td:first-child{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;width:24%;padding-left:0;overflow-wrap:normal;hyphens:auto}
.rv-titulo-claves{margin:16px 0 8px 2px}
.rv-claves{display:flex;flex-direction:column;gap:8px}
.rv-clave{display:grid;grid-template-columns:34px 1fr;gap:10px;background:var(--surface);border-radius:10px;padding:12px}
.rv-clave .ic{width:32px;height:32px;border-radius:9px;background:color-mix(in srgb,var(--a) 18%,transparent);color:var(--a);display:grid;place-items:center}
.rv-clave .ic svg.i{width:18px;height:18px}
.rv-clave .quien{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:2px}
.rv-fuente{display:inline-block;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 5px;margin-left:4px;vertical-align:1px;text-decoration:none}
.rv-listo{text-align:center;padding:24px 0 6px}
.rv-listo .ok{width:76px;height:76px;border-radius:50%;background:var(--ok);color:var(--ink);display:grid;place-items:center;margin:0 auto 14px}
.rv-listo .ok svg.i{width:40px;height:40px;stroke-width:3}
.rv-listo h2{margin:0 0 4px}
.rv-resumen{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.rv-resumen div{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:10px;padding:12px 14px}
.rv-resumen svg.i{color:var(--a)}
.rv-resumen span{margin-left:auto;color:var(--verde-texto);font-weight:700}
.rv-textos{margin-top:18px}
.rv-acciones{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);z-index:5;
  padding:24px max(16px,env(safe-area-inset-right,0px)) max(14px,calc(env(safe-area-inset-bottom,0px) - 10px)) max(16px,env(safe-area-inset-left,0px))}
.rv-acciones .in{max-width:720px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.rv-acciones .in.una{grid-template-columns:1fr}
.rv-acciones .in > *{min-width:0}
/* 22/10/2026: los tres botones del guion. Los dos de cambios, con una línea pequeña que dice qué cambia cada uno.
   «Pedir cambios» sin notas, apagado (al tocarlo dice que toques los párrafos). En el móvil, los dos juntos y «Me
   vale» debajo, a todo el ancho; desde 800 px, los tres en una fila. */
.rv-acciones.tres .in{grid-template-columns:1fr 1fr}
.rv-acciones.tres .in .b1{grid-column:1 / -1}
.rvg .b2.dos-lineas{flex-direction:column;gap:2px;white-space:normal;line-height:1.2;padding:9px 10px}
.rvg .b2.dos-lineas .t{font-size:15px}
.rvg .b2.dos-lineas small{font-size:12px;font-weight:500;color:var(--soft)}
.rvg .b2[data-pedir-parrafos].apagado .t{color:var(--soft)}
.rvg:has(.rv-acciones.tres){padding-bottom:170px}          /* dos filas en el móvil: que no tapen el final */
body:has(.rv-acciones.tres) .deshacer,body:has(.rv-acciones.tres) .toast{bottom:calc(164px + env(safe-area-inset-bottom,0px))}
@media (min-width:800px){
  .rv-acciones.tres .in{grid-template-columns:1fr 1fr 1fr;align-items:stretch}
  .rv-acciones.tres .in .b1{grid-column:auto}
  .rvg:has(.rv-acciones.tres){padding-bottom:110px}
  body:has(.rv-acciones.tres) .deshacer,body:has(.rv-acciones.tres) .toast{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
}
.rv-acciones form{margin:0;display:contents}
.rv-acciones form.in{display:grid}
.rvg .b1,.rvg .b2{padding:15px 10px;white-space:nowrap;border-radius:12px;font-weight:600;text-align:center;font-size:16px;display:flex;justify-content:center;align-items:center;gap:8px;text-decoration:none;width:100%}
.rvg .b1{background:var(--primario);color:var(--sobre-primario);font-weight:800}
.rvg .b2{border:1px solid var(--line);color:var(--fg);background:var(--bg)}
.rvg .b1:disabled,.rvg .b2:disabled{opacity:.45;cursor:default}
.rvg .rv-ancho{width:100%}
.rvg .rv-ancho.rv-arriba{margin-top:16px}
body:has(.rv-acciones) .toast{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
/* Los interruptores de Avisos en Sistema (19/10/2026). */
.interruptor{flex:none;width:50px;height:30px;border-radius:999px;background:var(--piedra);position:relative;transition:background .15s}
.interruptor i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--blanco);transition:transform .15s}
.interruptor[aria-checked="true"]{background:var(--verde)}
.interruptor[aria-checked="true"] i{transform:translateX(20px)}
.fila form{margin:0;flex:none}
@media (prefers-reduced-motion:reduce){.interruptor,.interruptor i{transition:none}}
.rv-clase .av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.rv-clase .av:has(img){overflow:hidden}
.avisos-nota{color:var(--muted);font-size:13px;padding:0 12px 12px}
/* 19/10/2026: la pantalla de cada duda (paso Dudas), mínima: sin caja. */
.rv-pregunta{font-size:22px;font-weight:700;line-height:1.3;margin:2px 0 18px;overflow-wrap:anywhere}
.rv-tarjeta{margin-bottom:6px}
.rv-tarjeta .rv-cita{font-size:15.5px;color:var(--soft);margin:4px 0 2px}
.rv-porque{margin-top:14px}
.rv-porque summary{display:inline-block;color:var(--muted);font-size:14px;cursor:pointer;padding:8px 0;min-height:44px;box-sizing:border-box;list-style:none}
.rv-porque summary::-webkit-details-marker{display:none}
.rv-porque summary::after{content:" ›";}
.rv-porque[open] summary::after{content:" ⌄"}
.rv-porque .rv-suave{font-size:15px}
.rv-quitar{text-align:center;margin:8px 0 12px;display:flex;flex-wrap:wrap;justify-content:center;column-gap:4px}
.rv-frase{display:block;width:100%;text-align:left;background:none;border:0;border-left:3px solid var(--amarillo);border-radius:0;font:inherit;cursor:text;padding:0 0 0 12px}
.rv-frase svg.i{width:15px;height:15px;color:var(--muted);vertical-align:-2px;margin-left:6px}
.rv-editar{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--amarillo);border-radius:8px;padding:10px 12px;resize:none;line-height:1.45;min-height:96px}
.rv-editar:focus{outline:2px solid var(--a);outline-offset:1px}
.rv-quitar button{background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:14px;padding:12px 6px;min-height:44px;cursor:pointer}
.rv-plegado{margin-top:10px}
.rv-plegado summary{color:var(--soft);font-size:14.5px;cursor:pointer;padding:10px 0;list-style:none}
.rv-plegado summary::-webkit-details-marker{display:none}
.rv-plegado summary::after{content:" ›"}
.rv-plegado[open] summary::after{content:" ⌄"}
.rv-plegado .rv-sin-dato:first-of-type{border-top:0}
.rv-solo{border-left-color:var(--faint)}
.rv-solo .rv-etq svg.i{color:var(--muted)}
.deshacer form{margin:0;display:flex}
/* 20/10/2026: aplicar las propuestas del revisor de la promesa. */
.rv-cambio{margin-top:6px;padding:8px 10px;border-left:3px solid var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent);border-radius:0 8px 8px 0}
.rv-cambio .rv-etq{margin-bottom:2px}
.rv-aplicado{margin-top:8px;color:var(--verde-texto);font-weight:700;font-size:14px}
/* 20/10/2026: deslizar hacia abajo para recargar. */
.tirar{position:fixed;left:50%;top:calc(6px + env(safe-area-inset-top,0px));z-index:40;margin-left:-90px;width:180px;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border-radius:20px;background:var(--surface2,#2a2f36);color:var(--soft,#c4c9d0);font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .15s}
.tirar.visible{opacity:1}
.tirar .spin{display:none}
.tirar.cargando .spin{display:inline-block}
/* 22/10/2026 (multiusuario, paso 9): las fichas. Textos largos que crecen al escribir, y elegir con un toque. */
.campo textarea{padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:16px;line-height:1.4;resize:vertical;min-height:72px;field-sizing:content}
.fila.elige{cursor:pointer;gap:10px;justify-content:flex-start}
.fila.elige input{width:20px;height:20px;flex:none}
details form{margin-top:8px}
.texto-largo{white-space:pre-wrap;margin:8px 0 12px}
/* 22/10/2026: las series en Ideas (contrato 3.33): sus capítulos, el siguiente marcado. */
.card.serie .sva{font-size:13px;color:var(--muted);margin-top:4px}
.scaps{margin:6px 0 2px;padding-left:20px;font-size:13.5px;color:var(--fg)}
.scaps li{margin:2px 0}
.scaps li.elegida,.scaps li.descartada,.scaps li.retirada{color:var(--muted)}
.scaps li.sig{font-weight:600}
.card.sig{box-shadow:inset 0 0 0 1px var(--canal)}
h2.sueltas{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:18px 0 8px}
.card .primeras{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.4}
.fuente-doc{white-space:pre-wrap;font-size:13.5px;line-height:1.45;max-height:420px;overflow:auto;margin-top:6px}
/* 22/10/2026: preparar varios capítulos de una vez (una casilla en cada uno por hacer) y el canal obligatorio. */
.card.serie a.l1{display:block;color:inherit;text-decoration:none}
.preparar .scaps{list-style:none;padding-left:0}
.preparar .scaps li{display:flex;align-items:center;gap:8px;min-height:30px}
.preparar .scaps li a{color:inherit;text-decoration:none}
.preparar .scaps input{width:20px;height:20px;flex:none;margin:0}
.preparar .casilla.todos{font-size:13.5px;margin:6px 0 0}
.preparar .btn.prim{margin-top:8px;width:100%}
.preparar .sub{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.ecola{font-size:12px;color:var(--muted);white-space:nowrap}
.scaps li.marcha .ecola,.scaps li.cola .ecola{color:var(--fg)}
.scaps li.fallo .ecola{color:var(--danger)}
.btn:disabled{opacity:.45;cursor:default}
.falta-canal{font-size:13px;color:var(--ambar-texto);margin:4px 0 0}
.falta-canal[hidden]{display:none}
/* 22/10/2026: Perfil y Administración (antes, Sistema). Filas tocables de 44 px o más, títulos de bloque en gris,
   el canal en su color, rojo solo para errores y Salir. */
.fila{min-height:44px}
#perfil .sec h2,#canales .sec h2{color:var(--muted)}
.ptitulo{font-size:22px;font-weight:700;margin:0 2px}
.ncanal{color:var(--fg);font-weight:600}
.fila .salir{color:var(--danger);font-weight:600;width:100%;min-height:20px}
.sec.aparte{margin-top:18px}
#perfil .fila span.err{color:var(--danger)}

/* 22/10/2026: la ficha del canal, el modelo de «módulos plegables» para el resto del panel (docs/diseno-panel.md).
   Una columna de 560 px como mucho; la cabecera con la inicial y el nombre en el color del canal, y debajo tarjetas que
   se abren. Todo se guarda solo (panel.js, data-auto). El color de la ficha es --canal (marca.css), y al elegir otro
   panel.js lo cambia en el momento. */
.ficha{--canal:var(--fg);--canal-texto:var(--ink);width:100%;max-width:560px;margin:0 auto;padding-top:12px;display:flex;flex-direction:column}
.ficha :focus-visible{outline-color:var(--canal)}
.ficha .atras{align-self:flex-start;display:flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;font-size:15px}
.fcab{display:flex;align-items:center;gap:14px;margin:6px 0 22px}
.flogo{flex:none;width:64px;height:64px;border-radius:16px;overflow:hidden;background:var(--canal-etq,var(--canal));color:var(--canal-etq-texto,var(--canal-texto));display:grid;place-items:center}
.flogo span{font-size:30px;font-weight:700;line-height:1}
.fcab-t{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.fnombre{font-size:26px;font-weight:700;line-height:1.15;color:var(--fg);margin:0;overflow-wrap:anywhere}
.fcab-t form{margin:0}
.pastilla{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:5px 12px;border-radius:999px;font-size:13.5px;font-weight:600}
.pastilla i{width:8px;height:8px;border-radius:50%;background:currentColor}
.pastilla.si{color:var(--verde-texto);background:color-mix(in srgb,var(--verde) 14%,transparent)}
.pastilla.no{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent);cursor:pointer;min-height:44px}
.modulos{display:flex;flex-direction:column;gap:10px}
.modulo{background:var(--surface);border-radius:14px;overflow:hidden}
.modulo>summary{display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 14px;cursor:pointer}
.micono{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--fg);background:var(--surface2)}
.micono svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mnombre{font-size:16px;font-weight:600}
.mres{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{flex:none;color:var(--muted);font-size:22px;line-height:1;transition:transform .15s}
.modulo[open] .chev{transform:rotate(90deg)}
.mcuerpo{display:flex;flex-direction:column;gap:14px;padding:4px 14px 14px;margin:0}
.fcampo{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.fcampo>span{font-weight:600}
.fcampo textarea,.fcampo input:not([type]),.fcampo input[type=email],.fcampo input[inputmode],.fcampo select{width:100%;min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:16px}
.fcampo textarea{resize:vertical;line-height:1.4}
.fcampo small{font-size:12.5px;color:var(--muted)}
.festado{min-height:18px;margin:0;font-size:13px;color:var(--muted)}
.festado:empty{display:none}
.festado.ok{color:var(--verde-texto)}
.festado.mal{color:var(--danger)}
.segmentado{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--bg)}
.segmentado label{position:relative}
.segmentado input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.segmentado span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px 6px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);text-align:center}
.segmentado input:checked+span{background:var(--surface2);color:var(--fg)}
.segmentado input:focus-visible+span{outline:2px solid var(--canal)}
.solo-enlace{display:flex;flex-direction:column;gap:14px}
.subir-img{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px;border:1.5px dashed var(--line);border-radius:12px;cursor:pointer;color:var(--fg)}
.subir-img input{position:absolute;width:1px;height:1px;opacity:0}
.subir-img:focus-within{border-color:var(--canal)}
.subir-img .mini{flex:none;width:44px;height:44px;border-radius:11px;overflow:hidden;background:var(--canal);color:var(--canal-texto);display:grid;place-items:center;font-weight:700;font-size:20px}
.subir-t{display:flex;flex-direction:column;gap:2px}
.subir-t b{font-weight:600;font-size:15px}
.subir-t small{color:var(--muted);font-size:13px}
.extra{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;margin:0}
.extra+.extra{border-top:1px solid var(--line);padding-top:10px}
.extra-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.extra-t b{font-weight:600;font-size:15px}
.extra-t span{color:var(--muted);font-size:13px}
.extra-ajustes{display:flex;flex-direction:column;gap:12px;margin:4px 0 8px;padding:12px;border-radius:12px;border:1px solid var(--line)}
.extra-ajustes .festado{margin:0}
.archivar{align-self:center;min-height:44px;margin:26px 0 8px;padding:0 16px;color:var(--muted);font-size:14.5px;text-align:center}
.btn.peligro{background:var(--danger);border-color:var(--danger);color:#fff}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}

/* 22/10/2026: la cabecera de Perfil, un módulo plegable: la foto redonda (o la inicial sobre gris), el nombre y el
   correo; al tocarla, se cambian. */
.modulo.yo>summary{gap:14px;min-height:88px}
.yfoto,.subir-img .mini.redonda{flex:none;border-radius:50%;overflow:hidden;background:var(--faint);color:var(--fg);display:grid;place-items:center}
.yfoto{width:64px;height:64px;font-size:28px;font-weight:700}
.yfoto img,.subir-img .mini img{width:100%;height:100%;object-fit:cover}
.yo-nombre{font-size:22px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.yo-correo{font-size:14.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modulo.yo .chev{align-self:center}
/* 22/10/2026: un capítulo de una serie, en el Tablero y en la página del vídeo: su número en un cuadradito del color
   del canal delante del título, y la serie en una pastilla. */
.ncap{flex:none;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;margin-right:8px;border-radius:6px;background:var(--canal-etq,var(--canal));color:var(--canal-etq-texto,var(--canal-texto,var(--ink)));font-size:13px;font-weight:700;line-height:1;vertical-align:2px}
.card .l1 .ncap{margin:1px 0 0}
.pserie{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--canal) 16%,transparent);color:var(--fg);font-size:12.5px;font-weight:600}
.pserie svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pserie span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l3s{display:flex;margin-top:8px;min-width:0}
.rv-serie{display:flex;margin:6px 0 2px;min-width:0}

/* 22/10/2026: el aviso del paso Guion: lo que no se ha podido hacer (no es una duda: en Dudas solo van datos). */
.rv-aviso{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:12px 14px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--amarillo,#f2cc4d)}
.rv-aviso svg.i{flex:none;color:var(--amarillo,#f2cc4d);margin-top:2px}
.rv-aviso b{display:block;font-size:14.5px}
.rv-aviso p{margin:3px 0 0;color:var(--soft);font-size:14.5px;line-height:1.4}
.rv-aviso .btns{margin-top:10px}
/* 23/10/2026: las redes para publicar de la ficha del canal (el portero). En el móvil, cada red en su fila, con su
   estado debajo del nombre si no cabe; el botón, a lo ancho. */
.redes-lista{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:2px}
/* 23/10/2026: cada red, su icono (todos de 24 px), su nombre con su estado debajo y su botón. */
.red-fila{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:56px;padding:10px 0;border-bottom:1px solid var(--faint)}
.red-fila:last-child{border-bottom:0}
.red-icono{flex:none;width:24px;height:24px;display:grid;place-items:center;color:var(--fg)}
.red-icono svg{width:24px;height:24px;display:block}
.red-icono.ri-youtube{color:#ff0033}
.red-icono.ri-instagram{color:#d6249f}
.red-t{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.red-nombre{font-weight:600}
.red-estado{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--muted)}
.red-estado i{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.red-estado.conectada{color:var(--verde-texto)}
.red-estado.volver_a_entrar,.red-estado.desconectada{color:var(--danger)}
.red-fila form{margin:0}
.red-boton{min-height:44px;padding:0 16px;white-space:nowrap}
.red-motivo{flex:1 0 100%;padding-left:36px;font-size:13px;color:var(--muted)}
/* 23/10/2026: «Tus canales» en Perfil: la foto de YouTube del canal, redonda, o su inicial sobre su color. */
.fila-canal{gap:12px}
.fila-canal .izq{flex:1;min-width:0}
.cfoto{flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--canal-etq,var(--faint));color:var(--canal-etq-texto,var(--fg));display:grid;place-items:center}
.cfoto img{width:100%;height:100%;object-fit:cover;display:block}
.cfoto span{font-size:16px;font-weight:700;line-height:1}
/* 23/10/2026: las estadísticas de YouTube (leer) frente a las redes para publicar: su icono, una gráfica sobre azul;
   y el aviso cuando faltan o han caducado, con su botón. */
.modulo-estad .micono{background:color-mix(in srgb,#3b82f6 20%,transparent);color:#4b8cf7}
.estad-nota{margin:0 0 12px;font-size:13.5px;color:var(--muted)}
.estad-aviso{margin:4px 0 14px;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--amarillo) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--amarillo) 40%,transparent)}
.estad-aviso p{margin:0 0 12px;font-size:14.5px;line-height:1.4}
.estad-aviso p b{display:block;margin-bottom:2px}
.estad-aviso .btn{width:100%;min-height:48px}
fieldset.fcampo{border:0;padding:0;margin:0;min-width:0}
.fila-dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fnota{margin:0;font-size:13px;color:var(--muted)}
/* 24/10/2026: el nombre corto del canal en cada tarjeta: el color nunca es lo único que dice de qué canal es. */
.ccanal{display:inline-block;margin-right:7px;padding:0 7px;border:0;border-radius:999px;background:var(--canal-etq,var(--piedra));color:var(--canal-etq-texto,#fff);font-size:11.5px;font-weight:600;line-height:18px;vertical-align:1px;white-space:nowrap}
/* 24/10/2026: «Otra duración» y sus minutos al elegir la idea, al crearla y al preparar capítulos; en la página del
   vídeo, solo una línea con la que tiene. */
.duracion .casilla{margin:0 0 10px}
.duracion .campo{max-width:160px}
.duracion .sub{color:var(--muted);font-size:13px;margin:0 0 12px}
.rv-duracion{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.rv-duracion b{color:var(--fg);font-weight:600}

/* === GrabaYa, la base (25/10/2026, docs/rediseno/marca-grabaya.md) =================================================
   Va al final para mandar sobre lo de arriba sin tocar cada pantalla: radios, títulos, el logo y la navegación. Las
   pantallas por dentro se rehacen en sus fases (docs/rediseno/plan.md). */

/* Radios: tarjetas 20 px; botones y campos 16 px. Casi sin sombras: las capas se separan por el tono del fondo. */
.card,.idea,.panel,.aviso,.bloque,.gancho,.banda,.edp,.modulo,.rv-bloque,.rv-det,.rv-punto,.rv-clase,.rv-clave,
.rv-resumen div,.rv-sin,.rv-aviso,.rv-gancho,.tpunto,.lado>div,.estad-aviso,.extra-ajustes,.columnas .col{border-radius:var(--r-tarjeta)}
.btnp,.btns,.btn,.grande,.secundario,.mas,.mas-b,.subir-b,.subir-img,.ptab,.segmentado,.rapido,.red-boton,
.rvg .b1,.rvg .b2,.motivo,.edin,.campo input,.campo textarea,.campo select,.hoja select,.hoja input[type=text],
.solo input,.fcampo textarea,.fcampo input:not([type]),.fcampo input[type=email],.fcampo input[inputmode],.fcampo select,
.rv-nota textarea,.rv-editar{border-radius:var(--r-control)}
.hoja{border-radius:var(--r-tarjeta) var(--r-tarjeta) 0 0}
.btns,.btnp{padding:9px 14px}
.btns{background:var(--surface)}

/* Títulos: Figtree 800 con algo de espaciado negativo; el texto, 400-500. */
.ptitulo,.dtitulo,.rv-titulo,.fnombre,.yo-nombre,.solo h1{font-weight:800;letter-spacing:-.02em}
.sec h2,.paso h2,h2.sueltas{font-weight:700}

/* El logo y el nombre: logo a la izquierda y «GrabaYa» en Figtree 800, con «Ya» en rojo. */
.logo{display:block;flex:none}
.marca-grabaya{display:inline-flex;align-items:center;gap:8px;color:var(--fg)}
.marca-grabaya .nombre{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1}
.marca-grabaya .nombre b{font-weight:800;color:var(--rojo)}
.entrar-marca{margin:8px 0 24px}
.entrar-marca .nombre{font-size:30px}

/* La navegación. En el móvil, barra flotante blanca, separada de los bordes, con borde arena fino y sombra muy suave;
   iconos y textos en grafito; la sección activa, en una pastilla roja con el icono y el texto en blanco. */
.secciones{position:fixed;z-index:6;left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));
  bottom:max(16px,env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px;
  background:var(--surface);border:.5px solid var(--borde-barra);border-radius:24px;box-shadow:var(--sombra-barra)}
.secciones-marca{display:none}
.secciones .nb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 0 6px;
  border-radius:18px;color:var(--fg);font-size:12px;font-weight:700;text-decoration:none;text-align:center}
.secciones .nb svg{width:23px;height:23px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.secciones .nb[aria-current="page"]{background:var(--rojo);color:#FFFFFF}
.secciones .nb:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.toast,.deshacer{bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* Arriba de cada sección (el prototipo): el logo de 26 px con «GrabaYa» a 16 px y la inicial de la persona en un
   círculo grafito, que lleva a Tú. En el ordenador, no: el logo va en el menú lateral. */
.arriba{display:flex;align-items:center;justify-content:space-between;padding-top:16px}
.arriba-marca{text-decoration:none}
.arriba .marca-grabaya .nombre{font-size:16px}
.arriba-yo{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--grafito);color:var(--crema-clara);
  font-size:12px;font-weight:800;text-decoration:none}
@media (prefers-color-scheme: dark){.arriba-yo{background:var(--surface);box-shadow:inset 0 0 0 .5px var(--line)}}
header{padding-top:12px}

/* Cabeceras de bloque como en el prototipo: 14 px en 700, sin mayúsculas. Botones secundarios, blancos con borde fino. */
.sec h2,.paso h2,h2.sueltas{font-size:14px;letter-spacing:0;text-transform:none;color:var(--fg)}
#perfil .sec h2,#canales .sec h2{color:var(--fg)}
.secundario,.btn:not(.prim):not(.peligro),.btns{background:var(--surface);border:.5px solid var(--line);font-weight:700}
.grande,.secundario,.btn{font-size:15px;padding:14px}
a.volver,.atras{color:var(--muted);font-weight:600}

/* En el ordenador, la misma navegación como menú lateral, con el logo arriba. Las páginas con barra dejan su hueco a
   la izquierda y centran su columna en lo que queda; las de detalle (sin barra) siguen como estaban. */
@media (min-width:900px){
  :root{--lateral:248px}
  .arriba{display:none}
  .secciones{left:0;right:auto;top:0;bottom:0;width:var(--lateral);display:flex;flex-direction:column;gap:4px;
    padding:calc(22px + env(safe-area-inset-top,0px)) 16px 22px;border:0;border-right:.5px solid var(--borde-barra);border-radius:0;box-shadow:none}
  .secciones-marca{display:flex;align-items:center;min-height:44px;margin:0 6px 22px;text-decoration:none}
  .secciones .nb{flex-direction:row;justify-content:flex-start;gap:12px;min-height:46px;padding:10px 14px;border-radius:var(--r-control);font-size:15px}
  .secciones .nb:not([aria-current="page"]):hover{background:var(--surface2)}
  body:has(>.secciones){padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));
    padding-left:calc(var(--lateral) + max(32px,(100% - var(--lateral) - 760px) / 2));padding-right:max(32px,(100% - var(--lateral) - 760px) / 2)}
  body:has(>.secciones):has(>main#tablero){padding-left:calc(var(--lateral) + max(32px,(100% - var(--lateral) - 1180px) / 2));
    padding-right:max(32px,(100% - var(--lateral) - 1180px) / 2)}
  body:has(>.secciones) .toast,body:has(>.secciones) .deshacer{bottom:calc(24px + env(safe-area-inset-bottom,0px));margin-left:calc(var(--lateral) / 2)}
  body:has(>.secciones) .velo{padding-left:var(--lateral)}
}
@media (prefers-reduced-motion:reduce){.secciones .nb{transition:none}}

/* === GrabaYa, las piezas de las pantallas (25/10/2026, docs/rediseno/prototipo-panel.html) =========================
   Panel blanco con cabecera (y rayita de color en las fases), filas de 48 px con separador fino, logo de canal y el
   icono de estado de un vídeo. */
.pn{background:var(--surface);border-radius:var(--r-tarjeta);margin-top:12px;overflow:hidden}
.ph{display:flex;align-items:center;gap:8px;margin:0;padding:12px 14px 8px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--fg)}
.ph .n{margin-left:auto;font-weight:500;font-size:13px;color:var(--muted)}
.rayita{flex:none;width:4px;height:14px;border-radius:2px;background:var(--fase,var(--fg))}
.f-revisar{--fase:var(--f-revisar)}.f-grabar{--fase:var(--f-grabar)}.f-editando{--fase:var(--f-editando)}
.r{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 14px;border-top:.5px solid var(--separador);color:var(--fg);text-decoration:none;margin:0}
a.r:active{background:var(--surface2)}
.r .t,.r-t{flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r .s,.s-linea{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.r.trabaja{opacity:.5}
.vacio-fase{color:var(--muted);font-size:14px}
.lg{flex:none;display:inline-grid;place-items:center;border-radius:50%;overflow:hidden;background:var(--canal-etq,var(--piedra));
  color:var(--canal-etq-texto,#fff);font-weight:800;line-height:1;font-style:normal}
.lg img{width:100%;height:100%;object-fit:cover;display:block}
.lg-20{width:20px;height:20px;font-size:9px}.lg-22{width:22px;height:22px;font-size:9.5px}.lg-26{width:26px;height:26px;font-size:11px}
.lg-30{width:30px;height:30px;font-size:12.5px}.lg-44{width:44px;height:44px;font-size:18px}.lg-50{width:50px;height:50px;font-size:21px}
.lg-64{width:64px;height:64px;font-size:27px}
.chip .lg{margin-left:-2px}
.est{flex:none;width:18px;height:18px}
.est-fase circle{fill:none;stroke:var(--fase);stroke-width:1.6}.est-fase path{fill:var(--fase)}
.est-espera circle{fill:none;stroke:var(--apagado);stroke-width:1.6;stroke-dasharray:2.6 2.4}
.est-grabar circle{fill:none;stroke:var(--f-grabar);stroke-width:1.6}.est-grabar .dentro{fill:var(--f-grabar);stroke:none}
.est-error circle{fill:var(--danger)}.est-error path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.fases .fase:first-child{margin-top:4px}
@media (min-width:900px){
  .fases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
  .fases .fase{margin-top:4px}
}

/* Tarjetas con etiqueta, como en el prototipo (.card .lab .p). */
.card{padding:14px 16px}
.lab{font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.p{font-size:15px;line-height:1.5;margin:0}
.enlace-fuerte{display:inline-block;margin-top:10px;font-weight:700;color:var(--fg);text-decoration:none}
.back{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:15px;font-weight:600;color:var(--muted);text-decoration:none}
.back svg.i,.back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* === La página del vídeo (25/10/2026) === */
.vpag .dtop{display:flex;align-items:center;justify-content:space-between;margin:8px 0 0}
.mas-puntos{min-width:44px;min-height:36px;padding:0 12px;border-radius:999px;background:var(--surface);border:.5px solid var(--line);font-size:17px;font-weight:800;letter-spacing:1px;text-align:center;color:var(--fg)}
.mas-puntos[aria-disabled=true]{opacity:.5}
.v-canal{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:var(--muted);font-weight:600}
.vpag .rv-titulo{font-size:22px;font-weight:800;letter-spacing:-.3px;line-height:1.25;margin:8px 0 0}
.vpag .rv-duracion{font-size:13px;margin:6px 0 0}
.seg{display:flex;gap:6px;margin:16px 0 6px}
.sg{flex:1;min-width:0;text-align:center;text-decoration:none;color:var(--muted)}
.sg .b{display:block;height:4px;border-radius:2px;background:var(--line)}
.sg.hecho .b{background:var(--muted)}
.sg.aqui .b{background:var(--f-revisar)}
.sg .l{display:block;margin-top:6px;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg.aqui .l{color:var(--fg)}
.sg .rv-cuenta{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--amarillo);color:#fff;font-size:10.5px;font-weight:800;vertical-align:1px}
.v-estado{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-radius:var(--r-tarjeta);background:var(--surface)}
.v-estado b{font-size:15px}
.v-estado .s-linea{white-space:normal}
.v-estado .est-fase{--fase:var(--f-editando)}
/* Los bloques de la promesa y la guía, como tarjetas con su etiqueta; sin los iconos de antes. */
.vpag .rv-bloque{border-radius:var(--r-tarjeta);padding:14px 16px;margin:10px 0 0;font-size:15px;line-height:1.5}
.vpag .rv-etq{font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:600;margin-bottom:6px}
.vpag .rv-etq svg.i{display:none}
.vpag .rv-grande{font-size:19px;font-weight:800;line-height:1.3}
.vpag .rv-det{border-radius:var(--r-tarjeta);margin-top:10px}
.vpag .rv-det summary svg.i{display:none}
/* El guion: el gancho en su tarjeta y los puntos en una lista numerada, como el prototipo. */
.vpag .rv-gancho{background:var(--surface);border-left:0;border-radius:var(--r-tarjeta);padding:14px 16px;margin:12px 0 10px}
.vpag .rv-gancho ul{color:var(--soft)}
.vpag .rv-puntos{background:var(--surface);border-radius:var(--r-tarjeta);overflow:hidden;gap:0}
.vpag .rv-punto{background:transparent;border-radius:0;border-top:.5px solid var(--separador)}
.vpag .rv-punto:first-child{border-top:0}
.vpag .rv-punto .n{width:22px;height:22px;background:var(--crema);color:var(--muted);font-size:12px;font-weight:700}
.vpag .rv-punto .t{font-size:15px;font-weight:500;line-height:1.4}
.vpag .rv-punto .rv-fila{padding:9px 6px 9px 4px}
.vpag .rv-todo{color:var(--muted);font-size:13.5px}
.vpag .rv-todo svg.i{display:none}
.vpag .ed.con-duda{background:var(--resalte);border-radius:4px;padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.marca-duda{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:6px;border-radius:50%;background:var(--f-revisar);color:#fff;font-size:12.5px;font-weight:800;vertical-align:1px;text-align:center}
.vpag .rv-duda{background:var(--f-revisar);color:#fff}
.duda-por{font-size:16px;line-height:1.45;color:var(--fg)}
.mas-b.peligro-t .t{color:var(--danger)}
.mas-b{text-decoration:none}
.botones.una{grid-template-columns:1fr}
/* Abajo, fijos: «Pedir cambios» y «Me vale» (este en rojo), como en el prototipo. */
.vpag .rv-acciones .in{grid-template-columns:1fr 1fr}
.vpag .rv-acciones .in.una{grid-template-columns:1fr}
.rvg .b1,.rvg .b2{padding:14px 10px;border-radius:var(--r-control);font-size:15px;font-weight:700}
.rvg .b2{background:var(--surface);border:.5px solid var(--line)}
.vpag .rv-acciones svg.i{display:none}
.v-listo{margin-top:12px}
.vpag .rv-contador .num{background:var(--f-revisar);color:#fff}
.vpag .rv-contador .barritas i.on{background:var(--f-revisar)}


/* === Ideas (25/10/2026) === */
.mas-rojo{flex:none;width:36px;height:36px;border-radius:50%;background:var(--primario);color:#fff;font-size:24px;font-weight:500;line-height:1;display:grid;place-items:center;text-align:center}
.cab:has(.mas-rojo){align-items:center}
.r-t{flex:1;min-width:0}
.r-t .t{display:block}
.r-fin{flex:none;margin-top:0}
.barrita{display:block;position:relative;height:4px;margin-top:6px;border-radius:2px;background:var(--pista);overflow:hidden}
.barrita::after{content:"";position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;background:var(--fg)}
.aviso-t{color:var(--ambar-texto)}
.nota-n{flex:none;min-width:30px;text-align:right;font-size:16px;font-weight:800;color:var(--muted)}
.nota-n.n-verde,.nota-n.n-azul{color:var(--verde-texto)}.nota-n.n-naranja{color:var(--ambar-texto)}
.repetida{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ambar) 18%,transparent);color:var(--ambar-texto);font-size:13px;font-weight:800}
.ver-mas{display:block;margin-top:14px;text-align:center;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none}
.aviso-coach{display:flex;align-items:center;gap:8px;margin-top:12px}
.r-idea{touch-action:pan-y;transition:background .15s}
.r-idea.a-elegir{background:color-mix(in srgb,var(--f-editando) 14%,var(--surface))}
.r-idea.a-descartar{background:color-mix(in srgb,var(--danger) 12%,var(--surface))}
@media (prefers-reduced-motion:reduce){.r-idea{transition:none}}
a.r-t{color:inherit;text-decoration:none}
.marca-retirada{font-weight:700;color:var(--ambar-texto)}

/* === Detalle de una idea (25/10/2026) === */
.ipag{padding-bottom:110px}
.ipag .dtop{display:flex;align-items:center;justify-content:space-between;margin:8px 0 0}
.i-cab{display:flex;gap:14px;align-items:flex-start;margin-top:8px}
.i-cab-t{flex:1;min-width:0}
.i-titulo{font-size:21px;font-weight:800;letter-spacing:-.3px;line-height:1.25;margin:8px 0 0}
.i-meta{white-space:normal;margin-top:6px}
.anillo{flex:none;width:80px;height:80px}
.anillo .pista{fill:none;stroke:var(--pista);stroke-width:8}
.anillo .lleno{fill:none;stroke:var(--nota,var(--piedra));stroke-width:8;stroke-linecap:round}
.anillo text{font-family:var(--font);font-size:26px;font-weight:800;fill:var(--fg)}
.anillo.n-verde,.anillo.n-azul{--nota:var(--f-editando)}.anillo.n-naranja{--nota:var(--ambar)}.anillo.n-rojo{--nota:var(--piedra)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.tile{background:var(--surface);border-radius:16px;padding:12px}
.tile .h{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600}
.tile .h svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile .v{font-size:17px;font-weight:800;margin-top:8px}
.m{display:flex;gap:4px;margin-top:8px}
.m span{flex:1;height:6px;border-radius:3px;background:var(--pista)}
.m1 span:nth-child(1),.m2 span:nth-child(-n+2){background:var(--ambar)}
.m3 span{background:var(--f-editando)}
.ipag .card{margin-top:10px}
.dos-lineas{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.leer-mas summary{margin-top:6px;font-weight:700;color:var(--muted);font-size:14px;cursor:pointer}
.leer-mas[open] summary{display:none}
.card:has(.leer-mas[open]) .dos-lineas{display:none}
.aviso-repetida{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ambar) 45%,transparent)}
.aviso-repetida .lab{color:var(--ambar-texto)}
.pt{display:flex;gap:10px;padding:9px 0;border-top:.5px solid var(--separador);font-size:15px;line-height:1.4}
.lab+.pt{border-top:0}
.nm{flex:0 0 22px;height:22px;border-radius:50%;background:var(--crema);font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700}
@media (prefers-color-scheme: dark){.nm{background:var(--surface2)}}
.ref-v{display:block;padding:9px 0;border-top:.5px solid var(--separador);color:var(--fg);text-decoration:none}
.lab+.ref-v{border-top:0}
.ref-v .t{display:block;font-size:14.5px}
.ref-v .s{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.rv-acciones.fijas .in{max-width:720px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.rv-acciones.fijas .in.una{grid-template-columns:1fr}
.rv-acciones.fijas form{margin:0}
.ipag .b1,.ipag .b2{display:flex;justify-content:center;align-items:center;width:100%;padding:14px 10px;border-radius:var(--r-control);font-size:15px;font-weight:700;text-decoration:none}
.ipag .b1{background:var(--primario);color:#fff}
.ipag .b2{background:var(--surface);border:.5px solid var(--line);color:var(--fg)}
.ipag .b2.rojo-t{color:var(--danger)}

/* === Canales (25/10/2026) === */
.row{display:flex;align-items:center;gap:12px}
.canal-tarjeta{display:block;margin-top:10px;color:var(--fg);text-decoration:none}
.c-nombre{font-size:16px;font-weight:800}
.chev-d{flex:none;color:var(--apagado);font-size:22px;line-height:1}
.cifras{display:flex;margin-top:12px;padding-top:10px;border-top:.5px solid var(--separador)}
.cifras>div{flex:1;min-width:0}
.cifras b{display:block;font-size:17px;font-weight:800}
.cifras .s-linea{white-space:normal}
.aviso-rojo{display:inline-flex;gap:5px;align-items:center;margin-top:10px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;
  color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.archivados{margin-top:14px}
.archivados summary{cursor:pointer;margin:0}
.archivados .r{padding-left:0;padding-right:0}
.cpag{max-width:none;padding-top:0}
.cpag .back{align-self:flex-start;margin-top:8px}
.c-cab{display:flex;align-items:center;gap:12px;margin-top:6px}
.c-titulo{font-size:22px;font-weight:800;letter-spacing:-.3px;margin:0}
.pills{display:flex;gap:6px;margin-top:14px}
.pills>*{flex:1;text-align:center;padding:9px 0;border-radius:999px;font-size:14px;font-weight:600;background:var(--surface);color:var(--muted);
  border:.5px solid var(--line);text-decoration:none}
.pills>[aria-current="page"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pills-sec>*{padding:7px 0;font-size:13px}
.pills .apagada{opacity:.5}
.cpag .card{margin-top:10px}
.pronto .p{color:var(--muted)}
.pub{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:.5px solid var(--separador);color:var(--fg);text-decoration:none}
.lab+.pub{border-top:0}
.mini-v{flex:0 0 70px;height:40px;border-radius:8px;background:linear-gradient(135deg,#1D1E1C,#5A4636)}
.pub .t{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.punto-nuevo{display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:var(--f-revisar);vertical-align:2px}
.barrita.verde::after{background:var(--f-editando)}
.boton-ancho{display:block;width:100%;margin-top:12px;padding:14px;border-radius:var(--r-control);background:var(--surface);border:.5px solid var(--line);font-weight:700;text-align:center;color:var(--fg)}
.nota-pie{margin-top:14px;white-space:normal}
.envolver{white-space:normal}
.larga{-webkit-line-clamp:4}
.pre{white-space:pre-wrap}
.caida .cuando{flex:0 0 44px;font-weight:800;font-variant-numeric:tabular-nums}
.enlace-yt{display:inline-flex;align-items:center;font-size:13px;letter-spacing:0;font-weight:700;text-decoration:none}
.cpag .archivar{color:var(--danger);font-weight:700}

/* === Tú (25/10/2026) === */
.tu-tarjeta{margin-top:12px;padding:16px;border-radius:var(--r-tarjeta);background:var(--grafito);color:var(--crema-clara)}
@media (prefers-color-scheme: dark){.tu-tarjeta{background:var(--surface);box-shadow:inset 0 0 0 .5px var(--line)}}
.tu-tarjeta summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.tu-tarjeta .yfoto{width:50px;height:50px;font-size:19px;font-weight:800;background:#4A4A47;color:var(--crema-clara)}
.tu-tarjeta .yo-nombre{display:block;font-size:19px;font-weight:800}
.tu-tarjeta .yo-correo{display:block;font-size:13px;color:#A5A19C}
.tu-tarjeta .mcuerpo{margin-top:14px;padding:14px;border-radius:16px;background:var(--surface);color:var(--fg)}
.tu-desde{margin-top:16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--piedra);font-weight:600}
.aviso-amarillo{margin-top:12px;padding:12px 14px;border-radius:var(--r-tarjeta);background:color-mix(in srgb,var(--ambar) 12%,var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ambar) 40%,transparent);font-size:14.5px;line-height:1.4}
.aviso-amarillo p{margin:0}.aviso-amarillo p+p{margin-top:8px}
.it{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:.5px solid var(--separador);color:var(--fg);text-decoration:none}
.it:first-child{border-top:0}
.it-t{font-size:15px;font-weight:600}
.sq{flex:0 0 30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff}
.sq svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sq-revisar{background:#3E63A8}.sq-grabar{background:#F2541B}.sq-editando{background:#3F8F6B}.sq-piedra{background:#8E8B87}.sq-grafito{background:#1D1E1C}
@media (prefers-color-scheme: dark){.sq-grafito{background:#4A4A47}}
.salir-tarjeta{display:block;width:100%;margin-top:12px;text-align:center;color:var(--danger);font-weight:700;font-size:15px}
.ajuste{display:flex;align-items:center;gap:12px;margin-top:10px}
.ajuste form{margin:0}

/* === Pantallas menores (25/10/2026): serie, borrador y lo demás, con las mismas reglas === */
.ipag .preparar .scaps{margin:0;padding:0}
.ipag .preparar .scaps li{padding:8px 0;border-top:.5px solid var(--separador);font-size:15px}
.ipag .preparar .scaps li:first-child{border-top:0}
.ipag .preparar .btn.prim{margin-top:12px;padding:14px;border-radius:var(--r-control);font-weight:700}
.ipag .campo{margin-top:12px}
/* Las pantallas de dentro (Tu voz, Administración, Usuarios, Contraseña…): el «‹ volver» pequeño y gris encima del
   título, y los formularios de un panel con su margen. */
h1:has(> a.volver){font-size:15px;font-weight:600;letter-spacing:0;line-height:44px}
h1 > a.volver{color:var(--muted)}
.ptitulo{font-size:28px;font-weight:800;letter-spacing:-.5px;margin:0 2px}
.panel > form:not(.fila):not(.extra){padding:12px 14px 14px}
.panel > form:not(.fila) > .fila{padding-left:0;padding-right:0}
.panel .tecnico{padding-left:14px;padding-right:14px}
.solo .dtop a.volver,.dtop a.volver{color:var(--muted);font-weight:600}