:root {
  color-scheme: dark;
  --fondo: #060609;
  --panel: #0d0c13;
  --panel2: #14121c;
  --panel3: #1a1824;
  --borde: #1e1b29;
  --borde2: #2a2638;
  --texto: #eeedf5;
  --suave: #8e89a5;
  --tenue: #5f5b73;
  --marca: #8e7cff;
  --marca2: #b9adff;
  --dis: #5b9dff;
  --yo: #8e7cff;
  --moon: #ff7fc8;
  --verde: #45d483;
  --amarillo: #f2c14a;
  --rojo: #ff6577;
  --naranja: #ffad7a;
  --r: 14px;
}
* { box-sizing: border-box }
html, body { margin: 0; height: 100% }
body {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  background: var(--fondo); color: var(--texto); display: flex; font-size: 14px; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(900px 420px at 88% -10%, #8e7cff14, transparent 65%), radial-gradient(700px 380px at 10% 110%, #ff7fc80a, transparent 60%) }
button, input, select { font: inherit; color: inherit }
code { background: #ffffff0d; padding: 2px 7px; border-radius: 6px; font-size: 12.5px; color: var(--marca2); font-family: "Cascadia Code", Consolas, monospace }
select option { background: #14121c; color: #eeedf5 }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none }

/* ---------- lateral ---------- */
.lado { width: 232px; flex: none; background: #09080d; border-right: 1px solid var(--borde); padding: 22px 14px 16px; display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1 }
.marca { display: flex; gap: 11px; align-items: center; padding: 0 8px }
.marca img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 6px 18px #8e7cff33 }
.marca b { display: block; font-size: 16px; letter-spacing: -.2px }
.marca span { font-size: 9.5px; letter-spacing: 1.4px; color: var(--tenue) }
nav { display: flex; flex-direction: column; gap: 3px }
nav button { display: flex; gap: 11px; align-items: center; background: none; border: 0; padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left; color: var(--suave); font-weight: 600; transition: background .15s, color .15s }
nav button:hover { background: #ffffff07; color: var(--texto) }
nav button.activo { background: linear-gradient(90deg, #8e7cff26, #8e7cff08); color: var(--texto) }
nav button.activo svg { color: var(--marca2) }
.pie-lado { margin-top: auto; display: flex; flex-direction: column; gap: 10px }
.estado-bot { display: flex; gap: 9px; align-items: center; padding: 10px 12px; border-radius: 11px; background: var(--panel); border: 1px solid var(--borde); font-size: 12.5px; color: var(--suave) }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); flex: none }
.estado-bot.ok { color: var(--texto) }
.estado-bot.ok .punto { background: var(--verde); box-shadow: 0 0 0 3px #45d48322 }
.estado-bot.mal .punto { background: var(--rojo); box-shadow: 0 0 0 3px #ff657722 }
.estado-bot.va .punto { background: var(--amarillo) }
.nota-excel { font-size: 11px; color: var(--tenue); padding: 0 4px; min-height: 13px }

/* ---------- página ---------- */
main { flex: 1; overflow: auto; padding: 30px 34px 48px; position: relative; z-index: 1 }
.contenido { max-width: 1280px; margin: 0 auto; animation: entra .25s ease }
@keyframes entra { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap }
.cab h1 { margin: 0; font-size: 25px; letter-spacing: -.4px; font-weight: 700 }
.cab p { margin: 4px 0 0; color: var(--suave); font-size: 13px }
h2 { margin: 0 0 14px; font-size: 13px; color: var(--suave); text-transform: uppercase; letter-spacing: .7px; font-weight: 700; display: flex; align-items: center; gap: 8px }
h3 { margin: 18px 0 8px; font-size: 13.5px }

.tarjeta { background: linear-gradient(180deg, #100f17, var(--panel)); border: 1px solid var(--borde); border-radius: var(--r); padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 0 #ffffff05 inset }
.tarjeta.sin-relleno { padding: 0; overflow: hidden }
.dos { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start }
@media (max-width: 1100px) { .dos { grid-template-columns: 1fr } }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }

/* controles */
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--borde); border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap }
.seg button { background: none; border: 0; padding: 7px 13px; border-radius: 8px; cursor: pointer; color: var(--suave); font-weight: 600; font-size: 12.5px; transition: all .15s }
.seg button:hover { color: var(--texto) }
.seg button.activo { background: var(--panel3); color: var(--texto); box-shadow: 0 0 0 1px var(--borde2) inset }
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
input, select { background: var(--panel2); border: 1px solid var(--borde); border-radius: 10px; padding: 9px 12px; outline: none; transition: border-color .15s, box-shadow .15s }
input:focus, select:focus { border-color: #8e7cff99; box-shadow: 0 0 0 3px #8e7cff1f }
input::placeholder { color: var(--tenue) }
.buscar { position: relative }
.buscar svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tenue); width: 16px; height: 16px }
.buscar input { padding-left: 34px; width: 250px }
label.campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--suave); font-weight: 600; margin-bottom: 12px }

.boton { display: inline-flex; align-items: center; gap: 8px; justify-content: center; background: linear-gradient(180deg, #9a8aff, #7d6af5); border: 0; color: #fff; padding: 9px 16px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 13px; box-shadow: 0 4px 14px #8e7cff30; transition: filter .15s, transform .1s }
.boton:hover { filter: brightness(1.08) }
.boton:active { transform: translateY(1px) }
.boton:disabled { opacity: .4; cursor: default; box-shadow: none }
.boton.sec { background: var(--panel2); border: 1px solid var(--borde2); color: var(--texto); box-shadow: none }
.boton.sec:hover { background: var(--panel3) }
.boton.peligro { background: linear-gradient(180deg, #ff7a8a, #f05468); box-shadow: 0 4px 14px #ff657730 }
.boton.fantasma { background: none; border: 1px solid #ff657740; color: var(--rojo); box-shadow: none }
.boton.excel { background: linear-gradient(180deg, #1f7a4b, #17603b); box-shadow: 0 4px 14px #17603b40 }
.boton.chico { padding: 6px 11px; font-size: 12px; border-radius: 8px }
.acciones { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap }
.pista { color: var(--suave); font-size: 12.5px; line-height: 1.55; margin: 0 0 10px }
.oculto { display: none !important }

/* interruptor */
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 13.5px }
.switch input { display: none }
.switch i { width: 38px; height: 22px; border-radius: 99px; background: var(--panel3); border: 1px solid var(--borde2); position: relative; transition: background .2s; flex: none }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #c9c6d6; transition: transform .2s }
.switch input:checked + i { background: var(--marca); border-color: var(--marca) }
.switch input:checked + i::after { transform: translateX(16px); background: #fff }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; margin-bottom: 16px }
.kpi { background: linear-gradient(180deg, #110f19, var(--panel)); border: 1px solid var(--borde); border-radius: var(--r); padding: 16px 17px; position: relative; overflow: hidden }
.kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: var(--c, var(--marca)); opacity: .07 }
.kpi .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--marca)) 16%, transparent); color: var(--c, var(--marca)); margin-bottom: 12px }
.kpi .ico svg { width: 16px; height: 16px }
.kpi span { color: var(--suave); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px }
.kpi b { display: block; font-size: 21px; margin-top: 4px; letter-spacing: -.6px; font-variant-numeric: tabular-nums }
.kpi small { color: var(--tenue); font-size: 12px }
.kpi small.sube { color: var(--verde) }
.kpi small.baja { color: var(--rojo) }

/* gráfico */
.leyenda { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--suave); margin: -4px 0 12px; flex-wrap: wrap }
.leyenda span { display: inline-flex; align-items: center; gap: 6px }
.leyenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block }
.grafico { display: flex; align-items: flex-end; gap: 10px; height: 220px; padding-top: 10px; overflow-x: auto }
.barra { flex: 1; min-width: 36px; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100% }
.pila { width: 100%; max-width: 40px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 7px; overflow: hidden; gap: 2px }
.pila div { width: 100%; border-radius: 3px }
.barra small { font-size: 10.5px; color: var(--tenue); white-space: nowrap }
.barra em { font-size: 10.5px; font-style: normal; color: var(--suave) }

/* listas */
.lista .item { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid #ffffff07 }
.lista .item:first-child { border-top: 0; padding-top: 2px }
.lista .que { flex: 1; min-width: 0 }
.lista .que small { display: block; color: var(--tenue); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.vacio { color: var(--tenue); padding: 16px 0; text-align: center; font-size: 13px }
.avatar { width: 30px; height: 30px; border-radius: 9px; background: var(--panel3); display: grid; place-items: center; font-weight: 800; font-size: 12px; color: var(--marca2); flex: none }

/* tabla */
.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px }
.tabla th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--tenue); padding: 11px 8px; background: #0f0e16; position: sticky; top: 0; z-index: 1; white-space: nowrap; border-bottom: 1px solid var(--borde); font-weight: 700 }
.tabla td { padding: 9px 8px; border-top: 1px solid #ffffff06; white-space: nowrap }
.tabla td small { display: block; color: var(--tenue); font-size: 11px; margin-top: 1px }
.tabla .num { text-align: right }
.tabla tr[data-id]:hover td, .tabla tr[data-nombre]:hover td { background: #ffffff04 }
.tabla.cmds td { white-space: normal; vertical-align: top; color: var(--suave); padding: 10px 8px }
.tabla.cmds td:first-child { white-space: nowrap; width: 1% }
.scroll { max-height: calc(100vh - 200px); overflow: auto }
tr[data-id] td:first-child { box-shadow: inset 3px 0 0 var(--fila, transparent) }
tr.e-pendiente { --fila: #6d6a80 }
tr.e-en_proceso { --fila: var(--amarillo) }
tr.e-completado { --fila: var(--verde) }
tr.e-cancelado { --fila: var(--rojo) }
tr.e-cancelado td { color: #7c6a72 }

.estado { border-radius: 99px; padding: 5px 10px; font-weight: 700; font-size: 12px; cursor: pointer; background: var(--panel2); border: 1px solid var(--borde2) }
.estado.pendiente { color: #c9c6d6 }
.estado.en_proceso { color: var(--amarillo); border-color: #f2c14a3a; background: #f2c14a0d }
.estado.completado { color: var(--verde); border-color: #45d4833a; background: #45d4830d }
.estado.cancelado { color: var(--rojo); border-color: #ff65773a; background: #ff65770d }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--borde2); background: var(--panel2); color: var(--suave) }
.pill.si { color: var(--verde); border-color: #45d4833a; background: #45d4830d }
.pill.no { color: var(--naranja); border-color: #ffad7a30; background: #ffad7a0a }
button.pill { cursor: pointer }
.monto { width: 74px; text-align: right; padding: 5px 8px; font-variant-numeric: tabular-nums; background: transparent; border-color: transparent }
.monto:hover { border-color: var(--borde2) }
.monto.manual { color: var(--marca2); border-color: #8e7cff55; background: #8e7cff0d }
.pct { width: 70px; text-align: right; padding: 6px 8px }
.pct.manual { color: var(--marca2); border-color: #8e7cff55 }
.icono-b { background: none; border: 0; cursor: pointer; color: var(--tenue); padding: 5px; border-radius: 7px; display: grid; place-items: center }
.icono-b:hover { color: var(--rojo); background: #ff65770f }
.debe { color: var(--naranja); font-weight: 700 }
.etq { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: #ffffff0a; color: var(--tenue); font-weight: 600 }

/* ajustes */
.socio { display: grid; grid-template-columns: 1.3fr 96px 1.4fr; gap: 8px; margin-bottom: 8px; align-items: center }
.socio input { min-width: 0 }
.ejemplo { background: var(--panel2); border: 1px dashed var(--borde2); border-radius: 11px; padding: 12px 14px; margin: 8px 0 12px; font-size: 13px; color: var(--suave); line-height: 1.6 }
.ejemplo b { color: var(--texto) }
.ruta { word-break: break-all; font-size: 12.5px; background: var(--panel2); padding: 10px 12px; border-radius: 10px; color: var(--suave); margin: 0 }
details.mas { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 12px }
details.mas summary { cursor: pointer; color: var(--suave); font-size: 13px }
details.mas input { width: 100%; margin-top: 10px }
.lista-equipo { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; margin-top: 10px; padding-right: 2px }
details.mas .lista-equipo { margin-top: 10px }
.persona-fila { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; background: var(--panel2); border: 1px solid transparent; transition: border-color .15s }
.persona-fila:hover { border-color: var(--borde2) }
.persona-fila .nom { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.persona-fila .nom small { display: block; font-weight: 500; color: var(--tenue); font-size: 11px }
.persona-fila .boton { flex: none }
.pasos-uso { margin: 0; padding: 0; list-style: none; counter-reset: p }
.pasos-uso li { counter-increment: p; position: relative; padding: 0 0 14px 40px; color: var(--suave); line-height: 1.5 }
.pasos-uso li::before { content: counter(p); position: absolute; left: 0; top: -2px; width: 26px; height: 26px; border-radius: 8px; background: #8e7cff1f; color: var(--marca2); display: grid; place-items: center; font-weight: 800; font-size: 12px }
.pasos-uso b { color: var(--texto) }

/* conexión */
.paso { position: relative; padding: 2px 0 20px 48px; border-left: 2px solid var(--borde); margin-left: 16px }
.paso:last-child { border-color: transparent; padding-bottom: 0 }
.paso::before { content: attr(data-n); position: absolute; left: -17px; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--panel2); border: 2px solid var(--borde2); display: grid; place-items: center; font-weight: 800; color: var(--suave) }
.paso.hecho::before { content: "✓"; background: var(--verde); border-color: var(--verde); color: #060609 }
.paso h3 { margin: 4px 0 4px }
.paso p { color: var(--suave); margin: 4px 0 10px; line-height: 1.5 }
.fila-token { display: flex; gap: 8px }
.fila-token input { flex: 1 }
.error { color: var(--rojo); font-size: 12.5px; min-height: 1em; margin: 8px 0 0 }
.servidor { display: flex; gap: 11px; align-items: center; background: var(--panel2); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; margin-top: 10px }
.servidor img, .servidor .ini { width: 34px; height: 34px; border-radius: 10px; background: var(--marca); display: grid; place-items: center; font-weight: 800 }
.servidor small { color: var(--tenue); display: block; font-size: 11.5px; margin-top: 2px }
.log { margin: 0; max-height: 280px; overflow: auto; font-size: 11.5px; color: var(--tenue); white-space: pre-wrap; font-family: "Cascadia Code", Consolas, monospace; line-height: 1.6 }

/* diálogos y avisos propios (nada de ventanas de Windows) */
.capa { position: fixed; inset: 0; background: #03030699; backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 50; animation: aparece .15s ease }
@keyframes aparece { from { opacity: 0 } }
.dialogo { width: min(440px, calc(100vw - 40px)); background: linear-gradient(180deg, #15131e, #0e0d14); border: 1px solid var(--borde2); border-radius: 18px; padding: 24px; box-shadow: 0 30px 80px #000c; animation: sube .2s ease }
.dialogo.ancho { width: min(560px, calc(100vw - 40px)) }
@keyframes sube { from { transform: translateY(10px) scale(.98); opacity: 0 } }
.dialogo .ico-d { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #8e7cff1f; color: var(--marca2); margin-bottom: 14px }
.dialogo .ico-d.rojo { background: #ff65771a; color: var(--rojo) }
.dialogo h3 { margin: 0 0 6px; font-size: 17px }
.dialogo p { margin: 0; color: var(--suave); line-height: 1.55 }
.dialogo .acciones { justify-content: flex-end; margin-top: 22px }
.dialogo form { margin-top: 16px }
.dialogo .rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px }
.dialogo .rejilla .ancho { grid-column: 1 / -1 }
.avisos { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; z-index: 60 }
.aviso { display: flex; align-items: center; gap: 10px; background: #16141f; border: 1px solid var(--borde2); border-radius: 12px; padding: 11px 15px; font-size: 13px; box-shadow: 0 12px 30px #000a; animation: sube .2s ease }
.aviso svg { color: var(--verde) }
.aviso.mal svg { color: var(--rojo) }

::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: #ffffff14; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box }
::-webkit-scrollbar-thumb:hover { background-color: #ffffff26 }
::-webkit-scrollbar-corner { background: transparent }

/* ajustes simples */
.precios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px }
.precios input { width: 100% }
.reparto { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0 14px; align-items: end }
.socios-iguales { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px }
.con-sufijo { position: relative }
.con-sufijo input { width: 100%; padding-right: 30px; font-size: 16px; font-weight: 700 }
.con-sufijo span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--suave); font-weight: 700 }
/* tabla de pedidos editable */
.sel { padding: 5px 6px; font-size: 12px; max-width: 128px }
.quien { width: 108px; padding: 5px 7px; font-size: 12px; text-transform: uppercase }
.tabla .monto { background: var(--panel2); border-color: var(--borde) }
.tabla .pct { width: 54px; padding: 5px 6px }
#tablaPedidos td, #tablaPedidos th { padding-left: 6px; padding-right: 6px }
#tablaPedidos .monto { width: 66px }
#tablaPedidos .estado { font-size: 11.5px; padding: 4px 6px; max-width: 170px }
#tablaPedidos td:nth-child(2) { max-width: 110px; overflow: hidden; text-overflow: ellipsis }
/* ---------- pedidos: filas que se vuelven tarjetas al achicar ---------- */
.leyenda-reparto { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--suave); margin: -6px 0 12px }
.leyenda-reparto span { display: inline-flex; align-items: center; gap: 6px }
.leyenda-reparto i { width: 9px; height: 9px; border-radius: 3px; display: inline-block }
.leyenda-reparto .pista-l { color: var(--tenue); margin-left: auto }
.lista-pedidos { container-type: inline-size; display: flex; flex-direction: column; gap: 8px }
.pedido {
  display: grid; align-items: center; gap: 10px 12px;
  grid-template-columns: 128px minmax(120px, 1fr) 96px 150px 70px minmax(150px, 1.1fr) auto auto 34px;
  grid-template-areas: "id tipo precio quien pct reparto estado pago borrar";
  background: linear-gradient(180deg, #100f17, var(--panel)); border: 1px solid var(--borde); border-radius: 13px;
  padding: 10px 12px 10px 16px; position: relative; transition: border-color .15s
}
.pedido::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fila, #6d6a80) }
.pedido:hover { border-color: var(--borde2) }
.pedido.e-terminado { --fila: var(--amarillo) }
.pedido.e-completado { --fila: var(--verde) }
.pedido.e-cancelado { --fila: var(--rojo); opacity: .7 }
.c-id { grid-area: id; min-width: 0 } .c-id small { display: block; color: var(--tenue); font-size: 11.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.c-tipo { grid-area: tipo; min-width: 0 } .c-tipo .sel { width: 100%; max-width: none }
.c-precio { grid-area: precio } .c-quien { grid-area: quien } .c-pct { grid-area: pct }
.c-reparto { grid-area: reparto; display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--texto) }
.c-reparto span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap }
.c-reparto i { width: 7px; height: 7px; border-radius: 50%; display: inline-block }
.c-estado { grid-area: estado } .c-pago { grid-area: pago } .c-borrar { grid-area: borrar }

/* campo pequeño con prefijo/sufijo (€ y %) */
.campo-mini { display: flex; align-items: center; background: var(--panel2); border: 1px solid var(--borde); border-radius: 9px; padding: 0 8px; height: 34px; transition: border-color .15s }
.campo-mini:focus-within { border-color: #8e7cff99; box-shadow: 0 0 0 3px #8e7cff1f }
.campo-mini span { color: var(--tenue); font-size: 12px; font-weight: 700 }
.campo-mini input { border: 0; background: transparent; box-shadow: none !important; padding: 0 4px; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; height: 100% }
.campo-mini input.manual { color: var(--marca2) }
.c-pct input { text-align: right }

/* estado: tres botones claros */
.estados { display: inline-flex; max-width: 100%; min-width: 0; background: var(--panel2); border: 1px solid var(--borde); border-radius: 11px; padding: 3px; gap: 2px }
.estados button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--tenue); padding: 6px 10px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 12px; white-space: nowrap; transition: background .15s, color .15s }
.estados button:hover { color: var(--texto); background: #ffffff08 }
.estados button.activo.pendiente { background: #9b98aa26; color: #e3e1ec }
.estados button.activo.terminado { background: #f2c14a24; color: var(--amarillo) }
.estados button.activo.completado { background: #45d48324; color: var(--verde) }
.estados .pill { margin-right: 4px }

/* interruptor de "le pagué" */
.interruptor { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--borde2); background: var(--panel2); color: var(--suave); border-radius: 99px; padding: 5px 12px 5px 6px; cursor: pointer; font-weight: 700; font-size: 12px; white-space: nowrap; transition: all .15s }
.interruptor i { width: 30px; height: 18px; border-radius: 99px; background: var(--panel3); border: 1px solid var(--borde2); position: relative; flex: none; transition: background .2s }
.interruptor i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #8e89a5; transition: transform .2s, background .2s }
.interruptor.on { color: var(--verde); border-color: #45d4833a; background: #45d4830f }
.interruptor.on i { background: var(--verde); border-color: var(--verde) }
.interruptor.on i::after { transform: translateX(12px); background: #fff }
.interruptor:disabled { opacity: .35; cursor: default }

/* botón "quién lo hizo" */
.elegir-quien { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 34px; padding: 0 10px 0 5px; border-radius: 9px; border: 1px solid var(--borde); background: var(--panel2); color: var(--texto); cursor: pointer; font-weight: 700; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.elegir-quien:hover { border-color: var(--borde2); background: var(--panel3) }
.elegir-quien.vacio-q { color: var(--tenue); padding-left: 10px; border-style: dashed; font-weight: 600 }
.elegir-quien svg { width: 15px; height: 15px }
.avatar.mini { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; flex: none }

/* selector flotante de personas */
.selector { position: fixed; z-index: 70; background: linear-gradient(180deg, #17151f, #100f17); border: 1px solid var(--borde2); border-radius: 14px; box-shadow: 0 20px 50px #000c; overflow: hidden; animation: sube .15s ease }
.selector-buscar { position: relative; border-bottom: 1px solid var(--borde) }
.selector-buscar svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--tenue) }
.selector-buscar input { width: 100%; border: 0; background: transparent; padding: 12px 12px 12px 34px; box-shadow: none !important; border-radius: 0 }
.selector-lista { max-height: 300px; overflow: auto; padding: 6px }
.selector .grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--tenue); padding: 8px 8px 4px; font-weight: 700 }
.selector .opcion { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--texto); padding: 7px 8px; border-radius: 9px; cursor: pointer; text-align: left }
.selector .opcion:hover { background: #ffffff0a }
.selector .opcion .nom { flex: 1; font-weight: 700; font-size: 13px }
.selector .opcion .nom small { display: block; font-weight: 500; color: var(--tenue); font-size: 11px }
.selector .opcion.elegida { background: #8e7cff1a } .selector .opcion.elegida svg { color: var(--marca2) }
.selector .opcion.nueva { color: var(--marca2) } .selector .opcion.quitar { color: var(--rojo) }
.selector .opcion svg { width: 16px; height: 16px }

/* ventana mediana: dos líneas por pedido */
@container (max-width: 1180px) {
  .pedido { grid-template-columns: 100px minmax(90px, 1fr) 88px minmax(100px, 1fr) 62px 122px 34px;
    grid-template-areas: "id tipo precio quien pct pago borrar" "reparto reparto estado estado estado estado estado"; }
  .c-estado { justify-self: end; max-width: 100% }
  .c-pago { justify-self: stretch; justify-content: flex-start }
}
/* ventana chica: tarjeta */
@container (max-width: 640px) {
  .pedido { grid-template-columns: 1fr 1fr 34px; grid-template-areas: "id id borrar" "tipo tipo tipo" "precio pct pct" "quien quien quien" "reparto reparto reparto" "estado estado estado" "pago pago pago"; }
  .c-estado { justify-self: stretch; display: flex } .c-estado button { flex: 1; justify-content: center }
  .c-pago { justify-self: start }
}
@container (max-width: 470px) { .estados button span { display: none } }

/* ---------- el resto de pantallas al achicar la ventana ---------- */
.precios { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) }
@media (max-width: 1250px) { .reparto { grid-template-columns: 1fr } }
@media (max-width: 1000px) {
  .lado { width: 70px; padding: 18px 10px }
  .marca div, nav button span, .nota-excel, .estado-bot .txt { display: none }
  .marca { justify-content: center; padding: 0 }
  nav button { justify-content: center; padding: 11px 0; font-size: 0 }
  nav button svg { width: 20px; height: 20px }
  .estado-bot { justify-content: center; padding: 10px 0 }
  .boton.excel { font-size: 0; padding: 10px 0; gap: 0 }
  .boton.excel svg { width: 18px; height: 18px }
  main { padding: 24px 20px 40px }
  .fila2, .socios-iguales { grid-template-columns: 1fr }
  .buscar input { width: 180px }
  .leyenda-reparto .pista-l { margin-left: 0 }
}
.enlace-cliente { border: 0; background: none; color: inherit; padding: 0; cursor: pointer; font: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis }
.enlace-cliente:hover { color: var(--marca2) }

/* ===== v1.9: colores por estado, selectores iguales y sin encimarse ===== */
:root { --pend: #6f8cff; --pago: #f2c14a; --comp: #45d483 }
/* números sin flechitas */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
input[type=number] { -moz-appearance: textfield }

/* cada pedido pintado según su estado */
.pedido.e-pendiente { --fila: var(--pend); background: linear-gradient(90deg, #6f8cff12, #0d0c13 45%); border-color: #6f8cff2e }
.pedido.e-terminado { --fila: var(--pago); background: linear-gradient(90deg, #f2c14a14, #0d0c13 45%); border-color: #f2c14a33 }
.pedido.e-completado { --fila: var(--comp); background: linear-gradient(90deg, #45d48312, #0d0c13 45%); border-color: #45d4832e }
.pedido::before { width: 4px }
.estados button.activo.pendiente { background: #6f8cff26; color: #a9bbff }
.estado.pendiente { color: #a9bbff; border-color: #6f8cff3a; background: #6f8cff0d }
#filtroEstado [data-e="pendiente"].activo { color: #a9bbff }
#filtroEstado [data-e="terminado"].activo { color: var(--pago) }
#filtroEstado [data-e="completado"].activo { color: var(--comp) }

/* todo lo que se elige con el mismo estilo */
.elegir { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 34px; padding: 0 10px 0 6px; border-radius: 9px; border: 1px solid var(--borde); background: var(--panel2); color: var(--texto); cursor: pointer; font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .15s, background .15s }
.elegir:hover { border-color: var(--borde2); background: var(--panel3) }
.elegir.vacio-q { color: var(--tenue); padding-left: 10px; border-style: dashed; font-weight: 600 }
.elegir svg { width: 15px; height: 15px; flex: none }
.elegir .emo { width: 24px; height: 24px; border-radius: 7px; background: var(--panel3); display: grid; place-items: center; font-size: 13px; flex: none }
.elegir .flecha { margin-left: auto; color: var(--tenue); font-size: 11px; padding-left: 6px }
.selector .emo-av { font-size: 14px; background: var(--panel3) }

/* opciones en formularios: fichas en vez de menú de Windows */
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip input { display: none }
.chip span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--borde2); background: var(--panel2); color: var(--suave); font-weight: 700; font-size: 12.5px; cursor: pointer; transition: all .15s }
.chip span:hover { color: var(--texto) }
.chip input:checked + span { background: #8e7cff22; border-color: #8e7cff80; color: var(--texto) }

/* distribución: por defecto dos líneas; una sola línea solo si de verdad cabe */
.pedido { grid-template-columns: 112px minmax(110px, 1fr) 92px minmax(120px, 1fr) 64px 132px 34px;
  grid-template-areas: "id tipo precio quien pct pago borrar" "reparto reparto estado estado estado estado estado" }
.c-estado { justify-self: end; max-width: 100% }
.c-pago { justify-self: stretch; justify-content: flex-start }
@container (min-width: 1400px) {
  .pedido { grid-template-columns: 120px minmax(130px, 1fr) 96px minmax(140px, 1fr) 66px minmax(170px, 1fr) max-content 132px 34px;
    grid-template-areas: "id tipo precio quien pct reparto estado pago borrar" }
  .c-estado { justify-self: start }
}
@container (max-width: 1180px) { .pedido { grid-template-columns: 100px minmax(96px, 1fr) 88px minmax(104px, 1fr) 62px 132px 34px } }
@container (max-width: 640px) {
  .pedido { grid-template-columns: 1fr 1fr 34px; grid-template-areas: "id id borrar" "tipo tipo tipo" "precio pct pct" "quien quien quien" "reparto reparto reparto" "estado estado estado" "pago pago pago" }
  .c-estado { justify-self: stretch; display: flex } .c-estado button { flex: 1; justify-content: center }
  .c-pago { justify-self: start }
}
.campo-bloque { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--suave); font-weight: 600; margin-bottom: 14px }
.campo-bloque .seg { align-self: flex-start }

/* ===== v1.10: sin emojis (puntos de color) y sin "le pagué" ===== */
.punto-e { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--tenue) }
.punto-e.pendiente { background: var(--pend) } .punto-e.terminado { background: var(--pago) } .punto-e.completado { background: var(--comp) } .punto-e.cancelado { background: var(--rojo) }
.lista .item > .punto-e { margin: 0 4px 0 2px; width: 9px; height: 9px }
.seg button { display: inline-flex; align-items: center; gap: 7px }
.estados button:not(.activo) .punto-e { opacity: .55 }
.elegir .flecha svg { width: 14px; height: 14px }
.selector .emo-av { font-size: 10px; color: var(--marca2) }
.pedido { grid-template-columns: 112px minmax(110px, 1fr) 92px minmax(120px, 1fr) 64px 34px;
  grid-template-areas: "id tipo precio quien pct borrar" "reparto reparto reparto estado estado estado" }
@container (min-width: 1180px) {
  .pedido { grid-template-columns: 120px minmax(120px, 1fr) 92px minmax(130px, 1fr) 64px minmax(160px, 1fr) max-content 34px;
    grid-template-areas: "id tipo precio quien pct reparto estado borrar" }
  .c-estado { justify-self: end }
}
@container (max-width: 900px) { .pedido { grid-template-columns: 100px minmax(96px, 1fr) 86px minmax(104px, 1fr) 62px 34px } }
@container (max-width: 640px) {
  .pedido { grid-template-columns: 1fr 1fr 34px; grid-template-areas: "id id borrar" "tipo tipo tipo" "precio pct pct" "quien quien quien" "reparto reparto reparto" "estado estado estado" }
}
.socios-iguales .id-discord { margin-top: 6px; font-size: 12px; font-variant-numeric: tabular-nums }

/* ===== v1.13: celular (tarjeta en Conexión y la misma app abierta desde el iPhone) ===== */
.estado-remoto { display: flex; align-items: center; gap: 8px; margin: 12px 0 0 }
.estado-remoto .punto { background: var(--amarillo) }
.estado-remoto.ok .punto { background: var(--verde); box-shadow: 0 0 0 3px #45d48322 }
.celular { display: flex; gap: 18px; align-items: center; margin: 14px 0 10px; flex-wrap: wrap }
.qr { width: 150px; height: 150px; border-radius: 14px; background: #fff; padding: 8px; flex: none; display: grid; place-items: center }
.qr:empty::after { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #d8d4ea; border-top-color: var(--marca); animation: gira 1s linear infinite }
@keyframes gira { to { transform: rotate(360deg) } }
.qr svg { width: 100%; height: 100%; display: block }
.celular-pasos { flex: 1; min-width: 200px }
.celular-pasos .pasos-uso li { padding-bottom: 10px; font-size: 13px }

/* celular: barra de pestañas abajo, todo a lo ancho */
@media (max-width: 700px) {
  html.web, html.web body { height: 100%; overscroll-behavior: none }
  html.web body { flex-direction: column; -webkit-text-size-adjust: 100% }
  html.web .lado { order: 2; width: 100%; height: auto; flex-direction: row; align-items: center; gap: 6px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--borde); background: #09080df2; backdrop-filter: blur(12px) }
  html.web .marca { display: none }
  html.web nav { flex-direction: row; flex: 1; gap: 2px }
  html.web nav button { flex: 1; flex-direction: column; gap: 3px; padding: 7px 0 5px; font-size: 10.5px; justify-content: center; border-radius: 10px }
  html.web nav button span { display: block !important }
  html.web nav button svg { width: 21px; height: 21px }
  html.web nav button.activo { background: #8e7cff1f }
  html.web .pie-lado { margin: 0; flex-direction: row; gap: 4px; flex: none }
  html.web .pie-lado .estado-bot, html.web .pie-lado .nota-excel { display: none }
  html.web .boton.excel { width: 46px; height: 46px; padding: 0; font-size: 0; gap: 0; border-radius: 12px }
  html.web main { order: 1; flex: 1; min-height: 0; padding: calc(14px + env(safe-area-inset-top)) 14px 26px; -webkit-overflow-scrolling: touch }
  html.web .cab { margin-bottom: 14px; align-items: flex-start }
  html.web .cab h1 { font-size: 22px }
  html.web .cab p { display: none }
  html.web .filtros { width: 100% }
  html.web .filtros .seg { width: 100%; justify-content: space-between }
  html.web .filtros .seg button { flex: 1; justify-content: center; padding: 8px 6px }
  html.web .buscar { flex: 1 }
  html.web .buscar input { width: 100% }
  html.web .kpis { grid-template-columns: 1fr 1fr; gap: 10px }
  html.web .kpi { padding: 13px }
  html.web .tarjeta { padding: 15px; border-radius: 13px }
  html.web .fila2, html.web .socios-iguales, html.web .reparto { grid-template-columns: 1fr }
  html.web .precios { grid-template-columns: 1fr 1fr }
  html.web .avisos { left: 14px; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)) }
  html.web .dialogo .rejilla { grid-template-columns: 1fr }
  html.web input, html.web select { font-size: 16px } /* iPhone: sin zoom al escribir */
  html.web .elegir { height: 40px }
  html.web .pedido input { height: 40px }
  html.web .estados button span { display: inline !important; font-size: 11.5px; white-space: nowrap }
  html.web .estados button { padding: 9px 4px; gap: 5px }
  html.web .filtros .seg button { font-size: 11.5px; white-space: nowrap; gap: 5px }
}
/* aviso arriba en el celular: PC apagada o sin internet */
.barra-web { display: none; position: fixed; z-index: 40; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 99px; font-size: 12px; font-weight: 600; background: #2a0f16f2; border: 1px solid #ff657755; color: #ffc2ca; box-shadow: 0 8px 24px #0008; backdrop-filter: blur(10px) }
html.web .barra-web { display: flex }
.barra-web.oculta { display: none !important }
.barra-web .punto { background: var(--rojo) }html.web .pedido { content-visibility: auto; contain-intrinsic-size: auto 280px }