/* GENERADO por construir.py desde el prototipo e33621cf59eae372. No editar a mano. */

  /* Prototipo de la experiencia dentro de Mi cuenta. Tokens del sistema de
     Sensorial (theme.json del tema): papel cálido, turquesa de marca, ámbar para
     marcas pequeñas. Dos columnas en escritorio —menú de la cuenta y contenido—,
     una sola en el móvil, que es donde esto se va a usar de verdad. */
  :root{
    --papel:#FAF7F2; --sup:#FFFFFF; --sup2:#F2EDE5; --linea:#DED7CC; --mesa:#EDE7DD;
    --tinta:#1F1D1B; --tinta2:#46423D; --tinta3:#6E685F;
    --turquesa:#098D9A; --turquesa-texto:#077480; --turquesa-100:#E3F3F4; --turquesa-200:#BFE3E6;
    --ambar:#D9962B; --ambar-100:#FBF1DF; --ambar-tipo:#7A5200;
    --quitado:#B3261E; --quitado-100:#FBE9E7;
    --tipo:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    color-scheme: light;
  }
  /* Esto es la maqueta de un sitio de línea clara. Se fija en claro a propósito:
     si cambiara con el tema del navegador de quien la abre, lo que se estaría
     revisando no sería la pantalla que va a existir. */

  *{box-sizing:border-box}
  body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--tipo);
       font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
  .envoltura{max-width:1000px;margin:0 auto;padding-block:20px 64px;padding-left:16px;padding-right:16px}

  /* Barra de revisión. Todo lo que esté sobre este fondo ámbar NO lo ve el autor:
     es comentario para decidir. */
  .revision{background:var(--ambar-100);border:1px solid var(--ambar);border-radius:14px;
            padding:16px;margin-bottom:24px}
  .revision>p{margin:0 0 12px;font-size:14px;color:var(--tinta2)}
  .revision b{color:var(--tinta)}
  .pestanas{display:flex;flex-wrap:wrap;gap:8px}
  .pestanas button{font:inherit;font-size:13px;font-weight:600;cursor:pointer;
    background:var(--sup);color:var(--tinta2);border:1px solid var(--linea);
    border-radius:999px;padding:9px 14px;min-height:44px}
  .pestanas button[aria-selected="true"]{background:var(--turquesa-texto);border-color:var(--turquesa-texto);color:#fff}
  .pestanas button:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px}

  .nota-revision{background:var(--ambar-100);border-left:4px solid var(--ambar);
    border-radius:0 10px 10px 0;padding:12px 16px;margin-top:26px;font-size:14px;color:var(--tinta2)}
  .nota-revision b{color:var(--tinta)}

  .cuenta{display:grid;gap:26px}
  @media (min-width:860px){ .cuenta{grid-template-columns:232px 1fr;gap:34px} }

  .menu{min-width:0}
  .menu h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta3);
    margin:0 0 10px;font-weight:600}
  .menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
  @media (min-width:860px){ .menu ul{display:block} }
  .menu a{display:block;padding:11px 14px;border-radius:10px;text-decoration:none;
    color:var(--tinta2);font-weight:500;border:1px solid transparent;min-height:44px}
  @media (max-width:859px){ .menu a{border-color:var(--linea);background:var(--sup)} }
  .menu a[aria-current="page"]{background:var(--turquesa-100);color:var(--turquesa-texto);
    font-weight:600;border-color:var(--turquesa-200)}
  .menu a:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}

  .panel{min-width:0}

  /* En la pantalla de escritura el menú de la cuenta estorba: se esconde y el
     documento se queda con todo el ancho, que es lo que pide un editor. */
  .envoltura.ancha{max-width:1440px}
  .envoltura.ancha .menu{display:none}
  .envoltura.ancha .cuenta{grid-template-columns:1fr}
  .volver{display:none;margin-bottom:14px}
  .envoltura.ancha .volver{display:inline-flex}

  h1{font-size:30px;line-height:1.15;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
  h2.titulo{font-size:21px;line-height:1.25;letter-spacing:-.01em;margin:0 0 10px;text-wrap:balance}
  h3{font-size:18px;margin:34px 0 4px;letter-spacing:-.01em}
  .sub{color:var(--tinta2);margin:0 0 24px;max-width:62ch}

  .tarjeta{background:var(--sup);border:1px solid var(--linea);border-radius:16px;padding:22px;margin-bottom:18px}
  .tarjeta--marca{background:var(--turquesa-100);border-color:var(--turquesa-200)}

  .plazo{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:12px}
  .plazo b{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--turquesa-texto)}
  .plazo span{font-size:14px;color:var(--tinta3)}

  .boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
    padding:0 22px;border-radius:10px;border:0;font:inherit;font-weight:600;cursor:pointer;
    background:var(--turquesa-texto);color:#fff;text-decoration:none}
  .boton--ambar{background:var(--ambar);color:#1F1D1B}
  .boton--llano{background:transparent;color:var(--turquesa-texto);border:1px solid var(--linea)}
  .boton--chico{min-height:40px;padding:0 14px;font-size:14px}
  .boton:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px}
  .acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}

  .campo{margin-bottom:22px}
  .campo>label{display:block;font-weight:600;margin-bottom:4px}
  .pista{font-size:14px;color:var(--tinta3);margin:0 0 8px;max-width:62ch}
  .pista strong{color:var(--tinta2)}
  input[type=text],input[type=email],input[type=url],textarea{
    width:100%;font:inherit;color:var(--tinta);background:var(--sup);
    border:1px solid var(--linea);border-radius:10px;padding:12px 14px;min-height:48px}
  textarea{min-height:120px;resize:vertical;line-height:1.6}
  input:focus-visible,textarea:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}

  /* Barra de herramientas en grupos, en el orden de siempre: deshacer, estilo de
     párrafo, formato de letra, lo que se inserta, y al final la revisión. */
  .barra-formato{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:-1px;
    background:var(--sup2);border:1px solid var(--linea);border-radius:10px 10px 0 0;padding:7px 8px}
  .barra-formato .grupo{display:flex;align-items:center;gap:3px}
  .barra-formato button{font:inherit;font-size:14px;font-weight:600;min-height:38px;padding:0 11px;
    background:transparent;border:1px solid transparent;border-radius:7px;color:var(--tinta2);cursor:pointer}
  .barra-formato button:hover{background:var(--sup);border-color:var(--linea)}
  .barra-formato button.apagado{opacity:.45}
  .barra-formato button[aria-pressed="true"]{background:var(--turquesa-100);border-color:var(--turquesa-200);
    color:var(--turquesa-texto)}
  .barra-formato button.apagado:hover{background:transparent;border-color:transparent}
  .barra-formato button:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}
  .barra-formato button.icono{width:38px;padding:0;display:inline-grid;place-items:center;font-size:16px}
  .barra-formato .icono svg{display:block}
  .barra-formato .sep{width:1px;align-self:stretch;background:var(--linea);margin:2px 6px}
  .barra-formato select{font:inherit;font-size:14px;font-weight:500;min-height:38px;
    padding:0 10px;border:1px solid var(--linea);border-radius:7px;
    background:var(--sup);color:var(--tinta2);cursor:pointer}
  .barra-formato select:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}
  /* Ya no va pegado a la derecha: quedaba justo encima de «Aceptar todos los
     cambios», en el mismo borde, y era fácil pulsar uno creyendo pulsar el otro.
     Eso fue lo que te aceptó todos los cambios de golpe. */
  .barra-formato .derecha{margin-left:0}
  .barra-formato .derecha button{border-color:var(--linea);background:var(--sup);color:var(--turquesa-texto)}

  .lienzo-texto{border:1px solid var(--linea);border-radius:0 0 10px 10px;background:var(--sup);
    padding:18px;min-height:240px;font-size:17px;line-height:1.7}
  .lienzo-texto p{margin:0 0 16px}
  .lienzo-texto p:last-child{margin-bottom:0}
  .vacio{color:var(--tinta3)}

  .guardado{font-size:14px;color:var(--tinta3);display:flex;align-items:center;gap:8px;
    min-height:24px;transition:color .2s}
  .guardado svg{flex:none;display:block}
  .guardado[data-estado="guardado"]{color:var(--turquesa-texto)}
  .guardado[data-estado="sin-red"]{color:var(--ambar-tipo)}

  /* Mientras escribe, la nube "respira": es el único momento en que hay algo
     pendiente, y se nota sin pedir atención. */
  .guardado[data-estado="escribiendo"] svg,
  .guardado[data-estado="guardando"] svg{animation:respira 1.4s ease-in-out infinite}
  @keyframes respira{0%,100%{opacity:.35}50%{opacity:1}}
  @media (prefers-reduced-motion: reduce){
    .guardado svg{animation:none !important}
  }
  .guardado .visto{opacity:0;transition:opacity .25s}
  .guardado[data-estado="guardado"] .visto{opacity:1}

  .punto{width:9px;height:9px;border-radius:999px;background:var(--turquesa);flex:none}

  .pasos{list-style:none;margin:0;padding:0}
  .pasos li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--linea)}
  .pasos li:last-child{border-bottom:0}
  .marca{flex:none;width:26px;height:26px;border-radius:999px;border:2px solid var(--linea);
    display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--tinta3);background:var(--sup)}
  .hecho .marca{background:var(--turquesa-texto);border-color:var(--turquesa-texto);color:#fff}
  .ahora .marca{border-color:var(--ambar);color:var(--ambar)}
  .pasos strong{display:block;font-size:16px}
  .pasos span.d{display:block;font-size:14px;color:var(--tinta2)}
  .pendiente strong,.pendiente span.d{color:var(--tinta3)}

  /* Sin relleno horizontal: cada letra escrita iba dentro de su propia marca y
     el relleno se sumaba, así que el texto salía con las letras separadas. */
  del{color:var(--quitado);background:var(--quitado-100);text-decoration:line-through;
    border-radius:3px;box-decoration-break:clone}
  ins{color:var(--turquesa-texto);background:var(--turquesa-100);text-decoration:none;
    border-bottom:2px solid var(--turquesa-200);border-radius:3px;box-decoration-break:clone}
  .comentario{background:var(--sup2);border:1px solid var(--linea);border-left:4px solid var(--turquesa);
    border-radius:0 12px 12px 0;padding:14px 16px;margin:4px 0 18px}
  .comentario .quien{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--tinta3);font-weight:600;margin:0 0 6px}
  .comentario p{margin:0;font-size:15px;line-height:1.55;color:var(--tinta2)}
  .comentario .acciones{margin-top:12px;gap:8px}

  /* El documento. En escritorio, el texto a la izquierda y la revisión al margen
     derecho, alineada con el párrafo del que habla, como el panel de Word. En el
     móvil cae debajo del párrafo, que es lo único que cabe. */
  /* La mesa de trabajo. La hoja va en la primera columna y los comentarios en
     la segunda, fuera de ella. Cada bloque es «display:contents» para que sus
     dos mitades caigan cada una en su columna y la hoja salga continua. */
  /* Dos zonas, no una hoja: blanca la del texto, grisácea la de los comentarios.
     Nada de sombra ni de bordes redondeados alrededor del texto, para que nadie
     piense que el artículo se publica con forma de hoja. */
  .doc{background:var(--mesa);border:1px solid var(--linea);border-radius:0 0 12px 12px;
    padding:30px 0;position:relative;overflow:hidden}
  .doc .bloque{display:grid;gap:10px;margin-bottom:14px}
  .doc .bloque > .texto{min-width:0;font-size:17px;line-height:1.75}
  .doc .bloque > .texto p{margin:0 0 16px}
  .doc .margen{min-width:0;display:flex;flex-direction:column;gap:6px}
  .hoja{display:none}

  @media (min-width:900px){
    /* align-content:start es imprescindible: al documento se le pone un
       min-height para que quepan los comentarios flotantes, y sin esto la
       rejilla repartía ese alto sobrante entre las filas, abriendo huecos
       enormes entre el título, el subtítulo y el resumen. */
    /* Sin tope: la hoja se queda con todo el ancho que haya y la columna de
       comentarios solo con lo que miden las fichas. */
    .doc{display:grid;grid-template-columns:minmax(0,1fr) 236px;column-gap:22px;
      align-items:start;align-content:start}
    .doc .bloque{display:contents}
    .doc .bloque > .texto{grid-column:1;position:relative;z-index:1;padding:0 44px;max-width:none}
    /* El margen de arriba y abajo lo pone la propia hoja, que se dibuja un poco
       más alta que el texto. Con selectores de primero y último no salía: la
       hoja es también un div y se llevaba el :last-of-type. */
    .doc .margen{position:absolute;z-index:1;margin-bottom:0;width:236px}
    /* «1 / -1» no sirve aquí: las filas son implícitas y la última línea del
       grid explícito es la 1, así que la hoja salía de dos píxeles de alto. */
    /* La zona blanca: va de arriba abajo, pegada al borde, sin esquinas ni
       sombra. Se mide con JS porque el ancho depende de la columna del texto. */
    .hoja{display:block;position:absolute;z-index:0;
      left:0;top:0;bottom:0;width:var(--hoja-w,0);
      background:var(--sup);border-right:1px solid var(--linea)}
  }

  .ficha{border:1px solid var(--linea);border-radius:8px;padding:7px 9px;background:var(--sup2);
    border-left:3px solid var(--turquesa)}
  .ficha--cambio{border-left-color:var(--ambar)}
  .ficha--resuelta{opacity:.62}
  .ficha .quien{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta3);
    font-weight:700;margin:0 0 2px;line-height:1.25}
  .ficha p{margin:0;font-size:12.5px;line-height:1.4;color:var(--tinta2)}
  /* Las acciones, como enlaces y no como botones: en una ficha de cuatro líneas,
     tres botones con fondo ocupan más que el propio comentario. */
  .ficha .acciones{margin-top:5px;gap:12px}
  .ficha .boton{min-height:24px;padding:0;font-size:12px;border-radius:0;
    background:transparent;border:0;color:var(--turquesa-texto);font-weight:600}
  .ficha .boton:hover{background:transparent;text-decoration:underline}
  .ficha .boton--ambar{color:var(--ambar-tipo)}
  .respuesta{margin-top:6px;padding-top:6px;border-top:1px solid var(--linea)}
  /* El enlace de un comentario a otro: se pulsa y lleva a él. */
  .ficha .enlace-ficha{margin-top:5px}
  .ficha .enlace-ficha a{color:var(--turquesa-texto);font-weight:600;text-decoration:underline}
  .ficha .enlazar{display:block;margin:6px 0 0;font-size:12px;color:var(--tinta3)}
  .ficha .enlazar select{display:block;width:100%;margin-top:3px;font:inherit;font-size:12px;
    padding:4px 6px;border:1px solid var(--linea);border-radius:6px;background:var(--sup);color:var(--tinta)}
  .respuesta .quien{color:var(--turquesa-texto)}

  mark{background:var(--turquesa-100);color:inherit;border-bottom:2px dotted var(--turquesa);
    padding:0 1px;border-radius:2px}

  .resumen-revision{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    background:var(--sup2);border:1px solid var(--linea);border-bottom:0;
    border-radius:0;padding:10px 14px;font-size:14px;color:var(--tinta2)}
  .resumen-revision b{color:var(--tinta)}

  .ficha{transition:box-shadow 140ms ease-out, border-color 140ms ease-out}
  .ficha--activa{box-shadow:0 0 0 3px var(--turquesa-200);border-color:var(--turquesa)}
  .ficha .firma{color:var(--tinta);font-weight:700;text-transform:none;letter-spacing:0;font-size:14px}
  .ficha .cuando{color:var(--tinta3);font-weight:500;text-transform:none;letter-spacing:0;font-size:13px}
  .ficha .tipo{display:inline-block;margin-left:4px;font-size:9.5px;letter-spacing:.05em;
    text-transform:uppercase;font-weight:700;color:var(--turquesa-texto);
    background:var(--turquesa-100);border-radius:999px;padding:0 5px;vertical-align:1px}
  .ficha--cambio .tipo{color:var(--ambar-tipo);background:var(--ambar-100)}
  .caja-respuesta{margin-top:10px}
  .caja-respuesta textarea{min-height:58px;font-size:13px;padding:8px 10px;min-height:58px}
  .navrev{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
    background:var(--sup2);border:1px solid var(--linea);border-bottom:0;padding:10px 14px;
    font-size:14px;color:var(--tinta2)}
  .navrev .cuenta-rev{font-variant-numeric:tabular-nums}
  .navrev b{color:var(--tinta)}
  .navrev .flechas{display:flex;gap:6px}
  .navrev button{min-height:38px;padding:0 12px;font-size:13px;border-radius:8px}
  mark.activa{background:var(--ambar-100);border-bottom-color:var(--ambar)}

  /* Conmutador de modo del prototipo. Va sobre ámbar porque es un control de
     revisión: en el producto real cada quien entra en su propio modo. */
  .modos{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--ambar-100);
    border:1px solid var(--ambar);border-radius:12px;padding:12px 14px;margin-bottom:22px;
    font-size:14px;color:var(--tinta2)}
  .modos b{color:var(--tinta)}
  .modos .grupo{display:flex;gap:6px;margin-left:auto}
  .modos button{font:inherit;font-size:13px;font-weight:600;min-height:40px;padding:0 14px;
    border-radius:999px;border:1px solid var(--linea);background:var(--sup);
    color:var(--tinta2);cursor:pointer}
  .modos button[aria-pressed="true"]{background:var(--turquesa-texto);border-color:var(--turquesa-texto);color:#fff}
  .modos button:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px}

  /* El texto se compone como en el artículo publicado: misma familia, mismo
     cuerpo y la misma medida de línea. Lo que el autor decide es la estructura
     —párrafos, subtítulos, citas, dónde va cada imagen—, no el ancho ni los
     cortes de línea, que cambian con la pantalla de quien lee. */
  /* El editor es una superficie de trabajo, no la página publicada: aquí la
     línea puede ser algo más larga para no dejar blanco muerto. La medida real
     del artículo se comprueba con «Previsualizar». */
  .doc .bloque > .texto{font-size:18px;line-height:1.78;max-width:none}
  .doc .bloque > .texto p{margin:0 0 18px}

  .solo-fundacion{display:none !important}
  .modo-fundacion .solo-fundacion{display:flex !important}
  .modo-fundacion .solo-autor{display:none !important}

  .ficha .mia{color:var(--tinta3);font-size:13px}

  /* El hilo que une cada ficha con el trozo de texto del que habla. Solo en
     pantalla ancha: en el móvil la ficha ya va pegada debajo de su párrafo. */
  .hilos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
  .hilos path{fill:none;stroke:var(--linea);stroke-width:1.5}
  .hilos path.vivo{stroke:var(--turquesa);stroke-width:2}
  /* Al pasar el ratón por un comentario o por su trozo, los dos se encienden y el hilo
     se marca con una punta hacia el texto. Damián, 24-10-2026: «no se marca, no me
     muestra la flechita». */
  .hilos path.mirado{stroke:var(--turquesa);stroke-width:2.5;marker-start:url(#hilo-punta)}
  .hilos marker path{fill:var(--turquesa);stroke:none}
  .texto mark.mirado,.texto ins.mirado,.texto del.mirado,.texto sup.nota.mirado{
    outline:2px solid var(--turquesa);outline-offset:1px;border-radius:2px}
  .ficha.mirada{box-shadow:0 0 0 3px var(--turquesa-200);border-color:var(--turquesa)}
  .bloque--parte [id^="c-"].mirado{outline:2px solid var(--turquesa);outline-offset:4px;border-radius:6px}
  /* El número de cada comentario, en el orden del documento: el mismo del «3 de 9» de arriba. */
  .ficha .ficha-numero{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-right:6px;
    padding:0 5px;border-radius:999px;background:var(--turquesa);color:#fff;font-size:11px;font-weight:700;
    letter-spacing:0;text-transform:none;vertical-align:1px}

  .ficha{position:relative}
  .ficha-borrar{position:absolute;top:3px;right:3px;width:22px;height:22px;
    display:none;place-items:center;border:1px solid transparent;border-radius:7px;
    background:transparent;color:var(--tinta3);font:inherit;font-size:15px;cursor:pointer;line-height:1}
  .modo-fundacion .ficha[data-autor="fundacion"] .ficha-borrar,
  .modo-fundacion .ficha:not([data-autor]) .ficha-borrar,
  .modo-autor .ficha[data-autor="autor"] .ficha-borrar{display:grid}
  .ficha-borrar:hover{background:var(--quitado-100);color:var(--quitado);border-color:var(--quitado)}
  /* El lápiz: quien escribió el comentario lo puede corregir. Se ve donde se ve la papelera. */
  .ficha-editar{position:absolute;top:3px;right:28px;width:22px;height:22px;
    display:none;place-items:center;border:1px solid transparent;border-radius:7px;
    background:transparent;color:var(--tinta3);font:inherit;font-size:14px;cursor:pointer;line-height:1}
  .modo-fundacion .ficha[data-autor="fundacion"] .ficha-editar,
  .modo-fundacion .ficha:not([data-autor]) .ficha-editar,
  .modo-autor .ficha[data-autor="autor"] .ficha-editar{display:grid}
  .ficha-editar:hover{background:var(--turquesa-100);color:var(--turquesa);border-color:var(--turquesa)}
  .ficha-editar:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}
  .caja-editar{margin-top:6px}
  .caja-editar textarea{min-height:90px;font-size:13px;padding:8px 10px}
  /* 05-11-2026 (Editor 2): «Quitar» en cada foto, video o audio. */
  figure.medio{position:relative}
  .medio__quitar{position:absolute;top:8px;right:8px;z-index:3;padding:5px 11px;border-radius:999px;
    border:1px solid var(--linea);background:rgba(255,255,255,.94);color:var(--tinta2);font:inherit;font-size:12.5px;
    font-weight:600;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .medio__quitar:hover{background:var(--quitado-100);color:var(--quitado);border-color:var(--quitado)}
  .medio__quitar:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}
  .galeria .medio__quitar{top:6px;right:6px;padding:3px 9px;font-size:11.5px}
  .ficha-borrar:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}
  .ficha .quien{padding-right:52px}

  .ayuda-flotante{margin-top:30px;padding-top:20px;border-top:1px solid var(--linea)}
  .ayuda-flotante p{margin:0 0 10px;font-size:14px;color:var(--tinta3)}

  .contador{margin:6px 0 0;font-size:12.5px;color:var(--tinta3);
    font-variant-numeric:tabular-nums}
  .contador b{font-weight:600;color:var(--tinta2)}

  /* Rótulos dentro del documento: dicen qué es cada parte sin sacarla de la hoja. */
  .rotulo{margin:0 0 2px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
    font-weight:700;color:var(--tinta3)}
  .guia{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--tinta3);max-width:62ch}
  .guia strong{color:var(--tinta2)}

  .campo-titulo{margin:0;font-size:27px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
  .campo-subtitulo{margin:0;font-size:19px;line-height:1.45;font-weight:400;color:var(--tinta2)}
  .campo-resumen{margin:0;font-size:16px;line-height:1.6;color:var(--tinta2)}
  /* Un campo que se puede escribir tiene que parecerlo ANTES de tocarlo. El
     recuadro solo al enfocar obligaba a probar a ver cuál respondía, y el
     título, el subtítulo y el resumen parecían texto de ejemplo. */
  [contenteditable="true"]{border:1px solid var(--linea);border-radius:8px;
    padding:10px 12px;background:var(--sup);transition:border-color .15s,box-shadow .15s}
  [contenteditable="true"]:hover{border-color:var(--tinta3)}
  [contenteditable="true"]:focus{outline:none;border-color:var(--turquesa);
    box-shadow:0 0 0 3px var(--turquesa-100)}
  [contenteditable="true"]:focus-visible{outline:none}
  /* Las fuentes son una lista: el recuadro va en cada renglón, no en el <ol>. */
  .fuentes[contenteditable="true"]{border:0;padding:0;background:transparent}

  /* La etiqueta que lo dice con todas las letras. */
  .rotulo{position:relative}
  .bloque:has([contenteditable="true"]) .rotulo::after{content:'se escribe aquí';
    margin-left:9px;font-size:10.5px;letter-spacing:.04em;text-transform:none;
    font-weight:600;color:var(--tinta3);background:var(--sup2);border-radius:999px;
    padding:2px 8px;vertical-align:1px}

  .doc .bloque--parte > .texto{padding-top:4px;padding-bottom:18px}
  .doc .bloque--parte + .bloque--parte > .texto{border-top:1px solid var(--linea);padding-top:18px}
  .doc .bloque--cuerpo:first-of-type > .texto{border-top:1px solid var(--linea);padding-top:18px}

  .leyenda{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
    background:var(--sup2);border:1px solid var(--linea);border-bottom:0;
    padding:9px 14px;font-size:12.5px;color:var(--tinta3)}
  .leyenda span{display:inline-flex;align-items:center;gap:7px}
  .leyenda del,.leyenda ins,.leyenda mark{font-size:12.5px}

  .navrev .ver{display:flex;gap:4px;align-items:center;margin-right:4px}
  .navrev .ver button{border:1px solid var(--linea);background:var(--sup);border-radius:999px}
  .navrev .ver button[aria-pressed="true"]{background:var(--turquesa-texto);
    border-color:var(--turquesa-texto);color:#fff}

  /* Solo comentarios: el texto se lee con los cambios ya aplicados, y las
     fichas de cambio se apartan. Nada se acepta; solo deja de verse. */
  .doc.solo-comentarios del{display:none}
  .doc.solo-comentarios ins{background:transparent;color:inherit;border-bottom:0}
  .doc.solo-comentarios .ficha--cambio{display:none}

  .antes{margin-top:28px;padding:18px 20px;background:var(--sup2);
    border:1px solid var(--linea);border-radius:14px}
  .antes h3{margin:0 0 4px;font-size:17px}
  .antes > p{margin:0 0 14px;font-size:13.5px;color:var(--tinta3)}
  .antes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .antes li{display:flex}
  .antes label{display:flex;gap:11px;align-items:flex-start;padding:9px 0;
    font-size:14px;line-height:1.5;color:var(--tinta2);cursor:pointer;min-height:44px}
  .antes input[type=checkbox]{flex:none;width:20px;height:20px;margin-top:2px;
    accent-color:var(--turquesa-texto);cursor:pointer}
  .antes label:focus-within{outline:3px solid var(--turquesa);outline-offset:3px;border-radius:6px}
  .antes a{color:var(--enlace,var(--turquesa-texto));font-weight:600}
  .boton[disabled]{opacity:.45;cursor:not-allowed}
  .importar__otros{font-size:.875rem;color:var(--tinta-suave, #5b5b5b);margin-top:8px}
  .falta{margin:10px 0 0;font-size:13.5px;color:var(--tinta3)}

  /* Primera versión: sin revisión a la vista. */
  .sin-revision .leyenda,
  .sin-revision .navrev,
  .sin-revision .intro-revision{display:none !important}
  .sin-revision .intro-primera{display:block}
  .intro-primera{display:none}

  /* La columna de comentarios no desaparece mientras escribe: se queda
     nombrada y vacía. Así, cuando llegue la revisión, no le cambia la pantalla
     debajo de los pies: es la misma, ahora con fichas. */
  .marcador{display:none;border:1px dashed var(--linea);border-radius:8px;
    padding:10px 12px;background:transparent}
  .marcador b{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
    color:var(--tinta3);margin-bottom:3px}
  .marcador span{display:block;font-size:12.5px;line-height:1.4;color:var(--tinta3)}
  .sin-revision .marcador{display:block}
  .marcador--aviso{display:block;border-color:var(--ambar);background:var(--ambar-100)}
  .marcador--aviso b{color:var(--ambar-tipo)}
  .sin-revision .doc .ficha{display:none !important}

  /* La barra no se pierde al bajar: en un texto de mil palabras, volver arriba
     cada vez que hace falta una negrita es lo que cansa. */
  /* Se queda arriba el bloque entero —barra, leyenda y revisión—, no solo la
     barra: dejar los botones de aceptar cambios arriba del todo mientras se lee
     el texto no sirve de nada. */
  .controles{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:var(--papel)}
  .barra-formato .previsualizar{margin-left:auto;border:1px solid var(--linea);
    background:var(--sup);color:var(--turquesa-texto)}

  /* Fuentes: numerito en el texto, lista al final. Formato de nota numerada,
     como el de Chicago. */
  sup.nota{font-size:.68em;line-height:0;vertical-align:super;font-weight:700;
    color:var(--turquesa-texto);cursor:pointer;padding:0 1px}
  /* display:contents gana al [hidden] por defecto, así que el bloque de fuentes
     se veía vacío aunque estuviera oculto. */
  .doc .bloque[hidden]{display:none !important}
  .bloque--fuentes .texto{padding-top:18px;border-top:1px solid var(--linea)}
  .fuentes{margin:0;padding-left:1.4em;font-size:14.5px;line-height:1.6;color:var(--tinta2)}
  .fuentes li{margin:0 0 7px}
  .fuentes li::marker{color:var(--tinta3);font-weight:600}

  .caja-fuente{margin:0;padding:10px 11px;background:var(--sup2);
    border:1px solid var(--ambar);border-left:3px solid var(--ambar);border-radius:8px}
  .caja-fuente p{margin:0 0 7px;font-size:12px;line-height:1.4;color:var(--tinta3)}
  .caja-fuente textarea{min-height:72px;font-size:13px;padding:8px 10px}
  .caja-fuente .acciones{margin-top:7px;gap:12px}
  .caja-fuente .boton{min-height:24px;padding:0;font-size:12px;border-radius:0;
    background:transparent;border:0;color:var(--turquesa-texto);font-weight:600}
  .caja-fuente .boton:hover{background:transparent;text-decoration:underline}

  .importar{margin:0 0 16px;padding:16px 18px;border:1px dashed var(--linea);
    border-radius:12px;background:var(--sup2);display:none}
  .sin-revision .importar{display:block}
  .importar p{margin:0 0 10px;font-size:13.5px;color:var(--tinta2)}
  .importar b{color:var(--tinta)}


  /* LA PUERTA. Primera pantalla de quien va a enviar un texto.
     Se entra subiendo el documento, no abriendo el editor: el editor tiene
     barra de formato, comentarios, fuentes y créditos, y visto de golpe
     parece que enviar un texto es dificilísimo. Damián, 16-10-2026: «quiero
     que al contrario piensen que es super facil». */
  .puerta__caja{margin:0 0 18px}
  .importar--puerta{display:block;padding:28px 24px;border-width:2px;
    border-color:var(--turquesa-200);background:var(--turquesa-100);text-align:center}
  .importar--puerta p{font-size:15px;max-width:52ch;margin-left:auto;margin-right:auto}
  .importar--puerta .boton{min-height:48px;padding:0 22px;font-size:15px}
  .importar--puerta .importe{text-align:left}
  .puerta__otra{margin:0 0 8px;font-size:14.5px;color:var(--tinta2)}
  .puerta__otra button{font:inherit;font-weight:600;background:transparent;border:0;
    padding:0;cursor:pointer;color:var(--turquesa-texto);text-decoration:underline}
  .puerta__nota{margin:0 0 24px;font-size:13.5px;color:var(--tinta3)}

  /* El resultado del repaso. Tres estados y nada más: cumple, falta, mira esto.
     Un semáforo con más colores se lee como una calificación, y esto no
     califica el texto: solo mira la forma. */
  .repaso{margin:24px 0 0;padding:20px 22px;background:var(--sup);
    border:1px solid var(--linea);border-radius:14px}
  .repaso h2{margin:0 0 4px;font-size:19px}
  .repaso__sub{margin:0 0 16px;font-size:14px;color:var(--tinta2)}
  .repaso__lista{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
  .repaso__lista li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;
    line-height:1.5;padding:10px 12px;border-radius:10px;background:var(--sup2)}
  .repaso__lista li.bien{background:var(--turquesa-100)}
  .repaso__lista li.falta{background:var(--ambar-100);color:var(--ambar-tipo)}
  .repaso__lista li b{color:var(--tinta)}
  .repaso__lista li.falta b{color:var(--ambar-tipo)}
  .repaso__marca{flex:0 0 auto;font-weight:700;width:1.2em;text-align:center}
  .repaso__acciones{display:flex;flex-wrap:wrap;gap:10px}
  .repaso__cierre{margin:14px 0 0;font-size:13.5px;color:var(--tinta3)}

  /* Lo que entró y lo que vimos, en un solo cuadro y dos columnas. Antes eran
     dos cuadros seguidos, y el primero —un párrafo largo dentro del recuadro
     celeste— se leía como demasiado. Ahora los dos lados tienen la misma forma:
     una lista corta, un punto por renglón. */
  .repaso__columnas{display:grid;gap:22px;margin:0 0 18px}
  @media (min-width:760px){ .repaso__columnas{grid-template-columns:1fr 1fr;gap:26px} }
  .repaso__col h2{margin:0 0 4px;font-size:18px}
  .repaso__col .repaso__sub{margin:0 0 12px;font-size:13.5px}
  .repaso__col .repaso__lista{margin:0}
  .repaso__lista--entro li{background:var(--sup2)}
  .repaso__lista--entro li.bien{background:var(--turquesa-100)}

  /* Ya subido, la zona celeste se encoge a una línea: su trabajo terminó y lo
     que importa está abajo. */
  .importar--puerta.cargada{padding:12px 18px;text-align:left}
  .importar--puerta.cargada > p:first-child,
  .importar--puerta.cargada > label.boton{display:none}
  .importar--puerta.cargada .importe{margin:0;font-size:14.5px}
  .importe .otro{font:inherit;font-weight:600;background:transparent;border:0;padding:0;margin-left:6px;
    cursor:pointer;color:var(--turquesa-texto);text-decoration:underline}

  /* El recordatorio de lo que tiene que tener el texto, antes de subirlo. Al
     lado de la zona en la computadora y debajo en el teléfono. Cierra con lo
     más importante: que falte algo no impide subirlo. */
  .puerta__caja{display:grid;gap:16px}
  @media (min-width:760px){ .puerta__caja{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start} }
  .recordatorio{padding:16px 18px;border:1px solid var(--linea);border-radius:12px;background:var(--sup)}
  .recordatorio[hidden]{display:none}
  .recordatorio h2{margin:0 0 8px;font-size:15px}
  .recordatorio ul{margin:0;padding-left:1.15em;font-size:14px;line-height:1.5;color:var(--tinta2)}
  .recordatorio li{margin:0 0 5px}
  .recordatorio b{color:var(--tinta)}
  .recordatorio__calma{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--turquesa-texto)}
  .puerta__caja.cargada{grid-template-columns:1fr}

  /* Marca provisional: enseña en qué punto exacto va a caer el numerito. */
  sup.nota.pendiente{color:var(--ambar);background:var(--ambar-100);border-radius:3px}
  .fuentes li{outline-offset:3px}
  .fuentes li:focus-visible{outline:3px solid var(--turquesa)}
  .guardadas{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--linea)}
  .guardadas p{margin:0 0 5px}
  .guardadas button{display:block;width:100%;text-align:left;font:inherit;font-size:12px;
    line-height:1.35;color:var(--tinta2);background:var(--sup);border:1px solid var(--linea);
    border-radius:6px;padding:6px 8px;margin-bottom:4px;cursor:pointer}
  .guardadas button:hover{border-color:var(--turquesa);color:var(--turquesa-texto)}

  sup.nota{transition:background 120ms ease-out}
  sup.nota:hover{background:var(--turquesa-100)}
  sup.nota.abierta{background:var(--ambar-100);color:var(--ambar-tipo)}

  /* Previsualización: la página tal como se publica. Medidas tomadas del
     artículo real (titular 46 px, cuerpo 16,6 px sobre 26,6 de interlínea,
     columna de 720), para que lo que se ve aquí sea lo que va a existir. */
  .previo{position:fixed;inset:0;z-index:60;background:var(--papel);
    display:flex;flex-direction:column;overflow:hidden}
  .previo[hidden]{display:none}

  .previo-volver{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    padding:10px 16px;background:var(--sup2);border-bottom:1px solid var(--linea);
    padding-top:calc(10px + env(safe-area-inset-top,0px));flex:none}
  .previo-volver .atras--editar{background:var(--turquesa-texto);border-color:var(--turquesa-texto);
    color:#fff}
  .previo-volver .atras{font:inherit;font-size:14px;font-weight:600;min-height:40px;
    padding:0 14px;border:1px solid var(--linea);background:var(--sup);
    color:var(--turquesa-texto);border-radius:999px;cursor:pointer}
  .previo-volver .dicho{font-size:12.5px;color:var(--tinta3);flex:1 1 180px;min-width:0}
  .previo-volver .modo{display:flex;gap:4px}
  .previo-volver .modo button{font:inherit;font-size:13px;font-weight:600;min-height:40px;
    padding:0 14px;border:1px solid var(--linea);background:var(--sup);color:var(--tinta2);
    border-radius:999px;cursor:pointer}
  .previo-volver .modo button[aria-pressed="true"]{background:var(--turquesa-texto);
    border-color:var(--turquesa-texto);color:#fff}

  .previo-lienzo{flex:1;overflow:auto;background:var(--papel)}
  .previo-marco{margin:0 auto;background:var(--papel);min-height:100%}
  .previo--movil .previo-marco{max-width:390px;box-shadow:0 0 0 1px var(--linea)}

  /* Cabecera del sitio, como en cualquier página */
  .previo-cabecera{display:flex;align-items:center;justify-content:space-between;
    padding:18px 24px;border-bottom:1px solid var(--linea)}
  .previo-marca{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
  .previo-marca img{height:40px;width:auto;display:block}
  /* 06-11-2026: aviso de que la vista previa aplica los cambios propuestos. */
  .previo-aviso-cambios{margin:0 0 18px;padding:10px 14px;border-radius:10px;background:#FFF4DC;
    color:#6B4A00;font-size:14px;line-height:1.45}
  .previo-menu{font-size:13px;font-weight:600;color:var(--tinta2);
    border:1px solid var(--linea);border-radius:8px;padding:7px 13px}

  .previo-cuerpo-pagina{padding:46px 24px 64px}
  .previo--movil .previo-cuerpo-pagina{padding:30px 20px 48px}
  /* 840 px, que es lo que mide la columna del artículo publicado desde que se
     ensanchó. Si una previsualización no coincide con el resultado, deja de
     servir para lo único que sirve. */
  .previo-columna{max-width:840px;margin:0 auto}

  .previo-ante{margin:0 0 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    font-weight:700;color:var(--turquesa-texto)}
  /* Tamaños copiados tal cual del tema: son fluidos, cambian con el ancho de la
     ventana. Fijarlos en píxeles hacía que la previsualización coincidiera solo
     en la pantalla donde los medí. */
  .previo-columna h1{margin:0 0 14px;
    font-size:clamp(1.875rem, 1.875rem + ((1vw - 0.2rem) * 2.045), 3rem);
    line-height:1.1;letter-spacing:-.015em;font-weight:600;color:var(--tinta);text-wrap:balance}
  /* En el marco de teléfono la ventana sigue siendo ancha, así que el tamaño
     fluido no baja solo: aquí se fijan los mínimos del tema. */
  .previo--movil .previo-columna h1{font-size:1.875rem;line-height:1.15}
  .previo--movil .previo-cuerpo{font-size:0.9375rem}
  .previo-bajada{margin:0 0 18px;
    font-size:clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.455), 1.375rem);
    line-height:1.5;color:var(--tinta2)}
  .previo--movil .previo-bajada{font-size:1.125rem}
  .previo-firma{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0 0 30px}
  .previo-firma .quien2{font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.115), 0.938rem);
    font-weight:600;color:var(--tinta2)}
  .previo-firma .cuando2{font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.115), 0.938rem);
    color:var(--tinta3)}
  /* Quién es quien firma, en una línea. Va pegada al nombre y no al pie, porque
     quien llega a un texto decide en dos segundos si le interesa, y para eso
     necesita saber quién lo escribe antes de empezar, no después de terminar. */
  .previo-firma .quees{flex:1 1 100%;margin:2px 0 0;
    font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.115), 0.938rem);
    color:var(--tinta3)}

  /* Lo que falta del perfil, pedido donde se envía y no en otra pestaña. */
  .falta-perfil{margin:0 0 16px;padding:16px 18px;border-radius:12px;
    border:1px solid var(--ambar-tipo);background:var(--ambar-100)}
  .falta-perfil[hidden]{display:none}
  .falta-perfil h3{margin:0 0 6px;font-size:16px;color:var(--ambar-tipo)}
  .falta-perfil p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--tinta2)}
  .falta-perfil .campo{margin:0 0 12px}
  .falta-perfil .campo:last-of-type{margin-bottom:0}

  .previo-portada{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:12px;
    margin:0 0 28px;background:var(--sup2)}
  .previo-portada .portada__foto{position:absolute;left:0;right:0;height:200%;
    background:linear-gradient(170deg,#C9DCE4 0%,#A9C6D2 42%,#7FA6B6 100%)}
  .previo-cuerpo{font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.342), 1.063rem);
    line-height:1.6;color:var(--tinta2)}
  .previo-cuerpo p{margin:0 0 22px}
  .previo-cuerpo sup{font-size:.68em;line-height:0;vertical-align:super;font-weight:700;
    color:var(--turquesa-texto)}
  .previo-fuentes{margin-top:34px;padding-top:22px;border-top:1px solid var(--linea)}
  .previo-fuentes h2{margin:0 0 10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--tinta3)}
  .previo-fuentes ol{margin:0;padding-left:1.3em;font-size:14.5px;line-height:1.6;color:var(--tinta2)}
  .previo-fuentes li{margin:0 0 7px}
  .previo-bio{margin-top:34px;padding:20px 22px;background:var(--sup2);border-radius:12px;
    font-size:15px;line-height:1.6;color:var(--tinta2)}
  .previo-bio b{color:var(--tinta)}
  .previo-portada__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .previo-credito-foto{margin:8px 0 0;font-size:13px;color:var(--tinta3);font-style:normal}
  .previo-cuerpo .previo-credito-foto{margin:6px 0 0;padding:0}
  .previo-credito{margin:16px 0 0;font-size:13px;color:var(--tinta3)}

  /* Estilos de bloque dentro del texto */
  .doc .texto h3{margin:26px 0 10px;font-size:21px;line-height:1.3;font-weight:600;color:var(--tinta)}
  .doc .texto blockquote,.previo-cuerpo blockquote{margin:24px 0;padding:2px 0 2px 20px;
    border-left:3px solid var(--turquesa);color:var(--tinta);font-size:20px;line-height:1.5}
  .doc .texto blockquote p,.previo-cuerpo blockquote p{margin:0 0 10px}
  .doc .texto blockquote p:last-child,.previo-cuerpo blockquote p:last-child{margin:0}
  .doc .texto ul,.previo-cuerpo ul{margin:0 0 20px;padding-left:1.35em}
  .doc .texto li,.previo-cuerpo li{margin:0 0 7px}
  /* El verso no es una cita. La cita son las palabras de otra persona traídas
     como testimonio: filete a la izquierda y nombre debajo. El verso es obra
     literaria reproducida como obra: centrado y en cursiva, con el título
     encima. Es la forma que ya usaba la edición del blog para citar poesía.
     Confundirlos hace que un poema parezca una declaración. */
  .doc .texto .verso,.previo-cuerpo .verso{margin:28px auto;max-width:34em;
    text-align:center;font-style:italic;color:var(--tinta)}
  .doc .texto .verso p,.previo-cuerpo .verso p{margin:0 0 1.15em;line-height:1.75}
  .doc .texto .verso p:last-child,.previo-cuerpo .verso p:last-child{margin:0}
  .doc .texto .verso-obra,.previo-cuerpo .verso-obra{display:block;margin:28px 0 -14px;
    text-align:center;font-style:normal;font-weight:600;font-size:16px;color:var(--tinta)}
  .doc .texto .verso.alin-izquierda,.previo-cuerpo .verso.alin-izquierda{text-align:left;margin-left:0;margin-right:auto}
  .doc .texto .verso.alin-derecha,.previo-cuerpo .verso.alin-derecha{text-align:right;margin-left:auto;margin-right:0}
  .doc .texto .verso.alin-centro,.previo-cuerpo .verso.alin-centro{text-align:center;margin-left:auto;margin-right:auto}
  .doc .texto .verso-fuente,.previo-cuerpo .verso-fuente{display:block;margin:10px 0 0;
    text-align:center;font-style:normal;font-size:13px;color:var(--tinta3)}

  /* El destacado es una frase DEL PROPIO TEXTO, repetida en grande para cortar
     la columna y dar un respiro al ojo. No es una cita —esas son palabras de
     otra persona— ni un subtítulo —eso anuncia lo que viene—. */
  .doc .texto .destacado,.previo-cuerpo .destacado{margin:30px 0;padding:0;
    font-size:clamp(20px,3.2vw,26px);line-height:1.3;font-weight:600;
    letter-spacing:-.01em;color:var(--turquesa-texto);text-wrap:balance}

  /* Bloques de medios: imagen, video y audio viven dentro del texto, cada uno
     en su bloque, para que puedan llevar comentario al margen como un párrafo. */
  .doc .texto .medio{margin:8px 0;border:1px solid var(--linea);
    border-radius:12px;background:var(--sup2);overflow:hidden}
  /* En la previsualización, la foto va sola. Sin marco, sin fondo y sin la
     franja del pie: eso es andamiaje del editor y no sale publicado. */
  .previo-cuerpo .medio{margin:26px 0;border:0;border-radius:0;background:transparent;
    overflow:visible}
  .previo-cuerpo .medio__marco{aspect-ratio:auto;padding:0;background:transparent;display:block}
  .previo-cuerpo .medio__marco img{width:100%;height:auto;max-height:none;
    object-fit:fill;border-radius:10px;display:block;background:transparent}
  /* El pie y el crédito se alinean con el borde de la FOTO, no con el de una
     caja que ya no existe. Era lo que descuadraba el crédito. */
  .previo-cuerpo .medio__pie{padding:8px 0 0;border-top:0;background:transparent;
    color:var(--tinta3)}
  .medio__marco{aspect-ratio:16/9;display:grid;place-items:center;gap:6px;
    background:linear-gradient(135deg,var(--sup2),var(--linea));color:var(--tinta3);
    font-size:13px;text-align:center;padding:16px}
  .medio__marco--audio{aspect-ratio:auto;min-height:72px}
  .medio__tipo{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
    color:var(--turquesa-texto)}
  /* 05-11-2026: el medio elegido para comentar, lo nuevo desde la última visita y la dirección del archivo oculta. */
  .medio.elegido{outline:3px solid var(--turquesa);outline-offset:4px;border-radius:10px}
  .ficha--nueva{box-shadow:0 0 0 2px var(--turquesa)}
  .ficha--nueva > .quien::after,.respuesta--nueva > .quien::after{content:'Nuevo';display:inline-block;margin-left:6px;
    padding:2px 7px;border-radius:999px;background:var(--turquesa);color:#fff;font-size:9.5px;font-weight:700;
    letter-spacing:.05em;vertical-align:1px}
  .doc.solo-nuevo .ficha:not(.ficha--nueva){display:none}
  .navrev [data-ver="nuevo"][hidden]{display:none}
  .medio__marco--audio .medio__dato{display:none}
  .medio__marco--audio .medio__tipo{display:none}
  /* 05-11-2026 (Editor 2): con el reproductor puesto, el marco es el video; el rótulo y la dirección sobran. */
  .medio__marco:has(> iframe){aspect-ratio:auto;display:block;padding:0;background:transparent}
  .medio__marco:has(> iframe) > .medio__tipo,.medio__marco:has(> iframe) > .medio__dato{display:none}
  .medio__marco > iframe{border-radius:10px}
  .medio__dato{font-size:12.5px;word-break:break-all;max-width:90%}
  .medio__pie{display:block;padding:10px 14px;font-size:13px;line-height:1.5;
    color:var(--tinta3);border-top:1px solid var(--linea);background:var(--sup)}
  .medio__pie:focus{outline:none;box-shadow:inset 0 0 0 2px var(--turquesa)}

  /* El botón de añadir. Flota junto al bloque donde está el cursor. */
  .anadir{position:fixed;z-index:40;display:none}
  .anadir.se-ve{display:flex;align-items:center;justify-content:center}
  /* La línea cruza el ancho del párrafo: así se ve que el sitio donde se añade
     es ESE, entre un bloque y el siguiente. Con el botón al margen había que
     adivinarlo. Tenue hasta que se acerca el ratón, para no rayar el texto. */
  .anadir::before,.anadir::after{content:"";flex:1;height:1px;background:var(--linea);
    opacity:.9;transition:opacity .15s,background .15s}
  .anadir:hover::before,.anadir:hover::after{opacity:1;background:var(--turquesa)}
  .anadir__mas{flex:0 0 auto;width:28px;height:28px;border-radius:50%;cursor:pointer;
    margin:0 10px;
    border:1px solid var(--linea);background:var(--sup);color:var(--tinta2);
    font-size:18px;line-height:1;display:grid;place-items:center;padding:0;
    box-shadow:0 1px 4px rgba(0,0,0,.08)}
  .anadir:hover .anadir__mas{border-color:var(--turquesa);color:var(--turquesa-texto)}
  .anadir__menu{position:absolute;top:34px;left:50%;transform:translateX(-50%);
    min-width:168px;padding:6px;z-index:1;
    border:1px solid var(--linea);border-radius:10px;background:var(--sup);
    box-shadow:0 6px 20px rgba(0,0,0,.12)}
  .anadir__menu[hidden]{display:none}
  .anadir__menu button{display:block;width:100%;text-align:left;cursor:pointer;
    font:inherit;font-size:14px;padding:8px 10px;border:0;border-radius:7px;
    background:transparent;color:var(--tinta)}
  .anadir__menu button:hover{background:var(--sup2);color:var(--turquesa-texto)}
  @media (max-width:640px){ .anadir__mas{width:34px;height:34px} }

  /* Panel de insertar: se abre pegado a la barra, no en una ventana aparte, para
     no sacar a nadie de donde está escribiendo. */
  .panel-insertar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    padding:12px 14px;margin:0 0 12px;border:1px solid var(--turquesa);
    border-radius:10px;background:var(--turquesa-100)}
  .panel-insertar[hidden]{display:none}
  .panel-insertar p{margin:0;flex:1 1 100%;font-size:13px;color:var(--tinta2)}
  .panel-insertar input[type=text]{flex:1 1 260px;min-width:0;font:inherit;font-size:14px;
    min-height:42px;padding:0 12px;border:1px solid var(--linea);border-radius:8px;
    background:var(--sup);color:var(--tinta)}
  .panel-insertar input[hidden]{display:none}
  .multi-opciones{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
  .multi-opciones[hidden]{display:none}
  /* La zona de soltar: un botón de verdad y un sitio donde caer. La gente tiene
     la foto en una carpeta, no una dirección web. */
  .soltar{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    justify-content:center;padding:18px 14px;border:2px dashed var(--turquesa);
    border-radius:10px;background:var(--sup);text-align:center}
  .soltar[hidden]{display:none}
  .soltar__o{font-size:13px;color:var(--tinta2)}
  .soltar.encima{background:var(--turquesa-100);border-style:solid}
  .soltar__aviso{flex:1 1 100%;margin:0;font-size:13px;line-height:1.5;color:var(--ambar-tipo);
    font-weight:600}
  .soltar__aviso[hidden]{display:none}

  /* Los datos del texto. Listas cerradas para lo que sirve para navegar; la
     etiqueta libre se degrada sola —en el sitio ya conviven «música» y
     «Teatro», «literatura» y «Danza»— así que va limitada y sugerida. */
  .datos{display:grid;gap:16px;margin-top:4px}
  @media (min-width:640px){ .datos--par{grid-template-columns:1fr 1fr} }
  .datos label.rot{display:block;margin-bottom:4px;font-size:13.5px;font-weight:600;color:var(--tinta)}
  .datos select{width:100%;font:inherit;font-size:15px;min-height:46px;padding:0 12px;
    border:1px solid var(--linea);border-radius:9px;background:var(--sup);color:var(--tinta)}
  .datos select:disabled{color:var(--tinta3);background:var(--sup2)}
  .marcas{display:flex;flex-wrap:wrap;gap:8px}
  .marcas label{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
    border:1px solid var(--linea);border-radius:999px;background:var(--sup);
    font-size:14px;cursor:pointer}
  .marcas label:has(input:checked){border-color:var(--turquesa);background:var(--turquesa-100);
    color:var(--turquesa-texto);font-weight:600}
  .marcas input{accent-color:var(--turquesa-texto)}
  .marcas label:has(input[type=radio]:checked){border-color:var(--turquesa);
    background:var(--turquesa-100);color:var(--turquesa-texto);font-weight:600}
  [data-lugar-fuera][hidden],[data-lugar-aqui][hidden],[data-caja-otras][hidden]{display:none}
  .marcas label.topado{opacity:.45;cursor:not-allowed}
  .etiquetas-puestas{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 8px}
  .etiq{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
    background:var(--turquesa-100);color:var(--turquesa-texto);font-size:13px;font-weight:600}
  .etiq button{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:0;line-height:1}
  .sugeridas{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .sugeridas button{border:1px dashed var(--linea);background:transparent;color:var(--tinta2);
    font:inherit;font-size:13px;border-radius:999px;padding:4px 10px;cursor:pointer}
  .sugeridas button:hover{border-color:var(--turquesa);color:var(--turquesa-texto)}

  .foto-veredicto{margin:10px 0 0;font-size:13.5px;line-height:1.5}
  .foto-veredicto[hidden]{display:none}
  .foto-veredicto.bien{color:var(--turquesa-texto)}
  .foto-veredicto.mal{color:var(--quitado);font-weight:600}
  .boton-archivo{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;
    border:1px solid var(--linea);border-radius:9px;background:var(--sup);
    font-size:14px;font-weight:600;color:var(--tinta);cursor:pointer}
  .boton-archivo input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

  .alin-izquierda{text-align:left}
  .alin-centro{text-align:center}
  .alin-derecha{text-align:right}

  /* Portada: ventana 3:2 con la foto dentro, que se arrastra para encuadrar. */
  .portada{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:10px;
    background:var(--sup2);border:1px solid var(--linea);cursor:grab;touch-action:none;
    max-width:520px}
  .portada.arrastrando{cursor:grabbing}
  .portada__foto{position:absolute;left:0;right:0;top:0;height:200%;
    background:linear-gradient(170deg,#C9DCE4 0%,#A9C6D2 42%,#7FA6B6 100%)}
  /* Una figura dibujada, para que al arrastrar se vea qué entra y qué sale. */
  .portada__cabeza{position:absolute;left:50%;top:16%;width:17%;aspect-ratio:1;
    transform:translateX(-50%);border-radius:999px;background:#8A6A52}
  .portada__cuerpo{position:absolute;left:50%;top:30%;width:40%;height:46%;
    transform:translateX(-50%);border-radius:40% 40% 10% 10%;background:#3F5C6B}
  .portada__suelo{position:absolute;left:0;right:0;bottom:0;height:22%;background:#6E8C78}
  .portada__pista{position:absolute;left:10px;bottom:10px;z-index:2;
    background:rgba(31,29,27,.72);color:#fff;font-size:12px;font-weight:600;
    padding:5px 10px;border-radius:999px;pointer-events:none}

  .portada-pie{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:10px 0 0;max-width:520px}
  .portada-pie input[type=range]{flex:1;min-width:140px;accent-color:var(--turquesa-texto)}
  .portada-pie .cifra{font-size:13px;color:var(--tinta3);font-variant-numeric:tabular-nums;min-width:40px}

  /* Botón de reporte, siempre visible. Un enlace en el menú no sirve cuando la
     persona está atascada en otra pantalla. */
  .reportar-fijo{position:fixed;right:16px;bottom:16px;z-index:50;
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;
    border-radius:999px;border:1px solid var(--linea);background:var(--sup);
    color:var(--turquesa-texto);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
    box-shadow:0 2px 10px rgba(31,29,27,.12)}
  .reportar-fijo:hover{border-color:var(--turquesa)}
  .reportar-fijo:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px}

  /* Registro de actividad (pantalla de la Fundación) */
  .reg{width:100%;border-collapse:collapse;font-size:13.5px}
  .reg th{text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--tinta3);padding:0 10px 8px 0;border-bottom:1px solid var(--linea)}
  .reg td{padding:9px 10px 9px 0;border-bottom:1px solid var(--linea);vertical-align:top;color:var(--tinta2)}
  .reg td.cuando{white-space:nowrap;color:var(--tinta3);font-variant-numeric:tabular-nums}
  .reg tr.error td{background:var(--quitado-100)}
  .reg tr.error td.que{color:var(--quitado);font-weight:600}
  .reg .etiqueta{display:inline-block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
    font-weight:700;border-radius:999px;padding:1px 7px;background:var(--sup2);color:var(--tinta3)}

  /* Ventana de reporte */
  .velo{position:fixed;inset:0;z-index:70;background:rgba(20,16,13,.5);
    display:flex;align-items:center;justify-content:center;padding:16px}
  .velo[hidden]{display:none}
  .ventana{background:var(--sup);border:1px solid var(--linea);border-radius:16px;
    width:100%;max-width:520px;max-height:86vh;overflow:auto;padding:22px 24px 24px;
    box-shadow:0 10px 40px rgba(20,16,13,.25)}
  .ventana h2{margin:0 0 4px;font-size:20px;letter-spacing:-.01em}
  .ventana > p{margin:0 0 16px;font-size:14px;color:var(--tinta3)}
  .ventana .campo{margin-bottom:16px}
  .ventana select{width:100%;font:inherit;min-height:48px;padding:0 14px;
    border:1px solid var(--linea);border-radius:10px;background:var(--sup);color:var(--tinta)}
  .ventana .acciones{margin-top:4px}
  .ventana-cerrar{float:right;margin:-6px -6px 0 0;width:34px;height:34px;display:grid;
    place-items:center;border:1px solid transparent;border-radius:8px;background:transparent;
    color:var(--tinta3);font:inherit;font-size:16px;cursor:pointer}
  .ventana-cerrar:hover{background:var(--sup2);border-color:var(--linea)}
  .ventana-nota{margin:14px 0 0;padding:12px 14px;background:var(--sup2);border-radius:10px;
    font-size:13px;line-height:1.5;color:var(--tinta3)}
  .ventana input[type=file]{width:100%;font:inherit;font-size:14px;padding:10px;
    border:1px dashed var(--linea);border-radius:10px;background:var(--sup2);color:var(--tinta2)}
  .captura-previa{display:flex;align-items:flex-start;gap:12px;margin-top:12px}
  .captura-previa[hidden]{display:none}
  .captura-previa img{max-width:150px;border-radius:8px;border:1px solid var(--linea)}
  .ventana-gracias{text-align:center;padding:14px 0 6px}
  .ventana-gracias p{margin:0 0 10px;font-size:15px;color:var(--tinta2)}

  /* Zona de arrastre del importador */
  .importar{transition:border-color .15s,background .15s}
  .importar.encima{border-color:var(--turquesa);background:var(--turquesa-100)}
  .importar input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .importar .boton{cursor:pointer}
  .importe{margin:12px 0 0;font-size:13.5px;line-height:1.55}
  .importe[hidden]{display:none}
  .importe.bien{color:var(--turquesa-texto)}
  .importe.mal{color:var(--quitado);font-weight:600}
  .importe ul{margin:6px 0 0;padding-left:1.2em}
  .importe li{margin:0 0 3px}

  /* La lista de lo que hace falta. Va arriba del todo y se puede cerrar: quien
     ya lo sabe no tiene que verla cada vez que entra. */
  .avio{border:1px solid var(--linea);border-radius:14px;background:var(--sup);margin:0 0 20px}
  .avio__cabeza{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;
    border:0;background:transparent;font:inherit;font-size:15px;font-weight:600;
    color:var(--tinta);text-align:left;cursor:pointer}
  .avio__flecha{margin-left:auto;color:var(--tinta3);transition:transform .15s}
  .avio[data-abierto="no"] .avio__flecha{transform:rotate(-90deg)}
  .avio[data-abierto="no"] .avio__cuerpo{display:none}
  .avio__cuerpo{padding:0 16px 16px}
  .avio__grupo{margin:0 0 14px}
  .avio__grupo:last-child{margin:0}
  .avio__rot{margin:0 0 6px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
    font-weight:700;color:var(--turquesa-texto)}
  .avio__rot--luego{color:var(--tinta3)}
  .avio ul{margin:0;padding-left:1.15em;font-size:14px;line-height:1.6;color:var(--tinta2)}
  .avio li{margin:0 0 4px}
  .avio b{color:var(--tinta)}
  .avio__calma{margin:12px 0 0;padding:11px 13px;background:var(--turquesa-100);
    border-radius:10px;font-size:13.5px;line-height:1.55;color:var(--turquesa-texto)}

  .portada__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* 05-11-2026, 13:24: la portada ya no se encuadra; se ve entera. El encuadre es de la miniatura. */
  #c-portada:has(.portada__foto img){aspect-ratio:auto;cursor:default}
  #c-portada .portada__foto:has(img){position:static;height:auto;background:none}
  #c-portada .portada__foto img{position:static;display:block;width:100%;height:auto}
  .previo-portada:has(img){aspect-ratio:auto}
  .previo-portada .previo-portada__foto{position:static;display:block;height:auto}
  /* La miniatura: la tarjeta del listado y la imagen al compartir (05-11-2026). Misma proporción que la tarjeta del blog (3:2). */
  .miniatura{margin:22px 0 0;padding:16px;border:1px solid var(--linea);border-radius:14px;background:var(--sup)}
  .miniatura__rotulo{margin:0 0 4px;font-size:14.5px;color:var(--tinta)}
  .miniatura__fila{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:12px}
  .miniatura__tarjeta{position:relative;width:min(100%,300px);aspect-ratio:3/2;border-radius:14px;overflow:hidden;
    background:var(--linea);cursor:grab;touch-action:none;flex:none}
  .miniatura__tarjeta.arrastrando{cursor:grabbing}
  .miniatura__tarjeta:focus-visible{outline:2px solid var(--turquesa);outline-offset:3px}
  .miniatura__tarjeta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
  .miniatura__vacia{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;
    font-size:13px;color:var(--tinta3)}
  .miniatura__vacia[hidden],.miniatura__tarjeta img[hidden]{display:none}
  .miniatura__lado{flex:1 1 180px;min-width:0;font-size:13.5px;line-height:1.55;color:var(--tinta2)}
  .miniatura__lado p{margin:0 0 8px}
  .miniatura__opciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
  .miniatura__opcion{position:relative;width:64px;height:48px;padding:0;border:2px solid transparent;border-radius:8px;
    overflow:hidden;background:var(--linea);cursor:pointer}
  .miniatura__opcion img{display:block;width:100%;height:100%;object-fit:cover}
  .miniatura__opcion span{position:absolute;left:0;right:0;bottom:0;padding:1px 0;font-size:10px;line-height:1.3;
    background:rgba(0,0,0,.55);color:#fff;text-align:center}
  .miniatura__opcion[aria-pressed="true"]{border-color:var(--turquesa);box-shadow:0 0 0 2px var(--turquesa-200)}
  .importe__reparto{margin:8px 0 0;padding:10px 12px;background:var(--sup);
    border:1px solid var(--linea);border-radius:10px;font-size:13px;line-height:1.55;
    color:var(--tinta2)}
  .importe__reparto b{color:var(--tinta)}
  .importe__reparto ul{margin:5px 0 0;padding-left:1.15em}

  .credito{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;
    border-top:1px solid var(--linea);background:var(--sup)}
  .credito select{font:inherit;font-size:13px;min-height:36px;padding:0 8px;
    border:1px solid var(--linea);border-radius:8px;background:var(--sup);color:var(--tinta)}
  .credito input{flex:1 1 170px;min-width:0;font:inherit;font-size:13px;min-height:36px;
    padding:0 10px;border:1px solid var(--linea);border-radius:8px;background:var(--sup);color:var(--tinta)}
  .credito button{font:inherit;font-size:12.5px;min-height:36px;padding:0 11px;cursor:pointer;
    border:1px dashed var(--linea);border-radius:8px;background:transparent;color:var(--tinta2)}
  .credito button:hover{border-color:var(--turquesa);color:var(--turquesa-texto)}
  .credito.falta{background:var(--ambar-100)}
  .credito.falta input{border-color:var(--ambar-tipo)}
  .credito__ver{flex:1 1 100%;margin:0;font-size:12.5px;color:var(--tinta3)}
  .medio__marco--foto{aspect-ratio:auto;padding:0;background:var(--sup2);display:block}
  .medio__marco--foto img{display:block;width:100%;height:auto;
    /* Con techo: una foto vertical sin límite se come la pantalla y esconde el
       texto que viene después. `contain` para no recortar lo que el autor eligió. */
    max-height:min(520px, 60vh);object-fit:contain;background:var(--sup2)}
  .medio__pie.sin-credito{background:var(--ambar-100);color:var(--ambar-tipo);font-weight:600}
  .faltan-creditos{margin:0 0 12px;padding:12px 14px;border-radius:10px;
    background:var(--ambar-100);color:var(--ambar-tipo);font-size:14px;line-height:1.5}
  .faltan-creditos[hidden]{display:none}

  /* La imagen pequeña se avisa ENCIMA de la propia imagen: el repaso dice
     cuántas hay, pero en un texto con ocho fotos hay que poder ver cuál es. */
  .medio__aviso{margin:0;padding:8px 14px;font-size:12.5px;line-height:1.45;font-weight:600;
    background:var(--ambar-100);color:var(--ambar-tipo);border-bottom:1px solid var(--linea)}

  /* Tablas de datos. Entran del Word tal cual; en el teléfono se desplazan de
     lado en vez de romper la columna del texto. */
  .doc .texto table,.previo-cuerpo table{border-collapse:collapse;margin:8px 0 20px;
    font-size:15px;line-height:1.45;display:block;overflow-x:auto;max-width:100%}
  .doc .texto td,.doc .texto th,.previo-cuerpo td,.previo-cuerpo th{
    border:1px solid var(--linea);padding:7px 11px;vertical-align:top;text-align:left}
  .doc .texto td p,.previo-cuerpo td p{margin:0}
  /* Solo la celda de título (th) lleva el fondo y la negrita. Antes también los
     llevaba toda la primera fila, aunque fuera de celdas normales, y por eso
     «Primera fila como título» parecía no hacer nada: la fila se veía igual
     con y sin título. */
  .doc .texto th,.previo-cuerpo th{font-weight:600;background:var(--sup2)}
  .doc .texto td,.doc .texto th{min-width:72px;height:2.4em}

  /* La tabla del editor lleva su propia barra: añadir y quitar filas y
     columnas. Va pegada a la tabla y no en la barra de arriba, porque solo
     tiene sentido con el cursor dentro. */
  .tabla{margin:6px 0 4px;border:1px solid var(--linea);border-radius:10px;background:var(--sup);
    padding:8px 10px 2px}
  .tabla__controles{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;font-size:12.5px}
  .tabla__controles button{font:inherit;font-size:12.5px;min-height:32px;padding:0 10px;cursor:pointer;
    border:1px solid var(--linea);border-radius:7px;background:var(--sup2);color:var(--tinta2)}
  .tabla__controles button:hover{border-color:var(--turquesa);color:var(--turquesa-texto)}
  .tabla__controles .quitar{margin-left:auto}
  .tabla__controles button[aria-pressed="true"]{background:var(--turquesa-100);border-color:var(--turquesa);
    color:var(--turquesa-texto);font-weight:600}
  .tabla__controles button[aria-pressed="true"]::before{content:'\2713  '}
  .tabla__controles .quitar:hover{border-color:var(--quitado);color:var(--quitado)}
  .tabla table{margin:0 0 6px}
  .tabla td.celda-activa,.tabla th.celda-activa{outline:2px solid var(--turquesa);outline-offset:-2px}

  /* Lo que no es un párrafo se nombra en el editor. Antes una cita o un
     destacado se veían distintos, pero nada decía qué eran ni cómo se hacían
     otros iguales. El rótulo no se publica. */
  .doc .texto blockquote,.doc .texto .destacado,.doc .texto .verso{position:relative}
  .doc .texto blockquote::before,.doc .texto .destacado::before,.doc .texto .verso::before{
    display:block;margin:0 0 6px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
    font-weight:700;font-style:normal;color:var(--tinta3);text-align:left}
  .doc .texto blockquote::before{content:'Cita · palabras de otra persona'}
  .doc .texto .destacado::before{content:'Destacado · una frase de tu texto, en grande'}
  .doc .texto .verso::before{content:'Verso'}

  /* Quién lo dijo, debajo de la cita. Es el formato que usan 22 de los 25
     artículos publicados: la frase y, debajo, el nombre. */
  .cita-quien{font-size:15px;font-weight:600;color:var(--tinta2);font-style:normal}
  .cita-quien::before{content:'— '}
  .doc .texto .cita-quien:empty::after{content:'Quién lo dijo (si no hace falta, déjalo en blanco)';
    color:var(--tinta3);font-weight:400}
  .doc .texto .cita-quien:empty::before{content:''}

  /* El separador: una línea corta entre dos partes del texto. */
  .separador{border:0;height:0;margin:30px auto;width:120px;border-top:2px solid var(--linea)}
  .doc .texto .separador{margin:18px auto}

  /* Galería: varias fotos en fila, cada una con su crédito. En los artículos
     viejos va en tres columnas; con dos o cuatro fotos, en dos. */
  .galeria{display:grid;gap:14px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));margin:8px 0}
  .galeria > .medio{margin:0}
  .galeria .medio__marco--foto img{max-height:260px;object-fit:cover;aspect-ratio:1/1}
  .previo-cuerpo .galeria{margin:26px 0}
  .previo-cuerpo .galeria .medio__marco img{aspect-ratio:1/1;object-fit:cover;max-height:none}
  .previo--movil .previo-cuerpo .galeria{grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (max-width:560px){ .galeria{grid-template-columns:repeat(2,minmax(0,1fr))} }
  .galeria__rotulo{grid-column:1/-1;margin:0;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
    font-weight:700;color:var(--tinta3)}

  /* La foto al costado, con el texto alrededor: diez de los artículos viejos
     lo usan. En el editor cada bloque va aparte y el texto no puede rodearla,
     así que se enseña a su lado y menos ancha; en la previsualización sí lo
     rodea. En el teléfono vuelve al ancho completo: a 360 px, una columna de
     texto junto a una foto deja tres palabras por línea. */
  .medio__lugar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 14px;
    border-top:1px solid var(--linea);background:var(--sup);font-size:12.5px;color:var(--tinta3)}
  .medio__lugar button{font:inherit;font-size:12.5px;min-height:30px;padding:0 10px;cursor:pointer;
    border:1px solid var(--linea);border-radius:999px;background:var(--sup);color:var(--tinta2)}
  .medio__lugar button[aria-pressed="true"]{background:var(--turquesa-texto);border-color:var(--turquesa-texto);color:#fff}
  .doc .texto .medio.lugar-izquierda,.doc .texto .medio.lugar-derecha{max-width:min(380px,60%)}
  .doc .texto .medio.lugar-derecha{margin-left:auto}
  .previo-cuerpo .medio.lugar-izquierda{float:left;width:42%;margin:4px 24px 14px 0}
  .previo-cuerpo .medio.lugar-derecha{float:right;width:42%;margin:4px 0 14px 24px}
  .previo-cuerpo h3,.previo-cuerpo blockquote,.previo-cuerpo .separador,.previo-cuerpo .galeria,
  .previo-cuerpo table,.previo-cuerpo .destacado,.previo-fuentes,
  .previo-cuerpo .medio:not(.lugar-izquierda):not(.lugar-derecha){clear:both}
  .previo--movil .previo-cuerpo .medio.lugar-izquierda,
  .previo--movil .previo-cuerpo .medio.lugar-derecha{float:none;width:auto;margin:26px 0}
  @media (max-width:560px){
    .previo-cuerpo .medio.lugar-izquierda,.previo-cuerpo .medio.lugar-derecha{float:none;width:auto;margin:26px 0}
  }

  /* La firma de la previsualización, como la del artículo publicado: foto
     redonda de 44 px, nombre y fecha. Sin foto sale la inicial. */
  .previo-firma .previo-avatar{width:44px;height:44px;border-radius:50%;flex:none;overflow:hidden;
    display:grid;place-items:center;background:var(--turquesa-100);color:var(--turquesa-texto);
    font-weight:700;font-size:18px;align-self:center}
  .previo-firma .previo-avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .previo-firma .previo-datos{display:flex;flex-direction:column;gap:0;min-width:0}
  .previo-ante--falta{color:var(--ambar-tipo)}
  .previo-cuerpo .tabla{border:0;padding:0;background:transparent}

  /* La ficha de autora al pie, como la del sitio. */
  .previo-ficha{display:flex;gap:16px;align-items:flex-start;margin-top:36px;padding:20px 22px;
    background:var(--sup2);border-radius:14px}
  .previo-ficha__foto{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;display:grid;
    place-items:center;background:var(--turquesa-100);color:var(--turquesa-texto);font-weight:700;font-size:24px}
  .previo-ficha__foto img{width:100%;height:100%;object-fit:cover;display:block}
  .previo-ficha p{margin:0}
  .previo-ficha__nombre{font-weight:700;color:var(--tinta);font-size:16px}
  .previo-ficha__rol{font-size:14px;color:var(--tinta3);margin-top:2px !important}
  .previo-ficha__resena{font-size:15px;line-height:1.6;color:var(--tinta2);margin-top:10px !important}
  .previo-ficha__mas{margin-top:10px !important;font-size:14px;font-weight:600;color:var(--turquesa-texto);
    text-decoration:underline}
  .previo-sin-foto{margin:-20px 0 30px;font-size:13px;color:var(--ambar-tipo)}
  .previo-cuerpo .cita-quien{margin-top:10px;font-size:15px}

  /* Los correos, vistos como llegan */
  .sobre{background:var(--sup);border:1px solid var(--linea);border-radius:14px;
    overflow:hidden;margin-bottom:18px}
  .sobre__cuando{padding:9px 18px;background:var(--sup2);border-bottom:1px solid var(--linea);
    font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
    color:var(--turquesa-texto)}
  .sobre__cabeza{padding:14px 18px 12px;border-bottom:1px solid var(--linea)}
  .sobre__de{margin:0 0 3px;font-size:12.5px;color:var(--tinta3)}
  .sobre__asunto{margin:0;font-size:16.5px;font-weight:600;color:var(--tinta)}
  .sobre__cuerpo{padding:16px 18px 18px;font-size:14.5px;line-height:1.65;color:var(--tinta2)}
  .sobre__cuerpo p{margin:0 0 13px}
  .sobre__cuerpo p:last-child{margin:0}
  .sobre__cuerpo .boton{margin:4px 0 10px}
  .sobre__nota{padding:0 18px 16px;font-size:13px;line-height:1.5;color:var(--tinta3)}
  .sobre__nota b{color:var(--tinta)}

  /* Tickets */
  .ticket{background:var(--sup);border:1px solid var(--linea);border-radius:14px;
    padding:16px 18px;margin-bottom:12px}
  .ticket__cabeza{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;margin-bottom:6px}
  .ticket__num{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--tinta3);
    font-variant-numeric:tabular-nums}
  .ticket__t{margin:0;font-size:16px;font-weight:600;flex:1 1 220px;min-width:0}
  .ticket__fecha{font-size:13px;color:var(--tinta3)}
  .estado{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    font-weight:700;border-radius:999px;padding:2px 9px}
  .estado--recibido{background:var(--sup2);color:var(--tinta3)}
  .estado--revision{background:var(--ambar-100);color:var(--ambar-tipo)}
  .estado--resuelto{background:var(--turquesa-100);color:var(--turquesa-texto)}
  .ticket p{margin:0;font-size:14.5px;line-height:1.55;color:var(--tinta2)}
  .ticket__hilo{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea);
    display:flex;flex-direction:column;gap:10px}
  .ticket__msj .quien{margin:0 0 2px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
    font-weight:700;color:var(--tinta3)}
  .ticket__msj--nuestro .quien{color:var(--turquesa-texto)}

  /* ---------- Tablón de anuncios ---------- */
  .tablon{margin:0 0 20px}
  .tablon__cabeza{display:flex;align-items:center;gap:10px;margin:0 0 8px}
  .tablon__rotulo{margin:0 auto 0 0;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
    font-weight:700;color:var(--tinta3)}
  .tablon__caja{position:relative;border-radius:14px;overflow:hidden;
    border:1px solid var(--linea);background:var(--sup2)}
  .tablon__pista{display:flex;transition:transform 480ms cubic-bezier(.4,0,.2,1)}
  .tablon__hoja{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:1fr;
    align-items:center;gap:0}
  @media (min-width:760px){
    .tablon__hoja{grid-template-columns:1fr 32%}
  }
  .tablon__texto{padding:16px 20px 18px}
  .tablon__ante{margin:0 0 3px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
    font-weight:700;color:var(--turquesa-texto)}
  .tablon__t{margin:0 0 4px;font-size:17.5px;line-height:1.22;letter-spacing:-.01em;
    font-weight:600;color:var(--tinta);text-wrap:balance}
  .tablon__p{margin:0;font-size:13.5px;line-height:1.45;color:var(--tinta2);max-width:52ch}
  .tablon__boton{display:inline-flex;align-items:center;min-height:36px;margin-top:10px;
    padding:0 15px;border-radius:8px;background:var(--turquesa-texto);color:#fff;
    font-size:13.5px;font-weight:600;text-decoration:none}
  .tablon__boton:hover{background:var(--turquesa-oscuro);color:#fff}

  /* El lado derecho es una mancha de color, no una foto: cada anuncio tiene la
     suya para que se distingan de un vistazo al pasar. */
  .tablon__marca{align-self:stretch;min-height:96px;
    background:linear-gradient(140deg,var(--m1,#E3F3F4),var(--m2,#BFE3E6))}
  @media (max-width:759px){
    .tablon__texto{padding:14px 16px 16px}
    .tablon__marca{min-height:0;height:6px;order:-1}
  }

  /* Cuando la persona no tiene nada pendiente, el tablón es lo único que hay
     debajo del saludo, y crece. Se había achicado pensando en que abajo irían
     más cosas, y para la mayoría, casi siempre, no va a haber nada más. */
  .tablon--grande .tablon__texto{padding:28px 30px 30px}
  .tablon--grande .tablon__ante{font-size:12px;margin-bottom:6px}
  .tablon--grande .tablon__t{font-size:clamp(21px,3.2vw,27px);margin-bottom:8px}
  .tablon--grande .tablon__p{font-size:15.5px;line-height:1.55}
  .tablon--grande .tablon__boton{min-height:44px;padding:0 20px;font-size:14.5px;margin-top:16px}
  .tablon--grande .tablon__marca{min-height:220px}
  @media (min-width:760px){ .tablon--grande .tablon__hoja{grid-template-columns:1fr 38%} }
  @media (max-width:759px){
    .tablon--grande .tablon__texto{padding:20px 18px 22px}
    .tablon--grande .tablon__marca{height:10px;min-height:0}
  }

  .pendientes{display:grid;gap:0}
  .pendientes__rot{margin:6px 0 10px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
    font-weight:700;color:var(--tinta3)}
  .pendientes__rot[hidden],.pendientes [hidden],.todo-al-dia[hidden]{display:none}
  .todo-al-dia{margin:0 0 8px;font-size:14px;color:var(--tinta3)}

  .tablon__puntos{display:flex;gap:6px}
  .tablon__punto{width:8px;height:8px;border-radius:999px;border:0;padding:0;cursor:pointer;
    background:var(--linea)}
  .tablon__punto[aria-current="true"]{background:var(--turquesa-texto);width:20px}
  .tablon__punto:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px}
  .tablon__flecha{width:28px;height:28px;display:grid;place-items:center;border-radius:999px;
    border:1px solid var(--linea);background:var(--sup);color:var(--tinta2);
    font:inherit;font-size:14px;line-height:1;cursor:pointer}
  .tablon__flecha:hover{border-color:var(--turquesa);color:var(--turquesa-texto)}
  .tablon__flecha:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}

  @media (prefers-reduced-motion: reduce){
    .tablon__pista{transition:none}
  }

  .avatar{width:72px;height:72px;border-radius:999px;background:var(--turquesa-100);
    color:var(--turquesa-texto);display:grid;place-items:center;font-size:26px;font-weight:700;flex:none}
  /* Encuadre de la foto de perfil (Damián, 19-10-2026). Se abre al elegir la
     foto: la persona la arrastra, la acerca o la gira hasta que queda como
     quiere, y ve al lado cómo sale en su perfil y en el artículo. */
  .encuadre{position:fixed;inset:0;z-index:70;background:rgba(31,29,27,.55);
    display:grid;place-items:center;padding:16px;overflow:auto}
  .encuadre[hidden]{display:none}
  .encuadre__caja{background:var(--sup);border-radius:16px;padding:20px;width:min(560px,100%);
    box-shadow:0 18px 50px rgba(0,0,0,.25)}
  .encuadre__caja h2{margin:0 0 4px;font-size:20px}
  .encuadre__caja > p{margin:0 0 14px;font-size:14px;color:var(--tinta2)}
  .encuadre__cuerpo{display:grid;gap:18px;align-items:start}
  @media (min-width:560px){ .encuadre__cuerpo{grid-template-columns:auto 1fr} }
  .encuadre__ventana{position:relative;width:260px;height:260px;max-width:100%;overflow:hidden;
    border-radius:12px;background:var(--mesa);cursor:grab;touch-action:none;margin:0 auto}
  .encuadre__ventana.arrastrando{cursor:grabbing}
  .encuadre__ventana:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px}
  .encuadre__ventana canvas{display:block;width:100%;height:100%}
  .encuadre__mascara{position:absolute;inset:0;border-radius:50%;pointer-events:none;
    box-shadow:0 0 0 400px rgba(250,247,242,.72);outline:2px solid #fff;outline-offset:-1px}
  .encuadre__controles{display:grid;gap:12px}
  .encuadre__controles label{font-size:13.5px;font-weight:600}
  .encuadre__controles input[type=range]{width:100%;accent-color:var(--turquesa-texto)}
  .encuadre__vistas{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
  .encuadre__vista{text-align:center;font-size:12px;color:var(--tinta3)}
  .encuadre__vista img{display:block;border-radius:50%;margin:0 auto 4px;background:var(--mesa)}
  .encuadre__pista{margin:0;font-size:13px;color:var(--tinta3)}
  .ig-enlace{color:var(--turquesa-texto);font-weight:600;text-decoration:none;
    border-bottom:1px solid var(--turquesa)}
  .ig-enlace:hover{background:var(--turquesa-100)}
  .ig-mal{color:var(--quitado);font-weight:600}
  .perfil-cabeza{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

  /* Las dos partes del perfil. El rótulo dice en una palabra quién lo ve. */
  .perfil-parte{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:26px 0 14px;
    font-size:19px;letter-spacing:-.01em}
  .perfil-chip{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
    padding:3px 9px;border-radius:999px;background:var(--sup2);color:var(--tinta3)}
  .perfil-chip--publico{background:var(--turquesa-100);color:var(--turquesa-texto)}
  .perfil-privado{margin:30px 0 22px;padding:4px 20px 20px;border:1px solid var(--linea);
    border-radius:14px;background:var(--sup2)}
  .perfil-privado .perfil-parte{margin-top:18px}

  /* El aviso de «estás en el teléfono» solo se ve en un teléfono. Hasta la v92
     no tenía estilo propio y salía en todas las pantallas, también en la
     computadora (Damián, 19-10-2026). Se mira el ancho de la pantalla y que el
     dedo sea el puntero, para no confundir una ventana estrecha de computadora
     con un teléfono. */
  .aviso-movil{display:none;margin:0 0 18px;padding:12px 14px;border-radius:10px;
    background:var(--ambar-100);border:1px solid var(--ambar);font-size:14px;
    line-height:1.5;color:var(--tinta2)}
  @media (max-width:760px) and (pointer:coarse){ .aviso-movil{display:block} }

  /* El correo que se muestra: tres opciones, y el de la cuenta con su dirección. */
  .elegir-correo{display:grid;gap:8px;margin:0 0 10px}
  .elegir-correo label{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;
    line-height:1.45;cursor:pointer}
  .elegir-correo input{margin-top:3px;accent-color:var(--turquesa-texto)}
  .elegir-correo b{font-weight:600;color:var(--tinta)}
  [data-correo-otro][hidden]{display:none}
  .lugar-par{display:grid;gap:12px}
  @media (min-width:640px){ .lugar-par{grid-template-columns:1fr 1fr} }
  .lugar-par label{display:block;font-size:13.5px;font-weight:600;margin-bottom:4px}

  /* Las redes: una caja por enlace, con el icono de la red que se reconoce al
     pegarlo, y un «+» para añadir otra (Damián, 19-10-2026). */
  .redes{display:grid;gap:8px;margin:0 0 10px}
  .red-fila{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center}
  .red-icono{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
    background:var(--sup2);border:1px solid var(--linea);color:var(--tinta3)}
  .red-icono.conocida{background:var(--turquesa-100);border-color:var(--turquesa-200);color:var(--turquesa-texto)}
  .red-icono svg{width:20px;height:20px;display:block}
  .red-quitar{width:40px;height:40px;border:1px solid var(--linea);border-radius:10px;
    background:var(--sup);color:var(--tinta3);font:inherit;font-size:18px;cursor:pointer}
  .red-quitar:hover{border-color:var(--quitado);color:var(--quitado)}
  .red-quitar[hidden]{visibility:hidden;display:block}
  .red-nombre{grid-column:2 / 4;margin:-2px 0 2px;font-size:12.5px;color:var(--tinta3)}
  .red-nombre:empty{display:none}
  .previo-ficha__redes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px !important}
  .previo-ficha__redes a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    background:var(--sup);border:1px solid var(--linea);color:var(--tinta2)}
  .previo-ficha__redes svg{width:17px;height:17px;display:block}
  /* Los intereses, como las disciplinas del editor: una pastilla por opción. Sin
     estilo salían como una línea apretada de casillas y no se sabía qué marcaba
     qué. */
  .intereses{display:flex;flex-wrap:wrap;gap:8px}
  .intereses label{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
    border:1px solid var(--linea);border-radius:999px;background:var(--sup);font-size:14px;
    font-weight:400;cursor:pointer;margin:0}
  .intereses label:has(input:checked){border-color:var(--turquesa);background:var(--turquesa-100);
    color:var(--turquesa-texto);font-weight:600}
  .intereses input{accent-color:var(--turquesa-texto)}

  /* Mi aprendizaje: tarjetas con su tipo, filtros arriba y dos grupos —lo que
     está en curso y lo terminado—. El color del tipo ayuda a reconocerlo de un
     vistazo, pero el tipo va siempre escrito: el color solo no lo dice. */
  .apr-filtros{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
  .apr-filtros button{font:inherit;font-size:14px;font-weight:600;min-height:40px;padding:0 14px;
    border-radius:999px;border:1px solid var(--linea);background:var(--sup);color:var(--tinta2);cursor:pointer}
  .apr-filtros button span{font-weight:500;color:var(--tinta3);margin-left:4px}
  .apr-filtros button[aria-pressed="true"]{background:var(--turquesa-texto);border-color:var(--turquesa-texto);color:#fff}
  .apr-filtros button[aria-pressed="true"] span{color:#fff;opacity:.85}
  .apr-filtros button[hidden]{display:none}
  .apr-grupo{margin:22px 0 10px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
    font-weight:700;color:var(--tinta3)}
  .apr-grupo[hidden]{display:none}
  .apr{background:var(--sup);border:1px solid var(--linea);border-radius:16px;padding:18px 20px;margin:0 0 14px}
  .apr[hidden]{display:none}
  .apr--hecho{background:var(--sup2)}
  .apr__cabeza{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 8px}
  .apr__tipo{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
    padding:3px 9px;border-radius:999px}
  .apr__tipo--taller{background:var(--turquesa-100);color:var(--turquesa-texto)}
  .apr__tipo--curso{background:var(--ambar-100);color:var(--ambar-tipo)}
  .apr__tipo--club{background:#EAE6F5;color:#4B3F7A}
  .apr__estado{font-size:13.5px;color:var(--tinta3)}
  .apr__t{margin:0 0 4px;font-size:19px;line-height:1.25;letter-spacing:-.01em}
  .apr__d{margin:0;font-size:14.5px;line-height:1.5;color:var(--tinta2)}
  .apr__barra{height:6px;border-radius:999px;background:var(--sup2);margin:12px 0 0;overflow:hidden;max-width:420px}
  .apr__barra span{display:block;height:100%;background:var(--turquesa-texto);border-radius:999px}
  .apr__nota{margin:10px 0 0;font-size:13px;color:var(--tinta3)}
  .apr .acciones{margin-top:14px}
  .apr-vacio-filtro{margin:6px 0;font-size:14px;color:var(--tinta3)}
  .apr-vacio-filtro[hidden]{display:none}