:root {
  --fondo: #111116;
  --panel: #1a1a21;
  --panel-2: #22222b;
  --panel-3: #2b2b36;
  --borde: #30303c;
  --texto: #ececf3;
  --tenue: #9a9aad;
  --acento: #ff4f9a;
  --acento-2: #ff7ab5;
  --azul: #3d9bff;
  --verde: #33c481;
  --peligro: #ff5c6c;
  --radio: 8px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button {
  background: var(--panel-3); border: 1px solid var(--borde); border-radius: 6px;
  padding: 6px 10px; cursor: pointer; white-space: nowrap;
}
button:hover { background: #363644; }
button:disabled { opacity: .45; cursor: default; }
button.primario, a.boton.primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
button.primario:hover { background: var(--acento-2); }
button.peligro { color: var(--peligro); }
button.icono { padding: 6px 9px; }
button.chico { padding: 3px 7px; font-size: 11px; }
button.ancho { width: 100%; margin-top: 8px; }
a.boton { display: inline-block; text-decoration: none; padding: 7px 14px; border-radius: 6px; text-align: center; }
input[type=text], input:not([type]), input[type=search], input[type=number], select, textarea {
  background: var(--panel-2); border: 1px solid var(--borde); border-radius: 6px; padding: 6px 8px; min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); }
textarea { width: 100%; resize: vertical; }
input[type=color] { width: 34px; height: 28px; padding: 2px; border: 1px solid var(--borde); border-radius: 6px; background: var(--panel-2); cursor: pointer; flex: none; }
input[type=range] { accent-color: var(--acento); flex: 1; min-width: 60px; }
input[type=checkbox], input[type=radio] { accent-color: var(--acento); }
code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--acento-2); }
[hidden] { display: none !important; }

/* ---------- barra superior ---------- */
.barra {
  height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: var(--panel); border-bottom: 1px solid var(--borde);
}
.marca { background: none; border: none; font-weight: 700; font-size: 15px; color: var(--acento-2); padding: 6px 8px; }
.marca:hover { background: var(--panel-3); }
.doc-info { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.doc-info input { width: 200px; background: transparent; border-color: transparent; font-weight: 600; }
.doc-info input:hover { border-color: var(--borde); }
.doc-info input:focus { background: var(--panel-2); }
.insignia { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; border-radius: 999px; font-weight: 700; }
.insignia.plantilla { background: #3b2f10; color: #ffce54; }
.insignia.proyecto { background: #10303b; color: #6fd3ff; }
.estado-guardado { color: var(--tenue); font-size: 12px; white-space: nowrap; }
.estado-guardado.guardado { color: var(--verde); }
.estado-guardado.error { color: var(--peligro); }
.estado-guardado.sucio, .estado-guardado.nuevo { color: #ffce54; }
.acciones { display: flex; gap: 6px; }

/* ---------- distribución ---------- */
.espacio { display: grid; grid-template-columns: 290px 1fr 330px; height: calc(100% - 52px); }
.panel { background: var(--panel); overflow-y: auto; min-height: 0; }
.panel.izq { border-right: 1px solid var(--borde); display: flex; flex-direction: column; }
.panel.der { border-left: 1px solid var(--borde); padding: 12px; }

.pestanas { display: flex; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.pestanas button { flex: 1; background: none; border: none; border-radius: 0; padding: 11px 6px; color: var(--tenue); font-weight: 600; border-bottom: 2px solid transparent; }
.pestanas button.activa { color: var(--texto); border-bottom-color: var(--acento); }
.pestana { display: none; padding: 12px; }
.pestana.activa { display: block; }

.escenario { display: flex; flex-direction: column; min-width: 0; min-height: 0; background:
  radial-gradient(circle at 50% 40%, #1d1d26 0%, var(--fondo) 70%); }
.lienzo-envoltura { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px; }
#lienzo { border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); touch-action: none; }
.tiempo { font-variant-numeric: tabular-nums; color: var(--tenue); font-size: 11px; flex: 1; }

/* ---------- línea de tiempo ---------- */
.linea { position: relative; background: var(--panel); border-top: 1px solid var(--borde); max-height: 25vh; display: flex; flex-direction: column; flex: none; }
.linea.plegada .lt-cuerpo { display: none; }
.linea.plegada .plegar { transform: rotate(-90deg); }
.lt-fila { display: grid; grid-template-columns: 150px 1fr; align-items: center; height: 18px; }
.lt-cab { height: 34px; border-bottom: 1px solid var(--borde); overflow: hidden; scrollbar-gutter: stable; }
.lt-ctl { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.lt-ctl .icono { padding: 3px 8px; font-size: 11px; }
.plegar { background: none; border: none; color: var(--tenue); padding: 2px 6px; transition: transform .15s; }
.plegar:hover { background: var(--panel-3); }
.lt-cuerpo { overflow-y: auto; scrollbar-gutter: stable; padding-bottom: 4px; }
.lt-nombre { padding: 0 8px; font-size: 11px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-cab .lt-nombre { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 10px; }
.lt-regla { position: relative; height: 100%; cursor: ew-resize; margin-right: 10px; }
.lt-regla .marca { position: absolute; top: 9px; font-size: 10px; color: var(--tenue); transform: translateX(-50%); pointer-events: none; }
.lt-regla .marca::before { content: ""; position: absolute; left: 50%; top: 15px; height: 8px; border-left: 1px solid var(--borde); }
.lt-pista { position: relative; height: 100%; margin-right: 10px; cursor: pointer; }
.lt-fila:hover:not(.lt-cab) { background: rgba(255,255,255,.025); }
.lt-fila.sel { background: rgba(61,155,255,.1); }
.lt-fila.sel .lt-nombre { color: var(--texto); }
.lt-fila.oculta { opacity: .4; }
.lt-barra { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: #4a4a5c; overflow: hidden; display: flex; justify-content: space-between; }
.lt-fila.sel .lt-barra { background: #3d6fb0; }
.lt-barra.hasta-final { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lt-ent { background: rgba(255,255,255,.22); height: 100%; }
.lt-sal { background: rgba(0,0,0,.3); height: 100%; }
.lt-rombo { position: absolute; top: 50%; width: 9px; height: 9px; background: #ffb020; transform: translate(-50%, -50%) rotate(45deg); cursor: ew-resize; border: 1px solid #1a1a21; }
.lt-cabezal { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--acento); pointer-events: none; }

/* ---------- controles de paneles ---------- */
.grupo { border-bottom: 1px solid var(--borde); padding: 4px 0 8px; }
.grupo > summary { cursor: pointer; font-weight: 700; padding: 8px 0 6px; list-style: none; display: flex; align-items: center; gap: 6px; }
.grupo > summary::before { content: "▸"; color: var(--tenue); font-size: 10px; transition: transform .15s; }
.grupo[open] > summary::before { transform: rotate(90deg); }
.grupo-cuerpo { display: flex; flex-direction: column; gap: 7px; }
.fila { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; }
.etq { color: var(--tenue); font-size: 12px; }
.ctl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ctl > .num { width: 64px; }
.rango { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.rango .num { width: 56px; padding: 4px 5px; }
.suf { color: var(--tenue); font-size: 11px; }
.casilla { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; }
.fila-casillas { display: flex; gap: 14px; padding-left: 100px; }
.botones { display: flex; flex-wrap: wrap; gap: 6px; }
.ayuda { color: var(--tenue); font-size: 12px; margin: 4px 0 8px; }
hr { border: none; border-top: 1px dashed var(--borde); margin: 6px 0; width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--panel-2); }
.chip.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.colores { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.color-item { position: relative; display: inline-flex; }
.x { padding: 0 6px; font-size: 13px; line-height: 20px; background: transparent; border: none; color: var(--tenue); }
.x:hover { color: var(--peligro); background: transparent; }
.color-item .x { position: absolute; top: -8px; right: -8px; padding: 0; width: 16px; height: 16px; line-height: 14px; border-radius: 50%; background: var(--panel-3); font-size: 11px; display: none; }
.color-item:hover .x { display: block; }
.mas { padding: 3px 9px; }
.propias { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.propia { position: relative; width: 38px; height: 38px; background: var(--panel-2); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.propia img { max-width: 32px; max-height: 32px; }
.propia .x { position: absolute; top: -8px; right: -8px; }
.fondo-mini { width: 100%; max-height: 140px; object-fit: cover; border-radius: 6px; }

/* datos */
.campo { margin-bottom: 10px; }
.campo input { width: 100%; }
.campo-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-weight: 600; font-size: 12px; }
.campo-cab code { margin-left: auto; opacity: .7; }
.campo-cab .x { visibility: hidden; }
.campo:hover .campo-cab .x { visibility: visible; }
.pestana h3 { margin: 18px 0 8px; font-size: 13px; }
.foto-item { display: flex; gap: 10px; align-items: center; background: var(--panel-2); padding: 8px; border-radius: var(--radio); margin-bottom: 8px; }
.foto-mini { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.foto-mini.vacia { display: flex; align-items: center; justify-content: center; background: var(--panel-3); font-size: 22px; }
.foto-acc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* capas */
.agregar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.agregar button { padding: 7px 4px; font-size: 12px; }
.lista-capas { list-style: none; margin: 0; padding: 0; }
.capa { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.capa:hover { background: var(--panel-2); }
.capa.sel { background: rgba(61,155,255,.16); border-color: rgba(61,155,255,.5); }
.capa.oculta .capa-nom, .capa.oculta .capa-mini { opacity: .4; }
.capa.antes { box-shadow: inset 0 2px 0 var(--azul); }
.capa.despues { box-shadow: inset 0 -2px 0 var(--azul); }
.capa.arrastrando { opacity: .4; }
.capa-mini { width: 26px; height: 26px; object-fit: contain; background: var(--panel-3); border-radius: 4px; flex: none; }
.capa-ico { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--panel-3); border-radius: 4px; font-weight: 700; flex: none; font-size: 13px; }
.capa-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capa-btn { background: none; border: none; padding: 2px 4px; opacity: .5; font-size: 12px; }
.capa-btn:hover { opacity: 1; background: none; }
.capa-btn.activo { opacity: 1; }
.lista-capas .vacio { color: var(--tenue); padding: 10px 4px; }

/* propiedades */
.prop-cab { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.prop-cab .tipo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 700; }
.prop-cab input { font-weight: 600; font-size: 14px; }
.nota-cambio { background: #3b2a0c; color: #ffce54; border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.img-prev { background: repeating-conic-gradient(#2c2c36 0% 25%, #22222b 0% 50%) 50% / 16px 16px; border-radius: 6px; height: 120px; display: flex; align-items: center; justify-content: center; color: var(--tenue); }
.img-prev img { max-width: 100%; max-height: 110px; }
.ayuda-general h3 { font-size: 13px; margin: 6px 0 8px; }
.ayuda-general ul { padding-left: 18px; color: var(--tenue); margin: 0 0 16px; }
.ayuda-general li { margin-bottom: 6px; }
.atajos { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; color: var(--tenue); }
.atajos dt { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--texto); background: var(--panel-3); padding: 1px 6px; border-radius: 4px; justify-self: start; }
.atajos dd { margin: 0; }

/* ---------- aviso ---------- */
.aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #2d2d3a; border: 1px solid var(--borde); padding: 10px 16px; border-radius: 10px; max-width: 560px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); transition: all .2s; z-index: 1000;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso.error { border-color: var(--peligro); color: #ffc2c8; }

/* ---------- diálogos ---------- */
dialog { background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 14px; padding: 0; box-shadow: 0 20px 70px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(5,5,10,.7); backdrop-filter: blur(3px); }
.pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.cerrar { background: none; border: none; font-size: 22px; line-height: 1; color: var(--tenue); }

.dlg-inicio { width: min(1100px, 94vw); height: min(820px, 90vh); }
.dlg-inicio[open] { display: flex; flex-direction: column; }
.inicio-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--borde); }
.inicio-cab h1 { margin: 0; font-size: 19px; color: var(--acento-2); }
.inicio-acc { display: flex; align-items: center; gap: 10px; }
.inicio-acc a.boton { background: var(--panel-3); border: 1px solid var(--borde); color: var(--texto); font-weight: 600; }
.inicio-acc a.boton:hover { background: #363644; }
.inicio-cuerpo { overflow-y: auto; padding: 6px 22px 22px; }
.sec-cab { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.sec-cab h2 { font-size: 15px; margin: 0; }
.sec-cab input { width: 260px; margin-left: auto; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.tarjeta { background: var(--panel-2); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.tarjeta:hover { border-color: #4a4a5c; }
.tarjeta .mini { aspect-ratio: 9 / 16; background: #0c0c10 center / cover no-repeat; cursor: pointer; }
.tarjeta-info { padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 2px; }
.tarjeta-info small { color: var(--tenue); font-size: 11px; }
.tarjeta-acc { display: flex; gap: 5px; padding: 6px 8px 10px; }
.tarjeta-acc .usar { flex: 1; }
.tarjeta-acc button { padding: 5px 7px; font-size: 12px; }
.tarjeta.proyecto { cursor: pointer; }
.tarjeta.proyecto .tarjeta-info { padding-bottom: 10px; }
.tarjeta.proyecto .borrar { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.55); border: none; opacity: 0; transition: opacity .15s; }
.tarjeta.proyecto:hover .borrar { opacity: 1; }
.tarjeta.blanco { cursor: pointer; border-style: dashed; }
.tarjeta.blanco .mini { display: flex; align-items: center; justify-content: center; font-size: 42px; color: var(--tenue); background: transparent; }
.error { color: #ffc2c8; }

.dlg-exportar { width: min(560px, 94vw); padding: 20px 22px; }
.dlg-exportar h2 { margin: 0 0 14px; font-size: 17px; }
.formatos { display: grid; gap: 8px; }
.formato { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; }
.formato input { grid-row: span 2; }
.formato small { color: var(--tenue); }
.formato:has(input:checked) { border-color: var(--acento); }
.opciones-exp { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.opciones-exp label { display: flex; flex-direction: column; gap: 4px; color: var(--tenue); font-size: 12px; }
.progreso { height: 8px; background: var(--panel-3); border-radius: 999px; overflow: hidden; margin-top: 14px; }
.progreso > div { height: 100%; width: 0; background: var(--acento); transition: width .15s; }
.resultado { display: flex; gap: 14px; margin-top: 14px; align-items: flex-start; }
.res-prev video, .res-prev img { width: 130px; border-radius: 8px; display: block; }
.res-info { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--tenue); }
.res-info strong { color: var(--texto); font-size: 13px; word-break: break-all; }
.res-info a { align-self: flex-start; margin-top: 4px; }

.dlg-imagen { width: 96vw; height: 94vh; }
.dlg-imagen[open] { display: flex; flex-direction: column; }
.img-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.img-barra label { display: flex; align-items: center; gap: 6px; color: var(--tenue); }
.herramientas { display: flex; gap: 4px; }
.herramientas .activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.separador { flex: 1; }
.dlg-imagen:not([data-herramienta="varita"]) .solo-varita { display: none; }
.dlg-imagen:not([data-herramienta="borrador"]):not([data-herramienta="restaurar"]) .solo-pincel { display: none; }
.img-area { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #0c0c10; }
#img-lienzo { cursor: crosshair; touch-action: none; }
.dlg-imagen[data-herramienta="borrador"] #img-lienzo, .dlg-imagen[data-herramienta="restaurar"] #img-lienzo { cursor: none; }
.img-pie { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--borde); }
.img-pie .ayuda { margin: 0 auto 0 0; }

.dlg-pregunta { width: min(420px, 92vw); padding: 18px 20px; }
.dlg-pregunta form { display: flex; flex-direction: column; gap: 10px; }
.dlg-pregunta label { font-weight: 600; }

@media (max-width: 1100px) {
  .espacio { grid-template-columns: 250px 1fr 290px; }
  .doc-info input { width: 140px; }
  #btn-plantilla { display: none; }
}