/* Clipper Studio · interfaz · app.css (tema "Estudio pro"). Los componentes con @apply siguen en
   index.html dentro de <style type="text/tailwindcss">: el CDN de Tailwind solo los lee en linea. */
body { background-color: #0A0A0C; color: #E7E7EA; }
:focus-visible { outline: 2px solid #FFE600; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* Modo editor: la barra lateral se pliega a iconos para dar ancho al lienzo. */
@media (min-width: 1024px) {
  body.modo-editor #appSidebar { width: 64px; padding-left: 10px; padding-right: 10px; }
  body.modo-editor #appSidebar .nav-texto { display: none; }
  body.modo-editor #appSidebar .nav-item, body.modo-editor #appSidebar .btn-primario { justify-content: center; padding-left: 0; padding-right: 0; }
}
svg.ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #121216; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #27272F; border-radius: 4px; }

/* CapCut canvas transformation and bounding box */
.capcut-bounding-box {
  border: 2px solid #FFE600;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 18px rgba(255,230,0,0.3);
}
.capcut-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border: 2px solid #FFE600;
  border-radius: 2px;
  z-index: 30;
  transition: transform 0.1s;
}
.capcut-handle:hover { transform: scale(1.3); }
.capcut-handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.capcut-handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.capcut-handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.capcut-handle-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.capcut-handle-n { top: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.capcut-handle-s { bottom: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.capcut-handle-w { top: calc(50% - 5px); left: -5px; cursor: ew-resize; }
.capcut-handle-e { top: calc(50% - 5px); right: -5px; cursor: ew-resize; }
.capcut-rotate-handle {
  position: absolute;
  bottom: -28px;
  left: calc(50% - 11px);
  width: 22px;
  height: 22px;
  background: white;
  border: 2px solid #FFE600;
  border-radius: 50%;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #000;
  z-index: 30;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.capcut-rotate-handle:hover { transform: scale(1.15); }

/* Filmstrip thumbnail simulation */
.filmstrip-frame {
  width: 52px;
  height: 38px;
  background-size: cover;
  background-position: center;
  border-right: 1px solid rgba(0,0,0,0.4);
  flex-shrink: 0;
}

/* Opus Preset card selected */
.opus-preset-card {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.opus-preset-card.active {
  border-color: #FFE600 !important;
  box-shadow: 0 0 16px rgba(255,230,0,0.35);
  background-color: #1A1A26 !important;
}
.opus-preset-card:hover:not(.active) {
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-2px);
}
/* Pestaña Guía: lectura cómoda de Markdown */
.guia { max-width: 860px; }
.guia h1 { font-size: 1.5rem; font-weight: 900; color: #fff; margin: 0 0 .75rem; text-wrap: balance; }
.guia h2 { font-size: 1.1rem; font-weight: 800; color: #fff; margin: 1.6rem 0 .5rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.08); }
.guia h3 { font-size: .95rem; font-weight: 700; color: #f5c84b; margin: 1.1rem 0 .4rem; }
.guia p { margin: .45rem 0; max-width: 70ch; }
.guia ul, .guia ol { margin: .4rem 0 .6rem 1.2rem; display: flex; flex-direction: column; gap: .25rem; }
.guia ul { list-style: disc; } .guia ol { list-style: decimal; }
.guia li.guia-check { list-style: none; margin-left: -1.2rem; }
.guia li.guia-check input { margin-right: .4rem; accent-color: #f5c84b; transform: translateY(1px); }
.guia a { color: #f5c84b; text-decoration: underline; }
.guia code { background: rgba(255,255,255,.08); padding: .05rem .3rem; border-radius: .25rem; font-size: .85em; }
.guia strong { color: #fff; }
.guia .guia-tabla { overflow-x: auto; margin: .6rem 0; }
.guia table { border-collapse: collapse; width: 100%; font-size: 12px; }
.guia th { text-align: left; color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.18); padding: .4rem .5rem; }
.guia td { border-bottom: 1px solid rgba(255,255,255,.07); padding: .4rem .5rem; vertical-align: top; }
.guia .guia-copia { position: relative; margin: .6rem 0; }
.guia .guia-copia pre { white-space: pre-wrap; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: .6rem; padding: .8rem; font-size: 12px; }
.guia .guia-copia button, .guia .guia-boton { position: relative; float: right; font-size: 11px; padding: .2rem .6rem; border-radius: .4rem; border: 1px solid rgba(255,255,255,.18); }
.guia .guia-boton { float: none; }

/* Ayuda al pasar el ratón (ⓘ): la explicación, el coste y el tiempo de cada función.
   Regla del CEO (3-nov-2026): en pantalla solo título, botón y cifra clave; el resto aquí. */
.ayuda-i { display:inline-grid; place-items:center; width:16px; height:16px; margin-left:5px; border-radius:9999px;
  border:1px solid #33333D; background:#1D1D25; color:#8C8C99; font:600 10px/1 ui-monospace,Menlo,monospace;
  cursor:help; vertical-align:middle; flex:none; user-select:none; }
.ayuda-i:hover, .ayuda-i:focus { color:#F5C84B; border-color:#F5C84B; }
/* Con teclado el ⓘ enseña el mismo contorno amarillo que el resto (antes `outline:none` lo escondía); con ratón, no. */
.ayuda-i:focus:not(:focus-visible) { outline:none; }
.ayuda-i:focus-visible { outline:2px solid #FFE600; outline-offset:2px; }
#ayudaBurbuja { position:fixed; z-index:9999; max-width:290px; padding:11px 12px; border-radius:12px; background:#26262F;
  border:1px solid #3A3A46; color:#ECECF1; font-size:12.5px; line-height:1.5; box-shadow:0 12px 30px rgba(0,0,0,.45);
  pointer-events:none; opacity:0; transition:opacity .1s; white-space:pre-line; }
#ayudaBurbuja.visible { opacity:1; }
#ayudaBurbuja .ab-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; white-space:normal; }
#ayudaBurbuja .ab-meta span { font:500 11px ui-monospace,Menlo,monospace; background:#16161C; border:1px solid #2A2A34;
  border-radius:6px; padding:1px 6px; }
#ayudaBurbuja .ab-coste { color:#F5C84B; }
.ayuda-txt { display:none !important; }
@media (prefers-reduced-motion: reduce) { #ayudaBurbuja { transition:none; } }

/* Pastillas de estado de la pantalla «Hoy» (src/produccion/hoy.py): color Y forma, nunca solo texto.
   ok ✓ verde · info ◷ azul · aviso ! ámbar · peligro ✕ rojo · neutro • gris. */
.pastilla { display:inline-flex; align-items:center; gap:4px; flex:none; border-radius:9999px; padding:1px 8px 1px 3px;
  font:600 10.5px/16px system-ui,sans-serif; white-space:nowrap; border:1px solid transparent; }
.pastilla::before { display:inline-grid; place-items:center; width:13px; height:13px; border-radius:9999px;
  font:700 9px/1 ui-monospace,Menlo,monospace; }
.pastilla.ok { background:rgba(34,197,94,.13); color:#86efac; border-color:rgba(34,197,94,.3); }
.pastilla.ok::before { content:'✓'; background:#22c55e; color:#04130a; }
.pastilla.info { background:rgba(96,165,250,.12); color:#93c5fd; border-color:rgba(96,165,250,.3); }
.pastilla.info::before { content:'◷'; background:#3b82f6; color:#fff; }
.pastilla.aviso { background:rgba(245,158,11,.13); color:#fcd34d; border-color:rgba(245,158,11,.35); }
.pastilla.aviso::before { content:'!'; background:#f59e0b; color:#1a1003; border-radius:0; padding-top:3px;
  clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.pastilla.peligro { background:rgba(239,68,68,.14); color:#fca5a5; border-color:rgba(239,68,68,.4); }
.pastilla.peligro::before { content:'✕'; background:#ef4444; color:#fff; border-radius:3px; }
.pastilla.neutro { background:#1D1D24; color:#a1a1aa; border-color:#2E2E37; }
.pastilla.neutro::before { content:'•'; color:#71717a; }

/* ---- Crear vídeo por pasos e Investigación por filtros (mockup aprobado 9-nov: docs/diseno/mockup_pasos_e_investigacion.html) ---- */
.cr-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .cr-main { grid-template-columns: 1fr; } }
.cr-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cr-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cr-step { background: #121216; border: 1px solid #26262D; border-radius: 12px; }
.cr-step.abierto { border-color: #FFE600; }
.cr-step.revisar { border-color: #f2c75c; }
.cr-head { all: unset; display: flex; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; width: 100%; box-sizing: border-box; }
.cr-head:focus-visible { outline: 2px solid #FFE600; outline-offset: -2px; border-radius: 12px; }
.cr-step.bloqueado .cr-head { cursor: not-allowed; opacity: .5; }
.cr-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #1A1A20; border: 1px solid #26262D; font-weight: 600; font-size: .85rem; flex: none; }
.cr-step.hecho .cr-n { background: #6ee7a0; color: #111; border-color: #6ee7a0; }
.cr-step.abierto .cr-n { background: #FFE600; color: #111; border-color: #FFE600; }
.cr-step.revisar .cr-n { background: #f2c75c; color: #111; border-color: #f2c75c; }
.cr-t { font-weight: 600; flex: 1; color: #fff; }
.cr-s { color: #8d8d96; font-size: .82rem; text-align: right; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-body { padding: 0 16px 16px 56px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 640px) { .cr-body { padding-left: 16px; } }
.cr-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cr-chip { border: 1px solid #26262D; background: #1A1A20; color: #E7E7EA; padding: 6px 12px; border-radius: 99px; cursor: pointer; font: inherit; font-size: .85rem; }
.cr-chip:hover { border-color: #52525b; }
.cr-chip[aria-pressed="true"] { border-color: #FFE600; background: #2a2610; color: #FFE600; }
.cr-chip:disabled { opacity: .45; cursor: not-allowed; }
.cr-modo { display: inline-flex; border: 1px solid #26262D; border-radius: 99px; padding: 2px; gap: 2px; }
.cr-modo button { all: unset; cursor: pointer; padding: 4px 12px; border-radius: 99px; font-size: .8rem; color: #8d8d96; }
.cr-modo button[aria-pressed="true"] { background: #FFE600; color: #111; font-weight: 600; }
.cr-modo button:focus-visible { outline: 2px solid #FFE600; }
.cr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cr-lab { font-size: .78rem; color: #8d8d96; }
.cr-field input, .cr-field select, .cr-field textarea, .cr-in { background: #1A1A20; border: 1px solid #26262D; color: #fff; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .9rem; min-width: 0; }
.cr-field textarea { min-height: 120px; resize: vertical; }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cr-pill { font-size: .74rem; padding: 2px 9px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; }
.cr-ok { color: #6ee7a0; } .cr-warn { color: #f2c75c; } .cr-bad { color: #f28b8b; } .cr-blue { color: #7cb7ff; } .cr-mute { color: #8d8d96; }
.cr-go { background: #FFE600; color: #111; border: 0; border-radius: 10px; padding: 10px 18px; font: inherit; font-weight: 700; cursor: pointer; align-self: flex-start; }
.cr-go[disabled] { background: #1A1A20; color: #8d8d96; cursor: not-allowed; }
.cr-hint { font-size: .8rem; color: #8d8d96; }
.cr-faltan { font-size: .8rem; color: #f2c75c; margin: 0; padding-left: 18px; }
.cr-check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid #26262D; border-radius: 8px; background: #1A1A20; font-size: .88rem; cursor: pointer; }
.cr-cost { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #26262D; font-variant-numeric: tabular-nums; font-size: .86rem; }
.cr-card { background: #121216; border: 1px solid #26262D; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cr-bar { height: 8px; background: #1A1A20; border-radius: 99px; overflow: hidden; }
.cr-bar > i { display: block; height: 100%; background: #FFE600; width: 0; transition: width .4s; }
.cr-prev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cr-prev img, .cr-prev span { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; border: 1px solid #26262D; background: #1A1A20; display: block; }
.cr-prev img.nueva { animation: crPulso 1.4s 2; }
@keyframes crPulso { 0%, 100% { outline: 2px solid transparent; } 50% { outline: 2px solid #FFE600; opacity: .6; } }
.cr-wave { display: flex; gap: 1px; align-items: center; height: 40px; cursor: pointer; }
.cr-wave i { flex: 1; min-width: 1px; background: #3a4a60; border-radius: 2px; }
.cr-wave i.sonado { background: #7cb7ff; }
.cr-log { font: 12px/1.5 ui-monospace, Menlo, monospace; background: #08080a; border: 1px solid #26262D; border-radius: 8px; padding: 8px; max-height: 160px; overflow: auto; color: #b8c0cc; }
.cr-log b { color: #FFE600; font-weight: 600; }
.cr-sub { min-height: 2.6em; font-size: .85rem; color: #fff; background: #08080a; border-radius: 8px; padding: 6px 8px; text-align: center; }
.cr-tag { font-size: .68rem; padding: 1px 6px; border-radius: 6px; background: #2a2610; color: #FFE600; margin-left: 4px; }
.cr-res { background: #1A1A20; border: 1px solid #26262D; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.cr-res img { aspect-ratio: 16/9; object-fit: cover; width: 100%; background: #0f0b08; }
.cr-res .m { padding: 8px; font-size: .8rem; display: flex; flex-direction: column; gap: 4px; }
.cr-res.sel { border-color: #FFE600; }
.cr-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }