/* ================================================================
   Prensa Arcana — cromo del editor (todo lo que NO es la hoja).
   La hoja maquetada vive en pagina.css, que es el unico archivo que
   se imprime. Separarlos evita el error clasico de este tipo de
   editor: reglas del editor filtrandose al PDF.
   ================================================================ */
:root{
  --tinta:#0b0906; --cuero:#171009; --cuero-claro:#1f1710;
  --pergamino:#e7d9b8; --texto-claro:#e8dcc0; --texto-tenue:#b8a988;
  --ascua:#6a4a9a; --ascua-oscura:#4a3169;
  --oro:#c9a26a; --oro-claro:#e8cf9a;
  --peligro:#b5482f; --musgo:#5c7a5e;
  --linea:rgba(231,217,184,.14); --radio:6px;
  --fuente-display:'Cinzel',Georgia,serif;
  --fuente-cuerpo:'EB Garamond',Georgia,serif;
  --fuente-ui:'Inter',system-ui,sans-serif;
  --fuente-mono:'Cascadia Mono','Consolas',ui-monospace,monospace;
  --ancho-editor:46%;
}
*{box-sizing:border-box;}
html{color-scheme:dark;height:100%;}
body{
  margin:0;height:100%;
  display:grid;grid-template-rows:auto 1fr auto;
  background:
    radial-gradient(ellipse at 15% -10%,rgba(106,74,154,.12),transparent 45%),
    var(--tinta);
  color:var(--texto-claro);
  font-family:var(--fuente-ui);
  overflow:hidden;
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;}}

/* ---------------- Barra superior ---------------- */
.barra{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--cuero);border-bottom:1px solid var(--linea);
  padding:10px 18px;
}
.marca{display:flex;align-items:center;gap:10px;white-space:nowrap;}
.marca-icono{display:block;flex-shrink:0;}
.marca-nombres{display:flex;flex-direction:column;line-height:1.15;}
.marca-titulo{font-family:var(--fuente-display);font-weight:700;font-size:1.05rem;color:var(--oro-claro);letter-spacing:.02em;}
.marca-subtitulo{font-size:.6rem;color:var(--texto-tenue);letter-spacing:.08em;text-transform:uppercase;}

.acciones{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;}
.boton{
  font-family:var(--fuente-ui);font-size:.82rem;font-weight:500;
  padding:9px 14px;min-height:38px;
  background:var(--cuero-claro);color:var(--texto-claro);
  border:1px solid var(--linea);border-radius:var(--radio);
  cursor:pointer;white-space:nowrap;
}
.boton:hover{border-color:var(--oro);color:var(--oro-claro);}
.boton:focus-visible{outline:2px solid var(--oro);outline-offset:2px;}
.boton[disabled]{opacity:.5;cursor:progress;}
.boton-primario{
  background:linear-gradient(180deg,var(--ascua),var(--ascua-oscura));
  border-color:var(--ascua-oscura);color:#f3ecfb;font-weight:600;
}
.boton-primario:hover{border-color:var(--oro);color:#fff;}
/* En pantalla tactil los 38px de alto quedan bajo el minimo de 44px
   que se puede tocar sin errarle. Ya paso lo mismo en la landing del
   estudio; se corrige de entrada en vez de esperar a medirlo. */
@media (pointer:coarse){
  .boton{min-height:44px;padding-block:12px;}
}

/* ---------------- Taller: editor | divisor | vista ---------------- */
.taller{
  display:grid;
  grid-template-columns:var(--ancho-editor) 6px 1fr;
  min-height:0;overflow:hidden;
}
.panel{display:flex;flex-direction:column;min-width:0;min-height:0;}
.panel-cabecera{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 14px;border-bottom:1px solid var(--linea);
  background:rgba(23,16,9,.7);
}
.panel-titulo{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-tenue);font-weight:600;}
.panel-datos{font-size:.72rem;color:var(--texto-tenue);font-variant-numeric:tabular-nums;}

#editor{
  flex:1;min-height:0;width:100%;resize:none;
  padding:18px 20px;border:0;outline:0;
  background:#12100d;color:#ded3bb;
  font-family:var(--fuente-mono);font-size:14px;line-height:1.65;
  tab-size:2;
}
#editor:focus-visible{box-shadow:inset 0 0 0 2px var(--oro);}
#editor::selection{background:rgba(106,74,154,.55);}

.divisor{
  background:var(--linea);cursor:col-resize;
  border-inline:1px solid transparent;
}
.divisor:hover,.divisor:focus-visible{background:var(--oro);outline:none;}
body.arrastrando{cursor:col-resize;user-select:none;}
body.arrastrando #editor{pointer-events:none;}

.lienzo{
  flex:1;min-height:0;overflow:auto;
  padding:26px 20px 60px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(106,74,154,.10),transparent 55%),
    #0e0c09;
}

/* ---------------- Barra de estado ---------------- */
.estado{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:7px 18px;border-top:1px solid var(--linea);
  background:var(--cuero);font-size:.74rem;color:var(--texto-tenue);
}
.estado-sep{color:var(--linea);}
.estado-aviso{
  margin-left:auto;color:#f0c9a8;
  background:rgba(181,72,47,.18);border:1px solid rgba(181,72,47,.5);
  border-radius:999px;padding:3px 11px;font-weight:600;
}
.estado-ok{color:var(--musgo);}

/* ---------------- Zona de manual y de sesion (barra) ---------------- */
.zona-manual{display:flex;align-items:center;gap:8px;min-width:0;}
.zona-manual[hidden]{display:none;}
.etiqueta-manual{
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texto-tenue);font-weight:600;white-space:nowrap;
}
.selector{
  max-width:230px;min-height:38px;padding:8px 10px;
  background:var(--cuero-claro);color:var(--texto-claro);
  border:1px solid var(--linea);border-radius:var(--radio);
  font-family:var(--fuente-ui);font-size:.82rem;
}
.selector:focus-visible{outline:2px solid var(--oro);outline-offset:2px;}

.zona-sesion{position:relative;white-space:nowrap;}
.zona-sesion[hidden]{display:none;}

/* Boton de cuatro puntos, como la cara del 4 de un dado. Sin texto:
   el correo vive adentro del menu, que es donde se lee sin ocupar la
   barra. Por eso lleva aria-label, o seria un boton mudo. */
.boton-puntos{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;color:var(--texto-tenue);
}
.boton-puntos svg{display:block;fill:currentColor;}
.boton-puntos:hover,.boton-puntos[aria-expanded="true"]{color:var(--oro-claro);}

.menu-cuenta{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  min-width:200px;padding:6px;
  background:var(--cuero);border:1px solid var(--oro);border-radius:var(--radio);
  box-shadow:0 14px 30px rgba(0,0,0,.55);
}
.menu-cuenta[hidden]{display:none;}
.menu-nivel[hidden]{display:none;}

/* El correo: encabezado del menu, sin funcion. No es un boton ni
   recibe foco — solo dice de quien es la sesion. */
.menu-correo{
  margin:0;padding:9px 12px 8px;
  font-size:.76rem;color:var(--texto-tenue);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:230px;
}

.menu-cuenta button{
  display:block;width:100%;text-align:left;
  padding:10px 12px;min-height:40px;
  background:none;border:0;border-radius:4px;cursor:pointer;
  color:var(--texto-claro);font-family:var(--fuente-ui);font-size:.84rem;
}
.item-con-flecha{display:flex !important;align-items:center;justify-content:space-between;gap:10px;}
.item-con-flecha span{color:var(--texto-tenue);font-size:1rem;line-height:1;}
.item-con-flecha:hover span{color:var(--oro-claro);}
.menu-volver{color:var(--texto-tenue) !important;font-weight:600;}
.menu-volver span{margin-right:4px;}
.menu-cuenta button:hover{background:var(--cuero-claro);color:var(--oro-claro);}
.menu-cuenta button:focus-visible{outline:2px solid var(--oro);outline-offset:-2px;}
.menu-linea{border:0;border-top:1px solid var(--linea);margin:5px 6px;}

.menu-cuenta .item-peligro{color:#e8a892;}
.menu-cuenta .item-peligro:hover{background:rgba(181,72,47,.16);color:#f6d3c4;}

/* ---------------- Dialogos (renombrar y borrar) ---------------- */
.dialogo{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(6,5,3,.72);
}
.dialogo[hidden]{display:none;}
.dialogo-caja{
  width:min(440px,100%);
  background:var(--cuero);border:1px solid var(--oro);border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  padding:22px 24px 18px;
}
.dialogo-h2{
  margin:0 0 10px;font-family:var(--fuente-display);
  font-size:1.05rem;font-weight:600;color:var(--oro-claro);
}
.dialogo-nota{margin:0 0 16px;font-size:.86rem;line-height:1.6;color:var(--texto-claro);}
.dialogo-nota strong{color:var(--oro-claro);}
.dialogo-caja label{
  display:block;margin:0 0 5px;font-size:.75rem;font-weight:600;
  color:var(--texto-tenue);letter-spacing:.04em;
}
.dialogo-caja input[type=text]{
  width:100%;margin:0 0 16px;padding:11px 12px;min-height:44px;
  background:#12100d;color:var(--texto-claro);
  border:1px solid var(--linea);border-radius:var(--radio);
  font-family:var(--fuente-ui);font-size:.9rem;
}
.dialogo-caja input[type=text]:focus-visible{outline:2px solid var(--oro);outline-offset:1px;}

.dialogo-check{
  display:flex !important;align-items:center;gap:10px;
  margin:0 0 18px !important;padding:11px 12px;
  background:rgba(181,72,47,.10);border:1px solid rgba(181,72,47,.45);
  border-radius:var(--radio);cursor:pointer;
  font-size:.85rem !important;font-weight:500 !important;
  color:var(--texto-claro) !important;letter-spacing:0 !important;
  text-transform:none;
}
.dialogo-check input{width:18px;height:18px;accent-color:var(--peligro);flex-shrink:0;}

.dialogo-botones{display:flex;gap:10px;justify-content:flex-end;}
.dialogo-botones .boton{min-height:44px;}
.boton-peligro{
  background:linear-gradient(180deg,var(--peligro),#8c3622);
  border-color:#8c3622;color:#fff;font-weight:600;
}
.boton-peligro:hover:not([disabled]){border-color:#e8a892;color:#fff;}
.boton-peligro[disabled]{opacity:.45;cursor:not-allowed;}

/* ---------------- El porton ---------------- */
.porton{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:24px;
  overflow:auto;
  background:
    radial-gradient(ellipse at 50% -10%,rgba(106,74,154,.18),transparent 55%),
    var(--tinta);
}
.porton[hidden]{display:none;}
.porton-caja{
  width:min(420px,100%);
  background:var(--cuero);border:1px solid var(--oro);border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  padding:26px 26px 22px;
}
.porton-marca{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.porton-titulo{
  margin:0;font-family:var(--fuente-display);font-size:1.3rem;font-weight:700;
  color:var(--oro-claro);letter-spacing:.02em;
}
.porton-bajada{margin:2px 0 0;font-size:.7rem;color:var(--texto-tenue);letter-spacing:.06em;text-transform:uppercase;}

.porton-h2{
  margin:0 0 14px;font-family:var(--fuente-display);
  font-size:1rem;font-weight:600;color:var(--texto-claro);
}
.porton-nota{margin:-8px 0 14px;font-size:.8rem;color:var(--texto-tenue);line-height:1.5;}
.porton-form[hidden]{display:none;}
.porton-form label{
  display:block;margin:0 0 5px;font-size:.75rem;font-weight:600;
  color:var(--texto-tenue);letter-spacing:.04em;
}
.porton-form input{
  width:100%;margin:0 0 14px;padding:11px 12px;min-height:44px;
  background:#12100d;color:var(--texto-claro);
  border:1px solid var(--linea);border-radius:var(--radio);
  font-family:var(--fuente-ui);font-size:.9rem;
}
.porton-form input:focus-visible{outline:2px solid var(--oro);outline-offset:1px;}
.boton-ancho{
  display:flex;width:100%;align-items:center;justify-content:center;
  margin-bottom:9px;min-height:44px;
}
.boton[hidden]{display:none;}

.porton-pie{
  margin:12px 0 0;text-align:center;
  font-size:.8rem;color:var(--texto-tenue);
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
}
.enlace{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--oro-claro);font-family:var(--fuente-ui);font-size:.8rem;
  text-decoration:underline;text-underline-offset:3px;
}
.enlace:hover{color:#fff;}
.enlace:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px;}

.porton-aviso{
  margin:0 0 16px;padding:10px 12px;border-radius:var(--radio);
  font-size:.84rem;line-height:1.5;
}
.porton-aviso[hidden]{display:none;}
.porton-aviso-mal{
  background:rgba(181,72,47,.16);border:1px solid rgba(181,72,47,.55);
  color:#f2cdbc;
}
.porton-aviso-bien{
  background:rgba(92,122,94,.16);border:1px solid rgba(92,122,94,.55);
  color:#cfe3cf;
}

@media (max-width:900px){
  .zona-manual{order:3;width:100%;}
  .selector{flex:1;max-width:none;}
}

/* ---------------- Panel de ayuda ---------------- */
.panel-ayuda{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(6,5,3,.72);
}
.panel-ayuda[hidden]{display:none;}
.ayuda-caja{
  width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column;
  background:var(--cuero);border:1px solid var(--oro);border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.ayuda-cabecera{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--linea);
}
.ayuda-cabecera h2{margin:0;font-family:var(--fuente-display);font-size:1.1rem;font-weight:600;color:var(--oro-claro);}
.ayuda-cuerpo{overflow:auto;padding:6px 20px 20px;}
.ayuda-cuerpo h3{
  font-family:var(--fuente-display);font-size:.95rem;font-weight:600;
  color:var(--oro);margin:20px 0 8px;
}
.ayuda-cuerpo p{margin:0 0 10px;font-size:.86rem;line-height:1.6;color:var(--texto-claro);}
.ayuda-cuerpo pre{
  margin:0 0 12px;padding:12px 14px;overflow:auto;
  background:#12100d;border:1px solid var(--linea);border-radius:var(--radio);
  font-family:var(--fuente-mono);font-size:.8rem;line-height:1.55;color:#ded3bb;
}
.ayuda-cuerpo code{font-family:var(--fuente-mono);color:var(--oro-claro);}

/* ---------------- Responsive: paneles apilados ---------------- */
@media (max-width:900px){
  body{overflow:auto;}
  .taller{grid-template-columns:1fr;grid-template-rows:minmax(260px,40vh) 0 1fr;}
  .divisor{display:none;}
}

/* ---------------- Impresion ----------------
   Solo la vista previa sobrevive. Todo lo demas se saca del flujo.
   El detalle de `display:contents` en los ancestros es lo que permite
   que `.vista` quede como hijo directo del body y no herede la grilla
   de pantalla, que introduciria una pagina extra en blanco.          */
@media print{
  html,body{height:auto;overflow:visible;background:#fff;}
  body{display:block;}
  .barra,.estado,.divisor,.panel-cabecera,.panel-ayuda{display:none!important;}
  .taller,.panel-vista,.lienzo{display:contents!important;}
  .panel-editor{display:none!important;}
  .lienzo{padding:0;background:#fff;}
}