:root{
  --azul:#262626; --azul-osc:#171717; --cyan:#737373;
  --gris:#525252; --gris-cl:#F5F5F5; --linea:#E5E5E5;
  --texto:#0F172A; --ok:#16A34A; --ok-bg:#DCFCE7;
  --rojo:#DC2626; --amber:#F59E0B;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:#F8FAFC; color:var(--texto); font-size:14.5px; line-height:1.5;
}
a{color:var(--azul); text-decoration:none}

/* Topbar */
.topbar{
  display:flex; align-items:center; gap:24px;
  background:#fff; border-bottom:1px solid var(--linea);
  padding:10px 24px; position:sticky; top:0; z-index:20;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.brand-logo{height:34px; display:block}
.nav{display:flex; gap:4px; margin-left:8px; flex:1}
.nav a{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:10px; color:var(--gris); font-weight:500; font-size:14px;
}
.nav a:hover{background:var(--gris-cl); color:var(--texto)}
.nav a.active{background:var(--texto); color:#fff}
/* Grupos desplegables de la barra (Ventas, Inventario y compras): el boton se
   ve igual que un enlace de nav; la lista reusa .menu-mas-lista. */
.nav-grupo{position:relative; display:inline-block}
.nav-grupo-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:10px; color:var(--gris); font-weight:500; font-size:14px;
  background:none; border:none; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.nav-grupo-btn:hover{background:var(--gris-cl); color:var(--texto)}
.nav-grupo-btn.active{background:var(--texto); color:#fff}
.nav-grupo-caret{font-size:10px; line-height:1; opacity:.75}
.nav-grupo .menu-mas-lista a{display:flex; align-items:center; gap:8px}
.nav-grupo .menu-mas-lista a.active{background:var(--texto); color:#fff}
.nav-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--linea);
  color:var(--gris); flex-shrink:0; background:#fff; cursor:pointer; font-family:inherit;
}
.nav-avatar:hover{background:var(--gris-cl); color:var(--texto)}

.nav-hamburguesa{display:none}

/* Ancho maximo del contenido, compartido por TODAS las pantallas (ver
   <main class="container"> en base.html) -- pedido explicito del usuario,
   4 sep 2026: que la tarjeta blanca con los datos aproveche mas el ancho
   disponible en pantallas grandes en vez de dejar tanto margen gris a los
   costados. Subido de 1500px a 1800px, un solo cambio que alcanza a
   Cotizaciones/NV/OT/OC/Inventario/Movimientos y cualquier otra pantalla. */
.container{max-width:1800px; margin:22px auto; padding:0 24px}

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--linea); background:#fff; color:var(--texto);
  padding:8px 15px; border-radius:8px; font-size:13.5px; font-weight:500;
  transition:.15s; text-decoration:none;
}
.btn:hover{border-color:#CBD5E1; background:var(--gris-cl)}
.btn-primary{background:var(--texto); border-color:var(--texto); color:#fff; font-weight:600}
.btn-primary:hover{background:#000; border-color:#000; color:#fff}
.btn-ghost{background:transparent; border-color:transparent; color:var(--gris)}
/* Boton visible pero bloqueado (ej. "Nueva cotizacion" cuando la empresa la desactivo): sigue clickeable para explicar por que no se puede. */
.btn-bloqueado, .btn-bloqueado:hover{background:var(--gris-cl); border:1px dashed #B8B8B8; color:#8A8A8A; cursor:not-allowed}
.btn-danger{color:var(--rojo); border-color:transparent; background:transparent}
.btn-danger:hover{background:#FEE2E2; border-color:#FEE2E2}
.btn-danger-solid{background:var(--rojo); border-color:var(--rojo); color:#fff; font-weight:600}
.btn-danger-solid:hover{background:#B91C1C; border-color:#B91C1C}
.btn-sm{padding:6px 12px; font-size:13px; height:34px; box-sizing:border-box}
/* Boton "Fotos" del listado de OT en verde cuando la OT ya tiene fotos
   agregadas (25 sep 2026, pedido explicito del usuario, mismo criterio que
   ya existia en el boton FOTOS del kiosco -- ver .ot-fotos-btn.con-fotos en
   taller_panel.html). */
.btn.con-fotos{background:#16A34A; border-color:#16A34A; color:#fff}
.btn.con-fotos:hover{background:#15803D; border-color:#15803D}

/* Cards */
.card{
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  padding:24px; margin-bottom:18px; box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px}
.page-head h1{font-size:20px; margin:0; font-weight:600; letter-spacing:-.2px}
h1,h2,h3{color:var(--texto); font-weight:600}
.page-head .actions{padding-top:2px}

/* Tabs simples (ej: Clientes -- Comercio/Reservas) */
.tabs-simple{display:flex; gap:4px; border-bottom:1px solid var(--linea); margin-bottom:18px}
.tab-btn{
  background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  padding:9px 4px; margin-right:20px; font-size:14.5px; font-weight:500; color:var(--gris);
}
.tab-btn.active{color:var(--azul); border-bottom-color:var(--azul)}

/* Stats */
.stats{display:flex; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.stat{
  flex:1; min-width:180px; background:#fff; border:1px solid var(--linea);
  border-radius:14px; padding:18px 20px;
}
.stat .label{color:var(--gris); font-size:13px; margin-bottom:4px}
.stat .value{font-size:26px; font-weight:700; color:var(--azul)}

/* Tablas */
/* Contenedor que base.html arma solo alrededor de cada table.data (ver
   envolverTablasScroll) -- si las columnas no entran en pantallas angostas,
   la que se desplaza de lado es la tabla sola, nunca la pagina entera. */
.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
/* Tamano de letra UNIFICADO a 13px en TODAS las listas del sitio (Cotizaciones,
   Notas de Venta, Ordenes de Trabajo, Ordenes de Compra, Inventario,
   Movimientos, Cubicaciones, Clientes, Kits, Reportes, etc.) -- pedido
   explicito del usuario, 4 sep 2026 (10px -> 12px -> 13px, los primeros 2
   se vieron muy chicos): "table.data" es la clase compartida por las 26
   plantillas de listas del proyecto, asi que un solo cambio aca alcanza a
   todas de una, sin tocar cada pantalla por separado. Antes: encabezado
   12px, celdas heredaban el tamano base del body (14.5px). No se tocaron
   .btn-sm/.paginacion-* (controles genericos usados tambien fuera de las
   listas, en formularios y modales) ni .items-table (grilla de items
   DENTRO del formulario de un documento, no la lista que lo contiene). */
table.data{width:100%; border-collapse:collapse; font-size:13px}
table.data th{
  text-align:left; text-transform:uppercase; letter-spacing:.5px;
  color:var(--gris); font-weight:600; padding:9px 16px; border-bottom:1px solid var(--linea);
}
table.data th.num{text-align:right}
table.data td{padding:10px 16px; border-bottom:1px solid var(--linea); font-weight:400}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:#FAFAFA}
table.data strong{font-weight:600}
.num{text-align:right; font-variant-numeric:tabular-nums}
.muted{color:var(--gris)}
.badge{
  display:inline-block; padding:3px 10px; border-radius:8px; font-size:13px;
  font-weight:600; background:var(--gris-cl); color:var(--gris); border:1px solid transparent;
}
.badge-ok{background:var(--ok-bg); color:var(--texto); border-color:var(--ok); --dot:var(--ok)}
.badge-amber{background:#FEF3C7; color:var(--texto); border-color:#B45309; --dot:#B45309}
.badge-info{background:#DBEAFE; color:var(--texto); border-color:#1D4ED8; --dot:#1D4ED8}
.badge-rej{background:#FEE2E2; color:var(--texto); border-color:var(--rojo); --dot:var(--rojo)}
/* Estado "neutro" (ej. estado_taller "Pendiente") -- mismo patron que los
   demas badge-* (borde + puntito de color), en vez de caer en el .badge sin
   color de mas arriba, que se veia inconsistente al lado de los otros 3
   estados del taller que si tienen color propio (15 sep 2026, nota de la
   auditoria del dia). */
.badge-neutro{background:var(--gris-cl); color:var(--texto); border-color:var(--gris); --dot:var(--gris)}
.flecha-tipo svg{stroke-width:3}
.no-eyedropper .eyedrop-btn{display:none}

/* Badge de estado clicable (dropdown) */
.estado-dropdown{position:relative; display:inline-block}
.badge-btn{
  /* border-width/style aca, NO border-color: ese lo pone la variante
     (badge-ok/amber/rej) -- si se pusiera aca con el shorthand "border",
     lo pisaria sin importar el orden en el archivo (misma especificidad). */
  border-width:1px; border-style:solid; cursor:pointer; font-family:inherit; line-height:1.4;
  display:inline-flex; align-items:center; gap:5px;
}
.badge-btn:hover{filter:brightness(.96)}
.badge-btn::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--dot, currentColor)}

/* Simetria de los badges Estado/Taller en el listado de OT (24 sep 2026,
   pedido explicito del usuario: "quiero que la cantidad de px de alto y de
   ancho... sean siempre iguales... se vea simetrico") -- ancho y alto fijos
   sin importar el largo del texto ("En reparación" es el mas largo de los
   2 grupos). Al principio solo se habia aplicado a las 3 tablas de OT V2
   (26 sep 2026, hallazgo con captura del usuario: en V1 "En proceso" se
   cortaba en 2 lineas y "Trabajo solicitado" variaba de ancho segun el
   texto) -- se agregaron las 3 tablas V1 (mismos ids, sin sufijo _v2). */
#tablaOTv2 .badge-btn, #tablaOTv2 .badge-taller,
#tablaOTEntregadasV2 .badge-btn, #tablaOTEntregadasV2 .badge-taller,
#tablaOTRechazadasV2 .badge-btn, #tablaOTRechazadasV2 .badge-taller,
#tablaOT .badge-btn, #tablaOT .badge-taller,
#tablaOTEntregadas .badge-btn, #tablaOTEntregadas .badge-taller,
#tablaOTRechazadas .badge-btn, #tablaOTRechazadas .badge-taller{
  width:120px; height:30px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
}
/* La columna "Trabajo solicitado" (25 sep 2026) tiene su propio ancho fijo,
   mas angosto que 165 (todo el resto de columnas de esta fila) hubiera
   quedado con texto afuera; distinto al de Estado/Taller para no
   desperdiciar espacio, pero igual de fijo/simetrico entre sus 2 valores
   posibles -- pedido explicito del usuario ("mejor que...trabajo
   solicitado otra medida"). Misma extension a V1 que la regla de arriba. */
#tablaOTv2 .badge-trabajo-btn,
#tablaOTEntregadasV2 .badge-trabajo-btn,
#tablaOTRechazadasV2 .badge-trabajo-btn,
#tablaOT .badge-trabajo-btn,
#tablaOTEntregadas .badge-trabajo-btn,
#tablaOTRechazadas .badge-trabajo-btn{
  width:165px;
}
.estado-menu{
  display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:30;
  background:#fff; border:1px solid var(--linea); border-radius:10px;
  box-shadow:0 8px 24px rgba(15,23,42,.12); padding:6px; min-width:140px;
}
.estado-menu.open{display:block}
.estado-menu-item{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:5px 6px; border-radius:6px; font-family:inherit;
}
.estado-menu-item:hover{background:var(--gris-cl)}

/* Chips de filtros activos */
.chips-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.chip{
  display:inline-flex; align-items:center; gap:7px; background:var(--gris-cl); color:var(--texto);
  border:none; cursor:pointer; font-family:inherit; padding:5px 10px 5px 12px; border-radius:20px;
  font-size:12.5px; font-weight:500;
}
.chip:hover{background:#EDEDED}
.chip .chip-x{color:var(--gris); font-size:14px; line-height:1}
.btn-limpiar-filtros{
  background:none; border:none; cursor:pointer; color:var(--gris); font-family:inherit;
  font-size:12.5px; font-weight:600; padding:5px 4px; text-decoration:underline;
}
.btn-limpiar-filtros:hover{color:var(--texto)}

/* Menu de tres puntos (mas acciones) */
.menu-mas{position:relative; display:inline-block}
.menu-mas-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; border-radius:8px;
  border:1px solid var(--linea); background:#fff; color:var(--gris); cursor:pointer; font-size:16px;
}
.menu-mas-btn:hover{background:var(--gris-cl); color:var(--texto)}
.menu-mas-lista{
  display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:30;
  background:#fff; border:1px solid var(--linea); border-radius:10px;
  box-shadow:0 8px 24px rgba(15,23,42,.12); padding:6px; min-width:170px; text-align:left;
}
.menu-mas-lista.open{display:block}
.menu-mas-lista a, .menu-mas-lista button{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:8px 10px; border-radius:6px; font-family:inherit; font-size:13.5px; color:var(--texto);
  text-decoration:none;
}
.menu-mas-lista a:hover, .menu-mas-lista button:hover{background:var(--gris-cl)}
.menu-mas-lista button.danger{color:var(--rojo)}
.menu-mas-lista a.exito, .menu-mas-lista button.exito{color:var(--ok); font-weight:600}

/* Submenu de 2do nivel (cascada, ej. Reportes: categoria -> reportes) --
   fila con flecha a la derecha que abre un panel al costado (flyout). */
.menu-cascada-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:8px 10px; border-radius:6px; font-family:inherit; font-size:13.5px; color:var(--texto);
}
.menu-cascada-item:hover{background:var(--gris-cl)}
.menu-cascada-item.disabled{color:var(--gris); cursor:default; opacity:.6}
.menu-cascada-item.disabled:hover{background:none}
.menu-mas-lista.flyout-lateral{top:-6px; left:calc(100% + 6px); right:auto}
/* El .nav-grupo de una fila-categoria (ej. Ventas dentro de Reportes) hereda
   display:inline-block (pensado para la barra superior) -- adentro de un
   panel desplegable debe ocupar todo el ancho, una fila por categoria. */
.menu-mas-lista .nav-grupo{display:block; width:100%}

/* Buscador con filtro en vivo (Insertar kit / Agregar desde catalogo en el
   formulario de cotizacion) — reemplaza el <select> nativo, que con miles
   de items de catalogo no se puede filtrar escribiendo. */
.combo-buscador{position:relative; display:inline-block}
.combo-lista{
  display:none; position:absolute; top:calc(100% + 6px); right:0; left:auto; z-index:30;
  background:#fff; border:1px solid var(--linea); border-radius:10px;
  box-shadow:0 8px 24px rgba(15,23,42,.12); padding:4px; min-width:360px;
  max-width:calc(100vw - 24px); max-height:320px; overflow-y:auto; text-align:left;
}
.combo-lista.open{display:block}
.combo-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13.5px; color:var(--texto);
}
.combo-item:hover{background:var(--gris-cl)}
.combo-item-desc{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.combo-item-meta{display:flex; align-items:center; gap:8px; flex-shrink:0; font-size:12px; color:var(--gris); white-space:nowrap}
.combo-item-col{flex-direction:column; align-items:stretch; gap:2px}
.combo-item-sub{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--gris)}
.combo-vacio{padding:10px; text-align:center; color:var(--gris); font-size:13px}

/* Campo en alerta (ej. cantidad que supera el stock disponible) */
input.input-alerta{
  border-color:#dc2626 !important; background:#fff5f5;
  color:#b91c1c; font-weight:600;
  box-shadow:0 0 0 2px rgba(220,38,38,.15);
}

/* Stock critico: mantener el tono rojo — hover y badges (codigo/categoria) */
.stock-critico table.data tr:hover td{background:#fde3e3}
.stock-critico .badge{background:#fde3e3; color:#b91c1c}
.menu-mas-lista button.danger:hover{background:#FEE2E2}

/* Reservas (Manicurista): lista por dia. flex-wrap:wrap directo en el
   contenedor de cada fila (sin grid, sin nowrap) para que en el celular la
   columna de acciones baje de linea sola en vez de desbordar -- ver la
   auditoria general del 2 sep 2026 para el porque de evitar esos 2 patrones. */
.reservas-nav-dia{display:flex; align-items:center; gap:8px; margin:14px 0 18px; flex-wrap:wrap}
.reservas-lista{display:flex; flex-direction:column; gap:2px}
.reserva-fila{display:flex; align-items:flex-start; gap:14px; padding:12px 4px; border-bottom:1px solid var(--linea); flex-wrap:wrap}
.reserva-fila:last-child{border-bottom:none}
/* Reserva esperando el abono (22 sep 2026) -- se nota de un vistazo cual
   todavia no queda firme, sin tener que abrir el desplegable de estado. */
.reserva-pendiente-pago{background:#FFFBEB; margin:0 -4px; padding-left:8px; padding-right:8px; border-radius:8px}
.reserva-proxima{background:#ECFDF5; margin:0 -4px; padding-left:8px; padding-right:8px; border-radius:8px}
.reserva-hora{display:flex; flex-direction:column; align-items:center; min-width:48px; font-size:14px}
.reserva-info{flex:1; min-width:160px}
.reserva-cliente{font-weight:600; font-size:14.5px}
/* Columna aparte para el telefono (22 sep 2026, pedido explicito del
   usuario) -- sin encabezado propio (esta lista no es una tabla), solo
   separado del nombre/servicio para que no quede pegado. */
.reserva-telefono{font-size:12.5px; white-space:nowrap; align-self:center; min-width:110px}
.reserva-acciones{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.reserva-estado-select{font-size:12.5px; padding:5px 8px; border:1px solid var(--linea); border-radius:7px; background:#fff; color:var(--texto); font-family:inherit}
/* Telefono con prefijo de pais fijo (Chile +56) + solo el numero local --
   fuerza que se escriban los 9 digitos completos (celular chileno), para
   que el reconocimiento de clienta repetida en Reservas compare siempre el
   mismo formato. flex:1 + min-width:0 en el input (no en .field, que ya
   trae min-width:180px de base) para que este grupo pueda encoger en
   celular sin desbordar la fila -- mismo cuidado que la auditoria general
   del 2 sep 2026. */
.tel-group{display:flex; gap:8px; align-items:center}
.tel-prefijo{
  display:flex; align-items:center; gap:5px; height:39px; padding:0 10px; border:1px solid var(--linea);
  border-radius:7px; background:var(--gris-cl); font-size:13.5px; white-space:nowrap; flex:0 0 auto;
}
.tel-group input{flex:1; min-width:0}

/* Formularios */
.form-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px}
.field{display:flex; flex-direction:column; gap:5px; flex:1; min-width:180px}
.field label{font-size:12.5px; color:var(--gris); font-weight:600}
input,select,textarea{
  font-family:inherit; font-size:14px; padding:9px 11px; border:1px solid #CBD5E1;
  border-radius:8px; background:#fff; color:var(--texto); width:100%;
}
/* Con el mismo padding, un <select> igual renderiza ~2px mas alto que un
   <input> (diferencia nativa del navegador al dibujar la flecha del
   desplegable, no de este CSS) -- se fuerza el mismo alto explicito para
   que ambos calcen en cualquier fila con input+select uno al lado del
   otro. Los checkbox/radio/color quedan afuera porque son controles chicos
   de tamaño fijo, no campos de texto -- se excluyen con :where() (0
   especificidad) para que esta regla siga siendo tan "debil" como un
   simple "input,select" y no le gane por especificidad a .items-table
   input/select (que necesitan su propio alto, mas chico). */
input:not(:where([type=checkbox],[type=radio],[type=color])),select{height:39px}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(11,79,140,.12);
}
textarea{resize:vertical; min-height:60px}
.hint{font-size:12px; color:var(--gris)}
.input-buscador{width:240px; height:34px; box-sizing:border-box}

/* Items de cotizacion */
.items-table{width:100%; border-collapse:collapse; margin-top:8px}
.items-table th{
  font-size:12px; text-transform:uppercase; color:var(--gris); text-align:left;
  padding:8px; border-bottom:2px solid var(--linea);
}
.items-table td{padding:6px 8px; border-bottom:1px solid var(--gris-cl); vertical-align:top}
.items-table input,.items-table select{padding:7px 9px; height:35px}
.items-table .col-cant input,.items-table .col-precio input{text-align:right}
.line-total{font-weight:600; text-align:right; white-space:nowrap; padding-top:14px}

/* Detalle adicional por item (Orden de Compra, 10 sep 2026): flechita
   discreta bajo la Descripcion que despliega un textarea pegado a su propia
   fila -- .con-detalle-abierto le saca el borde inferior a la fila del item
   mientras el detalle esta visible, y la fila de detalle no agrega padding
   arriba, para que ambas se lean como un solo bloque sin espacio de sobra. */
.btn-detalle-toggle{
  display:block; border:none; background:none; padding:0; margin-top:2px;
  font-size:13px; line-height:1; color:var(--gris); cursor:pointer;
}
.btn-detalle-toggle:hover{color:var(--texto)}
tr.con-detalle-abierto > td{border-bottom:none}
.fila-detalle-extra > td{padding-top:0}

/* Vinetas grises "no borrables" del detalle: son un <div> aparte que solo
   dibuja un "•" por linea (nunca forman parte del value del textarea), asi
   que el usuario jamas puede borrarlas con Backspace/Supr -- solo puede
   borrar la linea de texto en si. line-height/padding-top identicos entre
   ambos elementos para que cada vineta calce exacto con su linea. */
.detalle-wrap{position:relative}
.detalle-vinetas{
  position:absolute; left:0; top:0; bottom:0; width:26px;
  padding:9px 0 9px 11px; box-sizing:border-box;
  font-size:14px; line-height:20px; color:var(--gris);
  white-space:pre; overflow:hidden; pointer-events:none; user-select:none;
}
.detalle-textarea{
  width:100%; box-sizing:border-box; padding-left:30px;
  line-height:20px; white-space:pre; overflow-x:auto;
}

.totales{
  margin-top:16px; margin-left:auto; width:320px; max-width:100%;
}
.totales .row{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--linea)}
.totales .row.total{
  border:none; margin-top:6px; background:var(--azul); color:var(--sobre-azul);
  padding:12px 14px; border-radius:10px; font-size:18px; font-weight:700;
}

#toastContainer{
  position:fixed; top:20px; right:20px; z-index:200;
  display:flex; flex-direction:column; gap:10px;
  width:360px; max-width:calc(100vw - 40px);
}
.toast{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; border-radius:10px; font-weight:500; font-size:14px;
  background:#fff; color:var(--texto); border:1px solid var(--linea);
  box-shadow:0 10px 30px rgba(0,0,0,.15); opacity:1; transform:translateY(0);
  transition:opacity .3s, transform .3s;
  animation:toast-in .25s ease-out;
  min-width:0; overflow-wrap:anywhere; word-break:break-word;
}
.toast::before{content:""; width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px}
.toast-ok::before{background:var(--ok)}
.toast-warn::before{background:var(--amber)}
@keyframes toast-in{
  from{opacity:0; transform:translateY(-10px)}
  to{opacity:1; transform:translateY(0)}
}

.historial-toasts{max-height:360px; overflow-y:auto}
.historial-toast-item{
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 10px; border-radius:6px; font-size:13px;
  overflow-wrap:anywhere; word-break:break-word;
}
.historial-toast-item:not(:last-child){border-bottom:1px solid var(--linea)}
.historial-toast-item::before{content:""; width:7px; height:7px; margin-top:5px; border-radius:50%; flex-shrink:0}
.historial-toast-item.toast-ok::before{background:var(--ok)}
.historial-toast-item.toast-warn::before{background:var(--amber)}
.historial-toast-item .historial-toast-texto{flex:1; min-width:0}
.historial-toast-item .historial-toast-hora{display:block; color:var(--gris); font-size:11px; margin-top:2px}
.historial-vacio{padding:16px 10px; text-align:center; color:var(--gris); font-size:13px}

.banner{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px;
  font-size:13.5px; margin-bottom:20px;
}
.banner-warn{background:#FEF3C7; color:#92400E; border:1px solid #FDE68A}
.banner code{background:rgba(0,0,0,.06); padding:2px 6px; border-radius:5px; font-size:12.5px}

.footer{text-align:center; color:var(--gris); font-size:12.5px; padding:24px}
.inline{display:inline}
.right{text-align:right}
.actions{display:flex; gap:6px; justify-content:flex-end; align-items:center}
/* En una <td>, display:flex saca a la celda del layout de tabla y deja de
   estirarse a la altura de la fila (la linea de fondo queda mas arriba que
   las demas columnas). Como td ya es celda de tabla, basta alinear el texto
   a la derecha en vez de usar flex. */
td.actions{display:table-cell; text-align:right; white-space:nowrap; width:1%}
td.actions > * + *{margin-left:6px}
.section-title{font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris); font-weight:700; margin:22px 0 10px}
.empty{text-align:center; color:var(--gris); padding:40px 20px}

.paginacion{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding:8px 0 14px;
}
.paginacion-nav{display:flex; align-items:center; justify-content:space-between; gap:4px; width:280px; flex-shrink:0}
.paginacion-numeros{display:flex; align-items:center; justify-content:center; gap:4px; flex:1; min-width:0}
.paginacion-pagina, .paginacion-flecha{
  display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px;
  border:1px solid transparent; border-radius:7px; font-weight:500; font-size:13px; padding:0 6px;
  color:var(--texto);
}
.paginacion-pagina:hover, .paginacion-flecha:hover{background:var(--gris-cl)}
.paginacion-pagina.activa{background:var(--texto); color:#fff; font-weight:600}
.paginacion-flecha.deshabilitada{color:var(--linea); cursor:default}
.paginacion-flecha.deshabilitada:hover{background:none}
.paginacion-elipsis{
  display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:30px;
  color:var(--gris); font-size:13px;
}
.paginacion-tamano{width:auto; padding:6px 9px; font-size:13px}

/* Titulo con icono + subtitulo "Pagina X de Y" */
.titulo-icono{display:flex; align-items:center; gap:12px}
.icono-caja{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; border-radius:10px; background:var(--gris-cl); color:var(--gris);
}
.titulo-texto h1{margin:0; line-height:1.25}
.subtitulo-pagina{color:var(--gris); font-size:13px; margin:2px 0 0}

/* Boton icono-solo (usado para eliminar en tablas) */
.btn-borrar{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:8px;
  border:1px solid var(--linea); background:#fff; color:var(--rojo); cursor:pointer;
}
.btn-borrar:hover{background:#FEE2E2; border-color:#FECACA}

/* Configuracion: grilla de tarjetas colapsables */
.config-header{margin-bottom:18px}

.config-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}
@media (max-width:1100px){ .config-grid{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .config-grid{grid-template-columns:1fr} }

.config-tile{
  grid-column:span 1; background:#fff; border:1px solid var(--linea); border-radius:14px;
  overflow:hidden;
}
.config-tile.expanded{grid-column:1 / -1}

.config-tile-header{
  display:flex; align-items:flex-start; gap:14px; padding:18px; height:100%; box-sizing:border-box;
  cursor:pointer; background:none; border:none; width:100%; text-align:left;
  font:inherit; color:inherit;
}
.config-tile-header:hover{background:var(--gris-cl)}
.config-tile-icon{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; border-radius:10px; background:var(--gris-cl); color:var(--gris);
}
.config-tile-texto{flex:1; min-width:0}
.config-tile-texto .titulo{display:block; font-weight:600; font-size:14.5px; margin-bottom:3px}
.config-tile-texto .desc{display:block; color:var(--gris); font-size:12.5px; line-height:1.45}
.config-tile-chevron{flex-shrink:0; color:var(--gris); margin-top:3px}

.config-tile-body{padding:0 18px 18px; border-top:1px solid var(--linea); padding-top:16px}

/* Switch on/off (Sí=verde a la derecha, No=gris a la izquierda) -- usado en
   Configuracion para vincular/desvincular Inventario de otros modulos. */
.switch-fila{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.switch-fila + .switch-fila{border-top:1px solid var(--linea)}
.switch-fila .titulo{display:block; font-weight:600; font-size:14px; margin-bottom:2px}
.switch-fila .desc{display:block; color:var(--gris); font-size:12.5px; line-height:1.4}
.switch{position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0}
.switch input{opacity:0; width:0; height:0}
.switch .switch-slider{position:absolute; inset:0; background:var(--gris-cl); border:1px solid var(--linea); cursor:pointer; transition:.15s; border-radius:24px}
.switch .switch-slider:before{content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; transition:.15s; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch input:checked + .switch-slider{background:var(--ok); border-color:var(--ok)}
.switch input:checked + .switch-slider:before{transform:translateX(18px)}

.modal-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
/* modalConfirmar (el "¿Eliminar...?" generico) puede abrirse ENCIMA de otro
   modal ya abierto -- ej. eliminar un pago desde el modal de Pago (15 sep
   2026) -- con el mismo z-index de .modal-overlay, quien pinta arriba
   depende del orden en el DOM, no de cual se abrio despues, y el clic en
   "Aceptar" quedaba tapado por el otro modal. z-index propio y mas alto para
   que siempre gane, sin importar el orden. */
#modalConfirmar{ z-index:200; }
.modal-box{
  position:relative; background:#fff; border-radius:14px; padding:24px 26px; width:100%; max-width:560px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  /* 29 sep 2026: sin esto, un modal con contenido mas alto que el viewport
     (ej. una plantilla de Ficha Tecnica con muchos campos) se salia del
     centrado de .modal-overlay por arriba y por abajo -- como el overlay es
     position:fixed sin scroll propio, esa parte quedaba inalcanzable (ni
     scrolleando la pagina se llegaba). Con esto el modal se topa al alto del
     viewport y scrollea su propio contenido. */
  max-height:90vh; overflow-y:auto;
}
.modal-cerrar{
  position:absolute; top:14px; right:14px; background:none; border:none; font-size:18px;
  line-height:1; color:var(--gris); cursor:pointer; padding:6px; border-radius:6px;
}
.modal-cerrar:hover{background:var(--gris-cl); color:var(--texto)}
/* Boton X de las ventanas (11 oct 2026, opcion B elegida por el usuario): circulo suave del color del negocio, arriba a la derecha, FIJO (sticky) aunque se baje por la
   ventana y con 44 px de area de toque. Rubro con menu lateral (Manicurista): todas las ventanas con .modal-cerrar; y .pr-x en la ventana de Foto del panel de reservas. */
body.con-lateral .modal-cerrar, .pr-x{
  position:sticky; top:-20px; right:auto; float:right; z-index:6; width:44px; height:44px; margin:-8px -6px 6px 10px; padding:0; border:0; border-radius:50%;      /* top negativo: el sticky cuenta desde el borde de adentro del relleno (26 px) */
  background:#F3F0EC; background:color-mix(in srgb, var(--azul, #334155) 14%, #fff); color:var(--azul, #334155); cursor:pointer;
  font-size:0; line-height:0; display:flex; align-items:center; justify-content:center; box-shadow:none; -webkit-tap-highlight-color:transparent}
body.con-lateral .modal-cerrar::before, body.con-lateral .modal-cerrar::after, .pr-x::before, .pr-x::after{
  content:""; position:absolute; width:18px; height:2.4px; border-radius:2px; background:currentColor; transform:rotate(45deg)}
body.con-lateral .modal-cerrar::after, .pr-x::after{transform:rotate(-45deg)}
body.con-lateral .modal-cerrar:hover, .pr-x:hover{background:color-mix(in srgb, var(--azul, #334155) 22%, #fff); color:var(--azul, #334155)}

.drop-zone{
  display:flex; align-items:center; gap:16px; margin:10px 0 4px; padding:16px;
  border:2px dashed var(--linea); border-radius:10px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.drop-zone:hover{border-color:var(--gris)}
.drop-zone.dragover{border-color:var(--azul); background:var(--gris-cl)}

/* Pantallas angostas: la barra .nav (Ventas/Socios Comerciales/...) no cabe
   en una fila -- se oculta y pasa a ser un panel desplegable a pantalla
   completa (ancho) debajo del header, activado por el boton hamburguesa.
   Los grupos (.nav-grupo) y sus listas (.menu-mas-lista) siguen usando el
   mismo JS de siempre (toggleMenuMas/toggleSubmenuAnidado); aca solo
   cambia como se VEN: de flotar sobre el contenido a expandirse en el lugar,
   como un acordeon, para no salirse de la pantalla.
   IMPORTANTE -- este bloque tiene que ser el ULTIMO del archivo: son puros
   overrides de mismo-selector-mismo-especificidad que sus reglas generales
   (ej. .card, .page-head), y en CSS con especificidad empatada gana la regla
   que aparece MAS ABAJO en el archivo, sin importar que la de arriba este
   dentro de un @media -- si este bloque quedaba mas arriba (como estuvo
   hasta el 4 sep 2026), la version "de escritorio" de esas reglas, definida
   mas abajo, le ganaba SIEMPRE, dejando el ajuste movil sin efecto real en
   TODA la app (bug real, encontrado al auditar por que Reservas seguia
   viendose "grande" en el celular pese a que el CSS ya decia achicarla).
   Cualquier regla nueva que necesite ganarle a una de escritorio va ACA. */
@media (max-width:900px){
  .topbar{gap:10px; padding:10px 14px}
  .nav-hamburguesa{display:inline-flex}
  .nav{
    display:none; flex-direction:column; gap:2px; margin-left:0; flex:none;
    position:absolute; top:100%; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--linea); box-shadow:0 8px 24px rgba(15,23,42,.12);
    padding:8px; max-height:calc(100vh - 60px); overflow-y:auto; z-index:25;
  }
  .nav.open{display:flex}
  .nav > a, .nav-grupo{width:100%}
  .nav-grupo-btn{width:100%; justify-content:space-between}
  .nav .menu-mas-lista{
    display:none; position:static; width:100%; min-width:0; margin:2px 0 4px 14px;
    box-shadow:none; border:none; padding:2px;
  }
  .nav .menu-mas-lista.open{display:block}
  .nav .menu-mas-lista.flyout-lateral{top:auto; left:auto}

  /* El encabezado de cada pantalla (icono+titulo a la izquierda, botones de
     accion -- Exportar/Buscar/Nueva... -- a la derecha) usa .page-head en
     mas de 10 pantallas (Cotizaciones, Cubicaciones, Catalogo, Kits,
     Clientes, Notas de Venta, Ordenes de Compra, etc.). En una fila no
     entran los dos lados, y el buscador (ancho fijo) empujaba todo fuera de
     la pantalla obligando a hacer scroll horizontal. Se apilan: titulo
     arriba, botones abajo (envolviendo si no caben en una fila), buscador a
     todo el ancho. Un solo arreglo aca corrige todas esas pantallas de
     una. */
  .card{padding:14px}
  .page-head{flex-direction:column; align-items:stretch; gap:10px; margin-bottom:14px}
  .page-head h1{font-size:18px}
  .page-head .actions{padding-top:0}
  .actions{flex-wrap:wrap}
  .actions form:has(.input-buscador){flex:1 1 200px}
  .input-buscador{width:100%}
  .icono-caja{width:32px; height:32px}

  /* #tablaMO/#tablaRep (Mano de obra/Repuestos, formulario de Orden de
     Trabajo) usan table-layout:fixed con columnas en % -- a diferencia de
     table.data/items-table (layout automatico, que ya se desborda solo y
     dispara el scroll de .tabla-scroll), fixed FUERZA esos anchos aunque no
     alcancen, asi que en vez de desbordar la tabla se encimaba el TEXTO de
     los encabezados (Cantidad/Valor/Subtotal superpuestos). Con un ancho
     minimo real, la tabla si desborda su .tabla-scroll y el scroll queda
     igual de bien que en las demas. 2 sep 2026. */
  #tablaMO, #tablaRep{min-width:560px}
  /* Mismo problema, encontrado despues en una auditoria general: Catalogo
     (7 columnas con Descripcion larga) y el widget de Stock critico (6
     columnas) tambien usan table-layout:fixed + colgroup en %. 2 sep 2026. */
  #tablaCatalogo{min-width:780px}
  #tablaStockCritico{min-width:640px}
  /* Horario de atencion (Configuracion, Manicurista): 3 campos con min-width
     (toggle+dia, Desde, Hasta) sumaban mas que el ancho disponible -- no
     desbordaban la pagina (el .form-row de base ya envuelve bien), pero el
     orden de wrap quedaba raro (label "Desde" solo, despues el toggle+dia,
     despues el input). Se fuerza una sola columna prolija en su lugar. */
  .horario-fila{flex-direction:column; align-items:stretch !important}
  .horario-fila > .field{min-width:0}

  /* Reservas (Manicurista): compactado especifico a pedido del usuario, 4
     sep 2026 ("achica lo que sea necesario") -- ademas de heredar el fix de
     .card/.page-head de arriba, la fila de navegacion de dia y cada fila de
     reserva bajan su padding/gap para que quepan mas reservas sin scroll. */
  .reservas-nav-dia{gap:6px; margin:10px 0 14px}
  .reserva-fila{gap:10px; padding:9px 2px}
  .reserva-hora{min-width:42px; font-size:13px}
  .reserva-cliente{font-size:14px}
}

/* Tabla de Usuarios: columnas de ancho fijo y controles del mismo tamano */
.tabla-usuarios{table-layout:fixed; width:100%}
.tabla-usuarios th:nth-child(1){width:30%}
.tabla-usuarios th:nth-child(2){width:22%}
.tabla-usuarios th:nth-child(3){width:13%}
.tabla-usuarios th:nth-child(4){width:35%}
.tabla-usuarios td{vertical-align:middle; overflow-wrap:anywhere}
.tabla-usuarios td:nth-child(2) select,
.tabla-usuarios td:nth-child(2) .badge{display:flex; align-items:center; justify-content:center; width:100%; min-height:38px; box-sizing:border-box; text-align:center}
.tabla-usuarios td:nth-child(3) .badge{display:inline-flex; align-items:center; justify-content:center; min-width:72px; min-height:28px; box-sizing:border-box}
.tabla-usuarios td.actions{white-space:nowrap}
.tabla-usuarios td.actions .acciones-fila{display:flex; justify-content:flex-end; gap:8px}
.tabla-usuarios td.actions .acciones-fila form{margin:0}
.tabla-usuarios td.actions .btn{min-width:90px; height:34px; box-sizing:border-box; justify-content:center}
.tabla-usuarios td.actions .btn-danger{border-color:#FCA5A5}

/* Pantallas de suscripcion / pago (fuera de la app: sin menu, fondo de marca) */
.pago-stage{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 20px; background:linear-gradient(160deg, #09090b 0%, #1c1c22 100%)}
.pago-marca{display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; font-size:15px;
  letter-spacing:.2px; margin-bottom:22px; opacity:.92}
.pago-marca img{width:30px; height:30px; border-radius:8px}
.pago-card{width:100%; max-width:460px; background:#fff; border-radius:18px; padding:34px 32px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.pago-icono{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px}
.pago-icono.ok{background:var(--ok-bg); color:var(--ok)}
.pago-icono.warn{background:#FEF3C7; color:#B45309}
.pago-icono.err{background:#FEE2E2; color:var(--rojo)}
.pago-card h1{font-size:22px; font-weight:600; letter-spacing:-.3px; text-align:center; margin:0 0 8px}
.pago-card .pago-sub{text-align:center; color:var(--gris); margin:0 0 22px; line-height:1.55}
.pago-empresa{display:block; text-align:center; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--cyan); margin:0 0 6px; font-weight:600}
.pago-resumen{border:1px solid var(--linea); border-radius:12px; overflow:hidden; margin-bottom:20px}
.pago-resumen .fila{display:flex; justify-content:space-between; gap:16px; padding:11px 16px; font-size:14px}
.pago-resumen .fila + .fila{border-top:1px solid var(--linea)}
.pago-resumen .fila span:first-child{color:var(--gris)}
.pago-resumen .fila span:last-child{font-variant-numeric:tabular-nums; font-weight:500}
.pago-resumen .total{background:var(--gris-cl)}
.pago-resumen .total span:first-child{color:var(--texto); font-weight:600}
.pago-resumen .total span:last-child{font-size:18px; font-weight:700}
.pago-boton{width:100%; height:46px; border-radius:12px; font-size:15px; font-weight:600; justify-content:center}
.pago-seguro{display:flex; align-items:center; justify-content:center; gap:7px; color:var(--gris);
  font-size:12.5px; margin:14px 0 0}
.pago-enlace{display:block; width:100%; text-align:center; background:none; border:0; color:var(--gris);
  font-size:13px; padding:14px 0 2px; cursor:pointer}
.pago-enlace:hover{color:var(--texto); text-decoration:underline}
.pago-pie{color:rgba(255,255,255,.5); font-size:12px; margin-top:22px; text-align:center}

/* Tarjeta de Configuracion con semaforo (Suscripcion y pagos) */
.config-tile.tono-ok{border-color:#86EFAC; background:#F0FDF4}
.config-tile.tono-ok .config-tile-icon{background:#DCFCE7; color:#15803D}
.config-tile.tono-ok .config-tile-header:hover{background:#DCFCE7}
.config-tile.tono-warn{border-color:#FCD34D; background:#FFFBEB}
.config-tile.tono-warn .config-tile-icon{background:#FEF3C7; color:#B45309}
.config-tile.tono-warn .config-tile-header:hover{background:#FEF3C7}
.config-tile.tono-err{border-color:#FCA5A5; background:#FEF2F2}
.config-tile.tono-err .config-tile-icon{background:#FEE2E2; color:#B91C1C}
.config-tile.tono-err .config-tile-header:hover{background:#FEE2E2}

/* Paginas legales (Terminos / Privacidad) */
.legal-card{max-width:780px; text-align:left}
.legal-card h1{text-align:left; margin-bottom:2px}
.legal-card .legal-version{color:var(--cyan); font-size:12px; margin:0 0 6px}
.legal-card h2{font-size:16px; margin:24px 0 6px}
.legal-card p, .legal-card li{color:var(--gris); line-height:1.65; font-size:14px}
.legal-card ul{padding-left:20px; margin:6px 0}
.legal-card a{color:var(--texto); font-weight:600}

/* Pagina mostrada dentro de una ventana flotante (iframe, ?embed=1): sin cabecera ni pie */
body.embebido{background:#fff}
body.embebido .topbar, body.embebido .footer, body.embebido .config-header{display:none !important}
body.embebido .container{padding-top:6px; max-width:none}
.config-tile-link{text-decoration:none; color:inherit; display:block}
.modal-box.modal-ancho{max-width:900px; padding:18px 20px 20px}
.modal-box.modal-ancho iframe{width:100%; height:68vh; border:0; display:block}
.modal-box.modal-ancho h2{margin:0 34px 10px 0; font-size:17px}
.menu-mas-lista button:disabled, .menu-mas-lista button:disabled:hover{opacity:.5; cursor:not-allowed; background:transparent}
/* Columnas de estado de las listas de OT (Trabajo solicitado / Taller / Estado), 3 oct 2026, pedido
   del usuario: "juntalas mas para aprovechar los espacios". Se ajustan a su contenido (los botones ya
   tienen ancho fijo) y con menos relleno lateral; el espacio que sobra va a Cliente/Vehiculo. */
table.data th.col-compacta, table.data td.col-compacta{width:1%; white-space:nowrap; padding-left:8px; padding-right:8px}
/* "Pago" de una OT Entregada con saldo pendiente: se pinta, sin cambiar el alto de la fila. */
.btn-pago-pendiente{color:#B91C1C; border-color:#FCA5A5; background:#FEF2F2; font-weight:600}
.btn-pago-pendiente:hover{color:#991B1B; border-color:#F87171; background:#FEE2E2}
/* Modal "Vincular cotizacion" de una OT (4 oct 2026): la mas probable va en verde. */
.vc-ot{padding:8px 10px;background:var(--gris-cl);border-radius:8px;font-size:13px}
.vc-lista{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto}
.vc-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--linea);border-radius:10px}
.vc-fila.vc-mejor{background:var(--ok-bg);border-color:var(--ok)}
.vc-linea1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vc-linea2{font-size:12px;margin-top:2px}

/* Configuracion con menu lateral (5 oct 2026): menu de grupos a la izquierda y las tarjetas del grupo a la derecha.
   En pantallas angostas el menu pasa arriba como una fila de botones que se desliza. */
.config-layout{display:grid; grid-template-columns:230px minmax(0,1fr); gap:22px; align-items:start}
.config-nav{position:sticky; top:14px; display:flex; flex-direction:column; gap:4px}
.config-nav button{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:10px 12px; border:0; border-radius:10px;
  background:transparent; color:var(--texto); font:inherit; font-size:14px; cursor:pointer;
}
.config-nav button:hover{background:var(--gris-cl)}
.config-nav button.activo{background:var(--azul); color:#fff; font-weight:600}
.config-nav-nombre{flex:1}
.config-nav-n{font-size:12px; opacity:.6}
.config-nav-aviso{width:8px; height:8px; border-radius:50%; flex-shrink:0}
.config-nav-aviso.err{background:#DC2626}
.config-nav-aviso.warn{background:#F59E0B}
.config-grupo-titulo{margin:0 0 14px; font-size:18px}
.config-layout .config-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:900px){
  .config-layout{grid-template-columns:1fr; gap:14px}
  .config-nav{position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px; -webkit-overflow-scrolling:touch}
  .config-nav button{width:auto; white-space:nowrap; flex-shrink:0; background:#fff; border:1px solid var(--linea)}
  .config-nav button.activo{border-color:var(--azul)}
  .config-nav-n{display:none}
}
@media (max-width:720px){ .config-layout .config-grid{grid-template-columns:1fr} }

/* Panel de plataforma con menu lateral (5 oct 2026): mismos estilos que el menu de Configuracion, para enlaces. */
.config-nav a{
  display:flex; align-items:center; gap:9px; width:100%; padding:10px 12px; border-radius:10px;
  color:var(--texto); text-decoration:none; font-size:14px;
}
.config-nav a:hover{background:var(--gris-cl)}
.config-nav a.activo{background:var(--azul); color:#fff; font-weight:600}
.config-nav-grupo{margin:12px 12px 2px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gris); font-weight:600}
@media (max-width:900px){
  .config-nav a{width:auto; white-space:nowrap; flex-shrink:0; background:#fff; border:1px solid var(--linea)}
  .config-nav a.activo{border-color:var(--azul)}
  .config-nav-grupo{display:none}
}

/* Ficha de empresa en el panel de plataforma (5 oct 2026): migas, resumen y pestanas. La pestana activa vive en
   body[data-pestana] para sobrevivir al reemplazo AJAX de la seccion. */
.migas{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gris); margin-bottom:12px}
.migas a{color:var(--gris); text-decoration:none}
.migas a:hover{color:var(--texto); text-decoration:underline}
.migas strong{color:var(--texto); font-weight:600}
.ficha-resumen{margin-bottom:6px}
.ficha-resumen-cabecera{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.ficha-resumen-cabecera h1{margin:0; font-size:22px}
.ficha-datos{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid var(--linea)}
.ficha-datos > div{display:flex; flex-direction:column; gap:4px; align-items:flex-start}
.ficha-dato-et{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gris); font-weight:600}
.ficha-pestanas{display:flex; gap:4px; border-bottom:1px solid var(--linea); margin:14px 0 16px; overflow-x:auto}
.ficha-pestanas button{padding:10px 14px; border:0; border-bottom:2px solid transparent; background:none; font:inherit; font-size:14px;
  color:var(--gris); cursor:pointer; white-space:nowrap}
.ficha-pestanas button:hover{color:var(--texto)}
.pestana-panel{display:none}
body[data-pestana="general"] .pestana-panel[data-p="general"],
body[data-pestana="cobro"] .pestana-panel[data-p="cobro"],
body[data-pestana="usuarios"] .pestana-panel[data-p="usuarios"],
body[data-pestana="bitacora"] .pestana-panel[data-p="bitacora"],
body[data-pestana="eliminar"] .pestana-panel[data-p="eliminar"]{display:block}
body[data-pestana="bitacora"] .ficha-pestanas button[data-p="bitacora"],
body[data-pestana="general"] .ficha-pestanas button[data-p="general"],
body[data-pestana="cobro"] .ficha-pestanas button[data-p="cobro"],
body[data-pestana="usuarios"] .ficha-pestanas button[data-p="usuarios"],
body[data-pestana="eliminar"] .ficha-pestanas button[data-p="eliminar"]{color:var(--texto); font-weight:600; border-bottom-color:var(--azul)}
.config-contenido .config-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:720px){ .config-contenido .config-grid{grid-template-columns:1fr} }
.mens-opcion{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--linea); border-radius:10px; margin-bottom:8px; cursor:pointer}
.mens-opcion input[type=radio]{width:auto; flex:0 0 auto; padding:0; margin:3px 0 0; border:0; background:none; accent-color:var(--azul)}
.mens-opcion > span{flex:1; min-width:0}
.mens-opcion > span > strong{display:block; font-size:14px}
.mens-opcion .desc{display:block; color:var(--gris); font-size:12.5px; margin:2px 0 6px}
.mens-opcion input[type=text]{max-width:180px}

/* Panel de cobranza de plataforma (5 oct 2026) */
.cobranza-tarjetas{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-bottom:16px}
.cobranza-card{margin:0; display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--texto); border-left:4px solid var(--linea)}
.cobranza-card .et{font-size:12px; color:var(--gris)}
.cobranza-card strong{font-size:24px}
.cobranza-card.ok{border-left-color:#16A34A}
.cobranza-card.warn{border-left-color:#F59E0B; background:#FFFBEB}
.cobranza-card.err{border-left-color:#DC2626; background:#FEF2F2}
a.cobranza-card:hover{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.cobranza-barras{display:flex; align-items:flex-end; gap:10px; height:150px}
.cobranza-barras .barra{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%}
.cobranza-barras .col{flex:1; width:100%; max-width:56px; display:flex; align-items:flex-end}
.cobranza-barras .col i{display:block; width:100%; background:var(--azul); border-radius:6px 6px 0 0; min-height:2px}
.cobranza-barras .monto{font-size:11px; color:var(--gris); min-height:14px}
.cobranza-barras .mes{font-size:12px; color:var(--gris); text-transform:uppercase}
.config-nav-globo{background:#F59E0B; color:#fff; border-radius:999px; font-size:11px; font-weight:700; padding:1px 7px}
.config-nav a.activo .config-nav-globo{background:#fff; color:#B45309}

/* Editor del vencimiento en la ficha de empresa (5 oct 2026) */
.venc-bloque{margin:0 0 16px; padding:14px; border:1px solid var(--linea); border-radius:12px}
.venc-fila{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.venc-fila input[type=date]{width:auto}

/* Comprobante de pago (5 oct 2026) */
.pago-icono-grande{width:68px; height:68px; box-shadow:0 0 0 8px rgba(22,163,74,.10)}
.pago-monto{text-align:center; margin:2px 0 16px}
.pago-monto .et{display:block; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--gris); margin-bottom:2px}
.pago-monto strong{font-size:36px; font-weight:700; letter-spacing:-1px; font-variant-numeric:tabular-nums}
.pago-vigencia{display:flex; align-items:center; justify-content:center; gap:8px; background:var(--ok-bg); color:#166534;
  border-radius:10px; padding:10px 14px; font-size:14px; margin-bottom:16px}
.pago-nota{display:flex; gap:10px; align-items:flex-start; background:var(--gris-cl); border-radius:10px; padding:12px 14px;
  font-size:13px; line-height:1.5; color:#404040; margin-bottom:18px}
.pago-nota svg{flex-shrink:0; margin-top:2px; color:var(--gris)}
.pago-resumen .fila span:last-child{text-align:right}
@media print{
  .pago-stage{background:#fff !important; min-height:0}
  .pago-marca, .pago-pie, .pago-boton, .pago-enlace{display:none !important}
  .pago-card{box-shadow:none !important; border:1px solid #ddd}
}

/* Avisos del servidor en la campana (5 oct 2026) */
.nav-campana{position:relative}
.campana-globo{position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:#dc2626; color:#fff; font-size:10.5px; font-weight:700; line-height:16px; text-align:center}
.menu-mas-lista a.campana-aviso{display:flex; align-items:flex-start; gap:8px; margin:0 0 6px; padding:9px 10px; border-radius:8px;
  background:#fef3c7; color:#78350f; font-size:13px; line-height:1.4}
.menu-mas-lista a.campana-aviso svg{flex-shrink:0; margin-top:1px}

/* Disponibilidad: horas por dia, una columna por dia (6 oct 2026) */
.dp-wrap{max-width:560px}
.dp-tabs{display:flex; gap:6px}
.dp-tab{flex:1; min-width:0; padding:11px 0; border:1px solid var(--linea); border-radius:12px; background:#fff; color:var(--texto); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; text-align:center}
.dp-tab.dp-sel{background:var(--azul); border-color:var(--azul); color:var(--sobre-azul, #fff)}
.dp-tab.dp-vacio:not(.dp-sel){color:var(--gris); background:var(--gris-cl)}
.dp-tab.dp-vacio.dp-sel{background:var(--gris); border-color:var(--gris); color:#fff}
.dp-dia-cab{display:flex; justify-content:space-between; align-items:baseline; margin:18px 2px 10px}
.dp-dia-cab b{font-size:17px}
.dp-dia-cab span{font-size:13px; color:var(--gris)}
.dp-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.dp-hora{position:relative; background:var(--gris-cl); border-radius:12px; text-align:center; padding:14px 0; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums}
.dp-x{position:absolute; right:2px; top:0; width:30px; height:30px; border:0; background:none; padding:0; color:var(--gris); font-size:19px; line-height:1; cursor:pointer}
.dp-x:hover{color:var(--texto)}
.dp-mas{border:1.5px dashed var(--azul); background:#fff; color:var(--azul); font:inherit; font-size:15px; cursor:pointer}
.dp-vacio-msg{margin:10px 2px 0; font-size:13px; color:var(--gris)}
.dp-nueva{display:flex; gap:8px; margin-top:12px; align-items:center}
.dp-nueva input[type=time]{flex:1; min-width:0; height:46px; font-size:16px; padding:0 12px}
.dp-nueva .btn{height:46px}
.dp-error{color:#b91c1c; margin:6px 0 0}
.dp-error[hidden], .dp-nueva[hidden], #dpMsg[hidden], .dp-sucio[hidden], .dp-vacio-msg[hidden]{display:none}
.dp-copiar .dp-tab.dp-on{background:var(--azul); border-color:var(--azul); color:var(--sobre-azul, #fff)}
.dp-copiar .dp-tab.dp-oculto{visibility:hidden}
.dp-btn-copiar{width:100%; height:44px; margin-top:10px; justify-content:center}
.dp-pie{display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:18px}
.dp-sucio{margin-right:auto; font-size:12.5px; font-weight:600; color:#B45309}
@media (max-width:860px){
  .dp-wrap{max-width:none}
  .dp-pie .btn{height:46px; padding:0 26px; font-size:15px}
}

/* ---------- Menu principal LATERAL (rubro Manicurista, 6 oct 2026) ----------
   Escritorio: columna a la izquierda, mismo lenguaje visual que .config-nav (Configuracion). Celular: barra fija abajo + hoja "Mas". */
.app-cuerpo.con-lateral{display:grid; grid-template-columns:232px minmax(0,1fr); align-items:start; max-width:1800px; margin:0 auto}
.app-cuerpo.con-lateral > .container{margin:22px 0; padding:0 24px 0 6px; max-width:none; min-width:0}
.menu-lateral{
  position:sticky; top:56px; align-self:start; max-height:calc(100vh - 56px); overflow-y:auto;
  display:flex; flex-direction:column; gap:3px; padding:22px 8px 22px 20px;
}
.menu-lateral a{
  display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:11px;
  color:var(--texto); font-weight:500; font-size:14px;
}
.menu-lateral a:hover{background:var(--gris-cl)}
.menu-lateral a.activo{background:var(--azul); color:var(--sobre-azul, #fff); font-weight:600}
.menu-lateral-nombre{flex:1; min-width:0}
.menu-lateral-grupo{margin:14px 13px 4px; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--gris); font-weight:600}
.menu-lateral-grupo:first-child{margin-top:0}
.menu-inferior, .menu-inferior-hoja{display:none}

@media (max-width:900px){
  .app-cuerpo.con-lateral{display:block}
  .app-cuerpo.con-lateral > .container{margin:14px auto; padding:0 12px}
  .menu-lateral{display:none}
  body.con-lateral{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .menu-inferior{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    /* 23 oct 2026, el usuario (iPhone, app de la pantalla de inicio): al subir o bajar la barra se iba con el contenido. Capa propia (translate3d) = arreglo habitual de iOS para barras fijas; no se pudo reproducir fuera del iPhone. */
    -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); will-change:transform;
    background:#fff; border-top:1px solid var(--linea); box-shadow:0 -2px 12px rgba(15,23,42,.06);
    /* 6 oct 2026, el usuario (iPhone): la barra quedaba pegada al borde y era dificil tocarla -> mas alta y con aire bajo los botones */
    padding:12px 10px calc(26px + env(safe-area-inset-bottom)); gap:2px;
  }
  /* 22 oct 2026, el usuario (opcion A del mockup barra_interruptor_opciones): los accesos van sobre una pista gris, como el interruptor «Lista clasica | Lista nueva»;
     el que esta marcado es un segmento blanco con sombra. La pista es un fondo detras de los botones (sin tocar las plantillas). */
  .menu-inferior::before{content:""; position:absolute; z-index:0; left:6px; right:6px; top:8px; bottom:calc(22px + env(safe-area-inset-bottom)); background:#F1F2F4; border-radius:18px; pointer-events:none}
  .menu-inferior a, .menu-inferior button{
    position:relative; z-index:1;
    flex:1; min-width:0; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    padding:8px 2px; border:0; background:none; border-radius:14px; font:inherit;
    font-size:12px; font-weight:500; color:var(--gris); cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:background-color .18s ease, box-shadow .18s ease, color .18s ease;
  }
  .menu-inferior a > span, .menu-inferior button > span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .menu-inferior a.activo, .menu-inferior button.activo{color:var(--azul); font-weight:700; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.14)}
  /* 22 oct 2026, el usuario: «cuando se presiona sobre Mas tambien se debe desplazar hacia Mas». Con la hoja de «Mas» abierta, el segmento blanco pasa a «Mas»
     (la clase .mas-abierto la pone static/js/base_2.js al abrir la hoja y se queda al cerrarla, hasta que se navega a otra pagina). */
  .menu-inferior.mas-abierto a.activo, .menu-inferior.mas-abierto button.activo{color:var(--gris); font-weight:500; background:none; box-shadow:none}
  .menu-inferior.mas-abierto #menuInferiorMas{color:var(--azul); font-weight:700; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.14)}
  .menu-inferior.mas-abierto .ml-centro.activo > span.ml-cir{box-shadow:0 6px 14px rgba(15,23,42,.22)}
  @media (prefers-reduced-motion:reduce){ .menu-inferior a, .menu-inferior button{transition:none} }
  /* Reservas al centro, en un circulo del color del negocio que sobresale de la barra (10 oct 2026, opcion A elegida por el usuario) */
  .menu-inferior .ml-centro{margin-top:-30px; background:none !important; box-shadow:none !important; color:var(--azul); font-weight:700; justify-content:flex-end; padding-top:0}
  .menu-inferior .ml-centro > span.ml-cir{overflow:visible; width:62px; height:62px; max-width:none; border-radius:50%; margin:0; background:var(--azul); color:var(--sobre-azul, #fff);
    display:flex; align-items:center; justify-content:center; border:5px solid #fff; box-shadow:0 6px 14px rgba(15,23,42,.22)}
  .menu-inferior .ml-centro.activo > span.ml-cir{box-shadow:0 6px 14px rgba(15,23,42,.22), 0 0 0 2px var(--azul)}
  .menu-inferior-hoja{
    position:fixed; left:10px; right:10px; bottom:calc(104px + env(safe-area-inset-bottom)); z-index:41;
    background:#fff; border:1px solid var(--linea); border-radius:16px; box-shadow:0 8px 28px rgba(15,23,42,.18);
    padding:8px; max-height:60vh; overflow-y:auto;
  }
  .menu-inferior-hoja:not([hidden]){display:block}
  .menu-inferior-hoja a{display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:11px; color:var(--texto); font-weight:500; font-size:15px}
  .menu-inferior-hoja a.activo{background:var(--azul); color:var(--sobre-azul, #fff)}
  /* hoja «Mas» con secciones (22 oct 2026, opcion B del usuario): asa, titulos de seccion, icono en cuadrito y numerito de pendientes. Las demas hojas (otros rubros) no llevan estos elementos y se ven como antes. */
  .hoja-asa{display:block; width:38px; height:4px; border-radius:99px; background:#D4D4D8; margin:2px auto 6px}
  .hoja-sec{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#8a8f98; font-weight:700; margin:10px 8px 2px}
  .menu-inferior-hoja:has(.hoja-asa) a{padding:8px 8px; font-size:14.5px}
  .hoja-ico{width:32px; height:32px; border-radius:10px; background:#F3F4F6; color:#374151; display:flex; align-items:center; justify-content:center; flex:none}
  .menu-inferior-hoja a.activo .hoja-ico{background:rgba(255,255,255,.22); color:inherit}
  .hoja-n{margin-left:auto; font-style:normal; min-width:20px; height:20px; border-radius:99px; background:var(--azul); color:var(--sobre-azul, #fff); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 6px}
  .menu-inferior-hoja a.activo .hoja-n{background:#fff; color:var(--azul)}
  .hoja-sep{display:block; height:1px; background:#EEF0F2; margin:8px 6px}
  .mas-punto{position:absolute; top:7px; right:calc(50% - 20px); width:10px; height:10px; border-radius:50%; background:var(--azul); border:2px solid #fff}
  body.con-lateral .footer{padding-bottom:12px}
}

/* Accesos de compartir de la barra superior (Manicurista, 6 oct 2026) */
.topbar-compartir{display:flex; align-items:center; gap:8px; margin-left:4px; min-width:0; overflow-x:auto; scrollbar-width:none}
.topbar-compartir::-webkit-scrollbar{display:none}
.topbar-compartir-btn{flex:0 0 auto}
/* Accesos de la barra superior con nombre debajo y en el color del negocio (opcion "C con nombres" del usuario, 7 oct 2026). Se aplican solo
   en el rubro con menu lateral (Manicurista): circulo + nombre, todos del color de acento (--azul). */
.topbar.tb-barra{gap:4px}
.topbar.tb-barra .menu-mas{margin-left:0 !important}
@media (max-width:900px){ .topbar.tb-barra{padding:8px 8px} }
.tb-item{display:flex; flex-direction:column; align-items:center; gap:3px; width:41px; flex:0 0 auto; background:none; border:0; padding:0; font-family:inherit; cursor:pointer; color:var(--azul)}
.tb-ic{position:relative; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--linea); background:#fff}
.tb-item:hover .tb-ic{background:var(--gris-cl)}
.tb-et{font-size:9px; font-weight:600; color:var(--gris); line-height:1.1; white-space:nowrap}
.topbar-compartir{gap:4px}
@media (min-width:900px){ .tb-item{width:54px} .tb-ic{width:36px; height:36px} .tb-et{font-size:10.5px} .topbar-compartir{gap:6px} }

/* ---------- Listas minimas con detalle al tocar (Clientes y Servicios del rubro Manicurista, 7 oct 2026) ---------- */
.lista-acordeon{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.fila-acordeon{border:1px solid var(--linea); border-radius:12px; background:#fff; overflow:hidden}
.fila-acordeon-toggle{
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%; min-height:50px;
  padding:10px 14px; cursor:pointer; font-family:inherit; color:inherit;
}
.fila-acordeon-titulo{flex:1; min-width:0; font-weight:600; font-size:15px; line-height:1.3; overflow-wrap:anywhere}
.fila-acordeon-extra{flex-shrink:0; font-weight:700; font-size:14.5px; color:var(--texto)}
.fila-acordeon-chevron{flex-shrink:0; color:var(--gris); font-size:12px; transition:transform .15s ease}
.fila-acordeon.abierta .fila-acordeon-chevron{transform:rotate(180deg)}
.fila-acordeon.abierta{border-color:var(--azul)}
.fila-acordeon-detalle{display:none; padding:2px 14px 14px; border-top:1px solid var(--linea)}
.fila-acordeon.abierta .fila-acordeon-detalle{display:block}
.fila-dato{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; font-size:14px; border-bottom:1px dashed var(--linea)}
.fila-dato > span:first-child{color:var(--gris); flex-shrink:0}
.fila-dato a, .fila-dato b{font-weight:600; text-align:right; min-width:0}
.fila-dato-largo{overflow-wrap:anywhere}
.fila-acciones{display:flex; gap:8px; margin-top:12px}
.fila-acciones .btn, .fila-acciones form{flex:1}
.fila-acciones form .btn{width:100%}
.fila-acciones .btn{height:42px; justify-content:center}
@media (max-width:900px){
  #panelReservas > .actions{display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:8px}
  #panelReservas > .actions form{flex:1; min-width:0}
  #panelReservas > .actions .input-buscador{width:100%}
  #panelReservas > .actions .btn{flex-shrink:0; height:42px}
}

/* ---------- Botones con el color del negocio (rubro Manicurista, 7 oct 2026, pedido explicito del usuario) ----------
   Principal = color del negocio lleno; secundario = fondo claro teñido + borde del color; peligro = rojo suave. Texto siempre legible
   (--sobre-azul calcula blanco o negro segun el color elegido). Solo con menu lateral, los demas rubros no cambian. */
body.con-lateral .btn{
  background:#fff; border:1px solid var(--azul); color:var(--texto);
  border-radius:12px; font-weight:600; transition:background .15s, box-shadow .15s, filter .15s;
}
@supports (background: color-mix(in srgb, red 10%, white)){
  body.con-lateral .btn{background:color-mix(in srgb, var(--azul) 9%, #fff); border-color:color-mix(in srgb, var(--azul) 40%, #fff)}
  body.con-lateral .btn:hover{background:color-mix(in srgb, var(--azul) 18%, #fff); border-color:var(--azul)}
}
body.con-lateral .btn-primary{
  background:var(--azul); border-color:var(--azul); color:var(--sobre-azul, #fff);
  box-shadow:0 2px 8px rgba(15,23,42,.14);
}
body.con-lateral .btn-primary:hover{background:var(--azul); border-color:var(--azul); color:var(--sobre-azul, #fff); filter:brightness(.92)}
body.con-lateral .btn-sm{height:38px; padding:0 14px}
body.con-lateral .btn-ghost{background:transparent; border-color:transparent; color:var(--gris); box-shadow:none}
body.con-lateral .btn-ghost:hover{background:var(--gris-cl); border-color:transparent}
body.con-lateral .btn-danger{background:#FEF2F2; border-color:#FECACA; color:var(--rojo)}
body.con-lateral .btn-danger:hover{background:#FEE2E2; border-color:#FCA5A5}
body.con-lateral .btn-danger-solid{border-radius:12px}

/* ---- Calendario de Bloqueos (7 oct 2026, opcion A elegida por el usuario) ---- */
.bl-cal-cab{display:flex; justify-content:space-between; align-items:center; margin:4px 0 6px; font-weight:800; font-size:15px}
.bl-cal-cab button{border:0; background:none; color:var(--azul); font-size:22px; line-height:1; padding:4px 12px; cursor:pointer}
.bl-cal-cab button:disabled{color:var(--linea); cursor:default}
.bl-cal{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:3px; text-align:center}
.bl-cal .bl-d0{font-size:10.5px; font-weight:800; color:var(--gris); padding:3px 0}
.bl-cal button.bl-d{position:relative; height:38px; border:0; border-radius:10px; background:#fff; font:inherit; font-size:13.5px; color:var(--texto); cursor:pointer; padding:0}
.bl-cal button.bl-d.bl-p{color:#C4C8CF; cursor:default}
.bl-cal button.bl-d.bl-hoy{box-shadow:inset 0 0 0 1.5px var(--azul)}
.bl-cal button.bl-d.bl-b{background:#FEF0EE; color:#B42318; font-weight:800}
.bl-cal button.bl-d.bl-parcial{background:#FFF7E6; color:#92400E; font-weight:800}
.bl-cal button.bl-d.bl-rep:after,.bl-cal button.bl-d.bl-b:after,.bl-cal button.bl-d.bl-parcial:after{content:""; position:absolute; bottom:4px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:currentColor}
.bl-cal button.bl-d.bl-rep:not(.bl-b):not(.bl-parcial):after{background:#B42318}
.bl-cal button.bl-d.bl-s{background:var(--azul); color:var(--sobre-azul, #fff); font-weight:800}
.bl-cal button.bl-d.bl-s:after{background:var(--sobre-azul, #fff)}
/* 8 oct 2026 (opciones B + D elegidas por el usuario): no se ofrece bloquear lo que ya tiene reservas. En "Dias completos" esos dias no aparecen; en
   "Solo unas horas" aparecen con un punto gris y solo se ofrecen sus horas libres. */
.bl-modo{margin:0 0 8px}
.bl-cal .bl-vacio{height:38px}
.bl-cal button.bl-d.bl-ocu:after{content:""; position:absolute; bottom:4px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:#9CA3AF}
.bl-chips{display:flex; flex-wrap:wrap; gap:7px; margin:4px 0 8px}
.bl-chip{border:1px solid #D4D4D4; background:#fff; border-radius:10px; padding:8px 12px; font:inherit; font-size:13.5px; color:var(--texto); cursor:pointer}
.bl-chip.bl-on{background:var(--azul); border-color:var(--azul); color:var(--sobre-azul, #fff); font-weight:700}
.bl-nota{font-size:12px; color:var(--gris); background:var(--gris-cl); border-radius:10px; padding:8px 10px; margin:6px 0}
.bl-aviso{color:#B42318; margin:6px 0}
.bl-leyenda{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11px; color:var(--gris); margin:8px 0 2px}
.bl-leyenda i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px}
.bl-panel{border-top:1px dashed var(--linea); margin-top:12px; padding-top:12px}
.bl-panel-tit{font-weight:800; font-size:14.5px; margin-bottom:9px}
.bl-seg{display:flex; background:var(--gris-cl); border-radius:11px; padding:3px; margin-bottom:9px}
.bl-seg button{flex:1; border:0; background:none; padding:9px 0; font:inherit; font-size:12.5px; font-weight:700; border-radius:9px; color:var(--gris); cursor:pointer}
.bl-seg button.bl-on{background:#fff; color:var(--texto); box-shadow:0 1px 3px rgba(0,0,0,.14)}
.bl-horas{display:block; margin-bottom:9px}
.bl-horas[hidden]{display:none}   /* 8 oct 2026: ahora lleva titulo + botones de horas libres (antes dos selectores en fila) */
.bl-horas .field{flex:1; min-width:0; margin:0}
.bl-ya{display:flex; align-items:center; gap:8px; font-size:12.5px; background:var(--gris-cl); border-radius:10px; padding:7px 10px; margin-bottom:6px}
.bl-ya span{flex:1; min-width:0}
.bl-chk{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; margin:6px 0 10px; cursor:pointer}
.bl-chk input{width:18px; height:18px; flex:0 0 auto}
.bl-lista-tit{font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--gris); margin:16px 0 7px}
.bl-fila{display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--linea); border-radius:12px; background:#fff; margin-bottom:6px}
.bl-fila .bl-f{flex:0 0 46px; text-align:center; background:#FEF0EE; color:#B42318; border-radius:9px; padding:4px 0; line-height:1.05}
.bl-fila .bl-f small{display:block; font-size:9.5px; font-weight:800; letter-spacing:.06em}
.bl-fila .bl-f b{font-size:19px}
.bl-fila .bl-f.bl-fr{background:var(--gris-cl); color:var(--texto)}
.bl-fila .bl-tx{flex:1; min-width:0; font-size:13.5px; line-height:1.3}
.bl-fila .bl-tx em{display:block; font-style:normal; color:var(--gris); font-size:12px}
.bl-fila .bl-x,.bl-ya .bl-x{border:0; background:none; color:var(--gris); font-size:16px; padding:6px; cursor:pointer}

/* ---- Foto de servicio (7 oct 2026) ---- */
.sv-mini{width:34px; height:34px; border-radius:8px; object-fit:cover; flex:0 0 auto; margin-right:10px}
.sv-foto-caja{display:flex; align-items:center; gap:12px}
.sv-foto-prev{width:72px; height:72px; border-radius:12px; object-fit:cover; flex:0 0 auto; border:1px solid var(--linea)}
.sv-foto-prev[hidden]{display:none}
.sv-foto-vacia{display:flex; align-items:center; justify-content:center; background:var(--gris-cl); border:1.5px dashed #CBD5E1; color:#9CA3AF}
.sv-foto-vacia[hidden]{display:none}

/* Tarjeta de Mercado Pago con sus colores (7 oct 2026, pedido explicito del usuario): azul #009EE3. */
.config-tile.tono-mp{border-color:#9BD6F3; background:#EEF8FD}
.config-tile.tono-mp .config-tile-icon{background:transparent; padding:0; width:46px}
.config-tile.tono-mp .config-tile-header:hover{background:#DDF1FB}
.config-tile.tono-mp .config-tile-chevron{color:#009EE3}

/* ---- Tarjetas de la barra superior y ventana de compartir (opciones elegidas por el usuario, 7 oct 2026): minimalistas ---- */
.cmp-tit{margin:0 0 6px; font-size:17px; font-weight:700; padding-right:26px}
.cmp-fila{display:flex; justify-content:space-between; align-items:center; width:100%; padding:15px 0; border:0; border-bottom:1px solid var(--linea); background:none;
          font:inherit; font-size:15px; color:var(--texto); text-align:left; cursor:pointer}
.cmp-fila:last-child{border-bottom:0}
.cmp-acciones{display:flex; margin-top:16px}
.cmp-acc{flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; padding:6px 4px 2px; border:0; background:none; font:inherit; font-size:12.5px; font-weight:600;
         color:var(--texto); text-decoration:none; cursor:pointer}
.cmp-acc + .cmp-acc{border-left:1px solid var(--linea)}
.cmp-acc svg{width:30px; height:30px}
.cmp-acc-wa svg{color:#25D366}
.cmp-fila i{font-style:normal; color:var(--gris)}
.cmp-dato{display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1px solid var(--linea); font-size:14px}
.cmp-dato span{flex:0 0 34%; color:var(--gris)}
.cmp-dato b{flex:1; min-width:0; font-weight:600; overflow-wrap:anywhere}
.cmp-dato button{flex:0 0 auto; border:0; background:none; color:var(--azul); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:2px 0}
.cmp-todo{display:block; width:100%; margin-top:16px; height:46px; border:0; border-radius:12px; background:var(--azul); color:var(--sobre-azul, #fff); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer}
.cmp-tabs{display:flex; gap:18px; border-bottom:1px solid var(--linea); margin:0 4px 4px}
.cmp-tabs button{width:auto; padding:9px 0; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; font:inherit; font-size:13.5px; font-weight:600; color:var(--gris); cursor:pointer}
.cmp-tabs button.s{color:var(--texto); border-bottom-color:var(--texto)}
.menu-mas-lista a.cmp-aviso{display:block; padding:11px 8px; border-bottom:1px solid var(--linea); font-size:13.5px; line-height:1.4}
.cmp-vacio{margin:0; padding:14px 8px; font-size:13px; color:var(--gris)}
/* Avisos del celular en la campana (16 oct 2026): titulo + hora y detalle; los sin leer llevan un punto del color del negocio */
.cmp-tabs em{font-style:normal; font-size:11px; font-weight:800; margin-left:6px; padding:1px 7px; border-radius:99px; background:color-mix(in srgb, var(--azul) 14%, #fff); color:var(--azul)}
.cmp-acc-fila{display:flex; justify-content:space-between; align-items:center; padding:8px 8px 4px; font-size:12px; color:var(--gris)}
.cmp-acc-fila button{width:auto; border:0; background:none; padding:0; font:inherit; font-size:12px; font-weight:700; color:var(--azul); cursor:pointer}
.menu-mas-lista a.cmp-aviso .cmp-fila-tit{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.menu-mas-lista a.cmp-aviso .cmp-fila-tit b{font-size:13.5px}
.menu-mas-lista a.cmp-aviso .cmp-fila-tit small{font-size:11px; color:var(--gris); white-space:nowrap}
.menu-mas-lista a.cmp-aviso .cmp-fila-txt{display:block; margin-top:1px; font-size:12.5px; color:var(--gris)}
.menu-mas-lista a.cmp-nuevo .cmp-fila-tit b::after{content:""; display:inline-block; width:7px; height:7px; margin-left:7px; border-radius:50%; background:var(--azul); vertical-align:middle}
.cmp-sec{padding:12px 8px 0; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gris)}
.cmp-pie{margin:0; padding:10px 8px 6px; font-size:11.5px; color:var(--gris)}
.cmp-vaciar{text-align:right; padding:4px 4px 0}
.cmp-vaciar button{width:auto; border:0; background:none; font:inherit; font-size:12px; color:var(--gris); cursor:pointer}
.cmp-perfil-cab{padding:6px 10px 10px; border-bottom:1px solid var(--linea); margin-bottom:2px}
.cmp-perfil-cab b{display:block; font-size:14.5px}
.cmp-perfil-cab small{display:block; margin-top:2px; font-size:12px; color:var(--gris); overflow-wrap:anywhere}
.cmp-perfil a{padding:11px 10px; font-size:14.5px}
.cmp-perfil button.cmp-salir{color:#B91C1C; padding:11px 10px; font-size:14.5px}

/* ---- Mi perfil (opcion "A" elegida por el usuario, 8 oct 2026; solo rubro con menu lateral): minimalista ---- */
.pf{max-width:520px; margin:0 auto; padding:6px 4px 30px}
.pf-quien{display:flex; align-items:center; gap:14px; margin-bottom:6px}
.pf-av{width:56px; height:56px; border-radius:50%; background:var(--azul); color:var(--sobre-azul, #fff); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; flex-shrink:0}
.pf-quien b{display:block; font-size:19px; letter-spacing:-.01em}
.pf-quien small{display:block; margin-top:2px; font-size:12.5px; color:var(--gris); overflow-wrap:anywhere}
.pf-h{margin:26px 0 4px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gris)}
.pf-campo{display:block; border-bottom:1px solid var(--linea); padding:11px 0 9px}
.pf-campo small{display:block; margin-bottom:2px; font-size:11.5px; color:var(--gris)}
.pf-campo input, .pf-campo input:focus{width:100%; border:0; outline:0; box-shadow:none; border-radius:0; padding:3px 0; font:inherit; font-size:16px; background:none; color:var(--texto)}
.pf-campo:focus-within{border-bottom-color:var(--texto)}
.pf-pie{margin:8px 0 0; font-size:12px; line-height:1.4; color:var(--gris)}
.pf-btn{display:flex; align-items:center; justify-content:center; width:100%; height:46px; margin-top:16px; border:0; border-radius:12px; background:var(--azul); color:var(--sobre-azul, #fff); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer}
.pf-btn:disabled{opacity:.5; cursor:default}
.pf-det{border-bottom:1px solid var(--linea)}
.pf-det summary{display:flex; justify-content:space-between; align-items:center; padding:15px 0; font-size:15px; cursor:pointer; list-style:none}
.pf-det summary::-webkit-details-marker{display:none}
.pf-det summary i{font-style:normal; color:var(--gris); transition:transform .15s}
.pf-det[open] summary i{transform:rotate(90deg)}
.pf-det form{padding:0 0 18px}
.pf-msg{min-height:16px; margin-top:10px; font-size:13px}

/* Logo de la empresa como boton "Inicio" del menu (8 oct 2026): reemplaza a la casita */
.ml-logo{display:block; object-fit:contain; flex-shrink:0}
.menu-inferior .ml-logo{height:26px; width:auto; max-width:44px}
.menu-lateral .ml-logo{height:20px; width:auto; max-width:30px}


/* ---- Configuracion del rubro con menu lateral (8 oct 2026, opcion "A" elegida por el usuario): una sola lista con buscador y valores a la vista,
   y ventanas que suben desde abajo con el boton Guardar fijo (al alcance del pulgar). Solo aplica con body.con-lateral. ---- */
.config-layout.config-lista{display:block; max-width:760px}
.config-lista .config-contenido{min-width:0}
.config-lista .config-grid{display:block}
.cfg-busca{position:sticky; top:62px; z-index:6; background:#F8FAFC; padding:6px 0 8px}
.cfg-busca input{width:100%; height:46px; border:1px solid var(--linea); border-radius:14px; background:#fff; font:inherit; font-size:15px; padding:0 14px 0 42px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat:no-repeat; background-position:14px center}
.cfg-sec{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); margin:20px 4px 2px}
.cfg-vacio{color:var(--gris); text-align:center; padding:24px 0}
.config-lista .config-tile{border:0; border-bottom:1px solid var(--linea); border-radius:0; background:transparent; box-shadow:none; margin:0}
.config-lista .config-tile.tono-ok, .config-lista .config-tile.tono-warn, .config-lista .config-tile.tono-err, .config-lista .config-tile.tono-mp{background:transparent}
.config-lista .config-tile.tono-warn .config-tile-texto .titulo, .config-lista .config-tile.tono-err .config-tile-texto .titulo{color:#B45309}
.config-lista .config-tile-header{padding:10px 4px; min-height:62px; align-items:center; gap:12px; border-radius:12px}
.config-lista .config-tile-icon{width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:#fff; border:1px solid var(--linea); margin:0; display:flex; align-items:center; justify-content:center}
.config-lista .config-tile.tono-mp .config-tile-icon{width:auto; flex:0 0 auto; padding:0 8px; border-radius:19px}
.config-lista .config-tile-texto .titulo{font-size:15px; margin-bottom:1px}
.config-lista .config-tile-texto .desc{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; line-height:1.4}
body.pg-config .config-header{margin-bottom:6px} body.pg-config .config-header h1{font-size:22px} body.pg-config .config-header .subtitulo-pagina{display:none}
.config-lista .config-tile-chevron{margin-top:0; color:#C4C8CF}
/* Ventanas como hojas que suben desde abajo (8 oct 2026, pedido del usuario: "a todas"): en el celular (< 700 px) TODAS las ventanas del rubro con menu
   lateral (Manicurista). Boton Guardar fijo abajo con margen amplio para tocar sin problema. En pantallas grandes se ven centradas como siempre. */
@media (max-width:699px){
  body.con-lateral .modal-overlay{align-items:flex-end; padding:0}
  body.con-lateral .modal-box{width:100%; max-width:560px !important; margin:0 auto; max-height:92vh !important; overflow-y:auto; border-radius:24px 24px 0 0; padding:26px 20px 0;
    animation:cfg-subir .22s ease-out; overscroll-behavior:contain}
  body.con-lateral .modal-box::before{content:""; position:absolute; top:9px; left:50%; width:44px; height:5px; margin-left:-22px; border-radius:3px; background:#D1D5DB}
  body.con-lateral .modal-box form .actions{position:sticky; bottom:0; margin:16px -20px 0 !important; padding:12px 20px calc(38px + env(safe-area-inset-bottom)); background:#fff;
    border-top:1px solid var(--linea); justify-content:stretch !important}
  body.con-lateral .modal-box form .actions .btn-primary{flex:1; height:48px; font-size:15px; font-weight:700; border-radius:14px; justify-content:center; text-align:center}
  body.con-lateral .modal-box{padding-bottom:calc(34px + env(safe-area-inset-bottom))}
  body.con-lateral .modal-box:has(form .actions){padding-bottom:0}
  /* 11 oct 2026: ventanas cuyos formularios viven dentro de listas desplegables (Profesionales): no hay barra fija de Guardar que haga de margen, asi que el ultimo
     renglon quedaba pegado al borde de abajo (zona del indicador del iPhone) y costaba tocarlo */
  body.con-lateral .modal-box.mb-lista{padding-bottom:calc(46px + env(safe-area-inset-bottom)) !important}
}
@keyframes cfg-subir{from{transform:translateY(40px); opacity:0} to{transform:none; opacity:1}}

/* Telefono del perfil con bandera y +56 (8 oct 2026) */
.pf-campo .tel-prefijo{height:auto; border:0; background:none; padding:0 6px 0 0; font-size:16px; color:var(--texto)}
.pf-campo .tel-group{gap:2px}

/* Selector de 3 opciones (8 oct 2026, recordatorios de hora) */
.rc-seg{display:flex; background:#F1F2F4; border-radius:12px; padding:4px; gap:2px}
.rc-seg label{flex:1; margin:0}
.rc-seg input{position:absolute; opacity:0; pointer-events:none}
.rc-seg span{display:block; text-align:center; font-size:13px; font-weight:600; padding:10px 4px; border-radius:9px; color:#64748B; cursor:pointer}
.rc-seg input:checked + span{background:#fff; color:#0F172A; box-shadow:0 1px 4px rgba(0,0,0,.15)}

/* 8 oct 2026: con "Sin vencimiento" encendido el campo de dias queda apagado a la vista */
#pk_vigencia:disabled{opacity:.45; cursor:not-allowed}

/* Fidelizacion (9 oct 2026): tarjeta de sellos de la clienta. Lleno = visita realizada, punteado = la visita con premio. */
.fid-sellos{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; margin:2px 0 6px}
.fid-sello{width:18px; height:18px; border-radius:50%; border:1.5px solid #CBD5E1; background:#fff; display:inline-block}
.fid-sello.u{background:var(--acento, #0F172A); border-color:var(--acento, #0F172A)}
.fid-sello.p{border-color:var(--acento, #0F172A); border-style:dashed}

/* Menu lateral contraible (16 oct 2026, pedido del usuario: «que pueda contraerse pero deje los iconos visibles»). Solo el de Ferreteria (.ml-colapsable); el estado se recuerda en el
   navegador (html.ml-contraido). Contraido: columna angosta con solo los iconos, los grupos pasan a una linea fina y cada enlace lleva su nombre como ayuda (title). */
.ml-toggle{display:flex; align-items:center; gap:11px; padding:8px 13px; margin-bottom:6px; border:0; background:none; color:var(--gris); font:inherit; font-size:13px; font-weight:500; border-radius:11px; cursor:pointer; text-align:left}
.ml-toggle:hover{background:var(--gris-cl); color:var(--texto)}
.ml-toggle svg{flex-shrink:0; transition:transform .2s}
.app-cuerpo.con-lateral:has(> .ml-colapsable){transition:grid-template-columns .18s ease}
html.ml-contraido .ml-toggle svg{transform:rotate(180deg)}
html.ml-contraido .app-cuerpo.con-lateral:has(> .ml-colapsable){grid-template-columns:76px minmax(0,1fr)}
html.ml-contraido .menu-lateral.ml-colapsable{padding:22px 10px; align-items:stretch}
html.ml-contraido .menu-lateral.ml-colapsable a, html.ml-contraido .menu-lateral.ml-colapsable .ml-toggle{justify-content:center; padding:11px 0}
html.ml-contraido .menu-lateral.ml-colapsable .menu-lateral-nombre, html.ml-contraido .menu-lateral.ml-colapsable .ml-toggle span{display:none}
html.ml-contraido .menu-lateral.ml-colapsable .menu-lateral-grupo{height:1px; margin:10px 12px; padding:0; font-size:0; background:var(--linea)}
@media (max-width:900px){ .ml-toggle{display:none} }

/* ---------- Ventana «Pagos» (22 oct 2026, mockup aprobado: diseno/pagos/pagos_propuesta.png) ----------
   Minimalista: el saldo en grande, una barra fina de lo pagado, pagos en filas simples y el formulario con su titulo. El verde de «Pagado completo» es el unico color. */
.pg-titulo{margin:0; font-size:20px; font-weight:700; padding-right:34px}
.pg-sub{margin:2px 0 0; color:#737373; font-size:13px}
.pg-rot{margin:0 0 8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#8A8F98; font-weight:700}
.pg-res{margin-top:20px}
.pg-saldo{font-size:34px; font-weight:700; letter-spacing:-.01em; line-height:1.1; font-variant-numeric:tabular-nums}
.pg-saldo.pg-ok{color:#15803D; display:flex; align-items:center; gap:10px}
.pg-saldo.pg-ok svg{flex:none}
.pg-saldo.pg-neutro{font-size:20px; color:var(--gris); letter-spacing:0}
.pg-barra{height:5px; border-radius:3px; background:#E5E7EB; margin:14px 0 8px; overflow:hidden}
.pg-barra i{display:block; height:100%; background:#171717; border-radius:3px}
.pg-barra.lleno i{background:#16A34A}
.pg-det{font-size:13px; color:#737373}
.pg-det b{color:#404040; font-weight:600}
.pg-sec{margin-top:22px; padding-top:16px; border-top:1px solid #EEF0F2}
.pg-pago{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid #F3F4F6}
.pg-pago:last-child{border-bottom:0}
.pg-f{color:#737373; font-size:13px; width:66px; flex:none}
.pg-n{color:#9CA3AF; font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pg-m{font-weight:600; font-variant-numeric:tabular-nums}
.pg-elim-form{margin:0}
.pg-elim{background:none; border:0; padding:0 0 0 6px; font-family:inherit; font-size:12.5px; color:#9CA3AF; cursor:pointer}
.pg-elim:hover{color:var(--rojo)}
.pg-vacio{color:#9CA3AF; font-size:13.5px; padding:2px 0}
.pg-form input[type=text]{width:100%; height:42px; border:1px solid #D4D4D8; border-radius:10px; padding:0 13px; font-size:14.5px; font-family:inherit; background:#fff; color:var(--texto)}
.pg-monto{display:flex; gap:12px; align-items:center; margin-bottom:10px}
.pg-monto input{flex:1; font-size:17px !important; font-weight:600}
.pg-todo{background:none; border:0; padding:0; font-family:inherit; color:#525252; font-size:13px; font-weight:600; text-decoration:underline; white-space:nowrap; cursor:pointer}
.pg-todo:hover{color:var(--texto)}
.pg-pie{justify-content:flex-end; margin-top:14px}
.pg-pie .btn{height:42px; border-radius:10px; font-size:14.5px; font-weight:700; padding:0 22px}
.pg-cerrar{margin-top:20px}
.pg-cerrar .btn{border:1.5px solid #D4D4D8; font-weight:700}

/* Rueda de ajustes en el encabezado de cada herramienta (22 oct 2026, opcion A): lleva directo a su ajuste en Configuracion */
.rueda-ajustes{width:38px; height:38px; border-radius:50%; border:1px solid #D4D4D4; background:#fff; color:#171717; display:inline-flex; align-items:center; justify-content:center; flex:none; text-decoration:none; -webkit-tap-highlight-color:transparent}
.rueda-ajustes:hover{background:var(--gris-cl)}
.rueda-ajustes:focus-visible{outline:2px solid var(--azul); outline-offset:2px}
.migas-ajustes{font-size:12.5px; color:#6b7280; margin:0 0 6px; display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.migas-ajustes a{color:#6b7280; text-decoration:none}.migas-ajustes a:hover{text-decoration:underline}.migas-ajustes b{color:var(--azul)}
/* la rueda dentro de las pestañas: sin esto heredaba el relleno y el borde inferior transparente de los enlaces de pestaña (se veia cortada abajo) */
.ti-tabs a.rueda-ajustes, .cu-tabs a.rueda-ajustes{width:32px; height:32px; padding:0; margin:0 0 3px; border:1px solid #D4D4D4; color:#171717; font-size:inherit}
/* en los encabezados de pagina (Caja, Campañas) la rueda va arriba a la derecha aunque el encabezado se apile en el celular */
.page-head{position:relative}
.rueda-flotante{position:absolute; top:0; right:0}
.page-head:has(.rueda-flotante) .titulo-texto{padding-right:46px}