/* Sistema de diseño de la interfaz, inspirado en Adobe Spectrum: una escala de tamaños, un radio, un anillo de foco y
 * los mismos estados para todos los controles. Se carga al final para unificar lo anterior; el editor de animación
 * (`dialog.editor-animacion`) tiene su propia densidad y solo comparte color, radio y foco.
 *
 * Tamaños de control:  S 24 px (acciones dentro de filas) · M 32 px (predeterminado) · L 40 px (campos de formularios)
 * Radios:              4 px controles · 8 px paneles, diálogos y tarjetas
 * Texto:               12 px controles y listas · 11 px etiquetas y notas · 20 px títulos de sección
 */
:root{
  --sp-alto-s:24px;--sp-alto-m:32px;--sp-alto-l:40px;
  --sp-r:4px;--sp-r-panel:8px;
  --sp-borde:#2c2c31;--sp-borde-fuerte:#3f3f46;--sp-campo:#0e0e10;--sp-superficie:#131316;--sp-hover:#1d1d21;
  --sp-texto:#e8e8ea;--sp-texto-2:#a3a3ab;--sp-texto-3:#6e6e76;--sp-acento:#4aa3ff;
  --ctl-borde:var(--sp-borde);--ctl-radio:var(--sp-r);--ctl-alto:var(--sp-alto-m);
}

/* ---- botones ---- */
button:not(#_):not(dialog.editor-animacion *):not(.nodo):not(.miniatura):not(.tarjeta-animacion):not(.sc-muestra):not(.item-imagen):not(.proyecto):not(.capitulo){
  border-radius:var(--sp-r)!important;font-family:inherit;transition:background-color .12s,border-color .12s,color .12s}
:is(.boton-principal,.boton-secundario,.editar-capa,.reanudar,.agrupar-capas,.administrar-tipos,.completar-etapa,.cancelar-trabajo,.iniciar,.ir-animaciones,.descargar-pdf):not(#_):not(dialog.editor-animacion *){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--sp-alto-m)!important;height:auto;padding:7px 14px!important;
  font-size:12px!important;font-weight:600;line-height:1.25;letter-spacing:0!important;text-transform:none!important;white-space:nowrap;text-decoration:none}
:is(.boton-secundario,.editar-capa,.reanudar,.agrupar-capas,.administrar-tipos,.cancelar-trabajo):not(#_){
  background:var(--sp-superficie);border:1px solid var(--sp-borde)!important;color:#d6d6dc}
:is(.boton-secundario,.editar-capa,.reanudar,.agrupar-capas,.administrar-tipos):not(#_):hover{background:var(--sp-hover);border-color:var(--sp-borde-fuerte)!important;color:#fff}
:is(.boton-principal,.completar-etapa,.iniciar):not(#_){background:#ececea;border:1px solid #ececea!important;color:#0b0b0c}
:is(.boton-principal,.completar-etapa,.iniciar):not(#_):hover{background:#fff;border-color:#fff!important}
.boton-principal:disabled,.boton-secundario:disabled,button:disabled{opacity:.4;cursor:not-allowed}
.cancelar-trabajo:not(#_){color:#ff8a8f;border-color:#4a2a2d!important}
.completar-etapa:not(#_){right:24px;bottom:20px}
.cerrar-inspector:not(#_){width:var(--sp-alto-m);height:var(--sp-alto-m);min-height:0;padding:0!important;display:inline-grid;place-items:center;font-size:18px;line-height:1;border-radius:var(--sp-r)!important}
.navegar:not(#_),.acciones-revision:not(#_){width:var(--sp-alto-m);min-width:var(--sp-alto-m);height:var(--sp-alto-m);min-height:0!important;padding:0!important}

/* ---- campos ---- */
:is(input,select):not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden]):not(#_):not(dialog.editor-animacion *):not(.sc-pop *){
  height:var(--sp-alto-m);border-radius:var(--sp-r);border:1px solid var(--sp-borde);background:var(--sp-campo);color:var(--sp-texto);font-size:12px;padding:0 10px}
dialog:not(.editor-animacion) :is(input,select):not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden]):not(#_){height:var(--sp-alto-l)}
textarea:not(#_):not(dialog.editor-animacion *){border-radius:var(--sp-r);border:1px solid var(--sp-borde);background:var(--sp-campo);color:var(--sp-texto);font-size:12px;padding:9px 10px;line-height:1.5}
:is(input,select,textarea):not(#_):not(dialog.editor-animacion *):not(.sc-pop *):hover{border-color:var(--sp-borde-fuerte)}
:is(input,select,textarea):not(#_):not(dialog.editor-animacion *):not(.sc-pop *):focus{border-color:var(--sp-acento)}
select:not(#_){cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--sp-texto-3)}
.editor-herramientas select:not(#_){height:var(--sp-alto-m);background:transparent;border-color:transparent}
.editor-herramientas select:not(#_):hover{border-color:var(--sp-borde)}

/* ---- foco visible para teclado ---- */
:is(button,input,select,textarea,a,[role=button],[tabindex]):not(#editor-guion):focus-visible{outline:2px solid var(--sp-acento)!important;outline-offset:1px}

/* ---- diálogos y paneles ---- */
dialog:not(.editor-animacion):not(.dialogo-editor-capa):not(.dialogo-compositor):not(#_){border:1px solid var(--sp-borde);border-radius:var(--sp-r-panel);background:#0f0f11;box-shadow:0 24px 60px #000c}
dialog:not(.editor-animacion)::backdrop{background:#000a}
dialog h2{font-size:18px;line-height:1.3}
dialog label{font-size:11px;color:var(--sp-texto-2)}
dialog form>div:last-child{display:flex;justify-content:flex-end;gap:8px}

/* ---- tipografía y proporciones ---- */
.intro-etapa h2{font-size:20px;line-height:1.3}
.intro-etapa p:not(.miga){font-size:12px;line-height:1.6;color:var(--sp-texto-2)}
.cola-prompts,.lista-prompts{font-size:12px}
.item-imagen,.prompt-item{border-radius:0}
.nodo{border-radius:var(--sp-r-panel)}
.menu-acciones{border-radius:var(--sp-r-panel)}
.menu-acciones button:not(#_){border-radius:var(--sp-r)!important;font-size:12px}
.aviso,.toast{border-radius:var(--sp-r-panel)}

/* ---- ajustes de uniformidad ---- */
button:not(#_):not(dialog.editor-animacion *):not(.nodo):not(.sc-muestra):not(.proyecto):not(.capitulo):not(.acciones-revision):not(.cerrar-inspector){font-size:12px}
.miniatura:not(#_),.tarjeta-animacion:not(#_){border-radius:var(--sp-r)!important}
.proyecto:not(#_),.capitulo:not(#_){border-radius:var(--sp-r)}

/* ---- editor de animación y selector: mismo radio y alturas de la escala ---- */
dialog.editor-animacion :is(.ea-boton,.ea-mini,.ea-ojo,.ea-candado,.ea-pestanas button,.ea-menu button,.ea-efecto,.ea-tri-asig){border-radius:var(--sp-r)}
dialog.editor-animacion :is(input,select,textarea):not([type=range],[type=checkbox]){border-radius:var(--sp-r)}
dialog.editor-animacion .ea-pestanas button{min-height:30px;height:30px}
.selector-animacion .sa-b{min-height:var(--sp-alto-m);height:var(--sp-alto-m);padding:0 14px}
.selector-animacion .sa-opcion{border-radius:var(--sp-r)}

/* ---- nombres de las imágenes ---- */
.intro-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.estado-nombres{display:block;margin-top:10px;font-size:11px;color:var(--sp-texto-3)}
.estado-nombres.alerta{color:#e6c45a}
dialog.dialogo-nombres{width:min(720px,calc(100vw - 32px));max-height:min(80vh,720px);padding:0;overflow:hidden;color:var(--sp-texto)}
dialog.dialogo-nombres[open]{display:flex;flex-direction:column}
.dn-cab{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px 12px;border-bottom:1px solid var(--sp-borde)}
.dn-cab h2{margin:2px 0 0}
.dn-cuerpo{flex:1;min-height:0;overflow:auto;padding:14px 20px}
.dn-cuerpo h3{margin:16px 0 8px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sp-texto-2)}
.dn-resumen,.dn-nota-chica{margin:0 0 4px;font-size:12px;line-height:1.6;color:var(--sp-texto-2)}
.dn-resumen b{color:var(--sp-texto);font-weight:600}
.dn-aviso{margin:8px 0;padding:8px 10px;border:1px solid #4a3d16;border-radius:var(--sp-r);background:#1a1608;color:#e6c45a;font-size:12px}
.dn-ok{margin:14px 0;color:#53d68a;font-size:12px}
.dn-lista{list-style:none;margin:0;padding:0;border:1px solid var(--sp-borde);border-radius:var(--sp-r-panel);overflow:hidden}
.dn-lista li{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px;font-size:12px;border-bottom:1px solid #1a1a1d}
.dn-lista li:last-child{border-bottom:0}
.dn-lista.suave li{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);color:var(--sp-texto-3)}
.dn-a,.dn-b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn-a{color:var(--sp-texto-2)}.dn-b{color:var(--sp-texto);font-weight:600}
.dn-lista i{font-style:normal;color:var(--sp-texto-3);text-align:center}
.dn-lista em{font-style:normal;font-size:11px;color:var(--sp-texto-3)}
.dn-lista em.dn-largo{text-align:right}
.dn-pie{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;border-top:1px solid var(--sp-borde)}
.dn-pie>div{display:flex;gap:8px}
#dn-nota{font-size:11px;color:#e6c45a;max-width:340px;line-height:1.4}
.ep-logo{display:flex;gap:16px;align-items:center;margin-top:14px}
.ep-vista{width:72px;height:72px;flex:none;display:grid;place-items:center;border:1px solid var(--sp-borde);border-radius:var(--sp-r-panel);background:var(--sp-campo);overflow:hidden;font-size:26px;font-weight:700;color:var(--sp-texto-2)}
.ep-vista img{width:100%;height:100%;object-fit:contain}
.ep-acciones{display:flex;flex-direction:column;gap:8px;min-width:0}
.ep-acciones>span{font-size:11px;color:var(--sp-texto-2)}
.ep-acciones>div{display:flex;gap:8px}
.ep-acciones small{font-size:11px;color:var(--sp-texto-3)}
#dialogo-editar-proyecto form{width:min(420px,calc(100vw - 48px))}

/* ---- revisión: la aprobación vive en la lista; los botones antiguos solo existen para el código ---- */
#aprobar,#rechazar,#agrupar-capas{display:none!important}
.item-acciones{flex:none;gap:2px}
.item-acciones button:not(#_){width:var(--sp-alto-s);height:var(--sp-alto-s);min-height:0;padding:0!important;border:0!important;background:transparent;color:var(--sp-texto-3);border-radius:var(--sp-r)!important}
.item-acciones button:not(#_):hover{background:var(--sp-hover);color:var(--sp-texto)}
.item-acciones .chulo:not(#_):hover{color:#53d68a}.item-acciones .equis:not(#_):hover{color:#ff6b72}
.item-acciones .chulo.activo:not(#_){background:#10261a;color:#53d68a}
.item-acciones .equis.activo:not(#_){background:#2a1214;color:#ff6b72}
.lista-imagenes .item-imagen{padding:6px 8px;grid-template-columns:46px minmax(0,1fr) auto;gap:7px}
.lista-imagenes .item-imagen:not(.activa) .item-acciones button:not(.activo){opacity:0}
.lista-imagenes .item-imagen:hover .item-acciones button,.lista-imagenes .item-imagen:focus-within .item-acciones button{opacity:1}
.lista-imagenes .item-imagen .item-acciones .menu-fila{opacity:1}
.lista-imagenes .item-imagen.aprobada .item-num:before,.lista-imagenes .item-imagen.rechazada .item-num:before{content:"";display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;vertical-align:middle}
.lista-imagenes .item-imagen.aprobada .item-num:before{background:#53d68a}.lista-imagenes .item-imagen.rechazada .item-num:before{background:#ff6b72}
.cola-pie{padding:10px 12px 12px}
.lista-imagenes{overflow-x:hidden}
.lista-imagenes .item-imagen{max-width:100%;min-width:0}