/* =============================================================================
 * RIZOMA MAUX · Área de trabajo de dos paneles (js/core/paneles.js)
 * -----------------------------------------------------------------------------
 * Editor + vista previa con asa central (ancho), asa inferior (altura), tres
 * vistas, pestañas para traer el panel oculto y vista ampliada a toda la ventana.
 * El reparto llega en --fa / --fb y la altura en --dual-alto (los pone el script).
 * Cuando el área mide menos de 500 px los paneles se apilan (consulta de
 * contenedor: depende del ancho del área, no del de la pantalla).
 * Las reglas táctiles están en css/tactil.css.
 * ========================================================================== */
.dual { --fa: .5fr; --fb: .5fr; container: dual / inline-size; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dual [hidden] { display: none !important; }

/* ------------------------------- Barra --------------------------------- */
.dual-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dual-vistas { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--borde); }
.dual-vista { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--texto-2);
  font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; transition: var(--t); }
.dual-vista svg { width: 16px; height: 16px; }
.dual-vista:hover { color: var(--texto); background: color-mix(in srgb, var(--marca-2) 9%, transparent); }
.dual-vista.activo { color: #fff; background: linear-gradient(135deg, var(--marca-2), #7c3aed); box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }
.dual-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--texto); }
.dual-acciones { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.dual-acciones .btn-icono { width: 34px; height: 34px; }
.dual-encima { min-width: 0; }
.dual-encima .barra-ed { margin: 0; }

/* ------------------------------ Paneles -------------------------------- */
.dual-cuerpo { display: grid; grid-template-columns: 0 minmax(0, var(--fa)) 16px minmax(0, var(--fb)) 0; grid-template-areas: "la a asa b lb";
  height: var(--dual-alto, 66vh); min-height: 260px; }
.dual-lengueta-a { grid-area: la; } .dual-a { grid-area: a; } .dual-asa { grid-area: asa; } .dual-b { grid-area: b; } .dual-lengueta-b { grid-area: lb; }
.dual[data-vista="a"] .dual-cuerpo { grid-template-columns: 0 minmax(0, 1fr) 0 0 auto; }
.dual[data-vista="b"] .dual-cuerpo { grid-template-columns: auto 0 0 minmax(0, 1fr) 0; }
.dual[data-vista="a"] .dual-b, .dual[data-vista="b"] .dual-a, .dual:not([data-vista="ambos"]) .dual-asa { display: none; }

.dual-panel { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-radius: 16px; background: var(--surface-solid);
  border: 1px solid var(--borde-2); box-shadow: var(--sombra); transition: border-color var(--t), box-shadow var(--t); }
.dual-panel:focus-within { border-color: color-mix(in srgb, var(--marca-2) 60%, transparent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .13), var(--sombra); }
.dual-panel.aparece { animation: dual-aparece .34s cubic-bezier(.2, .9, .25, 1); }
@keyframes dual-aparece { from { opacity: 0; transform: scale(.985) translateY(6px); } }
.dual-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px 5px 12px; border-bottom: 1px solid var(--borde);
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 40%, transparent)); }
.dual-titulo { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-2); white-space: nowrap; }
.dual-titulo svg { width: 15px; height: 15px; flex-shrink: 0; }
.dual-titulo b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dual-a .dual-titulo svg { color: var(--marca-2); } .dual-b .dual-titulo svg { color: #7c3aed; }
.dual-botones { display: flex; gap: 1px; flex-shrink: 0; }
.dual-bt { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--texto-3); cursor: pointer; transition: var(--t); }
.dual-bt svg { width: 16px; height: 16px; }
.dual-bt:hover { color: var(--marca-2); background: color-mix(in srgb, var(--marca-2) 12%, transparent); }
.dual-bt-max:hover { color: #7c3aed; background: rgba(124, 58, 237, .12); }

.dual-contenido { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.dual-contenido.es-texto { overflow: hidden; }
.dual-contenido.es-texto > textarea { display: block; width: 100%; height: 100%; min-height: 0 !important; max-height: none !important; resize: none; padding: 14px 16px;
  border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent; font-size: calc(.82rem * var(--dual-letra, 1)); }
.dual-contenido > .previa { min-height: 100% !important; max-height: none !important; overflow: visible; border: 0; border-radius: 0; }

/* -------------------------------- Asas --------------------------------- */
.dual-asa { position: relative; display: grid; place-items: center; cursor: col-resize; touch-action: none; outline: none; }
.dual-asa::before { content: ''; position: absolute; inset: 0 -5px; }                 /* zona de agarre más ancha que lo que se ve */
.dual-asa i { width: 5px; height: 64px; border-radius: 99px; background: color-mix(in srgb, var(--texto-3) 75%, transparent); transition: var(--t); }
.dual-asa:hover i, .dual-asa.activa i, .dual-asa:focus-visible i { width: 6px; height: 96px; background: linear-gradient(180deg, var(--marca-2), #7c3aed); box-shadow: 0 0 0 5px rgba(124, 58, 237, .13); }
.dual-asa-alto { position: relative; height: 16px; margin-top: -2px; display: grid; place-items: center; cursor: row-resize; touch-action: none; outline: none; }
.dual-asa-alto::before { content: ''; position: absolute; inset: -5px 0; }
.dual-asa-alto i { width: 64px; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--texto-3) 75%, transparent); transition: var(--t); }
.dual-asa-alto:hover i, .dual-asa-alto.activa i, .dual-asa-alto:focus-visible i { width: 110px; height: 6px; background: linear-gradient(90deg, var(--marca-2), #7c3aed); box-shadow: 0 0 0 5px rgba(124, 58, 237, .13); }
.dual.arrastrando { user-select: none; -webkit-user-select: none; }
.dual.arrastrando .dual-contenido { pointer-events: none; }                              /* el arrastre no se «engancha» en el texto */

/* ------------------- Pestañas del panel que está oculto ------------------- */
.dual-lengueta { display: none; align-items: center; gap: 8px; padding: 12px 7px; border-radius: 13px; cursor: pointer; writing-mode: vertical-rl;
  font: inherit; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
  background: var(--surface-2); border: 1px dashed var(--borde-2); transition: var(--t); }
.dual-lengueta svg { width: 16px; height: 16px; }
.dual-lengueta:hover { color: #fff; border-style: solid; border-color: transparent; background: linear-gradient(180deg, var(--marca-2), #7c3aed); box-shadow: 0 8px 20px rgba(37, 99, 235, .28); }
.dual[data-vista="b"] .dual-lengueta-a { display: flex; margin-right: 10px; }
.dual[data-vista="a"] .dual-lengueta-b { display: flex; margin-left: 10px; }

.dual-lengueta.en-ventana { color: #7c3aed; border-color: color-mix(in srgb, #7c3aed 45%, transparent); background: rgba(124, 58, 237, .07); }
/* Los dos paneles están en sus ventanas: el área queda con dos pestañas para acoplarlos. */
.dual[data-vista="ninguno"] .dual-cuerpo { grid-template-columns: minmax(0, 1fr) 0 0 0 minmax(0, 1fr); height: auto; min-height: 0; }
.dual[data-vista="ninguno"] .dual-lengueta { display: flex; writing-mode: horizontal-tb; justify-content: center; padding: 26px 12px; }
.dual[data-vista="ninguno"] .dual-lengueta-a { margin-right: 6px; } .dual[data-vista="ninguno"] .dual-lengueta-b { margin-left: 6px; }
.dual[data-vista="ninguno"] .dual-asa, .dual[data-vista="ninguno"] .dual-asa-alto { display: none; }

/* -------------------------- Ventanas flotantes -------------------------- */
/* Un panel desprendido vive en <body>: se mueve por su barra y se redimensiona por la esquina o los bordes. */
.dual-panel.flotante { position: fixed; z-index: 58; border-radius: 18px; border: 1px solid color-mix(in srgb, #7c3aed 40%, var(--borde-2));
  box-shadow: 0 34px 90px rgba(2, 6, 23, .36), 0 10px 28px rgba(2, 6, 23, .2); transition: box-shadow var(--t); }
.dual-panel.flotante.sale { animation: dual-flota .42s cubic-bezier(.18, 1.25, .3, 1); }
@keyframes dual-flota { from { opacity: 0; transform: scale(.94) translateY(14px); } }
.dual-panel.flotante .dual-cab { padding: 8px 8px 8px 14px; border-bottom: 0; color: #fff; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(135deg, #1e3a8a 0%, #5b21b6 58%, #be185d 100%); }
.dual-panel.flotante.grande .dual-cab { cursor: default; }
.dual-panel.flotante .dual-titulo { color: #fff; }
.dual-panel.flotante .dual-titulo svg { color: #fff; }
.dual-panel.flotante .dual-bt { color: rgba(255, 255, 255, .86); }
.dual-panel.flotante .dual-bt:hover { color: #fff; background: rgba(255, 255, 255, .22); }
.dual-panel.flotante .dual-bt-ocultar { display: none; }
.dual-panel.flotante.moviendo { box-shadow: 0 44px 110px rgba(2, 6, 23, .46), 0 0 0 3px rgba(124, 58, 237, .28); user-select: none; -webkit-user-select: none; transition: none; }
.dual-panel.flotante.moviendo .dual-cab { cursor: grabbing; }
.dual-panel.flotante.moviendo .dual-contenido { pointer-events: none; }
.dual-esquina, .dual-borde-d, .dual-borde-b { display: none; position: absolute; z-index: 2; touch-action: none; }
.dual-panel.flotante:not(.grande) .dual-esquina { display: block; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0 52%, color-mix(in srgb, #7c3aed 70%, transparent) 52% 60%, transparent 60% 70%, color-mix(in srgb, #7c3aed 70%, transparent) 70% 78%, transparent 78%); border-bottom-right-radius: 16px; }
.dual-panel.flotante:not(.grande) .dual-borde-d { display: block; top: 48px; right: 0; bottom: 22px; width: 7px; cursor: ew-resize; }
.dual-panel.flotante:not(.grande) .dual-borde-b { display: block; left: 14px; right: 22px; bottom: 0; height: 7px; cursor: ns-resize; }
.dual-panel.flotante .dual-borde-d:hover, .dual-panel.flotante .dual-borde-b:hover { background: rgba(124, 58, 237, .22); }

/* ---------------------- Ampliada: toda la ventana ---------------------- */
html.dual-abierta { overflow: hidden; }
.dual.ampliada { position: fixed; inset: 0; z-index: 55; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg); background-image: radial-gradient(60% 40% at 12% 0%, var(--aurora-1), transparent 70%), radial-gradient(50% 36% at 92% 4%, var(--aurora-3), transparent 70%); }
.dual.ampliada.entra { animation: dual-amplia .32s cubic-bezier(.2, .9, .25, 1); }
@keyframes dual-amplia { from { opacity: 0; transform: scale(.975); } }
.dual.ampliada .dual-barra { padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.dual.ampliada .dual-cuerpo { flex: 1; height: auto; min-height: 0; }
.dual.ampliada .dual-asa-alto { display: none; }
/* Un panel solo y en grande: el contenido se centra a un ancho cómodo de lectura. */
.dual.ampliada:not([data-vista="ambos"]) .dual-contenido > .previa { padding: 26px max(22px, calc((100% - 940px) / 2)) 40px; }
.dual.ampliada:not([data-vista="ambos"]) .dual-contenido.es-texto > textarea { padding: 22px max(18px, calc((100% - 1040px) / 2)); }
.dual:fullscreen { background: var(--bg); }
.dual-marcador { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 130px; padding: 18px; border-radius: 16px;
  color: var(--texto-2); background: var(--surface-2); border: 2px dashed var(--borde-2); }

/* ------------- Área angosta: los paneles van uno sobre otro ------------- */
@container dual (max-width: 500px) {
  .dual-cuerpo { display: flex; flex-direction: column; gap: 10px; height: auto; min-height: 0; }
  .dual-asa { display: none; }
  .dual-panel { height: var(--dual-alto, 58vh); min-height: 240px; flex-shrink: 0; }
  .dual-lengueta { writing-mode: horizontal-tb; justify-content: center; padding: 9px 12px; margin: 0 !important; }
  .dual.ampliada .dual-panel { flex: 1 1 0; height: auto; min-height: 0; }
  .dual-vista span { display: none; }
  .dual-vista { padding: 8px 12px; }
  .dual-ampliar span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dual-panel.aparece, .dual.ampliada.entra, .dual-panel.flotante.sale { animation: none; } }
@media print { .dual-panel.flotante { position: static; box-shadow: none; } .dual-barra, .dual-cab, .dual-asa, .dual-asa-alto, .dual-lengueta, .dual-marcador { display: none !important; } .dual-cuerpo { display: block; height: auto; } }