/* Creador de temas (/temas/crear/). La simulación del panel está en «dp» (pantalla de 360×800, como un
   móvil real) y se escala entera con transform; las medidas salen de DashboardHeader.kt, InfoCard.kt,
   TotalCollectedCard.kt, RecentHistoryCard.kt y StartShiftButton.kt de la app. */
:root{--bg:#0b0b0c;--card:#161618;--line:#26262a;--text:#f4f4f5;--muted:#a1a1aa;--yellow:#f2c40f;--red:#ef4444}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5;min-height:100vh}
[hidden]{display:none!important}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button{font:inherit;color:inherit}

.creador{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;max-width:1180px;margin:0 auto;padding:16px 20px 32px}
.escena{position:sticky;top:12px;height:calc(100vh - 24px);height:calc(100dvh - 24px);display:flex;flex-direction:column;align-items:center;gap:10px;min-height:0}
.hueco{flex:1;width:100%;min-height:0;position:relative}
.movil{position:absolute;left:50%;top:0;transform-origin:top center;border-radius:calc(34px*var(--k,1));padding:calc(7px*var(--k,1));background:#202024;box-shadow:0 18px 60px rgba(0,0,0,.55),inset 0 0 0 1px #34343a}
.pantalla{position:relative;overflow:hidden;border-radius:calc(28px*var(--k,1));touch-action:none;user-select:none;-webkit-user-select:none}
.p-fondo{position:absolute;inset:0}
.p-capa{position:absolute;left:0;pointer-events:none}
.p-toque{position:absolute;inset:0;cursor:default}
.p-toque.sobre{cursor:grab}
.p-toque.arrastrando{cursor:grabbing}

.modos,.segmento{display:inline-flex;gap:4px;background:rgba(255,255,255,.07);border-radius:12px;padding:3px}
.modos button,.segmento button{min-height:40px;border:0;border-radius:9px;background:none;font-weight:700;font-size:.9rem;padding:0 14px;cursor:pointer}
.modos button[aria-pressed="true"],.segmento button[aria-pressed="true"]{background:var(--yellow);color:#111}

/* ---- El panel, en dp ---- */
.p-dp{position:absolute;left:0;top:0;width:360px;height:800px;transform-origin:0 0;pointer-events:none;font-family:Roboto,system-ui,sans-serif;color:var(--on-surface);display:flex;flex-direction:column;gap:14px;padding:0 16px}
.p-dp svg{width:1em;height:1em;fill:currentColor;flex:none}
/* La barra de estado, vacía: sin hora ni batería, pero con su alto (la imagen de fondo cuenta con él) */
.p-estado{height:30px;margin:0 -16px -6px;flex:none}
.p-cab{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--borde-cab);border-radius:28px;padding:10px 12px 10px 16px;min-height:64px}
.p-titulo{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.p-rotulo{font-size:16px;line-height:1.1;font-weight:800;white-space:nowrap;overflow:hidden;color:var(--on-surface)}
.p-rotulo.serif{font-family:Georgia,"Times New Roman",serif;font-weight:900;letter-spacing:.5px}
.p-rotulo.imagen{background:var(--on-surface);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:left center;mask-position:left center}
.p-rotulo.imagen.original{background:none}
.p-rotulo img{height:100%;display:block}
.p-titulo small{font-size:10px;color:var(--on-surface-variant);margin-top:2px}
.p-burbuja{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--borde-burbuja);border-radius:14px;padding:6px 10px;font-size:14px;font-weight:700}
.p-burbuja svg{font-size:16px}
.p-redondo{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface-variant-50);font-size:22px}
.p-tarjeta{background:var(--tarjeta);border-radius:24px;overflow:hidden}
.p-franja{background:var(--franja);display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;font-size:11px;font-weight:700;letter-spacing:1px}
.p-franja svg{font-size:14px}
.p-sec{color:var(--secondary)}
.p-ter{color:var(--tertiary)}
.p-tenue{opacity:.7}
.p-tenue2{color:var(--on-surface-variant)}
.p-total{display:flex;justify-content:center;align-items:flex-end;padding-top:10px}
.p-total b{font-size:58px;line-height:1;font-weight:700;letter-spacing:-1px}
.p-total span{font-size:28px;color:var(--on-surface-variant);margin:0 0 4px 6px}
.p-chip{margin:10px auto 20px;width:max-content;background:var(--surface-variant);color:var(--on-surface-variant);border-radius:8px;padding:4px 12px;font-size:12px}
.p-dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.p-info{text-align:center;padding-bottom:16px}
.p-info .p-franja{padding:8px 16px;font-size:10px}
.p-info .p-franja svg{font-size:12px}
.p-info b{display:block;font-size:24px;font-weight:700;margin-top:10px}
.p-info small{font-size:11px;color:var(--on-surface-variant)}
.p-pastilla{height:52px;border-radius:26px;background:var(--tarjeta);border:1px solid var(--surface-variant);display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700}
.p-pastilla svg{font-size:18px}
.p-hist{flex:1;min-height:0;margin-bottom:96px}
.p-hist .p-franja{justify-content:flex-start}
.p-vacio{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:34px;font-size:14px}
.p-vacio svg{font-size:48px;color:var(--surface-variant)}
.p-radar{position:absolute;right:16px;bottom:116px;width:56px;height:56px;border-radius:50%;background:var(--tertiary);color:var(--on-tertiary);display:grid;place-items:center;font-size:26px;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.p-boton{position:absolute;left:16px;right:16px;bottom:32px;height:64px;border-radius:20px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-size:18px;font-weight:800;letter-spacing:2px;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.p-barra{position:absolute;left:50%;bottom:9px;width:108px;height:4px;margin-left:-54px;border-radius:2px;background:var(--on-background);opacity:.6}

/* ---- Mandos ---- */
.mandos{min-width:0;display:flex;flex-direction:column;gap:14px}
.cabeza{display:flex;flex-direction:column;gap:10px}
h1{font-size:1.7rem;line-height:1.1;letter-spacing:-.02em;font-weight:800}
h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:14px 0 8px}
h2:first-child{margin-top:0}
.del-modo{color:var(--yellow);text-transform:none;letter-spacing:0}
.nombre input{width:100%;min-height:46px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-size:1rem;padding:0 14px}
.nombre input:focus{outline:2px solid var(--yellow);outline-offset:1px}
.pestanas{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:rgba(255,255,255,.06);border-radius:14px;padding:4px;position:sticky;top:0;z-index:5}
.pestanas button{min-height:42px;border:0;border-radius:10px;background:none;font-weight:700;font-size:.88rem;cursor:pointer}
.pestanas button[aria-selected="true"]{background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--yellow)}
.hoja{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px}
.pista{color:var(--muted);font-size:.86rem;margin:4px 0 10px}

.bases{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.base{flex:none;width:62px;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.72rem;color:var(--muted)}
.base i{display:block;width:52px;height:52px;border-radius:14px;border:1px solid var(--line);position:relative;overflow:hidden}
.base i::before,.base i::after{content:"";position:absolute;left:8px;right:8px;border-radius:4px}
.base i::before{top:9px;height:14px;background:var(--b-sur)}
.base i::after{bottom:8px;height:10px;background:var(--b-pri)}
.base:hover i,.base:focus-visible i{outline:2px solid var(--yellow)}

.roles{display:grid;gap:6px}
.rol{display:flex;align-items:center;gap:12px;min-height:46px;border:1px solid var(--line);border-radius:12px;background:none;padding:0 12px;cursor:pointer;text-align:left;font-weight:600}
.rol i,.muestra{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 0 1px rgba(0,0,0,.4);flex:none}
.rol span{flex:1}
.rol small{color:var(--muted);font-family:ui-monospace,monospace;font-size:.8rem}
.rol:hover{border-color:#3a3a40}

.barra{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px;min-height:42px;font-size:.92rem}
input[type=range]{width:100%;accent-color:var(--yellow);height:28px}

.fila-fondo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dos-colores,.dos-colores-rotulo{display:inline-flex;gap:8px}
.muestra{border:0;cursor:pointer}

.btn{min-height:46px;border-radius:12px;border:1px solid var(--line);background:none;color:var(--text);font:inherit;font-weight:700;font-size:.93rem;display:grid;place-items:center;text-align:center;text-decoration:none;cursor:pointer;padding:6px 12px}
.btn:hover{border-color:#3a3a40}
.btn.principal{background:var(--yellow);border-color:var(--yellow);color:#111}
.btn.rojo{color:var(--red)}
.btn.ancho{width:100%}
.btn:focus-visible,.pieza:focus-visible,.rol:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.botones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.botones.cuatro{grid-template-columns:repeat(4,1fr)}
.botones.cuatro .btn{font-size:.8rem;padding:4px}

.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
.patrones{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}
.pieza{aspect-ratio:1;border:1px solid var(--line);border-radius:12px;background:#0f0f11;cursor:pointer;display:grid;place-items:center;padding:0;position:relative;overflow:hidden}
.patrones .pieza{aspect-ratio:.5}
.pieza:hover{border-color:#4a4a52}
.pieza[aria-pressed="true"]{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}
.pieza i{position:absolute;inset:16%;background:#e4e4e7;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.patrones .pieza i{inset:0;-webkit-mask-size:cover;mask-size:cover}
.pieza.ninguno{font-size:.75rem;color:var(--muted);font-weight:700}
.pieza.subir{font-size:1.4rem;color:var(--yellow);display:flex;flex-direction:column;gap:0;line-height:1}
.pieza.subir small{font-size:.68rem;color:var(--muted);font-weight:700;margin-top:3px}

.colores-capa{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.chip{min-height:38px;border-radius:19px;border:1px solid var(--line);background:none;padding:0 12px 0 6px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:.82rem;font-weight:700}
.chip i{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.chip[aria-pressed="true"]{border-color:var(--yellow);color:var(--yellow)}

.acciones{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;position:sticky;bottom:0;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%);z-index:5}
.acciones .btn{min-height:52px;font-size:1rem}

.soltar{position:fixed;inset:0;z-index:4000;background:rgba(11,11,12,.85);display:grid;place-items:center;border:3px dashed var(--yellow);font-size:1.4rem;color:var(--yellow);pointer-events:none}
.soltar[hidden]{display:none}
.aviso{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#f4f4f5;color:#111;padding:10px 16px;border-radius:12px;font-weight:700;font-size:.93rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:5000;max-width:calc(100vw - 32px);text-align:center}
.aviso.ver{opacity:1}

.dialogo{position:fixed;inset:0;z-index:4500;background:rgba(0,0,0,.7);display:grid;place-items:center;padding:16px}
.dialogo[hidden]{display:none}
.caja{width:100%;max-width:440px;max-height:calc(100dvh - 32px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:6px}
.caja h2{font-size:1.25rem;color:var(--yellow);text-transform:none;letter-spacing:0;margin:0 0 6px}
.qr{align-self:center;background:#fff;border-radius:14px;padding:10px;margin:4px 0 8px}
.qr img,.qr svg{display:block;width:180px;height:180px}
.enlace{display:block;font-family:ui-monospace,monospace;font-size:1.05rem;color:var(--text);background:#0f0f11;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;word-break:break-all;text-decoration:none}

@media (max-width:860px){
  .creador{grid-template-columns:1fr;padding:8px 16px 0;gap:12px}
  .escena{top:0;height:min(52vh,560px);z-index:6;background:var(--bg);padding:6px 0 8px;margin:0 -16px;width:calc(100% + 32px);flex-direction:row;align-items:stretch;gap:6px;padding-left:10px;padding-right:10px}
  .escena .modos{flex-direction:column}
  .escena .modos button{min-height:38px;padding:0 10px;font-size:.8rem}
  h1{font-size:1.35rem}
  .pestanas{top:calc(min(52vh,560px) + 0px)}
}
.titular{display:flex;align-items:center;justify-content:space-between;gap:10px}
.btn.chico{min-height:36px;font-size:.82rem;padding:0 12px}
.rol[aria-pressed="true"]{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}
.muestras{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;margin-top:12px;justify-items:center}
.muestras button{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.muestras button[aria-pressed="true"]{outline:2px solid var(--text);outline-offset:2px}
.muestras .mas{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}
.barra input[type=checkbox]{width:24px;height:24px;accent-color:var(--yellow);justify-self:start}

/* Patrón ↔ asalariado: sólo cambia esta fila (DashboardScreen.kt, según ownerPercentage) */
.conmutadores{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.p-reparto{display:none;border:1px solid var(--surface-variant);background:var(--tarjeta-reparto)}
.p-reparto .p-franja{justify-content:flex-start}
.p-reparto .p-franja span{flex:1}
.p-reparto .p-franja b{color:var(--primary);font-size:12px;font-weight:900;letter-spacing:0;margin-right:0}
.p-flecha{font-size:16px!important}
.pantalla.asalariado .p-reparto{display:block}
.pantalla.asalariado .p-gastos{display:none}
@media (max-width:860px){
  .conmutadores{flex-direction:column;align-self:center;gap:8px}
}

/* Sin textos (lito): el rótulo, los iconos de efectivo/tarjeta y Combustible/Mantenimiento; los huecos
   conservan el alto que tienen en la app */
.p-franja{min-height:34px}
.p-info .p-franja{min-height:28px}
.p-total{height:136px}
.p-info{padding-bottom:0;height:96px}

/* Logos de las asociaciones (los del catálogo) */
.logos{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.logos .pieza{aspect-ratio:1.5}
.logos .pieza i{inset:12%}
@media (max-width:480px){.pestanas button{font-size:.8rem}}

/* Aviso con «Deshacer» (tras restablecer): el botón se puede tocar */
.aviso.con-boton{pointer-events:auto}
.aviso .deshacer{border:0;background:none;color:#a16207;font:inherit;font-weight:800;cursor:pointer;padding:6px 4px;margin:-6px 0;text-decoration:underline}

/* Pulido (lito, 10-10) ---------------------------------------------------------------------------- */
/* Pestañas fijas OPACAS: lo que pasa por debajo al bajar no se transparenta */
.pestanas{background:#1a1a1d;border:1px solid var(--line);box-shadow:0 10px 18px -10px rgba(0,0,0,.8)}
/* Muestras juntas (como en el editor de la app), no repartidas a todo lo ancho */
.muestras{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;margin-top:14px}
.muestras button{width:34px;height:34px;flex:none;transition:transform .12s}
.muestras button:hover{transform:scale(1.1)}
/* Barras propias: recorrido relleno en amarillo hasta el tirador (--p lo pone crear.js) */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:32px;cursor:pointer;--p:50%}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--yellow) var(--p),#3a3a40 var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;border:3px solid var(--yellow);box-shadow:0 1px 4px rgba(0,0,0,.5)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#3a3a40}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--yellow)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--yellow);box-shadow:0 1px 4px rgba(0,0,0,.5)}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--yellow);outline-offset:2px}
.barra{grid-template-columns:110px 1fr}
.barra span{color:var(--muted);font-size:.9rem}
/* La barra de la web (nav.css, .tpn) es fija arriba y mide 61 px: la escena y las pestañas, por debajo */
:root{--nav:61px}
.escena{top:calc(var(--nav) + 12px);height:calc(100vh - var(--nav) - 24px);height:calc(100dvh - var(--nav) - 24px)}
.pestanas{top:var(--nav)}
@media (max-width:860px){
  .escena{top:var(--nav);height:min(calc(52vh - 30px),530px)}
  .pestanas{top:calc(var(--nav) + min(calc(52vh - 30px),530px))}
}