: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)}
.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}

/* 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)}
.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-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}
.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);
}
.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)}

.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}