@font-face { font-family: 'Estudio'; src: url('/fuentes/BalooBhai2.ttf'); font-weight: 400 800; }
:root { --fondo: #fff8ec; --tarjeta: #ffffff; --tinta: #3b2a20; --suave: #8a7466; --borde: #ecdcc8; --acento: #ff8a3d; --acento2: #3da5ff; --verde: #4caf50; --rojo: #e5484d; --radio: 14px; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: 'Estudio', system-ui, sans-serif; font-size: 16px; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
h1, h2, h3 { margin: 0; line-height: 1.15; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; color: var(--suave); font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; border-radius: 999px; padding: .55rem 1rem; background: var(--acento); color: #fff; font-weight: 700; cursor: pointer; min-height: 42px; }
button.sec { background: #fff; color: var(--tinta); border: 2px solid var(--borde); } button.azul { background: var(--acento2); } button.rojo { background: var(--rojo); } button.chico { padding: .3rem .7rem; min-height: 34px; font-size: .9rem; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { border: 2px solid var(--borde); border-radius: 10px; padding: .45rem .6rem; background: #fff; width: 100%; min-height: 42px; }
textarea { min-height: 150px; resize: vertical; line-height: 1.35; }
label { display: block; font-size: .85rem; color: var(--suave); font-weight: 600; margin-bottom: .15rem; }
.cab { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; background: #fff; border-bottom: 2px solid var(--borde); position: sticky; top: 0; z-index: 30; }
.cab h1 { font-size: 1.15rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cab .estado { font-size: .8rem; color: var(--suave); white-space: nowrap; }
.marco { max-width: 1180px; margin: 0 auto; padding: 1rem; }
.tarjeta { background: var(--tarjeta); border: 2px solid var(--borde); border-radius: var(--radio); padding: 1rem; margin-bottom: 1rem; }
.fila { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; } .fila > * { flex: 1 1 140px; min-width: 0; } .fila > .fijo { flex: 0 0 auto; }
.lista-proy { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.proy { cursor: pointer; } .proy:hover { border-color: var(--acento); } .proy small { color: var(--suave); }
.visor { background: #222; border-radius: var(--radio); overflow: hidden; position: relative; }
.visor canvas { display: block; width: 100%; height: auto; touch-action: none; }
.transporte { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; } .transporte input[type=range] { flex: 1; min-height: 30px; padding: 0; border: 0; background: none; } .transporte .reloj { font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; font-size: .9rem; }
.pestanas { display: flex; gap: .4rem; margin: .4rem 0 1rem; } .pestanas button { flex: 1; background: #fff; color: var(--tinta); border: 2px solid var(--borde); } .pestanas button.activa { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.zona { display: none; } .zona.activa { display: block; }
.audio-item { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--borde); } .audio-item:first-child { border-top: 0; } .audio-item .nom { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; font-size: .92rem; } .audio-item audio { flex: 1 1 220px; height: 38px; min-width: 0; max-width: 100%; }
.aviso { background: #fff3d6; border: 2px solid #ffd98a; border-radius: 10px; padding: .6rem .8rem; font-size: .9rem; margin: .6rem 0; } .aviso.error { background: #ffe3e3; border-color: #ffa8a8; } .aviso.ok { background: #e3f9e5; border-color: #9ad7a0; }
.pj-fila, .linea-fila { display: grid; gap: .4rem; padding: .6rem 0; border-top: 1px solid var(--borde); align-items: end; }
.pj-fila { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .linea-fila { grid-template-columns: 74px 74px minmax(0, 1fr) 110px 44px; }
.escenas-tira { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; } .escenas-tira .esc { flex: 0 0 auto; border: 2px solid var(--borde); border-radius: 10px; padding: .35rem .6rem; background: #fff; cursor: pointer; font-size: .85rem; min-height: 42px; color: var(--tinta); font-weight: 600; } .escenas-tira .esc.activa { border-color: var(--acento); background: #fff1e4; }
.tl-caja { overflow-x: auto; border: 2px solid var(--borde); border-radius: var(--radio); background: #fff; touch-action: pan-x; }
.tl { position: relative; min-height: 220px; } .tl .regla { height: 26px; position: relative; border-bottom: 1px solid var(--borde); cursor: pointer; background: #fbf3e6; } .tl .regla span { position: absolute; top: 4px; font-size: .72rem; color: var(--suave); transform: translateX(3px); border-left: 1px solid var(--borde); padding-left: 3px; height: 22px; }
.tl .pista { position: relative; height: 46px; border-bottom: 1px solid var(--borde); } .tl .pista::before { content: attr(data-n); position: sticky; left: 4px; top: 2px; font-size: .68rem; color: var(--suave); z-index: 2; background: rgba(255,255,255,.8); padding: 0 4px; border-radius: 4px; display: inline-block; }
.tl .blo { position: absolute; top: 14px; height: 28px; border-radius: 7px; font-size: .72rem; padding: 4px 6px; overflow: hidden; white-space: nowrap; color: #fff; cursor: grab; touch-action: none; user-select: none; border: 1px solid rgba(0,0,0,.15); }
.tl .blo.sel { outline: 3px solid var(--tinta); } .tl .blo .asa { position: absolute; right: 0; top: 0; bottom: 0; width: 14px; cursor: ew-resize; background: rgba(0,0,0,.25); }
.tl .cursor { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rojo); z-index: 5; pointer-events: none; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; } .galeria .pj { text-align: center; } .galeria canvas { width: 100%; height: auto; border-radius: 10px; background: #e9f7ff; }
video { width: 100%; border-radius: var(--radio); background: #000; }
.entrar { max-width: 360px; margin: 12vh auto; text-align: center; } .entrar h1 { font-size: 2rem; margin-bottom: .3rem; } .entrar p { color: var(--suave); }
.barra { height: 12px; background: var(--borde); border-radius: 99px; overflow: hidden; } .barra i { display: block; height: 100%; background: var(--verde); width: 0; transition: width .4s; }
@media (max-width: 640px) { .marco { padding: .7rem 16px; } .linea-fila { grid-template-columns: 1fr 1fr; } .linea-fila .txt { grid-column: 1 / -1; } .cab { padding: .5rem 16px; } }