/* ─────────────────────────────────────────────────────────────────────────
   Sistema visual del editor.

   Los colores están tomados con cuentagotas de una captura de Premiere Pro:
   paneles #222, listas #1C1C1C, cabeceras de pista #252525, separadores casi
   negros #171717, selección azul #0A4B7C, y los clips con el código de color
   de un NLE — video azul, gráficos rosa, audio verde.

   Regla de la casa: CERO transiciones y animaciones. Una herramienta de
   edición tiene que responder en el frame, no "deslizarse".
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --app:#1a1a1a;          /* fondo de la aplicación            */
  --panel:#222222;        /* cuerpo de panel                   */
  --list:#1c1c1c;         /* listas, campos, áreas hundidas    */
  --head:#2b2b2b;         /* barras de pestañas y cabeceras    */
  --track:#252525;        /* cabecera de pista                 */
  --ctl:#333333;          /* botones                           */
  --ctl-hi:#3d3d3d;       /* botón con el mouse encima         */
  --edge:#171717;         /* separador entre paneles           */
  --line:#383838;         /* línea interna suave               */
  --stage:#191919;        /* alrededor del monitor             */

  --tx:#d6d6d6;           /* texto                             */
  --dim:#9a9a9a;          /* texto secundario                  */
  --mute:#6e6e6e;         /* texto apagado                     */

  --sel:#0a4b7c;          /* relleno de selección              */
  --sel-line:#2d8ceb;     /* borde de selección, playhead      */
  --num:#4d9fe8;          /* valores numéricos y timecode      */
  --brand:#ff7a2f;        /* acción principal (marca Vecipp)   */
  --ok:#2ab246;
  --warn:#e0a030;
  --err:#e05545;

  --vid:#6f99cc;  --vid-bar:#5b83b8;   /* clip de video   */
  --txt:#eb92e3;  --txt-bar:#c977c2;   /* clip de texto   */
  --aud:#67cfb7;  --aud-bar:#087a5c;   /* clip de audio   */

  --ui:11.5px;
  --fsans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --fmono:"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}

*{box-sizing:border-box}
/* Los iconos son <svg><use href="#i-x"/></svg>: sin tamaño explícito el
   navegador les da 300x150 y tapan la pantalla. */
svg{width:13px;height:13px;flex-shrink:0;display:inline-block;vertical-align:-2px}
*,*::before,*::after{transition:none!important;animation:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--app);color:var(--tx);
  font:var(--ui)/1.45 var(--fsans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--num);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--sel);color:#fff}
.mono{font-family:var(--fmono)}
.spacer{flex:1}

/* barra de scroll con aspecto de aplicación, no de página web */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--list)}
::-webkit-scrollbar-thumb{background:#3a3a3a;border:2px solid var(--list);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#4a4a4a}
::-webkit-scrollbar-corner{background:var(--list)}

/* ── barra superior de la aplicación ───────────────────────────────────── */
.appbar{
  display:flex;align-items:center;gap:10px;height:34px;flex-shrink:0;
  padding:0 10px;background:var(--head);border-bottom:1px solid var(--edge);
}
.appbar .logo{
  font-weight:700;font-size:12px;letter-spacing:-.01em;color:var(--tx);
  display:flex;align-items:center;gap:6px;padding-right:4px;
}
.appbar .logo b{color:var(--brand);font-weight:700}
.appbar .sep{width:1px;height:16px;background:var(--line)}
.appbar .doc{font-size:11.5px;color:var(--tx)}
.appbar .meta{font-size:11px;color:var(--mute);font-family:var(--fmono)}

/* ── paneles ───────────────────────────────────────────────────────────── */
.panel{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel)}
.panel + .panel{border-left:1px solid var(--edge)}
.tabbar{
  display:flex;align-items:center;gap:8px;height:22px;flex-shrink:0;
  padding:0 8px;background:var(--head);border-bottom:1px solid var(--edge);
  font-size:11px;color:var(--dim);user-select:none;
}
.tabbar .t{
  color:var(--tx);padding:0 2px;border-bottom:1px solid var(--sel-line);
  height:100%;display:flex;align-items:center;
}
.tabbar .t.off{color:var(--mute);border-bottom-color:transparent;cursor:pointer}
.tabbar .t.off:hover{color:var(--dim)}
.panel-body{flex:1;overflow:auto;min-height:0}

/* ── botones ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:22px;padding:0 9px;background:var(--ctl);color:var(--tx);
  border:1px solid #3f3f3f;border-radius:2px;font-size:11px;cursor:pointer;
  white-space:nowrap;
}
.btn:hover{background:var(--ctl-hi)}
.btn:active{background:#2a2a2a}
.btn:disabled{opacity:.4;cursor:default;background:var(--ctl)}
.btn.pri{background:var(--brand);border-color:#e0691f;color:#151515;font-weight:600}
.btn.pri:hover{background:#ff8b48}
.btn.on{background:var(--sel);border-color:var(--sel-line);color:#fff}
.btn.danger{color:#e88}
.btn.danger:hover{background:#3a2020;border-color:#5a2a2a}
.btn.wide{width:100%}
.btn.lg{height:26px;padding:0 14px;font-size:12px}

.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;background:transparent;color:var(--dim);
  border:1px solid transparent;border-radius:2px;cursor:pointer;
}
.iconbtn:hover{background:var(--ctl);color:var(--tx);border-color:#3f3f3f}
.iconbtn.rm:hover{color:#e88;border-color:#5a2a2a;background:#3a2020}
.iconbtn svg{width:13px;height:13px}

/* fila de herramientas, como la barra de un NLE */
.toolrow{
  display:flex;align-items:center;gap:3px;height:26px;flex-shrink:0;
  padding:0 6px;background:var(--panel);border-bottom:1px solid var(--edge);
}
.toolrow .div{width:1px;height:15px;background:var(--line);margin:0 4px}
.tool{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:20px;min-width:20px;padding:0 6px;background:transparent;color:var(--dim);
  border:1px solid transparent;border-radius:2px;cursor:pointer;font-size:11px;
}
.tool:hover{background:var(--ctl);color:var(--tx)}
.tool.on{background:var(--sel);color:#fff}
.tool svg{width:13px;height:13px}

/* ── campos ────────────────────────────────────────────────────────────── */
input[type=text],input[type=number],input[type=search],textarea,select{
  width:100%;height:22px;padding:0 6px;background:var(--list);color:var(--tx);
  border:1px solid #3a3a3a;border-radius:2px;font-size:11.5px;outline:none;
}
textarea{height:auto;min-height:52px;padding:5px 6px;resize:vertical;line-height:1.45}
select{height:22px;padding:0 4px;cursor:pointer}
input:focus,textarea:focus,select:focus{border-color:var(--sel-line);background:#151515}
input[type=number]{color:var(--num);font-family:var(--fmono)}
input[type=color]{
  width:100%;height:22px;padding:1px;background:var(--list);
  border:1px solid #3a3a3a;border-radius:2px;cursor:pointer;
}
input[type=range]{width:100%;height:16px;accent-color:var(--sel-line);cursor:pointer}
input[type=checkbox]{accent-color:var(--sel-line);cursor:pointer;margin:0 5px 0 0;vertical-align:-1px}

/* fila de propiedad: etiqueta a la izquierda, valor a la derecha */
.prow{display:flex;align-items:center;gap:8px;min-height:24px;padding:1px 10px}
.prow > span{flex:0 0 78px;color:var(--dim);font-size:11px}
.prow > .v{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.prow.col{display:block;padding:3px 10px}
.prow.col > span{display:block;margin-bottom:3px}
.pgrp{border-bottom:1px solid var(--edge)}
.pgrp > h4{
  display:flex;align-items:center;gap:6px;margin:0;padding:5px 10px;
  font-size:11px;font-weight:600;color:var(--tx);background:#262626;
  border-bottom:1px solid var(--edge);user-select:none;
}
.pgrp > h4 svg{width:9px;height:9px;color:var(--mute)}
.pgrp .in{padding:5px 0 8px}
.mini{padding:2px 10px 6px;font-size:10.5px;color:var(--mute);line-height:1.5}
.hint{padding:14px 12px;color:var(--mute);font-size:11.5px;line-height:1.6;text-align:center}
.rowbtns{display:flex;gap:5px;flex-wrap:wrap;padding:2px 10px 4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:6px}

/* ── biblioteca de medios (rejilla, como el panel de proyecto) ──────────── */
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;padding:8px}
.lib .it{background:var(--list);border:1px solid #303030;border-radius:2px;overflow:hidden;cursor:default}
.lib .it:hover{border-color:#4a4a4a}
.lib .it .th{
  position:relative;height:52px;display:flex;align-items:center;justify-content:center;
  background:#111;border-bottom:1px solid #303030;
}
.lib .it .th img{width:100%;height:100%;object-fit:cover;display:block}
.lib .it .th .ph{color:#444}
.lib .it .th .ph svg{width:20px;height:20px}
.lib .it .th .dur{
  position:absolute;right:2px;bottom:2px;background:#000c;color:#ddd;
  font:9.5px/1.4 var(--fmono);padding:0 3px;border-radius:1px;
}
.lib .it .th .kind{position:absolute;left:0;top:0;width:3px;height:100%}
.lib .it .th .kind.v{background:var(--vid)}
.lib .it .th .kind.a{background:var(--aud)}
.lib .it .nm{padding:3px 5px}
.lib .it .nm b{
  display:block;font-size:10.5px;font-weight:500;color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lib .it .nm span{font-size:9.5px;color:var(--mute)}
.lib .it .ac{display:flex;gap:2px;padding:0 3px 3px}
.lib .it .ac .iconbtn{width:18px;height:18px}
.lib .it .ac .iconbtn svg{width:11px;height:11px}

/* ── pastillas de estado ───────────────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:4px;height:17px;padding:0 7px;
  border-radius:9px;font-size:10px;font-weight:600;letter-spacing:.02em;
}
.pill.ok{background:#12361f;color:#5fd07f;border:1px solid #1e5c34}
.pill.warn{background:#3a2c12;color:#e0a030;border:1px solid #5c4520}
.pill.bad{background:#3a1c18;color:#ef8a7c;border:1px solid #5c2a22}

/* ── aviso flotante ────────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  background:#2e2e2e;border:1px solid #454545;border-radius:3px;
  padding:7px 14px;font-size:11.5px;color:var(--tx);z-index:200;
  box-shadow:0 6px 20px #000a;max-width:70vw;
}
.toast.bad{border-color:#6a3028;background:#33201c;color:#f0b4aa}

/* ── modal ─────────────────────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:150;display:flex;align-items:center;
  justify-content:center;padding:24px;background:#000000a8;
}
.modal[hidden]{display:none}
.modal .sheet{
  width:min(500px,100%);max-height:86vh;overflow:auto;background:var(--panel);
  border:1px solid #3a3a3a;border-radius:3px;box-shadow:0 18px 60px #000c;
}
.modal .sheet > h3{
  margin:0;padding:8px 12px;font-size:12px;font-weight:600;
  background:var(--head);border-bottom:1px solid var(--edge);
}
.modal .sheet .body{padding:10px 2px}
.modal .foot{
  display:flex;gap:6px;justify-content:flex-end;padding:9px 12px;
  background:#1f1f1f;border-top:1px solid var(--edge);
}

/* ── selector de formato ───────────────────────────────────────────────── */
.fmts{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:0 10px}
.fmt{
  background:var(--list);border:1px solid #3a3a3a;border-radius:2px;
  padding:8px 4px;cursor:pointer;text-align:center;
}
.fmt:hover{background:#242424;border-color:#4a4a4a}
.fmt.on{border-color:var(--sel-line);background:#12293d}
.fmt .box{margin:0 auto 6px;border:1px solid #6a6a6a;background:#111}
.fmt.on .box{border-color:var(--sel-line)}
.fmt b{display:block;font-size:10.5px;font-weight:600}
.fmt span{display:block;font-size:9.5px;color:var(--mute)}

/* ── zona de arrastre ──────────────────────────────────────────────────── */
.dropzone{
  position:fixed;inset:0;z-index:180;display:flex;align-items:center;
  justify-content:center;background:#0a1c2ccc;border:2px dashed var(--sel-line);
  color:#cfe4f8;font-size:15px;font-weight:600;pointer-events:none;
}
.dropzone[hidden]{display:none}

/* ── páginas con contenido (proyectos, conectar) ───────────────────────── */
.page{max-width:1000px;margin:0 auto;padding:22px 20px 60px}
.card{
  background:var(--panel);border:1px solid #303030;border-radius:3px;margin-bottom:12px;
}
.card > h2{
  margin:0;padding:7px 12px;font-size:11px;font-weight:600;color:var(--dim);
  text-transform:uppercase;letter-spacing:.06em;background:var(--head);
  border-bottom:1px solid var(--edge);
}
.card .in{padding:12px}
.sub{color:var(--dim);font-size:11.5px}
.empty{padding:34px 0;text-align:center;color:var(--mute);font-size:11.5px;line-height:1.7}

table{width:100%;border-collapse:collapse;font-size:11.5px}
th{
  text-align:left;padding:6px 10px;color:var(--mute);font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:.05em;background:#1f1f1f;
  border-bottom:1px solid var(--edge);
}
td{padding:6px 10px;border-bottom:1px solid #292929}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#282828}

label.f{display:block;padding:3px 10px 7px}
label.f > span{
  display:block;margin-bottom:3px;color:var(--dim);font-size:10.5px;
}