/* app.css — Estilos del panel web de EnPlayer (tema oscuro, alto contraste, pensado para operadores) */
:root {
  --bg: #0e1014; --panel: #13161c; --card: #181c23; --elev: #20252e; --borde: #2c323d; --borde2: #4a5262;
  --txt: #eef1f6; --txt2: #b0b8c7; --txt3: #8a93a6;
  --rojo: #d42a20; --rojo2: #b8231a; --verde: #34c47c; --ambar: #f2a33a; --azul: #5b9bff; --peligro: #ff6b5e;
  --r: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--txt); font: 15px/1.45 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul); }
a:hover { color: #8bb8ff; }
h1, h2, h3 { font-family: Archivo, "IBM Plex Sans", sans-serif; margin: 0; letter-spacing: -0.01em; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ───────── Botones y campos ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 16px; border-radius: var(--r);
       border: 1px solid var(--borde); background: var(--elev); color: var(--txt); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--borde2); color: var(--txt); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.prim { background: var(--rojo); border-color: var(--rojo); color: #fff; font-weight: 700; }
.btn.prim:hover { background: var(--rojo2); }
.btn.grande { min-height: 52px; font-size: 16px; width: 100%; }
.btn.peligro { color: var(--peligro); }
.btn.chico { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn.icono { width: 44px; padding: 0; }
.btn svg { flex-shrink: 0; }
.campo { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 600; }
.campo small { font-weight: 400; color: var(--txt3); font-size: 13px; }
.inp { min-height: 46px; padding: 0 13px; border-radius: var(--r); border: 1px solid var(--borde); background: var(--card); color: var(--txt); font-size: 15px; width: 100%; }
textarea.inp { padding: 11px 13px; min-height: 90px; resize: vertical; line-height: 1.45; }
.inp:focus { border-color: var(--azul); outline: none; }
select.inp { padding-right: 30px; }
.chk { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; font-size: 14px; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--rojo); }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pila { display: flex; flex-direction: column; gap: 14px; }

/* ───────── Ingreso ───────── */
.ingreso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 600px); }
.ingreso .lado { background: var(--panel); border-right: 1px solid var(--borde); padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.ingreso .lado h1 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; max-width: 540px; }
.ingreso .lado p { color: var(--txt2); font-size: 17px; max-width: 520px; }
.ingreso .ventajas { display: flex; flex-direction: column; gap: 12px; color: #d8dce4; }
.ingreso .ventajas div { display: flex; align-items: center; gap: 12px; }
.ingreso .ventajas span { width: 32px; height: 32px; border-radius: 8px; background: var(--elev); display: flex; align-items: center; justify-content: center; }
.ingreso form { width: 100%; max-width: 420px; margin: auto; padding: 48px 24px; display: flex; flex-direction: column; gap: 18px; }
.ingreso form h2 { font-size: 30px; }
.codigo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.codigo input { height: 56px; text-align: center; font: 600 22px "IBM Plex Mono", monospace; border-radius: var(--r); border: 1px solid var(--borde); background: var(--card); color: var(--txt); min-width: 0; }
.codigo input:focus { border: 2px solid var(--rojo); outline: none; }
.qr { background: #fff; border-radius: 12px; padding: 12px; width: 220px; align-self: center; }
.qr svg { display: block; width: 100%; height: auto; }
.marca-ep { display: flex; align-items: center; gap: 12px; }
.marca-ep .logo { width: 40px; height: 40px; border-radius: 10px; background: var(--rojo); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.marca-ep b { font: 800 22px Archivo, sans-serif; letter-spacing: -0.02em; display: block; }
.marca-ep small { font-size: 11px; color: var(--txt3); letter-spacing: .07em; text-transform: uppercase; }
@media (max-width: 900px) { .ingreso { grid-template-columns: 1fr; } .ingreso .lado { display: none; } }

/* ───────── Estructura ───────── */
.app { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--panel); border-right: 1px solid var(--borde); padding: 22px 14px 18px; display: flex; flex-direction: column; gap: 22px;
           position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.lateral .marca-ep { padding: 0 8px; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: var(--r); text-decoration: none; color: var(--txt2); font-size: 15px; font-weight: 500; }
.nav a:hover { background: var(--card); color: var(--txt); }
.nav a.activo { background: var(--elev); color: var(--txt); font-weight: 600; box-shadow: inset 3px 0 0 var(--rojo); }
.tit-seccion { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--txt3); padding: 0 14px 4px; }
.arbol { display: flex; flex-direction: column; gap: 2px; }
.arbol a { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 10px; border-radius: 8px; text-decoration: none; color: var(--txt2); font-size: 14px; }
.arbol a:hover { background: var(--card); color: var(--txt); }
.arbol a.activo { background: var(--elev); color: var(--txt); font-weight: 600; }
.arbol a .n { margin-left: auto; font-size: 12px; color: var(--txt3); }
.arbol a.soltar { outline: 2px dashed var(--ambar); }
.uso { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--borde); font-size: 13px; }
.uso div { display: flex; justify-content: space-between; gap: 8px; }
.uso span { color: var(--txt2); }
.uso b { font-weight: 600; }
.cuerpo { display: flex; flex-direction: column; min-width: 0; }
.barra-sup { height: 72px; display: flex; align-items: center; gap: 14px; padding: 0 32px; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: rgba(14,16,20,.94); backdrop-filter: blur(6px); z-index: 5; }
.buscador { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--borde); color: var(--txt3); }
.buscador input { flex: 1; border: 0; background: transparent; color: var(--txt); font-size: 15px; outline: none; min-width: 0; }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--txt2); }
.usuario .av { width: 36px; height: 36px; border-radius: 50%; background: var(--borde); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--txt); }
.contenido { padding: 26px 32px 60px; display: flex; flex-direction: column; gap: 20px; }
.migas { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--txt3); flex-wrap: wrap; }
.migas a { color: var(--txt2); text-decoration: none; }
.migas a:hover { color: var(--txt); text-decoration: underline; }
.cabeza { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cabeza h1 { font-size: 30px; }
.cabeza .sub { color: var(--txt2); font-size: 14px; margin-top: 4px; }
.cabeza .acciones { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; }
  .uso { display: none; }
  .barra-sup, .contenido { padding-left: 16px; padding-right: 16px; }
}

/* ───────── Biblioteca ───────── */
.filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pildora { min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--borde); background: transparent; color: var(--txt2); font-size: 13px; font-weight: 600; cursor: pointer; }
.pildora[aria-pressed=true] { background: var(--txt); border-color: var(--txt); color: var(--bg); }
.aviso { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--borde); font-size: 14px; flex-wrap: wrap; }
.aviso.amb { border-color: rgba(242,163,58,.45); }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.tarjeta { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--txt); position: relative; border-radius: 12px; }
.tarjeta .mini { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: #232832 center / cover no-repeat; border: 1px solid var(--borde); overflow: hidden; }
.tarjeta:hover .mini { border-color: var(--borde2); }
.tarjeta .dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 5px; background: rgba(0,0,0,.82); font: 12px "IBM Plex Mono", monospace; color: #fff; }
.tarjeta .est { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 5px; background: rgba(0,0,0,.82); font-size: 12px; font-weight: 600; }
.tarjeta .est i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tarjeta b { font-size: 15px; font-weight: 600; line-height: 1.3; display: block; }
.tarjeta small { font-size: 13px; color: var(--txt3); }
.tarjeta .sel { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 8px; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; }
.tarjeta .sel input { width: 18px; height: 18px; accent-color: var(--rojo); }
.tarjeta.arrastrando { opacity: .4; }
.tarjeta.sobre .mini { outline: 3px solid var(--ambar); }
.tarjeta-carpeta { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--borde); text-decoration: none; color: var(--txt); min-height: 76px; }
.tarjeta-carpeta:hover { border-color: var(--borde2); }
.tarjeta-carpeta span.ic { width: 44px; height: 44px; border-radius: 10px; background: var(--elev); display: flex; align-items: center; justify-content: center; color: var(--ambar); flex-shrink: 0; }
.vacio { padding: 48px 24px; border: 1.5px dashed var(--borde2); border-radius: 14px; text-align: center; color: var(--txt2); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.vacio b { color: var(--txt); font-size: 17px; }
.lote { position: sticky; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--elev); border: 1px solid var(--borde2); box-shadow: 0 10px 30px rgba(0,0,0,.5); flex-wrap: wrap; z-index: 4; }

/* ───────── Ficha del video ───────── */
.ficha { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); gap: 28px; align-items: start; }
@media (max-width: 1100px) { .ficha { grid-template-columns: 1fr; } }
.marco { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--borde); }
.marco iframe, .marco video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.caja { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 12px; background: var(--card); border: 1px solid var(--borde); }
.caja > h3 { font-size: 16px; font-family: inherit; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.caja > h3 .der { margin-left: auto; display: flex; gap: 8px; }
.caja .nota { font-size: 13px; color: var(--txt3); }
.codigo-iframe { min-height: 100px; padding: 12px; border-radius: 9px; border: 1px solid var(--borde); background: var(--bg); color: var(--txt2); font: 12px/1.5 "IBM Plex Mono", monospace; resize: none; width: 100%; }
.opciones3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opciones4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.opcion { min-height: 64px; border-radius: var(--r); border: 1px solid var(--borde); background: transparent; color: var(--txt2); font-size: 14px; font-weight: 600; cursor: pointer;
          display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; text-align: center; }
.opcion small { font-size: 12px; font-weight: 400; color: var(--txt3); }
.opcion[aria-checked=true] { border: 2px solid var(--rojo); background: var(--elev); color: var(--txt); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px 0 12px; border-radius: 8px; background: var(--elev); border: 1px solid var(--borde); font: 13px "IBM Plex Mono", monospace; }
.chip button { width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--txt2); cursor: pointer; font-size: 18px; line-height: 1; }
.chip button:hover { background: var(--borde); color: var(--txt); }
.caps { display: flex; flex-direction: column; }
.cap { display: grid; grid-template-columns: 110px minmax(0, 1fr) 40px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--elev); }
.cap .inp { min-height: 40px; font-size: 14px; }
.cap .t { font-family: "IBM Plex Mono", monospace; }
.datos3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dato { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r); background: var(--elev); }
.dato span { font-size: 12px; color: var(--txt2); }
.dato b { font-size: 17px; }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

/* ───────── Marcas ───────── */
.marcas { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; min-height: 560px; }
.marcas .lista { border-right: 1px solid var(--borde); padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); }
.marcas .item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r); border: 1px solid var(--borde); background: transparent; cursor: pointer; text-align: left; width: 100%; color: var(--txt); }
.marcas .item[aria-current=true] { border: 2px solid var(--rojo); background: var(--elev); }
.marcas .item i { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; }
.marcas .item small { display: block; font-size: 12px; color: var(--txt3); }
.marcas .editor { padding: 22px; display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 1100px) { .marcas { grid-template-columns: 1fr; } .marcas .editor { grid-template-columns: 1fr; } }
.soltar-logo { min-height: 110px; border-radius: var(--r); border: 1.5px dashed var(--borde2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--txt2); font-size: 14px; cursor: pointer; padding: 12px; text-align: center; background: transparent; width: 100%; }
.soltar-logo img { max-height: 70px; max-width: 220px; }
.soltar-logo.sobre { border-color: var(--ambar); }
.colores { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.colores button { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; }
.colores button[aria-pressed=true] { outline: 3px solid #fff; outline-offset: 2px; }
.colores input[type=color] { width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; }
.previa { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; background: #1c212a; overflow: hidden; border: 1px solid var(--borde); }
.previa .logo { position: absolute; }
.previa .logo img { width: 100%; display: block; }
.previa .logo.tl { left: 3%; top: 4%; } .previa .logo.tr { right: 3%; top: 4%; } .previa .logo.bl { left: 3%; bottom: 16%; } .previa .logo.br { right: 3%; bottom: 16%; }
.previa .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.previa .riel { position: absolute; left: 3%; right: 3%; bottom: 9%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); }
.previa .riel span { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: 3px; }
.previa .ep { position: absolute; right: 3%; bottom: 3%; font-size: 10px; color: rgba(255,255,255,.5); }
.previa .demo { position: absolute; left: 0; right: 0; top: 64%; text-align: center; color: var(--txt3); font-size: 13px; }

/* ───────── Ajustes ───────── */
.conexion { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; }
.conexion span { color: var(--txt2); font-size: 14px; }
.conexion input { font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.pasos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--txt2); }
.pasos b { color: var(--txt); }

/* ───────── Ventanas modales y avisos ───────── */
.velo { position: fixed; inset: 0; background: rgba(5,6,8,.72); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal.ancho { width: min(980px, 100%); }
.modal h2 { font-size: 22px; }
.modal .pie { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 60; }
.toast { padding: 14px 18px; border-radius: 12px; background: var(--elev); border: 1px solid var(--borde2); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 14px; max-width: 380px; display: flex; gap: 10px; align-items: center; }
.toast.ok { border-color: rgba(52,196,124,.6); }
.toast.error { border-color: rgba(255,107,94,.7); }
.error-txt { color: var(--peligro); font-size: 14px; }
.cargando { display: flex; align-items: center; justify-content: center; min-height: 50vh; color: var(--txt3); gap: 12px; }
.giro { width: 22px; height: 22px; border: 3px solid var(--borde); border-top-color: var(--rojo); border-radius: 50%; animation: giro 0.8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.guardado { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--verde); }
.guardado.pend { color: var(--ambar); }

/* Versión al pie del menú lateral */
.lateral .version { display: block; padding: 2px 8px; font-size: 12px; color: var(--txt3); text-decoration: none; }
.lateral .version:hover { color: var(--txt2); text-decoration: underline; }
.modal .pie .btn.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }