/* =====================================================================
   Bodas · hoja de estilos única
   Lenguaje visual de Fligo (tomado de Mi Energía v47) cambiando solo el
   color del cliente. Toda pantalla usa estas piezas; nada de estilos sueltos.
   ===================================================================== */

:root{
  /* color del cliente: verde salvia (no hay marca; se cambia aquí y ya) */
  --cliente:#4F7A5B; --cliente-h:#436A4E; --cliente-2:#45704F;
  --cliente-suave:#E9F1EA; --cliente-borde:#BFD5C4; --cliente-ink:#1F3A28;

  /* títulos y texto: marino de Fligo */
  --navy:#1E3D6C; --navy-h:#17325A;

  /* superficie cálida */
  --fondo:#F6F6F3; --sup:#FFFFFF; --sup2:#F1F0EC; --sup3:#E7E5DF;
  --borde:#DDDBD4; --borde2:#EAE8E2;
  --texto:#1F2732; --texto2:#4A5260; --texto3:#878C95;

  /* estados: una sola paleta para etiquetas y puntos */
  --ok:#1E8A5C; --warn:#B27C1B; --bad:#C0442E; --info:#1F6FA3; --neutro:#6C7A80;
  --ok-t:#166A46; --warn-t:#8A5F10; --bad-t:#A33823; --info-t:#1D5E8A; --neutro-t:#54646B;
  --ok-bg:#E4F3EB; --warn-bg:#FBF1DA; --bad-bg:#FAE8E3; --info-bg:#E5F1F9; --neutro-bg:#EFEFEC;

  --r:14px; --r2:10px;
  --sombra:0 1px 2px rgba(15,42,82,.05), 0 6px 20px rgba(15,42,82,.06);
  --sombra-alta:0 4px 10px rgba(15,42,82,.08), 0 18px 44px rgba(15,42,82,.14);

  /* barra de navegación en el color del cliente */
  --barra:var(--cliente); --barra-2:var(--cliente-2);
  --barra-tinta:#FFFFFF; --barra-tinta2:rgba(255,255,255,.80); --barra-tinta3:rgba(255,255,255,.56);
  --barra-linea:rgba(255,255,255,.18); --barra-hover:rgba(255,255,255,.14);
  --barra-activo:#FFFFFF; --barra-activo-tinta:var(--cliente-ink);

  /* medidas fijas (para que las pantallas hermanas no se muevan) */
  --fila:48px; --cab:38px; --kpi-alto:96px; --filtros-alto:44px; --titulo-alto:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{
  font-family:-apple-system,"Segoe UI","Avenir Next",Roboto,"Helvetica Neue",sans-serif;
  background:var(--fondo);color:var(--texto);font-size:14.5px;line-height:1.55;
}
button{font-family:inherit}
a{color:var(--info)}
::selection{background:rgba(79,122,91,.25)}
.num{font-variant-numeric:tabular-nums}

/* ================= layout ================= */
.app{display:flex;min-height:100vh}
.lateral{
  width:236px;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  background:linear-gradient(180deg,var(--barra) 0%,var(--barra-2) 100%);box-shadow:1px 0 0 rgba(0,0,0,.06);
}
.marca{padding:22px 18px 14px;color:var(--barra-tinta)}
.marca b{display:block;font-size:16px;font-weight:700;letter-spacing:-.2px;line-height:1.25}
.marca span{display:block;font-size:11.5px;color:var(--barra-tinta2);margin-top:3px}
.navlat{flex:1;padding:10px 12px;overflow-y:auto}
.navlat button{
  display:flex;align-items:center;gap:11px;width:100%;border:none;background:none;
  color:var(--barra-tinta2);font-size:13.5px;font-weight:600;padding:10px 12px;border-radius:var(--r2);
  cursor:pointer;margin-bottom:3px;text-align:left;position:relative;transition:background .12s,color .12s;
}
.navlat button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.navlat button:hover{background:var(--barra-hover);color:var(--barra-tinta)}
.navlat button.activo{background:var(--barra-activo);color:var(--barra-activo-tinta);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.10)}
.navlat button.activo svg{color:var(--cliente)}
.nav-grupo{font-size:9.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--barra-tinta3);padding:12px 12px 6px}
.nnav{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;min-width:19px;height:19px;padding:0 6px;border-radius:6px;background:rgba(255,255,255,.3);color:var(--barra-tinta);display:grid;place-items:center;flex-shrink:0}
.navlat button.activo .nnav{background:var(--cliente);color:#fff}
.pie-lat{padding:14px 14px 16px;border-top:1px solid var(--barra-linea)}
.pie-lat small{color:var(--barra-tinta3);font-size:10.5px;line-height:1.4;display:block}

.contenido{flex:1;min-width:0}
main{max-width:1120px;margin:0 auto;padding:30px 36px 56px}

/* submenú de la sección: línea subrayada debajo del título */
.submenu{display:flex;gap:22px;border-bottom:1px solid var(--borde2);margin:0 0 20px;overflow-x:auto;scrollbar-width:none}
.submenu::-webkit-scrollbar{display:none}
.submenu button{flex-shrink:0;border:none;background:none;font-size:13.5px;font-weight:600;color:var(--texto2);padding:9px 2px 11px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.submenu button:hover{color:var(--texto)}
.submenu button.activo{color:var(--navy);border-bottom-color:var(--cliente)}
.submenu .n{font-size:10.5px;font-weight:700;background:var(--sup2);color:var(--texto2);border-radius:999px;padding:1px 7px}
.submenu button.activo .n{background:var(--cliente-suave);color:var(--cliente-ink)}

/* ================= tipografía ================= */
.cab-pag{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;min-height:var(--titulo-alto);margin-bottom:18px}
.cab-pag h2{font-size:23px;font-weight:700;letter-spacing:-.4px;color:var(--navy);line-height:1.2}
.cab-pag p,.pista{color:var(--texto3);font-size:12.5px;margin-top:2px}
.cab-pag .acc-pag{display:flex;gap:9px;flex-shrink:0}
h3{font-size:13px;font-weight:700;margin:26px 0 10px;color:var(--texto2);letter-spacing:.1px}
h3 .n{background:var(--sup3);color:var(--texto2);font-weight:700;font-size:11px;border-radius:999px;padding:1px 9px;margin-left:8px;display:inline-block;vertical-align:1px}
h3 .pista{font-weight:500;margin-left:8px}

/* ================= tarjetas y paneles ================= */
.panel{background:var(--sup);border:1px solid var(--borde2);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sombra)}
.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px}
.grid2>div{min-width:0}

/* indicadores: mismo número de tarjetas y alto fijo en pantallas hermanas */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.kpi{background:var(--sup);border:1px solid var(--borde2);border-radius:var(--r2);padding:16px 18px 14px;box-shadow:var(--sombra);min-height:var(--kpi-alto);display:flex;flex-direction:column;justify-content:center}
.kpi b{display:block;font-size:27px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.6px;color:var(--navy);line-height:1.15;white-space:nowrap}
.kpi b small{font-size:14px;color:var(--texto3);font-weight:600;letter-spacing:0;margin-left:2px}
.kpi span{font-size:11.5px;color:var(--texto2);font-weight:500;display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.link{cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}
.kpi.link:hover{transform:translateY(-2px);border-color:var(--cliente);box-shadow:0 6px 18px rgba(15,42,82,.12)}
.kpi.alerta b{color:var(--bad-t)}

/* "Para hoy": tarjetas que llevan a la lista ya filtrada */
.hoy{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}
.et-card{background:var(--sup);border:1px solid var(--borde2);border-radius:var(--r);box-shadow:var(--sombra);
  padding:18px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:7px;
  transition:border-color .13s,transform .13s,box-shadow .13s;font-family:inherit;min-height:150px}
.et-card:hover{border-color:var(--cliente);transform:translateY(-2px);box-shadow:0 3px 6px rgba(15,42,82,.07),0 12px 28px rgba(15,42,82,.09)}
.et-card .nom{font-size:14.5px;font-weight:700;color:var(--texto)}
.et-card .cifra{font-size:32px;font-weight:800;color:var(--navy);line-height:1.05;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.et-card .cifra small{font-size:15px;font-weight:600;color:var(--texto3);letter-spacing:0}
.et-card .desc{font-size:12.5px;color:var(--texto3);line-height:1.45}
.et-card .ir{margin-top:auto;padding-top:7px;font-size:12px;font-weight:700;color:var(--cliente-ink)}
.et-card.urgente{border-color:#F0CCC2}
.et-card.urgente .cifra{color:var(--bad-t)}

/* siguiente paso: una sola acción principal */
.sig-paso{display:flex;align-items:center;gap:14px;background:var(--sup);border:1px solid var(--borde2);
  border-left:3px solid var(--cliente);border-radius:var(--r);box-shadow:var(--sombra);padding:15px 18px;margin-top:13px}
.sig-paso .txt{min-width:0}
.sig-paso .et{font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--texto3);margin-bottom:3px}
.sig-paso .qu{font-size:14px;font-weight:600;color:var(--texto);line-height:1.4}
.sig-paso .btn{margin-left:auto;flex-shrink:0}

/* barra de avance (gastado contra presupuesto, confirmados) */
.barra-meta{height:8px;background:var(--sup2);border-radius:4px;overflow:hidden}
.barra-meta i{display:block;height:100%;background:var(--cliente);border-radius:4px;transition:width .3s}
.barra-meta i.warn{background:var(--warn)} .barra-meta i.bad{background:var(--bad)}

/* ================= filtros y chips ================= */
.filtros{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:10px;align-items:center;height:var(--filtros-alto);margin-bottom:12px}
.filtros .chips{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.filtros .chips::-webkit-scrollbar{display:none}
.buscador{position:relative}
.buscador svg{position:absolute;left:13px;top:12px;width:16px;height:16px;stroke:var(--texto3);fill:none;stroke-width:1.8;stroke-linecap:round}
.buscador input{padding-left:38px}
.chip{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;border-radius:999px;height:34px;
  padding:0 14px;font-size:12.5px;font-weight:500;cursor:pointer;border:1px solid var(--borde);
  background:var(--sup);color:var(--texto2);transition:border-color .12s,color .12s;white-space:nowrap}
.chip .n{font-weight:700;font-variant-numeric:tabular-nums}
.chip:hover{color:var(--texto);border-color:var(--texto3)}
.chip.activo{background:var(--cliente-suave);border-color:var(--cliente);color:var(--cliente-ink);font-weight:700}
.pt{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}
.pt-ok{background:var(--ok)} .pt-warn{background:var(--warn)} .pt-bad{background:var(--bad)} .pt-info{background:var(--info)} .pt-neutro{background:var(--neutro)}

/* pestañas en píldora: solo para filtros dentro de una pantalla (Hoy / Próximos) */
.vista-tabs{display:inline-flex;background:var(--sup2);border-radius:999px;padding:3px;gap:2px;height:38px}
.vista-tabs button{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--texto2);padding:0 16px;border-radius:999px;cursor:pointer;white-space:nowrap}
.vista-tabs button.activo{background:var(--sup);color:var(--navy);box-shadow:0 1px 3px rgba(15,42,82,.14)}

/* ================= etiquetas: una sola forma, píldora ================= */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap;border:1px solid transparent;line-height:1.5}
.t-ok{background:var(--ok-bg);color:var(--ok-t)}
.t-warn{background:var(--warn-bg);color:var(--warn-t)}
.t-bad{background:var(--bad-bg);color:var(--bad-t)}
.t-info{background:var(--info-bg);color:var(--info-t)}
.t-neutro{background:var(--neutro-bg);color:var(--neutro-t)}
.t-tipo{background:var(--sup2);color:var(--navy)}

/* ================= botones ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--borde);border-radius:var(--r2);
  height:38px;padding:0 16px;font-size:13px;font-weight:600;cursor:pointer;background:var(--sup);color:var(--texto);transition:background .12s,border-color .12s;box-shadow:0 1px 2px rgba(15,42,82,.05);white-space:nowrap}
.btn:hover{background:var(--sup2)}
.btn.sol{background:var(--cliente);border-color:var(--cliente);color:#fff}
.btn.sol:hover{background:var(--cliente-h);border-color:var(--cliente-h)}
.btn.linea{background:none;border-color:var(--borde);color:var(--texto2);box-shadow:none}
.btn.linea:hover{color:var(--texto);border-color:var(--texto3);background:none}
.btn.peligro{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn.peligro:hover{background:#A63925;border-color:#A63925}
.btn.chico{height:30px;padding:0 12px;font-size:12px;border-radius:8px}
.btn.mas{width:30px;height:30px;padding:0;font-size:16px;font-weight:800;letter-spacing:1px;border-radius:8px;color:var(--texto2);box-shadow:none}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn[disabled]{opacity:.35;pointer-events:none}
.acciones{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}

/* menú "⋯" flotante */
.menu-flot{position:absolute;z-index:200;background:var(--sup);border:1px solid var(--borde);border-radius:12px;box-shadow:var(--sombra-alta);padding:6px;min-width:210px}
.mf-it{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;text-align:left;padding:9px 10px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--texto)}
.mf-it:hover{background:var(--cliente-suave)}
.mf-it.mf-bad{color:var(--bad-t)}
.mf-sep{height:1px;background:var(--borde2);margin:4px 6px}

/* ================= formularios ================= */
input[type=search],input[type=text],input[type=password],input[type=date],input[type=time],input[type=number],input[type=email],input[type=tel],select,textarea{
  width:100%;height:38px;border:1px solid var(--borde);border-radius:var(--r2);padding:0 12px;
  font-family:inherit;font-size:13.5px;background:var(--sup);color:var(--texto)}
textarea{height:auto;min-height:72px;padding:10px 12px;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--texto3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cliente);box-shadow:0 0 0 3px rgba(79,122,91,.22)}
label.f{display:block;font-size:11.5px;font-weight:700;color:var(--texto2);margin:0 0 6px;letter-spacing:.1px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.campos .ancho{grid-column:1/-1}
.seg{display:inline-flex;border:1px solid var(--borde);border-radius:var(--r2);overflow:hidden;height:38px}
.seg button{border:none;background:var(--sup);color:var(--texto2);font-size:13px;font-weight:600;padding:0 14px;cursor:pointer;border-left:1px solid var(--borde)}
.seg button:first-child{border-left:none}
.seg button.activo{background:var(--cliente-suave);color:var(--cliente-ink)}

/* ================= tabla: una sola clase ================= */
.tabla{background:var(--sup);border:1px solid var(--borde2);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.tabla table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.tabla th{height:var(--cab);padding:0 14px;font-size:10.5px;color:var(--texto3);font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:#F8F7F4;text-align:left;white-space:nowrap;vertical-align:middle;border-bottom:1px solid var(--borde2)}
.tabla td{height:var(--fila);padding:0 14px;border-bottom:1px solid var(--borde2);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabla tbody tr:last-child td{border-bottom:none}
.tabla tbody tr{transition:background .1s}
.tabla tbody tr.link{cursor:pointer}
.tabla tbody tr.link:hover td{background:#FAF9F6}
.tabla .nom{font-weight:700;color:var(--texto)}
.tabla .flex{width:auto}                       /* la única columna que puede llevar "…" */
.tabla .num,.tabla th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla .col-tag{width:136px}                   /* etiqueta más ancha + 36 px */
.tabla .col-acc{width:66px;text-align:right}   /* siempre la última: un botón chico o "⋯" */
.tabla td.col-acc{padding-right:14px}
.tabla .sub{display:block;font-size:11.5px;color:var(--texto3);font-weight:500;line-height:1.2}
.tabla .sec{color:var(--texto2)}
.tabla tfoot td{background:#FBFAF8;font-weight:700}

/* en celular la tabla se vuelve tarjeta con las mismas reglas */
.tarjetas{display:none}

/* ================= listas como filas ================= */
.lista{background:var(--sup);border:1px solid var(--borde2);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.fila-c{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 18px;cursor:pointer;border-top:1px solid var(--borde2);transition:background .1s}
.fila-c:first-child{border-top:none}
.fila-c:hover{background:#FAF9F6}
.fila-c .datos{flex:1;min-width:0}
.fila-c .nom{font-weight:700;font-size:14px}
.fila-c .sub{font-size:12.5px;color:var(--texto3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.fila-c .der{display:flex;align-items:center;gap:10px;flex-shrink:0}
.fila-c .der .num{font-weight:700;font-size:13.5px;min-width:88px;text-align:right}
.fila-c input[type=checkbox]{width:18px;height:18px;accent-color:var(--cliente);flex-shrink:0}

/* ================= detalle: pantalla propia con "← Volver" ================= */
.miga{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-4px 0 14px;min-height:var(--titulo-alto)}
.miga button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--borde);background:var(--sup);font-family:inherit;font-size:13.5px;font-weight:600;color:var(--texto2);cursor:pointer;height:38px;padding:0 15px 0 12px;border-radius:9px}
.miga button:hover{border-color:var(--cliente);color:var(--texto)}
.miga button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.miga b{color:var(--navy);font-weight:700;font-size:19px;letter-spacing:-.2px}
.miga .tag{margin-left:2px}
.miga .acc-pag{margin-left:auto;display:flex;gap:9px}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 20px}
.dato{display:flex;flex-direction:column;gap:2px}
.dato span:first-child{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--texto3)}
.dato span:last-child{font-size:14px;font-weight:600;color:var(--texto)}

/* ================= confirmación ================= */
.velo{position:fixed;inset:0;background:rgba(31,39,50,.42);display:none;z-index:70;align-items:center;justify-content:center;padding:20px}
.velo.abierto{display:flex}
.dlg{background:var(--sup);border-radius:var(--r);box-shadow:0 20px 60px rgba(11,31,62,.28);padding:22px 24px;width:100%;max-width:440px;max-height:calc(100vh - 40px);overflow:auto}
.dlg.ancho{max-width:620px}
.dlg h4{font-size:16px;font-weight:700;color:var(--navy);margin:0 0 8px;letter-spacing:-.2px}
.dlg p{font-size:13.5px;color:var(--texto2);line-height:1.55;margin:0 0 20px}
.dlg .acciones{justify-content:flex-end;margin-top:18px}

/* ================= aviso y vacío ================= */
.nota{background:var(--cliente-suave);border:1px solid var(--cliente-borde);border-left:3px solid var(--cliente);border-radius:var(--r2);padding:11px 14px;font-size:12.5px;color:var(--texto2);line-height:1.5}
.nota b{color:var(--texto)}
.vacio{text-align:center;padding:34px 18px;color:var(--texto3);font-size:13px}
.vacio b{display:block;color:var(--texto2);font-size:14px;margin-bottom:4px}

/* ================= mesas ================= */
.plano{background:var(--sup);border:1px solid var(--borde2);border-radius:var(--r);box-shadow:var(--sombra);padding:22px;display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:center}
.mesa{position:relative;display:grid;place-items:center;background:var(--sup2);border:2px solid var(--borde);color:var(--texto);text-align:center;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.mesa.redonda{width:112px;height:112px;border-radius:50%}
.mesa.rect{width:180px;height:84px;border-radius:12px}
.mesa b{display:block;font-size:13px;font-weight:700;line-height:1.1}
.mesa span{display:block;font-size:11.5px;color:var(--texto3);font-variant-numeric:tabular-nums;margin-top:2px}
.mesa:hover,.mesa.sel{border-color:var(--cliente);box-shadow:0 0 0 4px rgba(79,122,91,.18)}
.mesa.llena{border-color:var(--ok);background:var(--ok-bg)}
.mesa.llena span{color:var(--ok-t)}
.mesa.sobra{border-color:var(--bad);background:var(--bad-bg)}
.mesa.sobra span{color:var(--bad-t)}
.silla{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--sup);border:2px solid var(--borde)}
.silla.ocupada{background:var(--cliente);border-color:var(--cliente)}

/* ================= celular ================= */
.barra-inf{display:none}
@media (max-width:1024px){
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .lateral{display:none}
  main{padding:16px 16px 92px}
  .cab-pag{flex-direction:column;align-items:flex-start;gap:8px;min-height:0}
  .cab-pag .acc-pag{width:100%}
  .cab-pag .acc-pag .btn{flex:1}
  .grid2{grid-template-columns:1fr}
  .kpis{gap:9px}
  .kpi b{font-size:23px}
  .filtros{grid-template-columns:1fr;height:auto}
  .campos{grid-template-columns:1fr}
  .sig-paso{flex-direction:column;align-items:stretch}
  .sig-paso .btn{margin-left:0}
  .miga .acc-pag{margin-left:0;width:100%}
  .miga .acc-pag .btn{flex:1}
  .datos{grid-template-columns:1fr 1fr}

  /* tabla → tarjetas, mismas reglas: nombre en negritas, descripción, etiqueta, números, acción al final */
  .tabla table{display:none}
  .tarjetas{display:grid;gap:10px}
  .tarj{background:var(--sup);border:1px solid var(--borde2);border-radius:var(--r);box-shadow:var(--sombra);padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;min-height:56px}
  .tarj .nom{font-weight:700;font-size:14.5px;grid-column:1}
  .tarj .tag{grid-column:2;grid-row:1;justify-self:end}
  .tarj .sub{grid-column:1;font-size:12.5px;color:var(--texto3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tarj .nums{grid-column:1;display:flex;gap:14px;font-size:13px;color:var(--texto2);font-variant-numeric:tabular-nums;margin-top:4px}
  .tarj .nums b{color:var(--texto)}
  .tarj .acc{grid-column:2;grid-row:2/4;align-self:end}

  .barra-inf{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--barra);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 14px rgba(0,0,0,.14);
  }
  .barra-inf button{flex:1;border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;cursor:pointer;color:var(--barra-tinta2);font-family:inherit;min-width:0}
  .barra-inf .bi-ic{position:relative;display:grid;place-items:center;width:52px;height:28px;border-radius:999px;transition:background .15s}
  .barra-inf svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .barra-inf .bi-t{font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .barra-inf button.activo{color:var(--barra-tinta)}
  .barra-inf button.activo .bi-ic{background:var(--barra-activo)}
  .barra-inf button.activo svg{color:var(--barra-activo-tinta)}
  .barra-inf button.activo .bi-t{font-weight:700}
  .bi-pt{position:absolute;top:1px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--bad);border:1.5px solid var(--barra)}
}
@media (min-width:1601px){
  main{max-width:1480px}
  .kpis{grid-template-columns:repeat(6,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ================= mesas: mesa de trabajo ================= */
.taller{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
.bandeja{background:var(--sup);border:1px solid var(--borde2);border-radius:var(--r);box-shadow:var(--sombra);display:flex;flex-direction:column;max-height:calc(100vh - 140px);position:sticky;top:16px;min-width:0}
.bandeja .cab{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--borde2)}
.bandeja .cab b{font-size:13px;color:var(--texto2);flex:1}
.bandeja .cab label{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--texto3);cursor:pointer;white-space:nowrap}
.bandeja .cab input[type=checkbox]{width:16px;height:16px;accent-color:var(--cliente);margin:0}
.bandeja .busca{padding:10px 14px 0}
.bandeja .fchips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 14px}
.bandeja .fsel{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 14px 10px;border-bottom:1px solid var(--borde2)}
.bandeja .fsel select{height:32px;font-size:12px;padding:0 26px 0 9px}
.bandeja .chip{height:30px;padding:0 11px;font-size:12px}
.bandeja .lista-b{flex:1;overflow-y:auto;min-height:120px}
.inv{display:flex;align-items:center;gap:10px;padding:7px 14px;border-top:1px solid var(--borde2);cursor:grab;min-height:52px}
.inv:first-child{border-top:none}
.inv:hover{background:#FAF9F6}
.inv.sel{background:var(--cliente-suave)}
.inv.arrastrando{opacity:.4}
.inv input[type=checkbox]{width:17px;height:17px;accent-color:var(--cliente);flex-shrink:0;margin:0}
.inv .datos{flex:1;min-width:0}
.inv .nom{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv .nom .acomp{font-weight:500;color:var(--texto3)}
.inv .sub{font-size:11.5px;color:var(--texto3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv .tag{flex-shrink:0}
.inv .btn.chico{flex-shrink:0}
.bandeja .pie{padding:10px 14px;border-top:1px solid var(--borde2);display:flex;gap:8px;align-items:center}
.bandeja .pie select{flex:1;min-width:0}
.bandeja .pie .btn{flex-shrink:0}

.plano-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px}
.mesa-c{background:var(--sup);border:1.5px solid var(--borde);border-radius:var(--r);padding:12px 14px 10px;min-height:152px;display:flex;flex-direction:column;cursor:pointer;transition:border-color .12s,box-shadow .12s,background .12s;text-align:left;font-family:inherit;color:var(--texto);min-width:0}
.mesa-c.redonda{border-radius:30px}
.mesa-c:hover{border-color:var(--cliente)}
.mesa-c.llena{border-color:var(--ok)}
.mesa-c.sobra{border-color:var(--bad);background:var(--bad-bg)}
.mesa-c.sobre{border-color:var(--cliente);box-shadow:0 0 0 4px rgba(79,122,91,.18);background:var(--cliente-suave)}
.mesa-c .cab-m{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mesa-c .cab-m b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mesa-c .cupo{font-size:12px;font-weight:700;color:var(--texto3);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.mesa-c.llena .cupo{color:var(--ok-t)} .mesa-c.sobra .cupo{color:var(--bad-t)}
.mesa-c .sillas{display:flex;gap:3px;margin:8px 0 7px;flex-wrap:wrap}
.mesa-c .silla{position:static;width:10px;height:10px}
.mesa-c .silla.extra{border-color:var(--bad);background:var(--bad)}
.mesa-c .nombres{font-size:11.5px;color:var(--texto2);line-height:1.5;overflow:hidden}
.mesa-c .nombres span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mesa-c .nombres .mas-n{color:var(--texto3)}
.mesa-c .vacia{font-size:11.5px;color:var(--texto3);font-style:italic}

/* hoja inferior en celular: el mismo diálogo, pegado abajo */
.velo .dlg .lista-b{max-height:40vh;overflow-y:auto;border:1px solid var(--borde2);border-radius:var(--r2)}
.velo .dlg .inv{cursor:default}
.dlg .cab-dlg{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dlg .cab-dlg h4{margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* importar: pegar columnas y mapear */
.pegar{min-height:150px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.45}
.mapeo{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:10px}
.mapeo div{background:var(--sup2);border-radius:var(--r2);padding:8px 10px}
.mapeo b{display:block;font-size:11px;color:var(--texto2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.mapeo select{height:30px;font-size:12px;padding:0 24px 0 8px}
.previa{margin-top:12px;font-size:12px}
.previa .tabla td,.previa .tabla th{height:34px;padding:0 10px;font-size:12px}
.previa .tabla td.err{color:var(--bad-t);font-weight:700}

/* aviso flotante */
.aviso{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;background:var(--texto);color:#fff;font-size:13px;font-weight:600;padding:10px 16px;border-radius:999px;box-shadow:var(--sombra-alta);opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100vw - 32px);text-align:center}
.aviso.visible{opacity:1}
.aviso.mal{background:var(--bad)}

@media (max-width:700px){
  .taller{grid-template-columns:1fr}
  .bandeja{position:static;max-height:none}
  .bandeja .lista-b{max-height:none}
  .plano-grid{grid-template-columns:1fr 1fr;gap:9px}
  .mesa-c{min-height:124px;padding:10px 11px 8px}
  .mesa-c.redonda{border-radius:22px}
  .velo.hoja{align-items:flex-end;padding:0}
  .velo.hoja .dlg{max-width:none;border-radius:18px 18px 0 0;max-height:88vh;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .aviso{bottom:calc(72px + env(safe-area-inset-bottom))}
  .mapeo{grid-template-columns:1fr 1fr}
}
@media print{
  .lateral,.barra-inf,.submenu,.kpis,.taller,.vista-tabs,.cab-pag .acc-pag,.aviso,.velo,.no-imprimir{display:none !important}
  body{background:#fff}
  main{padding:0;max-width:none}
  .tabla{box-shadow:none;border:none}
  .tabla td,.tabla th{height:auto;padding:4px 8px;border-bottom:1px solid #ddd}
  .solo-impresion{display:block !important}
}

/* ================= plano del salón: mesas sobre la imagen ================= */
.salon-wrap{background:var(--sup);border:1px solid var(--borde2);border-radius:var(--r);box-shadow:var(--sombra);padding:12px;min-width:0}
.salon-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;min-height:38px}
.salon-barra .pista{flex:1;min-width:160px}
.salon{position:relative;width:100%;aspect-ratio:16/10;background:var(--sup2) center/contain no-repeat;border-radius:var(--r2);overflow:hidden;border:1px dashed var(--borde);user-select:none;-webkit-user-select:none}
.salon.con-imagen{border-style:solid;background-color:#fff}
.salon.marcando{cursor:crosshair;box-shadow:inset 0 0 0 3px var(--cliente)}
.salon .vacio{position:absolute;inset:0;display:grid;place-items:center;padding:20px;pointer-events:none}
.mesa-p{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center;background:rgba(255,255,255,.96);border:2px solid var(--texto2);color:var(--texto);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.18);touch-action:none;line-height:1.1}
.mesa-p.redonda{width:var(--mp,62px);height:var(--mp,62px);border-radius:50%}
.mesa-p.rect{width:calc(var(--mp,62px)*1.55);height:calc(var(--mp,62px)*.9);border-radius:10px}
.mesa-p b{display:block;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(var(--mp,62px)*1.4)}
.mesa-p span{display:block;font-size:10.5px;font-weight:700;color:var(--texto3);font-variant-numeric:tabular-nums}
.mesa-p i{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);font-style:normal;font-size:9px;font-weight:700;background:var(--navy);color:#fff;border-radius:999px;padding:1px 6px;white-space:nowrap;max-width:120%;overflow:hidden;text-overflow:ellipsis}
.mesa-p.llena{border-color:var(--ok);background:var(--ok-bg)} .mesa-p.llena span{color:var(--ok-t)}
.mesa-p.sobra{border-color:var(--bad);background:var(--bad-bg)} .mesa-p.sobra span{color:var(--bad-t)}
.mesa-p.sobre{border-color:var(--cliente);box-shadow:0 0 0 4px rgba(79,122,91,.3);background:var(--cliente-suave)}
.mesa-p.moviendo{opacity:.75;cursor:grabbing;z-index:5}
.salon.acomodando .mesa-p{cursor:grab}
@media (max-width:700px){
  .salon{--mp:46px;aspect-ratio:4/3}
  .mesa-p b{font-size:10px} .mesa-p span{font-size:9px} .mesa-p i{display:none}
  .salon-wrap{padding:10px}
}

/* la fila de invitado apila nombre y descripción (no usa la rejilla .datos del detalle) */
.inv .datos{display:block}
.tarj .nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ================= plano: acercamiento, mesas curvas y sin asignación ================= */
.salon-zoom{overflow:auto;border-radius:var(--r2);-webkit-overflow-scrolling:touch}
.salon{--z:1}
.mesa-p.redonda{width:calc(var(--mp,62px)*var(--z));height:calc(var(--mp,62px)*var(--z))}
.mesa-p.rect{width:calc(var(--mp,62px)*1.55*var(--z));height:calc(var(--mp,62px)*.9*var(--z))}
.mesa-p.curva{width:calc(var(--mp,62px)*1.7*var(--z));height:calc(var(--mp,62px)*.9*var(--z));border-radius:50% 50% 14px 14px / 70% 70% 14px 14px}
.mesa-p.sin-asignar{border-style:dashed;border-color:var(--texto3);background:rgba(255,255,255,.7);color:var(--texto3)}
.mesa-p.sin-asignar span{display:none}
.mesa-p .lista-n{display:none}
.salon.con-nombres .mesa-p{font-size:9.5px;line-height:1.25;padding:4px}
.salon.con-nombres .mesa-p b{font-size:11px}
.salon.con-nombres .mesa-p .lista-n{display:block;color:var(--texto2);text-align:center;overflow:hidden;max-height:calc(var(--mp,62px)*var(--z) - 34px);margin-top:2px}
.salon.con-nombres .mesa-p .lista-n em{display:block;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(var(--mp,62px)*1.6*var(--z))}
.salon.con-nombres .mesa-p i{display:none}
.zoom-ctl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--texto3);white-space:nowrap}
.zoom-ctl input[type=range]{width:90px;height:auto;padding:0;border:none;accent-color:var(--cliente)}
.tipos-barra{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.tipos-barra .pista{width:100%}
@media (max-width:700px){
  .salon.con-nombres .mesa-p{font-size:8.5px}
}

/* ================= app completa: puerta de entrada, filas de grupo, detalles ================= */
.puerta{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--fondo)}
.puerta .dlg{max-width:400px}
.puerta .marca-p{font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.4px;margin-bottom:2px}
.tabla tr.grupo td{background:#FBFAF8;font-weight:700;color:var(--texto2);height:38px;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.det-chips{display:flex;gap:6px;flex-wrap:wrap}
.det-chips .chip.activo{background:var(--navy);border-color:var(--navy);color:#fff}
.insignia{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.3px;background:var(--navy);color:#fff;border-radius:4px;padding:0 4px;margin-left:3px;vertical-align:1px}
.mesa-p .insignia{font-size:8px}
.bloque-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 8px}
.bloque-cab h3{margin:0}
.hoja-mas .hm-b{display:flex;align-items:center;gap:13px;width:100%;border:none;background:none;padding:13px 6px;border-radius:var(--r2);font-family:inherit;font-size:14.5px;color:var(--texto);cursor:pointer;text-align:left;font-weight:500}
.hoja-mas .hm-b.activo{background:var(--cliente-suave);color:var(--navy);font-weight:600}
.hoja-mas h4{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--texto3);margin:0 0 8px}
.seg.estado button.activo.ok{background:var(--ok-bg);color:var(--ok-t)} .seg.estado button.activo.warn{background:var(--warn-bg);color:var(--warn-t)} .seg.estado button.activo.bad{background:var(--bad-bg);color:var(--bad-t)}
@media (max-width:700px){ .seg.estado{width:100%} .seg.estado button{flex:1} }
/* laptop: se omiten columnas secundarias, no se aplasta la flexible */
@media (max-width:1280px){.tabla .col-sec{display:none}}
.hoja-mas .hm-b svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;color:var(--texto3)}
.hoja-mas .hm-b.activo svg{color:var(--cliente)}

/* ================= plano a escala (SVG): mesas y sillas reales sobre el dibujo ================= */
.plano-caja{border:1px solid var(--borde2);border-radius:var(--r2);overflow:hidden;background:#fff}
.plano-svg{display:block;width:100%;aspect-ratio:1133/593;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;background:#fff}
.plano-svg:active{cursor:grabbing}
.plano-svg.acomodando .mesa-g{cursor:move}
.plano-svg.marcando{cursor:crosshair}
.plano-svg .mesa-g{cursor:pointer}
.plano-svg .cuerpo{fill:rgba(255,255,255,.92);stroke:#3B4756;stroke-width:1.1;stroke-linejoin:round}
.plano-svg .parcial .cuerpo{fill:#FBF1DA;stroke:#8A5F10}
.plano-svg .llena .cuerpo{fill:#E4F3EB;stroke:#166A46}
.plano-svg .sobra .cuerpo{fill:#FAE8E3;stroke:#A33823}
.plano-svg .sin-asignar .cuerpo{fill:rgba(255,255,255,.6);stroke:#878C95;stroke-dasharray:2 1.5}
.plano-svg .sobre .cuerpo{stroke:var(--cliente);stroke-width:2.2;fill:var(--cliente-suave)}
.plano-svg .silla{fill:#fff;stroke:#5B6675;stroke-width:.7;stroke-linejoin:round}
.plano-svg .silla.ocupada{fill:var(--cliente);stroke:var(--cliente-ink)}
.plano-svg .sobra .silla.ocupada{fill:var(--bad);stroke:var(--bad-t)}
.plano-svg text{font-family:-apple-system,"Segoe UI",Roboto,sans-serif;pointer-events:none;fill:var(--texto)}
.plano-svg .num{font-weight:800;font-size:8px}
.plano-svg .cupo{font-size:4.6px;font-weight:600;fill:var(--texto2)}
.plano-svg .nom-silla{display:none;font-size:3.6px;font-weight:600;fill:var(--texto);paint-order:stroke;stroke:#fff;stroke-width:1.2px;stroke-linejoin:round}
.plano-svg.con-nombres .nom-silla{display:block}
.plano-svg.con-nombres .num{font-size:6px} .plano-svg.con-nombres .cupo{font-size:3.4px}
.zoom-ctl b{font-size:12px;color:var(--texto2);font-variant-numeric:tabular-nums}
.silla-sel{width:58px;height:30px;padding:0 20px 0 8px;font-size:12.5px;flex-shrink:0}
@media (max-width:700px){ .plano-svg{aspect-ratio:4/3} }
/* sillas marcadas en todas las mesas, también en la vista completa: trazo que no se adelgaza al alejar */
.plano-svg .cuerpo,.plano-svg .silla{vector-effect:non-scaling-stroke}
.plano-svg .cuerpo{stroke-width:1.3px}
.plano-svg .silla{fill:#E9ECF0;stroke:#3B4756;stroke-width:1px}
.plano-svg .silla.ocupada{fill:var(--cliente);stroke:var(--cliente-ink)}
.plano-svg .sin-asignar .silla{fill:#F4F5F7;stroke:#878C95}
/* arrastrar a una persona por el plano */
.plano-svg #fantasma{pointer-events:none}
.plano-svg #fantasma circle{fill:var(--cliente);stroke:#fff;stroke-width:1.5px;vector-effect:non-scaling-stroke;opacity:.9}
.plano-svg #fantasma text{font-size:4px;font-weight:700;fill:var(--texto);paint-order:stroke;stroke:#fff;stroke-width:1.2px}
.plano-svg .silla.sobre-silla{fill:var(--cliente-suave);stroke:var(--cliente);stroke-width:2px}
.plano-svg .silla.ocupada{cursor:grab}
.plano-svg .area{fill:transparent;stroke:none}
.plano-svg .sobre .area{fill:rgba(79,122,91,.10)}