* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background: #17171b;
  color: #e8e8e8;
  position: relative;
  min-height: 100vh;
  padding-bottom: 40px;
  box-sizing: border-box;
}

header {
  background: #111;
  color: #fff;
  padding: 0 24px;
  height: 55px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
header h1 { margin: 0; font-size: 20px; letter-spacing: 1px; }
header h1 span { font-weight: 400; opacity: .85; font-size: 20px; margin-left: 8px; }
.header-home-link { color: #fff; text-decoration: none; display: flex; align-items: center; }
.header-logo { height: 30px; width: auto; margin-right: 8px; border-radius: 4px; }

.breadcrumb {
  padding: 10px 24px;
  font-size: 13px;
  color: #777;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.breadcrumb a { color: #BCA474; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.dashboard {
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
  min-height: calc(100vh - 95px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.dashboard-intro { margin: 0 0 20px; color: #555; font-size: 15px; }
.dashboard-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.modulo-card {
  background: #fff;
  border-radius: 5px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  border-top: 4px solid #ccc;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  text-decoration: none;
  color: #1a1a1a;
  transition: transform .1s ease, box-shadow .1s ease;
  flex: 1 1 240px;
  max-width: 280px;
}
.modulo-card.disponible { border-top-color: #BCA474; cursor: pointer; }
.modulo-card.disponible:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.modulo-card.proximamente { opacity: .65; cursor: default; }
.modulo-card.parcial { border-top-color: #6b8f43; opacity: .85; }

.modulo-icono { font-size: 26px; margin-bottom: 8px; }
.modulo-titulo { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.modulo-desc { font-size: 13px; color: #666; flex-grow: 1; }
.modulo-estado {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: 20px;
  width: fit-content;
}
.modulo-card.disponible .modulo-estado { background: #fdf6e3; color: #A08B63; }
.modulo-card.proximamente .modulo-estado { background: #eee; color: #888; }
.modulo-card.parcial .modulo-estado { background: #eef4e6; color: #567336; }

main {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 16px;
  padding: 16px;
}
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  .botones-agregar { flex-direction: column; }
  .citas-header { flex-wrap: wrap; row-gap: 8px; }
  .citas-header-acciones { flex-wrap: wrap; }
}

main > .panel { min-width: 0; }

.panel {
  background: #fff;
  color: #1a1a1a;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.panel h2 {
  margin-top: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #555;
}

input, select, button, textarea {
  font-size: 15px;
  padding: 8px 10px;
  margin: 4px 0;
  border-radius: 6px;
  border: 1px solid #ccc;
  width: 100%;
}
textarea { font-family: inherit; resize: vertical; }
button {
  background: #111;
  color: #fff;
  border: none;
  cursor: pointer;
  width: auto;
}
button:hover { background: #333; }

.btn-primario {
  width: 100%;
  font-size: 18px;
  padding: 14px;
  margin-top: 12px;
  background: #BCA474;
}
.btn-primario:hover { background: #A08B63; }

.lista-resultados {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  max-height: 140px;
  overflow-y: auto;
}
.lista-resultados li { padding: 6px 8px; cursor: pointer; border-bottom: 1px solid #eee; }
.lista-resultados li:hover { background: #f0f0f0; }

.seleccionado {
  background: #fdf6e3;
  border: 1px solid #BCA474;
  border-radius: 6px;
  padding: 8px;
  margin-top: 8px;
  font-weight: 600;
}
#btn-cliente-nuevo { margin-top: 16px; }

.oculto { display: none !important; }

table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
th, td { text-align: left; padding: 6px 4px; border-bottom: 1px solid #eee; }

.th-ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
.th-ordenable:hover { color: #b08d57; }
.orden-flecha { font-size: 10px; margin-left: 2px; color: #b08d57; }

#tabla-items { table-layout: fixed; }
#tabla-items th, #tabla-items td { padding: 12px 10px; vertical-align: middle; overflow-wrap: break-word; word-break: break-word; }
#tabla-items th:last-child, #tabla-items td:last-child { width: 28px; }
@media (max-width: 900px) {
  #tabla-items th:last-child, #tabla-items td:last-child { width: 30px; }
  #tabla-items th, #tabla-items td { padding: 8px 4px; font-size: 13px; }
}
@media (min-width: 901px) {
  #tabla-items th { white-space: nowrap; }
  #tabla-items { min-width: 0; }
  #panel-pago { overflow-x: auto; }
}

/* Importe editable directamente en la tabla del ticket (seccion 3),
   incluye servicios, productos y propina. */
#tabla-items input.input-importe {
  width: 100%;
  box-sizing: border-box;
  text-align: right;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font: inherit;
}

/* Quitar las flechas de incremento/decremento en los campos de montos de
   las secciones 2 y 3 (propina, importe del ticket y monto de pago). */
#input-monto-propina::-webkit-outer-spin-button,
#input-monto-propina::-webkit-inner-spin-button,
#input-propina-base::-webkit-outer-spin-button,
#input-propina-base::-webkit-inner-spin-button,
#input-propina-porcentaje::-webkit-outer-spin-button,
#input-propina-porcentaje::-webkit-inner-spin-button,
#input-monto-pago::-webkit-outer-spin-button,
#input-monto-pago::-webkit-inner-spin-button,
#tabla-items input.input-importe::-webkit-outer-spin-button,
#tabla-items input.input-importe::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#input-monto-propina,
#input-propina-base,
#input-propina-porcentaje,
#input-monto-pago,
#tabla-items input.input-importe {
  -moz-appearance: textfield;
}

/* Quitar flechas de spinner en TODOS los campos numericos del sistema.
   Evita que el scroll del trackpad (Mac) cambie cantidades al desplazar la pagina. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

#total-venta { font-size: 32px; font-weight: 700; text-align: right; margin: 8px 0; }

.agregar-pago { display: flex; gap: 8px; align-items: center; }
.agregar-pago input { width: auto; flex: 1; min-width: 0; }
.agregar-pago select { width: auto; flex: 0 0 130px; min-width: 0; }
.agregar-pago button { width: auto; white-space: nowrap; }

#pagos-lista .fila-pago {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed #ddd;
}
#pagos-lista .pago-nombre { flex: 1; min-width: 0; }
#pagos-lista .pago-monto {
  flex: 0 0 100px;
  width: 100px;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: right;
}
#pagos-lista .celda-x {
  flex: 0 0 40px;
  width: 40px;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  justify-content: flex-start;
}
@media (max-width: 900px) {
  #pagos-lista .fila-pago { padding: 8px 0; font-size: 13px; }
  #pagos-lista .pago-monto { flex-basis: 74px; width: 74px; padding: 0 4px; }
  #pagos-lista .celda-x { flex-basis: 30px; width: 30px; padding: 0 4px; }
}
#propinas-lista div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #ddd; }

#pago-restante { text-align: right; margin-top: 6px; font-weight: 600; }
#pago-restante.ok { color: #1a7f37; }
#pago-restante.falta { color: #c62828; }

.propina-wrap { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #ddd; }
.propina-wrap h3 { margin: 0 0 8px; }
.propina-campos { display: flex; gap: 6px; align-items: center; }
.propina-campos select, .propina-campos input { width: auto; flex: 1; }
.propina-campos button { width: auto; white-space: nowrap; }
#propina-info { margin-top: 6px; font-size: 13px; color: #666; }

.cierre-propina-tag { font-weight: 400; font-size: 12px; color: #A08B63; }

#panel-ventas-dia { margin: 0 16px 16px; overflow-x: auto; }
#tabla-ventas-dia { min-width: 640px; }

#panel-pin-lock {
  max-width: 360px;
  margin: 60px auto;
  text-align: center;
  background: #17171b;
  border: 1px solid #2a2a30;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
#panel-pin-lock h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #f2f2f2;
  margin: 4px 0 6px;
}
.pin-lock-icono {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2a2318;
  border: 1px solid #C49B6E;
  color: #C49B6E;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.pin-lock-texto { color: #999; font-size: 13px; margin: 4px 0 18px; }
.pin-lock-input-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.pin-lock-dots { display: flex; justify-content: center; gap: 14px; margin: 0 0 22px; }
.pin-lock-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #C49B6E;
  background: transparent;
  transition: background .12s ease;
}
.pin-lock-dot.lleno { background: #C49B6E; }
.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 18px;
}
.pin-key {
  background: #1e1e24;
  border: 1px solid #34343c;
  color: #eee;
  font-size: 18px;
  font-weight: 600;
  border-radius: 10px;
  padding: 14px 0;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.pin-key:hover { background: #26262e; border-color: #C49B6E; }
.pin-key-accion { color: #C49B6E; font-size: 16px; }
#btn-pin-lock {
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  padding: 12px;
  margin-top: 4px;
  border-radius: 10px;
  border: none;
  background: #34343c;
  color: #888;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
#btn-pin-lock.activo { background: #BCA474; color: #1a1a1a; }
#btn-pin-lock.activo:hover { background: #A08B63; }

#mensaje {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  z-index: 100;
}
#mensaje.error { background: #c62828; }

/* Ticket impreso (comprobante simplificado). Oculto en pantalla; solo se
   muestra al imprimir, con el resto de la pagina oculto, para mandar
   directo a la Bixolon SRP-275III (impresora matricial, 42 columnas). El
   contenido ya viene como texto plano prealineado desde app.js, por eso
   monoespaciada + pre-wrap en vez de layout con tablas/flex. */
#ticket-imprimir { display: none; }
@media print {
  body > *:not(#ticket-imprimir) { display: none !important; }
  #ticket-imprimir {
    display: block;
    white-space: pre-wrap;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.3;
    color: #000;
  }
  @page { margin: 3mm; }
}

.quitar-item, .quitar-pago {
  background: transparent;
  color: #c62828;
  border: 1px solid #c62828;
  padding: 4px 8px;
  font-size: 12px;
}
.quitar-item:hover, .quitar-pago:hover { background: rgba(198, 40, 40, 0.08); }

.quitar-propina {
  background: transparent;
  color: #c62828;
  border: 1px solid #c62828;
  padding: 4px 8px;
  font-size: 12px;
}
.quitar-propina:hover { background: rgba(198, 40, 40, 0.08); }

.btn-cancelar-venta {
  background: transparent;
  color: #c62828;
  border: 1px solid #c62828;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.btn-cancelar-venta:hover { background: rgba(198, 40, 40, 0.08); }
.etiqueta-cancelada { color: #999; font-size: 12px; font-style: italic; }
.etiqueta-cerrada { color: #999; font-size: 12px; font-style: italic; }
.etiqueta-no-show { color: #999; font-size: 12px; font-style: italic; }
tr.venta-cancelada td { opacity: .55; }
tr.venta-cancelada td:not(:last-child) { text-decoration: line-through; }

.citas-wrap {
  padding: 20px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.citas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.citas-header h2 {
  margin: 0;
  font-size: 18px;
}
.citas-header-acciones {
  display: flex;
  gap: 8px;
  align-items: center;
}
.citas-header button {
  width: auto;
  background: #333;
}
.btn-enlace {
  display: inline-block;
  width: auto;
  background: #333;
  color: #fff;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 15px;
  white-space: nowrap;
}
.btn-enlace:hover { background: #555; }
.ventas-hoy-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}
.citas-aviso {
  background: #fdf6e3;
  border: 1px solid #e0c675;
  color: #7a5c00;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}
.citas-cargando {
  color: #888;
  padding: 20px 0;
}
.citas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.cita-card {
  background: #fff;
  border: 1px solid #eee;
  border-top: 4px solid #BCA474;
  border-radius: 5px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: transform .1s ease, box-shadow .1s ease;
  min-height: 100px;
  position: relative;
  font-family: inherit;
}
.cita-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  background: #fff;
}
.cita-hora { font-size: 12px; color: #999; font-weight: 700; letter-spacing: .5px; }
.cita-nombre { font-size: 16px; font-weight: 700; margin: 4px 0 2px; color: #111; }
.cita-servicio { font-size: 13px; color: #555; }
.cita-colaborador { font-size: 11px; color: #999; margin-top: 6px; text-transform: uppercase; letter-spacing: .5px; }
.cita-card.cita-combinada { border-top-color: #7c6a46; }
.cita-card.cita-combinada .cita-servicio { margin-top: 4px; }
.cita-servicio-colab { color: #999; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.cita-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #eef4e6;
  color: #567336;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
}
.cita-card.cobrada { opacity: .6; border-top-color: #6b8f43; }
.cita-card.walkin {
  border-top-color: #111;
  border-style: dashed;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cita-card.walkin .cita-nombre { font-size: 18px; }

.cita-banner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.cita-banner:not(.oculto) {
  background: #fdf6e3;
  border: 1px solid #BCA474;
  color: #7a5c00;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  width: fit-content;
  max-width: 100%;
  margin: 16px auto 0;
}

.subtitulo { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #999; margin: 14px 0 4px; border-top: 1px solid #eee; padding-top: 10px; }
.subtitulo:first-of-type { border-top: none; padding-top: 0; margin-top: 4px; }
.fila-cantidad-colaborador { display: flex; gap: 8px; align-items: flex-end; }
.fila-cantidad-colaborador select { flex: 1; }
.campo-cantidad { flex: 0 0 80px; }
.campo-cantidad label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
  margin: 0 0 2px;
}
.campo-cantidad input { width: 100%; margin: 0; }
.botones-agregar { display: flex; gap: 8px; margin-top: 6px; }
.botones-agregar button { flex: 1; width: auto; min-width: 0; font-size: 15px; padding: 10px; margin: 4px 0 0; }
.botones-agregar button:disabled { background: #ccc; cursor: not-allowed; }
.botones-agregar .btn-primario,
.botones-agregar .btn-eliminar {
  font-size: 15px;
  padding: 10px;
  margin: 4px 0 0;
}

.fila-propina-calculo { display: flex; gap: 8px; align-items: flex-end; }
.campo-propina { flex: 1; }
.campo-propina-pct { flex: 0 0 70px; }
.campo-propina label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
  margin: 0 0 2px;
}
.campo-propina input { width: 100%; margin: 0; }

.colaboradores-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}
.colaboradores-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.colaboradores-lista-col { flex: 0 0 280px; }
.colaboradores-lista-col button { width: 100%; margin-top: 8px; }
.colaboradores-form-col { flex: 1; display: flex; flex-direction: column; }

/* Catalogo de servicios tiene dos paneles (categorias y catalogo) dentro del
   mismo .colaboradores-wrap: sin este margen quedan pegados verticalmente.
   Ademas, a diferencia de Colaboradores, aqui se quiere que la columna de
   lista y la del formulario midan lo mismo en vez de que la lista sea fija
   y angosta. */
.colaboradores-wrap > .panel + .panel { margin-top: 20px; }
#panel-servicios .colaboradores-lista-col,
#panel-servicios .colaboradores-form-col { flex: 1 1 0; }
.colaboradores-form-col label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
  margin-top: 10px;
}
.colaboradores-form-col label:first-child { margin-top: 0; }
.colaboradores-form-col input,
.colaboradores-form-col textarea { margin: 2px 0 0; }
.fila-comisiones { display: flex; gap: 12px; margin-top: 4px; }
.fila-comisiones > div { flex: 1; }
#tabla-colaboradores-body tr { cursor: pointer; }
#tabla-colaboradores-body tr:hover { background: #23252D; }
#tabla-existencias-body tr { cursor: pointer; }
#tabla-existencias-body tr:hover { background: #23252D; }
.fila-seleccionada { background: #23252D !important; }
.fila-alerta { background: #fdecec; }
/* Control de existencias: lista y formulario a la mitad del espacio cada
   uno, en vez de que la lista quede angosta y fija como en Colaboradores. */
#panel-existencias .colaboradores-lista-col { flex: 2 1 0; }
#panel-existencias .colaboradores-form-col { flex: 1 1 0; }
#panel-insumos .colaboradores-lista-col { flex: 2 1 0; }
#panel-insumos .colaboradores-form-col { flex: 1 1 0; min-width: 0; }
/* Insumos Internos: el formulario de movimiento manual solo tiene Tipo,
   Cantidad y Nota -- se quiere Tipo y Cantidad a la mitad cada uno en la
   misma fila, y Nota abajo ocupando todo el ancho (en vez del grid de 4
   columnas parejas que usa Proveedores). */
#form-movimiento { grid-template-columns: 1fr 1fr; }
#form-movimiento > div:nth-child(3) { grid-column: 1 / -1; }
.existencias-filtros { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.existencias-filtros label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
}
.existencias-filtros select { flex: 1 1 160px; min-width: 160px; }
.existencias-filtros button { white-space: nowrap; flex: 0 0 auto; }
.existencias-filtros input[type="text"] { flex: 1 1 100%; min-width: 200px; }
#tabla-existencias .col-existencia { text-align: center; }
#tabla-insumos .col-existencia { text-align: center; }
#tabla-insumos .input-pedido-insumo { text-align: center; width: 60px; }
#tabla-insumos .col-check { width: 28px; text-align: center; }
#tabla-insumos .col-check input { cursor: pointer; }
#tabla-conteo .col-existencia { text-align: right; }
#tabla-existencias .col-check { width: 28px; text-align: center; }
#tabla-existencias .col-check input { cursor: pointer; }
.pedido-resumen { font-weight: 600; margin: 4px 0 12px; }
#panel-generar-pedido textarea,
#panel-generar-pedido input[type="text"],
#panel-generar-pedido input[type="email"] {
  width: 100%;
  box-sizing: border-box;
}
#panel-generar-pedido label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
  display: block;
  margin-top: 10px;
}
.fila-alerta:hover { background: rgba(198,40,40,0.18); }
.btn-eliminar {
  background: transparent;
  color: #c62828;
  border: 1px solid #c62828;
}
.btn-eliminar:hover { background: rgba(198, 40, 40, 0.08); }

.comisiones-categorias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.comisiones-categorias-grid label {
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
  color: #555;
  margin: 0 0 2px;
  display: block;
}
.comisiones-categorias-grid input { margin: 0; }
.ayuda-categorias {
  font-size: 12px;
  color: #888;
  margin: 14px 0 0;
}

.categorias-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.categoria-chip {
  background: #f4f2ee;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 6px 10px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.categoria-chip em { color: #999; font-style: normal; font-size: 11px; }
.categoria-chip-filtro { cursor: pointer; user-select: none; }
.categoria-chip-filtro:hover { border-color: #b08d57; }
.categoria-chip-activa {
  background: #b08d57;
  border-color: #b08d57;
  color: #fff;
}
.categoria-chip-activa em { color: #f4ead9; }
.quitar-categoria {
  background: transparent;
  color: #c62828;
  border: none;
  padding: 0;
  width: auto;
  font-size: 12px;
  cursor: pointer;
}
.agregar-categoria { display: flex; gap: 6px; margin-top: 12px; }
.agregar-categoria input { flex: 1; }
.agregar-categoria button { width: auto; white-space: nowrap; }
.agregar-categoria .celda-emparejar { flex: 2; min-width: 220px; }
#receta-cantidad { flex: 0 0 140px; min-width: 140px; font-size: 15px; padding: 10px 10px; }
#tabla-servicios-body tr { cursor: pointer; }
#tabla-servicios-body tr:hover { background: #23252D; }

.gastos-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 16px;
}
.gastos-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.gastos-form select { flex: 1 1 180px; }
.gastos-form input[type="text"] { flex: 2 1 220px; }
.gastos-form-monto { flex: 0 0 120px; }
.gastos-form button { flex: 0 0 auto; }
#gastos-total {
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  margin-top: 10px;
}
.btn-eliminar-gasto {
  background: transparent;
  color: #c62828;
  border: 1px solid #c62828;
  padding: 3px 8px;
  font-size: 12px;
}
.btn-eliminar-gasto:hover { background: rgba(198, 40, 40, 0.08); }

/* Proveedores: tabla de proveedores clickeable + acciones de la sub-tabla de marcas */
#tabla-proveedores-body tr { cursor: pointer; }
#tabla-proveedores-body tr:hover { background: #23252D; }
#tabla-marcas-body tr { cursor: pointer; }
#tabla-marcas-body tr:hover { background: #23252D; }
#tabla-facturas-body tr { cursor: pointer; }
#tabla-facturas-body tr:hover { background: #23252D; }
.celda-acciones-marca { display: flex; gap: 6px; white-space: nowrap; }
.btn-editar-marca {
  background: transparent;
  color: #8a6d3b;
  border: 1px solid #8a6d3b;
  padding: 3px 8px;
  font-size: 12px;
}
.btn-editar-marca:hover { background: rgba(138, 109, 59, 0.08); }
.marca-form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.marca-form label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
  margin-bottom: 4px;
}
.marca-form input, .marca-form select { width: 100%; margin: 0; }
#rev-estado-pago-badge,
#rev-fecha-pago-inline {
  font-weight: 600;
  cursor: default;
}
#rev-fecha-pago-inline {
  color: #2e7d32;
}
.marca-form-botones {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.marca-form-botones button { flex: 1; }
@media (max-width: 900px) {
  .marca-form { grid-template-columns: 1fr; }
}

.cierre-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cierre-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cierre-header h2 { margin: 0; font-size: 18px; }
.cierre-header input[type="date"] { width: auto; }
.comisiones-selectores { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.comisiones-selectores select,
.comisiones-selectores input[type="date"] { width: auto; margin: 0; }
.comisiones-rango-fechas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.comisiones-rango-fechas label { font-size: 13px; color: #8E897F; margin: 0; }
.tabla-comisiones { table-layout: fixed; }
.tabla-comisiones th, .tabla-comisiones td { width: 25%; }
.tabla-comisiones th:nth-child(4), .tabla-comisiones td:nth-child(4) { text-align: right; }

/* Costo por servicio: tabla de 8 columnas, necesita su propio ancho/padding
   en vez de heredar el 25% parejo pensado para la tabla de 4 columnas de
   Comisiones (misma clase .tabla-comisiones, id especifico para pisar). */
#tabla-costo-servicios th, #tabla-costo-servicios td { padding: 10px 14px; }
#tabla-costo-servicios th:nth-child(1), #tabla-costo-servicios td:nth-child(1) { width: 24%; }
#tabla-costo-servicios th:nth-child(2), #tabla-costo-servicios td:nth-child(2) { width: 6%; text-align: center; }
#tabla-costo-servicios th:nth-child(3), #tabla-costo-servicios td:nth-child(3) { width: 12%; text-align: right; }
#tabla-costo-servicios th:nth-child(4), #tabla-costo-servicios td:nth-child(4) { width: 13%; text-align: right; }
#tabla-costo-servicios th:nth-child(5), #tabla-costo-servicios td:nth-child(5) { width: 12%; text-align: right; }
#tabla-costo-servicios th:nth-child(6), #tabla-costo-servicios td:nth-child(6) { width: 12%; text-align: right; }
#tabla-costo-servicios th:nth-child(7), #tabla-costo-servicios td:nth-child(7) { width: 12%; text-align: right; }
#tabla-costo-servicios th:nth-child(8), #tabla-costo-servicios td:nth-child(8) { width: 9%; text-align: right; }
#tabla-costo-servicios td { white-space: nowrap; }
#tabla-costo-servicios td:nth-child(1) { white-space: normal; }

/* No Shows: tabla de 6 columnas, necesita su propio ancho (misma clase .tabla-comisiones, id especifico para pisar). */
#tabla-no-shows th, #tabla-no-shows td { padding: 10px 14px; }
#tabla-no-shows th:nth-child(1), #tabla-no-shows td:nth-child(1) { width: 12%; }
#tabla-no-shows th:nth-child(2), #tabla-no-shows td:nth-child(2) { width: 22%; }
#tabla-no-shows th:nth-child(3), #tabla-no-shows td:nth-child(3) { width: 24%; }
#tabla-no-shows th:nth-child(4), #tabla-no-shows td:nth-child(4) { width: 16%; }
#tabla-no-shows th:nth-child(5), #tabla-no-shows td:nth-child(5) { width: 13%; text-align: right; }
#tabla-no-shows th:nth-child(6), #tabla-no-shows td:nth-child(6) { width: 13%; text-align: right; }

.cierre-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 700px) {
  .cierre-grid-2col { grid-template-columns: 1fr; }
}
/* cierre-colab-header y cierre-grand-total: estilos movidos a tables.css (dark theme) */
.cierre-total-linea {
  text-align: right;
  font-weight: 700;
  margin-top: 8px;
}
.cierre-calculo {
  background: #fafafa;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cierre-calculo > div {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 14px;
}
.cierre-calculo-final {
  border-top: 1px solid #ddd;
  margin-top: 6px;
  padding-top: 8px !important;
  font-size: 16px !important;
}
.cierre-calculo-fondo-fijo { font-weight: 700; }
.cierre-calculo-spacer { height: 10px; }
#cierre-form label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
  margin-top: 10px;
  display: block;
}
#cierre-form label:first-child { margin-top: 0; }
#inyeccion-form label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
  margin-top: 10px;
  display: block;
}
#inyeccion-form label:first-child { margin-top: 0; }
#inyeccion-form { margin-top: 10px; }
#cierre-pin-wrap {
  background: #fdf6e3;
  border: 1px solid #e0c675;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
}
.cierre-detalle-linea {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed #eee;
  font-size: 14px;
}
#tabla-cierres-historial-body tr { cursor: pointer; }
#tabla-cierres-historial-body tr:hover { background: #23252D; }

.ticket-config-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}
.ticket-config-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 10px;
}
.ticket-config-form-col { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; }
.ticket-config-form-col label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
  margin-top: 10px;
}
.ticket-config-form-col label:first-child { margin-top: 0; }
.ticket-config-form-col input,
.ticket-config-form-col textarea { margin: 2px 0 0; }
.ticket-config-preview-col { flex: 0 0 320px; }
.ticket-config-preview-col label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
  display: block;
  margin-bottom: 4px;
}
.ticket-config-preview {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 14px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  margin: 0;
  position: sticky;
  top: 16px;
}
@media (max-width: 800px) {
  .ticket-config-layout { flex-direction: column; }
  .ticket-config-preview-col { flex: 1 1 auto; width: 100%; }
  .ticket-config-preview { position: static; }
}


.checkbox-en-nomina {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #555;
  margin-top: 8px;
  text-transform: none;
}
.checkbox-en-nomina input {
  margin: 0;
  width: auto;
  padding: 0;
  border: none;
  flex: 0 0 auto;
}

/* ---------- Nomina ---------- */
.nomina-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
.aviso-nomina {
  background: #fdf6e3;
  border: 1px solid #e8d9ab;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #7a5c1e;
  line-height: 1.5;
  margin: 10px 0 16px;
}
.nomina-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.nomina-controles > div { flex: 1 1 180px; min-width: 160px; }
.nomina-controles label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
  display: block;
  margin-bottom: 2px;
}
.nom-dato-texto {
  margin: 0;
  padding: 8px 0;
  font-size: 14px;
}
.nomina-controles button { flex: 0 0 auto; }
.nomina-resultado-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.nomina-bloque { flex: 1 1 320px; min-width: 280px; }
.nomina-bloque h4 { margin: 0 0 6px; font-size: 13px; color: #555; }
.tabla-nomina { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-nomina td { padding: 6px 4px; border-bottom: 1px solid #eee; }
.tabla-nomina td.num { text-align: right; white-space: nowrap; }
.tabla-nomina tr.fila-total td { font-weight: bold; border-top: 2px solid #ccc; }
.tabla-nomina tr.fila-informativa td { color: #888; font-size: 12px; }
.tabla-nomina tr.fila-informativa em { font-style: normal; }
.nomina-neto {
  font-size: 15px;
  margin: 14px 0;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
.nomina-neto strong { color: #b08d57; }
@media (max-width: 800px) {
  .nomina-resultado-grid { flex-direction: column; }
}

/* Facturas de Proveedores: buscador con autocompletado por linea (insumo o producto Ecwid) */
#tabla-lineas-factura .col-existencia { text-align: center; }
#tabla-lineas-factura td { vertical-align: middle; }
#tabla-lineas-factura input { height: 34px; box-sizing: border-box; }
.celda-emparejar { position: relative; }
.celda-emparejar input[type="text"] { width: 100%; box-sizing: border-box; }
.celda-emparejar .lista-resultados {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 4px;
  background: #23232a;
  border: 1px solid #34343c;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  max-height: 220px;
}
.celda-emparejar .lista-resultados li { padding: 9px 12px; font-size: 13px; line-height: 1.35; color: #eee; border-bottom: 1px solid #2c2c33; }
.celda-emparejar .lista-resultados li:last-child { border-bottom: none; }
.celda-emparejar .lista-resultados li:hover { background: #2f2f38; }
.celda-emparejar .lista-resultados li strong { color: #BCA474; font-weight: 600; }
.celda-emparejar .lista-resultados li em { color: #999; }
.col-ref { white-space: nowrap; font-size: 13px; color: #666; }

/* Quitar las flechas de incremento/decremento en el campo Pedido de Insumos Internos. */
.input-pedido-insumo::-webkit-outer-spin-button,
.input-pedido-insumo::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-pedido-insumo {
  -moz-appearance: textfield;
}
.footer-sitio {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #111;
  color: #999;
  font-size: 11px;
  padding: 0 24px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cita-card.cita-pagada { border-top-color: #2e7d32; }
.cita-card.cita-pendiente { border-top-color: #c62828; }
.cita-card.cita-no-show {
  opacity: .55;
  border-top-color: #757575;
  cursor: default;
}
.cita-card.cita-no-show:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  background: #fff;
}
.btn-no-show {
  display: block;
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 4px 8px;
  border: 1px solid #c62828;
  color: #c62828;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.btn-no-show:hover { background: #c62828; color: #fff; }
.cita-badge-no-show {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #424242;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 2px 8px;
  border-radius: 20px;
}
.btn-deshacer-no-show {
  display: block;
  margin: 8px 0 0;
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid #999;
  color: #999;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.btn-deshacer-no-show:hover { background: #eee; }

#no-show-wrap {
  text-align: right;
  margin-top: 10px;
}
.btn-no-show-link {
  background: none;
  border: 1px solid #c62828;
  color: #c62828;
  opacity: 0.5;
  font-size: 8px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.btn-no-show-link:hover {
  background: #c62828;
  color: #fff;
  opacity: 1;
}
.btn-no-show-link:disabled {
  color: #ccc;
  border-color: #ccc;
  opacity: 0.5;
  cursor: default;
}
.paginas-factura-pendientes { margin-top: 12px; }
.paginas-factura-miniaturas { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.pagina-factura-miniatura { position: relative; width: 70px; height: 90px; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; background: #f4f4f4; }
.pagina-factura-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pagina-factura-numero { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 10px; }
.pagina-factura-quitar { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
#total-pendiente-pago { font-weight: 600; font-size: 15px; color: #1a1a1a; margin: 0 0 10px; }
#total-gastos-fijos { font-weight: 600; font-size: 15px; color: #1a1a1a; margin: 0 0 10px; }
#resumen-productos-sin-costo { margin: 0 0 10px; }
.input-costo-producto { width: 90px; }
#filtro-productos { margin-left: 12px; }

/* Duracion + receta de insumos (Catalogo de servicios) */
.btn-secundario {
  width: 100%;
  font-size: 15px;
  padding: 10px;
  margin-top: 8px;
  background: #EFEAE0;
  border: 1px solid #BCA474;
  border-radius: 6px;
  cursor: pointer;
}
.btn-secundario:hover { background: #E4DCC9; }
.receta-lista {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;
  margin-top: 6px;
  min-height: 30px;
}
.receta-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px;
  border-bottom: 1px solid #eee;
}
.receta-fila:last-child { border-bottom: none; }
.receta-fila-nombre {
  flex: 1;
  padding-right: 8px;
}
.receta-fila-cantidad {
  color: #666;
  font-size: 13px;
  min-width: 55px;
  text-align: right;
  padding-right: 10px;
}
.receta-fila-costo {
  font-weight: 600;
  min-width: 65px;
  text-align: right;
  padding-right: 10px;
}
.receta-costo-total {
  text-align: right;
  font-weight: 700;
  padding: 6px 2px 0;
}
.quitar-insumo-receta {
  width: auto;
  padding: 2px 8px;
  background: rgba(198, 40, 40, 0.08);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* ===== Rediseño de Inicio (index.html) ===== */
body.pagina-inicio {
  background: #17171b;
}
body.pagina-inicio header {
  height: auto;
  padding: 18px 32px;
}
body.pagina-inicio .inicio-marca {
  gap: 12px;
}
body.pagina-inicio .inicio-logo {
  width: 34px;
  height: 34px;
  border: 1.5px solid #C49B6E;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: #C49B6E;
  font-size: 16px;
  flex-shrink: 0;
}
body.pagina-inicio .inicio-marca-texto {
  font-size: 15px;
  letter-spacing: .3px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
body.pagina-inicio .inicio-marca-texto strong {
  font-weight: 700;
  letter-spacing: 1.5px;
}
body.pagina-inicio .inicio-marca-texto em {
  font-style: normal;
  font-weight: 400;
  opacity: .75;
}
body.pagina-inicio .inicio-header-der {
  display: flex;
  align-items: center;
  gap: 16px;
}
body.pagina-inicio .inicio-fecha {
  font-size: 13px;
  color: #999;
  text-transform: capitalize;
}
body.pagina-inicio .inicio-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #C49B6E;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

body.pagina-inicio .inicio-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 48px 24px 40px;
}
body.pagina-inicio .inicio-eyebrow {
  color: #C49B6E;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
body.pagina-inicio .inicio-saludo {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 44px;
  margin: 0 0 10px;
  color: #f5f1ea;
}
body.pagina-inicio .inicio-subtitulo {
  margin: 0 0 32px;
  color: #aaa;
  font-size: 15px;
}

body.pagina-inicio .inicio-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 860px) {
  body.pagina-inicio .inicio-grid { grid-template-columns: 1fr; }
}

body.pagina-inicio .inicio-card-principal {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #23232a;
  border: 1px solid #34343c;
  border-radius: 16px;
  padding: 28px;
  text-decoration: none;
  color: #eee;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.pagina-inicio .inicio-card-principal:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
body.pagina-inicio .inicio-badge-usado {
  position: absolute;
  top: 26px;
  right: 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #C49B6E;
}
body.pagina-inicio .inicio-icono-grande {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #34343c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #C49B6E;
  margin-bottom: 20px;
}
body.pagina-inicio .inicio-icono-grande svg { width: 26px; height: 26px; }
body.pagina-inicio .inicio-card-principal h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  margin: 0 0 10px;
  color: #f5f1ea;
}
body.pagina-inicio .inicio-card-principal p {
  font-size: 14px;
  color: #aaa;
  margin: 0 0 24px;
  line-height: 1.5;
  flex-grow: 1;
}
body.pagina-inicio .inicio-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
body.pagina-inicio .inicio-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #C49B6E;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 30px;
}
body.pagina-inicio .inicio-btn-flecha { display: inline-flex; color: #1a1a1a; }
body.pagina-inicio .inicio-btn-flecha svg { width: 16px; height: 16px; }
body.pagina-inicio .inicio-cta-nota {
  font-size: 12px;
  color: #888;
}

body.pagina-inicio .inicio-secundarias {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
body.pagina-inicio .inicio-card-sec {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #23232a;
  border: 1px solid #34343c;
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: #eee;
  flex: 1;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.pagina-inicio .inicio-card-sec:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
}
body.pagina-inicio .inicio-icono-chico {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #34343c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #C49B6E;
  flex-shrink: 0;
}
body.pagina-inicio .inicio-icono-chico svg { width: 20px; height: 20px; }
body.pagina-inicio .inicio-card-sec-cuerpo {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.pagina-inicio .inicio-card-sec-titulo {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
body.pagina-inicio .inicio-badge-parcial {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: #3a3424;
  color: #C49B6E;
  padding: 2px 8px;
  border-radius: 20px;
}
body.pagina-inicio .inicio-card-sec-desc {
  font-size: 13px;
  color: #999;
  line-height: 1.4;
}
body.pagina-inicio .inicio-chevron {
  color: #666;
  display: inline-flex;
  align-self: center;
  flex-shrink: 0;
}
body.pagina-inicio .inicio-chevron svg { width: 18px; height: 18px; }

@media (max-width: 600px) {
  body.pagina-inicio .inicio-saludo { font-size: 32px; }
  body.pagina-inicio header { flex-wrap: wrap; row-gap: 10px; }
}

/* ===== Rediseño de Punto de Venta (pos.html) ===== */
body.pagina-pos { background: #17171b; }
body.pagina-pos header { height: auto; padding: 18px 32px; }
body.pagina-pos .inicio-marca { gap: 12px; }
body.pagina-pos .inicio-marca-texto {
  font-size: 15px; letter-spacing: .3px; display: flex; align-items: baseline; gap: 6px;
}
body.pagina-pos .inicio-marca-texto strong { font-weight: 700; letter-spacing: 1.5px; }
body.pagina-pos .inicio-marca-texto em { font-style: normal; font-weight: 400; opacity: .75; }
body.pagina-pos .pos-breadcrumb { font-size: 13px; color: #999; }
body.pagina-pos .pos-breadcrumb a { color: #C49B6E; text-decoration: none; }
body.pagina-pos .pos-breadcrumb a:hover { text-decoration: underline; }
body.pagina-pos .pos-breadcrumb-sep { margin: 0 6px; color: #555; }

body.pagina-pos .citas-wrap { max-width: 1100px; margin: 0 auto; padding: 40px 24px 60px; }
body.pagina-pos .citas-header {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 16px; margin-bottom: 32px;
}
body.pagina-pos .citas-header-titulo { display: flex; flex-direction: column; gap: 4px; }
body.pagina-pos .citas-fecha { font-size: 13px; color: #999; text-transform: capitalize; }
body.pagina-pos .citas-header h2 {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 36px; margin: 0; color: #f5f1ea;
}
body.pagina-pos .citas-header-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.pagina-pos .btn-enlace {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: #eee; border: 1px solid #3a3a42;
  padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
body.pagina-pos .btn-enlace:hover { background: #26262d; }
body.pagina-pos .btn-enlace-dorado { border-color: #C49B6E; color: #C49B6E; }
body.pagina-pos .btn-enlace-dorado:hover { background: rgba(196,155,110,.12); }
body.pagina-pos .btn-refrescar {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #3a3a42; background: transparent;
  color: #999; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
body.pagina-pos .btn-refrescar:hover { background: #26262d; color: #eee; }
body.pagina-pos .btn-refrescar svg { width: 16px; height: 16px; }

body.pagina-pos .citas-aviso {
  background: #3a2a1e; color: #e0b17a; border: 1px solid #55402c;
  padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 20px;
}

body.pagina-pos .citas-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px;
}
body.pagina-pos .cita-card {
  position: relative; background: #23232a; border: 1px solid #34343c; border-radius: 16px;
  padding: 20px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; color: #eee;
}
body.pagina-pos .cita-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
body.pagina-pos .cita-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
body.pagina-pos .cita-hora { font-size: 20px; font-weight: 700; color: #f5f1ea; letter-spacing: .3px; }
body.pagina-pos .cita-badge-estado {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
body.pagina-pos .cita-estado-porllegar { background: #2c2c32; color: #999; }
body.pagina-pos .cita-estado-enservicio { background: transparent; border: 1px solid #C49B6E; color: #C49B6E; }
body.pagina-pos .cita-estado-lista { background: #C49B6E; color: #1a1a1a; }
body.pagina-pos .cita-badge-noshow { background: #4a2323; color: #e0a0a0; }
body.pagina-pos .cita-nombre { font-size: 16px; font-weight: 700; margin: 0 0 2px; color: #f5f1ea; }
body.pagina-pos .cita-servicio { font-size: 13px; color: #999; margin-bottom: 2px; }
body.pagina-pos .cita-servicio-colab { color: #777; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
body.pagina-pos .cita-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #34343c;
}
body.pagina-pos .cita-colaborador-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #ccc; }
body.pagina-pos .cita-colaborador-chip-multi { color: #888; font-style: italic; }
body.pagina-pos .cita-avatar {
  width: 24px; height: 24px; border-radius: 50%; background: #C49B6E; color: #1a1a1a;
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.pagina-pos .cita-cobrar { font-size: 13px; font-weight: 700; color: #C49B6E; }
body.pagina-pos .btn-deshacer-no-show {
  font-size: 12px; font-weight: 600; color: #e0a0a0; background: transparent; border: 1px solid #55302f;
  padding: 5px 12px; border-radius: 16px; cursor: pointer;
}
body.pagina-pos .btn-deshacer-no-show:hover { background: #3a2323; }
body.pagina-pos .cita-card.cita-no-show { opacity: .7; cursor: default; }
body.pagina-pos .cita-card.cita-pagada { border-left: 3px solid #4caf7d; }

body.pagina-pos .cita-card.walkin {
  border-style: dashed; border-color: #C49B6E; background: #1e1a14;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
body.pagina-pos .cita-walkin-icono {
  width: 44px; height: 44px; border-radius: 50%; background: #C49B6E; color: #1a1a1a;
  font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
body.pagina-pos .cita-card.walkin .cita-nombre { font-size: 18px; }

@media (max-width: 600px) {
  body.pagina-pos .citas-header h2 { font-size: 28px; }
  body.pagina-pos header { flex-wrap: wrap; row-gap: 10px; }
}

/* ===== Sidebar de navegacion (paginas internas, excepto Inicio) ===== */
.sidebar-nav {
  width: 68px;
  flex-shrink: 0;
  background: #1a1a1f;
  border-right: 1px solid #2c2c33;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  min-height: 100vh;
}
.sidebar-nav-logo { display: flex; margin-bottom: 14px; }
.sidebar-nav-logo img { width: 34px; height: 34px; border-radius: 6px; }
.sidebar-nav-item {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #8a8a92; text-decoration: none;
}
.sidebar-nav-item svg { width: 20px; height: 20px; }
.sidebar-nav-item:hover { background: #24242b; color: #eee; }
.sidebar-nav-item.activo { background: #2a2318; color: #C49B6E; }

/* ===== Rediseno de Nueva Venta (venta.html) ===== */
body.pagina-venta { background: #17171b; display: flex; align-items: stretch; }
body.pagina-venta .pos-breadcrumb a { color: #999; text-decoration: none; }
body.pagina-venta .pos-breadcrumb a:hover { text-decoration: underline; }
body.pagina-venta, body.pagina-venta * { scrollbar-width: none; -ms-overflow-style: none; }
body.pagina-venta::-webkit-scrollbar, body.pagina-venta *::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.pagina-venta header { display: none; }
body.pagina-venta .footer-sitio { display: none; }
.venta-shell { flex: 1; display: grid; grid-template-columns: 1fr 400px; min-height: 100vh; align-items: start; }
.venta-catalogo { padding: 28px 32px; overflow-y: auto; max-height: 100vh; }
.venta-catalogo-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.venta-titulo { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 32px; color: #f2f2f2; margin: 4px 0 0; }
.venta-buscador { position: relative; display: inline-block; line-height: 0; height: 40px; }
.venta-buscador input { display: block; }
.venta-buscador input {
  width: 320px; max-width: 60vw; background: #23232a; border: 1px solid #34343c; border-radius: 10px;
  color: #eee; padding: 11px 32px 11px 14px; font-size: 14px;
}
.venta-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.venta-tab {
  background: transparent; border: 1px solid #34343c; color: #ccc; border-radius: 20px;
  padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.venta-tab.activo { background: #C49B6E; border-color: #C49B6E; color: #1a1a1a; }
.venta-colab-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.venta-colab-row .venta-colaboradores { margin-bottom: 0; }
.venta-colaboradores { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.chip-colaborador {
  display: flex; align-items: center; gap: 8px; background: #1e1e24; border: 1px solid #34343c;
  border-radius: 20px; padding: 6px 14px 6px 6px; color: #ddd; font-size: 13px; font-weight: 600; cursor: pointer;
}
.chip-colaborador-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: #34343c; color: #eee;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.chip-colaborador.activo { border-color: #C49B6E; }
.chip-colaborador.activo .chip-colaborador-avatar { background: #C49B6E; color: #1a1a1a; }
.venta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.venta-grid-aviso { color: #888; font-size: 14px; grid-column: 1 / -1; }
.tarjeta-servicio {
  background: #1e1e24; border: 1px solid #2c2c33; border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 20px; text-align: left; cursor: pointer; color: #eee;
}
.tarjeta-servicio:hover { border-color: #C49B6E; }
.tarjeta-servicio-nombre { font-size: 14px; font-weight: 600; }
.tarjeta-servicio-precio { font-size: 15px; font-weight: 700; color: #C49B6E; }
.oculto-funcional { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.venta-ticket {
  background: #1c1c22; border-left: 1px solid #2c2c33; padding: 24px 26px; min-height: 100vh;
  display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0;
}
.ticket-header { display: flex; flex-direction: column; gap: 6px; }
.ticket-header-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
#fecha-hoy { font-size: 12px; color: #888; }
.ticket-cliente-vacio { font-size: 15px; color: #888; }
#cliente-seleccionado { font-size: 16px; font-weight: 700; color: #f2f2f2; background: transparent; border: none; border-radius: 0; padding: 0; margin-top: 0; }
body.pagina-venta #cita-banner { display: none !important; }
.ticket-header-acciones { display: flex; align-items: center; gap: 12px; }
.btn-cambiar-cliente {
  background: transparent; border: none; color: #C49B6E; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0;
}
.btn-no-show-link { background: transparent; border: 1px solid #C49B6E; color: #C49B6E; font-size: 12px; font-weight: 600; cursor: pointer; padding: 5px 10px; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; }
body.pagina-venta .btn-no-show-link:hover { background: #C49B6E; color: #1a1a1a; }

body.pagina-venta .fecha-hoy-top { text-align: right; font-size: 12px; color: #888; margin-bottom: 10px; }
body.pagina-venta .ticket-cliente-row { display: flex; align-items: center; gap: 12px; background: #1c1c22; border: 1px solid #2c2c33; border-radius: 12px; padding: 14px 16px; position: relative; }
body.pagina-venta .ticket-cliente-avatar { width: 40px; height: 40px; border-radius: 50%; background: #2a2a30; color: #C49B6E; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
body.pagina-venta .ticket-cliente-avatar.oculto-avatar { display: none; }
body.pagina-venta .ticket-cliente-textos { flex: 1; min-width: 0; }
body.pagina-venta .ticket-cliente-row .btn-cambiar-cliente { background: transparent; border: 1px solid #34343c; color: #eee; font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 16px; border-radius: 10px; flex-shrink: 0; }
body.pagina-venta .ticket-cliente-row .btn-cambiar-cliente:hover { border-color: #C49B6E; color: #C49B6E; }
@media (max-width: 900px) {
  body.pagina-venta .ticket-cliente-row { flex-wrap: wrap; }
}
.popover-cliente {
  background: #23232a; border: 1px solid #34343c; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.popover-cliente input {
  background: #17171b; border: 1px solid #34343c; border-radius: 8px; color: #eee; padding: 9px 12px; font-size: 13px;
}
.popover-cliente .lista-resultados { list-style: none; margin: 0; padding: 0; max-height: 160px; overflow-y: auto; }
.popover-cliente .lista-resultados li { padding: 8px 6px; font-size: 13px; color: #ddd; cursor: pointer; border-bottom: 1px solid #2c2c33; }
.popover-cliente .lista-resultados li:hover { background: #2a2a32; }
.popover-cliente button { background: transparent; border: none; color: #C49B6E; font-size: 12px; text-align: left; cursor: pointer; padding: 4px 0; }

.tabla-ticket { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-ticket thead { display: none; }
.tabla-ticket td { padding: 10px 0; border-bottom: 1px solid #2a2a31; color: #eee; vertical-align: top; }
.tabla-ticket .input-importe {
  background: transparent; border: none; color: #eee; font-weight: 700; text-align: right;
  width: 90px; font-size: 13px; padding: 2px 0;
}
.tabla-ticket .input-importe:focus { background: #17171b; border-radius: 6px; }
.tabla-ticket td:last-child { text-align: right; width: 22px; }
.tabla-ticket .quitar-item, .tabla-ticket .quitar-propina {
  background: transparent; border: none; color: #777; cursor: pointer; font-size: 13px; padding: 0;
}
.tabla-ticket .quitar-item:hover, .tabla-ticket .quitar-propina:hover { color: #e0a0a0; }

.ticket-resumen { display: flex; flex-direction: column; gap: 4px; font-size: 13px; padding-top: 4px; }
.ticket-resumen-fila { display: flex; justify-content: space-between; color: #ddd; }
.ticket-resumen-fila.muted { color: #888; }
.ticket-propina { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ticket-propina-label { font-size: 13px; color: #999; }
.propina-botones { display: flex; gap: 6px; }
.btn-propina {
  background: transparent; border: 1px solid #34343c; color: #ccc; border-radius: 8px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.btn-propina.activo { background: #C49B6E; border-color: #C49B6E; color: #1a1a1a; }
#propina-monto-manual {
  background: #17171b; border: 1px solid #34343c; border-radius: 8px; color: #eee; padding: 8px 10px; font-size: 13px; width: 100%;
}
.ticket-total { font-size: 26px; font-weight: 700; color: #f2f2f2; text-align: right; }
.pagos-lista { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pagos-lista > div { display: flex; justify-content: space-between; color: #ccc; }
.metodo-pago-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
#metodo-pago-tabs .btn-metodo:nth-child(1), #metodo-pago-tabs .btn-metodo:nth-child(2) { flex: 0.55; min-width: 58px; padding-left: 2px; padding-right: 2px; }
#metodo-pago-tabs .btn-metodo:nth-child(3), #metodo-pago-tabs .btn-metodo:nth-child(4) { flex: 1.45; }
.btn-metodo {
  flex: 1; min-width: 80px; background: transparent; border: 1px solid #34343c; color: #ccc; border-radius: 8px;
  padding: 10px 4px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-metodo.activo { background: #23232a; border-color: #C49B6E; color: #C49B6E; }
.agregar-pago-fila { display: flex; gap: 8px; }
.agregar-pago-fila input { flex: 1; background: #17171b; border: 1px solid #34343c; border-radius: 8px; color: #eee; padding: 9px 12px; font-size: 13px; }
.agregar-pago-fila button { background: #23232a; border: 1px solid #34343c; color: #eee; border-radius: 8px; padding: 9px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
.pago-restante { font-size: 12px; color: #C49B6E; }
.pago-restante.ok { color: #7bbf7b; }
.btn-cobrar-grande {
  background: linear-gradient(90deg,#C49B6E,#a97f52); border: none; color: #1a1a1a; font-size: 16px; font-weight: 700;
  padding: 16px; border-radius: 10px; cursor: pointer; margin-top: auto;
}
.no-show-wrap-nuevo { text-align: center; }
.mensaje-flotante {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #23232a; color: #eee;
  border: 1px solid #34343c; padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 50;
}
.mensaje-flotante.error { border-color: #a05a5a; color: #e0a0a0; }
@media (max-width: 900px) {
  .venta-shell { grid-template-columns: 1fr; }
  .venta-ticket { position: static; min-height: auto; }
  .tabla-ticket { table-layout: fixed; min-width: 0; }
  #tabla-items { min-width: 0; }
  .tabla-ticket td:first-child { padding-right: 4px; }
  .tabla-ticket .input-importe { font-size: 12px; padding: 4px; }
  .tabla-ticket td { padding: 10px 2px; overflow: hidden; }
  .tabla-ticket td:last-child { padding: 10px 0 10px 2px; }
  #tabla-items th:nth-child(2), #tabla-items td:nth-child(2) { width: 78px; }
  #tabla-items th:last-child, #tabla-items td:last-child { width: 22px; }
  #tabla-items input.input-importe { width: 100%; padding: 2px 4px; font-size: 12px; }
  .tabla-ticket .quitar-item, .tabla-ticket .quitar-propina { padding: 2px 4px; font-size: 11px; }
  .venta-ticket { overflow-x: hidden; }
}

.btn-limpiar-buscador { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #999; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; width: 22px; height: 22px; display: none; align-items: center; justify-content: center; }
.btn-limpiar-buscador.visible { display: flex; }
.btn-limpiar-buscador:hover { color: #eee; }

/* ===== Header/footer unificados (2026) ===== */
header.site-header {
  height: 72px !important;
  background: #15161B !important;
  border-bottom: 1px solid #2A2C34 !important;
  padding: 0 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box;
  flex-wrap: nowrap !important;
  row-gap: 0 !important;
}
.site-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.site-header-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  margin: 0;
}
.site-header-brand {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  line-height: 1.2;
}
.site-header-brand strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #F4EFE7;
}
.site-header-brand em {
  font-size: 15px;
  color: #A9A49B;
  font-style: normal;
}
.site-header-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-crumbs {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.site-crumbs a { color: #C49B6E; text-decoration: none; }
.site-crumbs a:hover { color: #DDBB93; }
.site-crumbs .sep { color: #5C5953; }
.site-crumbs .current { color: #BDB8AE; }
.site-date { font-size: 14px; color: #A9A49B; white-space: nowrap; }
.site-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #2A2C34;
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  white-space: nowrap;
}
.site-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #C49B6E;
  color: #15161B;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-user-chip span:last-child { font-size: 14px; color: #EDE9E2; }

body:not(.pagina-venta) { padding-bottom: 56px; }
.footer-sitio {
  height: 56px;
  line-height: 56px;
  border-top: 1px solid #2A2C34;
  background: #17171b;
  color: #8E897F;
  font-size: 13px;
}

body.pagina-venta .sidebar-nav { display: none; }


/* --- FOUC fix: breadcrumb legacy + pin-lock raw input --- */
nav.breadcrumb { display: none !important; }
#panel-pin-lock #pin-lock-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== Homologacion global de layout (Fase 401) ===== */
.page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 40px 80px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 1100px) { .page { padding: 32px 40px 48px; } }
@media (max-width: 700px) { .page { padding: 16px 16px 32px; gap: 16px; } }

.page-title {
  margin: 0;
  font-family: 'EB Garamond', Garamond, serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  color: #F4EFE7;
  letter-spacing: 0;
}
@media (max-width: 700px) { .page-title { font-size: 34px; } }

body.pagina-inicio .inicio-wrap,
body.pagina-pos .citas-wrap,
.dashboard,
.colaboradores-wrap,
.gastos-wrap,
.cierre-wrap,
.ticket-config-wrap,
.nomina-wrap,
.ventas-hoy-wrap,
.tiles-page,
.venta-shell {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding: 40px 80px 56px !important;
}
@media (max-width: 1100px) {
  body.pagina-inicio .inicio-wrap,
  body.pagina-pos .citas-wrap,
  .dashboard,
  .colaboradores-wrap,
  .gastos-wrap,
  .cierre-wrap,
  .ticket-config-wrap,
  .nomina-wrap,
  .ventas-hoy-wrap,
  .tiles-page,
  .venta-shell {
    padding: 32px 40px 48px !important;
  }
}
@media (max-width: 700px) {
  body.pagina-inicio .inicio-wrap,
  body.pagina-pos .citas-wrap,
  .dashboard,
  .colaboradores-wrap,
  .gastos-wrap,
  .cierre-wrap,
  .ticket-config-wrap,
  .nomina-wrap,
  .ventas-hoy-wrap,
  .tiles-page,
  .venta-shell {
    padding: 24px 16px 40px !important;
  }
}
header { padding: 0 48px !important; }
.footer-sitio { padding: 0 48px !important; }

/* ===== Fase 409: Header responsive global + fix overflow horizontal (movil/tablet) ===== */
header, .page, section, .card { max-width: 100%; min-width: 0; box-sizing: border-box; }

.site-back-link{
  display: none;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  color: #C49B6E;
  font-size: 14px;
  text-decoration: none;
}
.site-back-link svg{ width: 16px; height: 16px; flex: 0 0 auto; }
.site-back-link:hover{ color: #DDBB93; }

@media (max-width: 700px){
  header.site-header{
    height: 56px !important;
    padding-left: calc(16px + env(safe-area-inset-left)) !important;
    padding-right: calc(16px + env(safe-area-inset-right)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #2A2C34 !important;
    background: #15161B !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    flex-wrap: nowrap !important;
  }
  .site-header-left{ gap: 8px; }
  .site-header-logo{ width: 28px; height: 28px; }
  .site-header-brand strong{ font-size: 15px; letter-spacing: .18em; }
  .site-header-brand em{ display: none; }
  .site-crumbs{ display: none !important; }
  .site-user-chip{
    border: none !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .site-user-chip span:last-child{ display: none !important; }
  .site-user-avatar{ width: 32px; height: 32px; }

  .site-back-link{ display: inline-flex; }

  .card{ padding: 20px; border-radius: 18px; }
}

@media (min-width: 701px) and (max-width: 1100px){
  header.site-header{ padding: 0 24px !important; }
  .site-header-brand em{ display: none; }
  .site-crumbs{ max-width: 340px; overflow: hidden; }
  .site-crumbs > *:not(:nth-last-child(-n+3)){ display: none; }
  .site-crumbs > *:nth-last-child(3){ display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
}


.modal-overlay,
.modal-colaborador{ position: fixed; inset: 0; background: rgba(10,11,14,0.72); display: flex; align-items: center; justify-content: center; z-index: 500; }
.modal-colaborador.oculto{ display: none; }
.modal,
.modal-colaborador-caja{ background: #1B1D23; border: 1px solid #2A2C34; border-radius: 20px; padding: 28px; width: 100%; max-width: min(440px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0,0,0,.5); box-sizing: border-box; }
.modal-header,
.modal-colaborador-header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-title,
.modal-colaborador-titulo{ font-family: 'EB Garamond', Garamond, serif; font-weight: 500; font-size: 26px; color: #F4EFE7; text-align: left; margin: 0; }
.modal-close,
.modal-colaborador-cerrar{ width: 32px; height: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: #8E897F; cursor: pointer; padding: 0; }
.modal-close svg,
.modal-colaborador-cerrar svg{ width: 16px; height: 16px; }
.modal-close:hover,
.modal-colaborador-cerrar:hover{ color: #F4EFE7; }
.modal-options,
.modal-colaborador-lista{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.modal-options > *:last-child:nth-child(odd),
.modal-colaborador-lista > *:last-child:nth-child(odd){ grid-column: 1 / -1; }
.modal-option,
.modal-colaborador-chip{ height: 56px; border-radius: 14px; border: 1px solid #33363F; background: #1E2027; padding: 0 14px; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: #F4EFE7; text-align: left; cursor: pointer; }
.modal-option:hover, .modal-option:focus-visible,
.modal-colaborador-chip:hover, .modal-colaborador-chip:focus-visible{ border-color: #C49B6E; background: #221F1B; outline: none; }
.modal-option:hover .modal-option-avatar, .modal-option:focus-visible .modal-option-avatar,
.modal-colaborador-chip:hover .modal-colaborador-avatar, .modal-colaborador-chip:focus-visible .modal-colaborador-avatar{ background: #C49B6E; color: #15161B; }
.modal-option-avatar,
.modal-colaborador-avatar{ width: 32px; height: 32px; border-radius: 50%; background: #2A2C34; color: #E8C98F; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 32px; }
.modal-cancel,
.modal-colaborador-cancelar{ display: block; margin: 20px auto 0; background: none; border: none; color: #A9A49B; font-size: 14px; cursor: pointer; text-decoration: none; }
.modal-cancel:hover,
.modal-colaborador-cancelar:hover{ color: #F4EFE7; text-decoration: underline; }
.ticket-propina .venta-colaboradores{ flex-basis: 100%; order: 2; margin: 4px 0 0; }
.ticket-propina .propina-botones{ order: 3; }
.venta-acciones-row{ display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }
.venta-acciones-row #no-show-wrap, .venta-acciones-row #colaboracion-wrap{ margin: 0; }
.ticket-seccion-label{ display: block; font-size: 13px; color: #999; margin: 16px 0 8px; }

/* ===== Rediseno panel de ticket (zona 3 / Nueva venta) ===== */
.venta-ticket{
  --vt-bg:#1B1D23; --vt-border:#24262E; --vt-card-bg:#1E2027; --vt-card-border:#2A2C34;
  --vt-surface:#33363F; --vt-gold:#C49B6E; --vt-gold-light:#E8C98F; --vt-red:#E8A08F;
  --vt-green:#9FC79A; --vt-muted:#8E897F; --vt-text-muted:#A9A49B; --vt-text-soft:#BDB8AE;
  --vt-text:#F4EFE7; --vt-dark:#15161B; --vt-gold-deep:#8A6D4C; --vt-total-bg:#221F1B;
  --vt-gold-border:#5A4A38; --vt-red-bg:#2A1E1C; --vt-green-bg:#1C2620; --vt-gold-hover:#D3AE84;
  background:var(--vt-bg); border-left:1px solid var(--vt-border); padding:22px 28px 28px; gap:22px;
}
body.pagina-venta .fecha-hoy-top{ color:var(--vt-muted); font-size:13px; margin-bottom:0; }
.venta-ticket .ticket-seccion-label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--vt-text-muted);
  text-transform:uppercase; border-bottom:1px solid var(--vt-card-border); padding-bottom:10px; margin:16px 0 8px;
}
.ticket-seccion-contador{ float:right; font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--vt-muted); }

/* CLIENTA */
body.pagina-venta .ticket-cliente-row{
  background:var(--vt-card-bg); border:1px solid var(--vt-card-border); border-radius:14px; padding:12px 14px;
  display:flex; align-items:center; gap:12px;
}
body.pagina-venta .ticket-cliente-avatar{ width:40px; height:40px; background:var(--vt-card-border); color:var(--vt-gold-light); }
.ticket-cliente-textos{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ticket-cliente-nombre-linea{ display:block; font-size:15px; font-weight:600; color:var(--vt-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticket-cliente-telefono-linea{ display:block; font-size:13px; color:var(--vt-text-muted); }
body.pagina-venta .ticket-cliente-row .btn-cambiar-cliente{
  height:34px; border-radius:10px; border:1px solid var(--vt-surface); color:var(--vt-gold-light);
  font-size:13px; font-weight:600; background:transparent; padding:0 14px;
}
body.pagina-venta .ticket-cliente-row .btn-cambiar-cliente:hover{ border-color:var(--vt-gold-light); }

.venta-ticket .venta-acciones-row{ justify-content:flex-start; gap:16px; margin-top:10px; }
.venta-ticket .btn-no-show-link{
  background:none; border:none; color:var(--vt-text-muted); font-size:13px; font-weight:400; padding:0; text-transform:none;
}
body.pagina-venta .btn-no-show-link:hover{ color:var(--vt-text); text-decoration:underline; background:none; }

/* SERVICIOS */
.tabla-ticket{ border-collapse:collapse; width:100%; }
.tabla-ticket td{ border-bottom:1px solid var(--vt-border); padding:12px 0; vertical-align:middle; }
.tabla-ticket tr:last-child td{ border-bottom:none; }
.item-nombre{ font-size:15px; font-weight:600; color:var(--vt-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-colaborador-chip{
  display:inline-flex; align-items:center; gap:6px; height:24px; border-radius:999px; border:1px solid var(--vt-surface);
  padding:0 8px 0 2px; margin-top:4px;
}
.item-colaborador-avatar{
  width:18px; height:18px; border-radius:50%; background:var(--vt-card-border); color:var(--vt-gold-light);
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.item-colaborador-nombre{ font-size:12px; font-weight:600; color:var(--vt-text-soft); }
.tabla-ticket .prefijo-monto{ color:var(--vt-muted); font-size:13px; margin-right:2px; }
.tabla-ticket .input-importe{
  width:108px; height:38px; border-radius:10px; background:var(--vt-card-bg); border:1px solid var(--vt-surface);
  color:var(--vt-text); font-size:14px; font-weight:600; text-align:right; padding:0 10px;
}
.tabla-ticket .input-importe:focus{ border-color:var(--vt-gold); outline:none; }
.tabla-ticket .quitar-item{ width:30px; height:30px; border-radius:8px; background:none; border:none; color:var(--vt-muted); font-size:14px; }
.tabla-ticket .quitar-item:hover{ background:var(--vt-red-bg); color:var(--vt-red); }

/* PROPINA */
.ticket-propina{ align-items:flex-start; }
.ticket-propina-quien{ font-size:13px; color:var(--vt-muted); width:86px; flex-shrink:0; display:inline-block; padding-top:6px; }
.propina-botones{ border:1px solid var(--vt-card-border); border-radius:12px; padding:4px; gap:4px; width:100%; }
.btn-propina{
  flex:1; height:36px; border-radius:9px; font-size:13px; font-weight:600; white-space:nowrap;
  border:none; background:transparent; color:var(--vt-text-soft);
}
.propina-botones .btn-propina:last-child{ flex:1.8; }
.btn-propina.activo{ background:var(--vt-gold); color:var(--vt-dark); }

/* RESUMEN */
.ticket-resumen{ gap:0; font-size:14px; }
.ticket-resumen-fila{ height:38px; display:flex; align-items:center; border-bottom:1px solid var(--vt-border); }
.ticket-resumen-fila:last-child{ border-bottom:none; }
.ticket-resumen-fila span:first-child{ color:var(--vt-text-soft); }
.ticket-resumen-fila span:last-child{ color:var(--vt-text); }
.ticket-resumen-fila.muted{ font-size:13px; color:var(--vt-muted); border-bottom:none; height:auto; padding:6px 0; }
.ticket-total-row{
  margin-top:8px; padding:16px 18px; border-radius:14px; border:1px solid var(--vt-gold-deep); background:var(--vt-total-bg);
  display:flex; justify-content:space-between; align-items:center;
}
.ticket-total-label{ font-size:15px; font-weight:600; color:var(--vt-gold-light); }
.ticket-total{
  font-family:'EB Garamond', serif; font-size:38px; font-weight:500; color:var(--vt-gold-light);
  font-variant-numeric:tabular-nums;
}

/* PAGOS */
.pagos-lista{ gap:0; }
.fila-pago{ height:40px; display:flex; align-items:center; gap:8px; border-bottom:1px dashed var(--vt-surface); }
.fila-pago::before{ content:'\2713'; color:var(--vt-green); font-size:15px; flex-shrink:0; }
.pago-nombre{ flex:1; color:var(--vt-text-soft); }
.pago-monto{ font-weight:600; color:var(--vt-text); }
.celda-x .quitar-pago{ width:28px; height:28px; border-radius:8px; background:none; border:none; color:var(--vt-muted); font-size:13px; }
.celda-x .quitar-pago:hover{ background:var(--vt-red-bg); color:var(--vt-red); }

#metodo-pago-tabs{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--vt-card-border); border-radius:12px; padding:4px; gap:4px; }
#metodo-pago-tabs .btn-metodo:nth-child(1), #metodo-pago-tabs .btn-metodo:nth-child(2), #metodo-pago-tabs .btn-metodo:nth-child(3), #metodo-pago-tabs .btn-metodo:nth-child(4){ flex:none; min-width:0; }
.btn-metodo{ height:36px; border-radius:9px; font-size:13px; font-weight:600; white-space:nowrap; border:none; background:transparent; color:var(--vt-text-soft); }
.btn-metodo.activo{ background:var(--vt-text); color:var(--vt-dark); border-color:transparent; }

.agregar-pago-fila input{ flex:1; height:44px; border-radius:12px; background:var(--vt-card-bg); border:1px solid var(--vt-surface); color:var(--vt-text); }
.agregar-pago-fila button{ height:44px; border-radius:12px; border:1px solid var(--vt-gold-border); color:var(--vt-gold-light); font-weight:600; white-space:nowrap; background:none; }

.pago-restante{ height:40px; display:flex; align-items:center; justify-content:space-between; border-radius:10px; padding:0 14px; font-size:15px; font-weight:700; }
.pago-restante.falta{ background:var(--vt-red-bg); color:var(--vt-red); }
.pago-restante.ok{ background:var(--vt-green-bg); color:var(--vt-green); }

/* COBRAR */
.btn-cobrar-grande{
  height:60px; border-radius:14px; background:var(--vt-gold); color:var(--vt-dark); display:flex;
  justify-content:space-between; align-items:center; padding:0 22px; font-size:17px; font-weight:700;
  font-variant-numeric:tabular-nums; border:none;
}
.btn-cobrar-grande:hover{ background:var(--vt-gold-hover); }
.btn-cobrar-grande:disabled{ background:var(--vt-card-border); color:#6F6B64; }

@media (max-width: 700px){
  .propina-botones, #metodo-pago-tabs{ overflow-x:auto; }
}

/* ===== Ajustes finos ticket venta (2026-10) ===== */

/* 1. Linea de servicio */
#tabla-items{ margin:0; }
#tabla-items td{ padding:12px 0; }
#tabla-items th:nth-child(2), #tabla-items td:nth-child(2){ width:120px; }
.tabla-ticket .importe-chip{ display:flex; align-items:center; gap:4px; width:108px; height:38px; border-radius:10px; background:#1E2027; border:1px solid #33363F; padding:0 10px; box-sizing:border-box; }
.tabla-ticket .importe-chip:focus-within{ border-color:#C49B6E; }
.tabla-ticket .importe-chip .prefijo-monto{ margin-right:0; font-size:13px; }
.tabla-ticket .importe-chip .input-importe{ width:auto; flex:1; min-width:0; height:auto; border:none; background:none; padding:0; border-radius:0; font-size:14px; font-weight:600; }
.tabla-ticket .importe-chip .input-importe:focus{ border:none; outline:none; }

/* 2. Propina: fila "para quien" + chips */
.ticket-propina .ticket-propina-label{ flex-basis:100%; width:100%; }
.ticket-propina-quien-row{ display:flex; align-items:center; gap:0; flex-basis:100%; width:100%; }
.ticket-propina-quien-row .ticket-propina-quien{ padding-top:0; }
.ticket-propina-quien-row .venta-colaboradores{ flex-basis:auto; order:0; margin:0; flex:1; }
.btn-propina{ padding:0 6px; min-width:0; }
.propina-botones{ overflow:hidden; }

/* 3. Pagos: franja de estado */
.pago-restante.cambio{ background:var(--vt-total-bg); color:var(--vt-gold-light); }
.pago-restante-label, .pago-restante-monto{ font-weight:700; }
.pago-restante-monto{ font-variant-numeric:tabular-nums; }

/* 4. Cobrar */
.btn-cobrar-total{ font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }

/* 5. Enlaces bajo la clienta */
.venta-ticket .btn-no-show-link{ display:inline-flex; align-items:center; gap:6px; }
.venta-accion-icono{ width:13px; height:13px; display:inline-flex; }
.venta-accion-icono svg{ width:13px; height:13px; display:block; }

/* Fix: evitar que los chips de colaborador envuelvan a 2 lineas y descentren la etiqueta */
.ticket-propina-quien-row .venta-colaboradores{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
.ticket-propina-quien-row .venta-colaboradores::-webkit-scrollbar{ display:none; }

/* Fix: el input-importe dentro de importe-chip heredaba el borde/padding viejo de #tabla-items input.input-importe */
#tabla-items .importe-chip .input-importe{ border:none; background:none; padding:0; border-radius:0; box-sizing:content-box; text-align:right; font-size:14px; font-weight:600; width:auto; flex:1; min-width:0; }
#tabla-items .importe-chip .input-importe:focus{ border:none; outline:none; }

/* ===== Ajustes finos 2 (2026-10) ===== */
/* 1. Separacion primera fila igual a separacion entre filas */
#tabla-items{ margin-top:-17px; }
/* 2. Linea divisoria debajo del ultimo servicio */
#tabla-items tr:last-child td{ border-bottom:1px solid var(--vt-border); }
/* 3-4. Colaborador bajo el servicio: sin circulo, sin borde, tipografia tipo link */
#tabla-items .item-colaborador-chip{ border:none; padding:0; height:auto; gap:0; margin-top:2px; }
#tabla-items .item-colaborador-avatar{ display:none; }
#tabla-items .item-colaborador-nombre{ font-size:13px; font-weight:400; color:var(--vt-text-muted); }
/* 5. Linea punteada de pagos: gris tenue del tema, no blanco */
#pagos-lista .fila-pago{ border-bottom:1px dashed var(--vt-surface); }
/* 6. Metodo de pago seleccionado: resaltar en dorado, no blanco */
.btn-metodo.activo{ background:var(--vt-gold); color:var(--vt-dark); border-color:transparent; }
/* 7. Separar Monto de metodo de pago para que el foco no se encime */
.agregar-pago-fila{ margin-top:10px; }
.agregar-pago-fila input{ outline:none; }
.agregar-pago-fila input:focus{ border-color:var(--vt-gold); outline:none; }

/* Falta cubrir: sin fondo, con borde rojo */
.pago-restante.falta{ background:none; border:1px solid var(--vt-red); color:var(--vt-red); }
/* ===== Ajustes finos 3 (2026-10) ===== */
.venta-ticket .venta-acciones-row{ justify-content:flex-end; }
#no-show-wrap{ order:2; }
#colaboracion-wrap{ order:1; }
.tabla-ticket .quitar-item:hover{ background:none; outline:1px solid var(--vt-red); outline-offset:-1px; color:var(--vt-red); }
.chip-colaborador-avatar{ display:none; }
.chip-colaborador{ padding:6px 12px; gap:0; }
.btn-propina.activo, .propina-botones .btn-propina.activo{ background:none; border-color:var(--vt-gold); color:var(--vt-gold); }
.btn-metodo.activo{ background:none; border-color:var(--vt-gold); color:var(--vt-gold); }
.pago-restante.falta{ background:none; border:1px solid var(--vt-red); outline:none; box-shadow:none; color:var(--vt-red); }
.btn-propina.activo, .propina-botones .btn-propina.activo{ background:none; color:var(--vt-gold); outline:1.5px solid var(--vt-gold); outline-offset:-1.5px; }
.btn-metodo.activo{ background:none; color:var(--vt-gold); outline:1.5px solid var(--vt-gold); outline-offset:-1.5px; }

/* ===== Ajustes finos 5 (2026-10) - Round E ===== */
.tabla-ticket .quitar-item:hover{ background:none; outline:1.5px solid #EF4444; outline-offset:-1.5px; color:#EF4444; }
.pago-restante.falta{ background:none; border:1px solid #EF4444; outline:none; box-shadow:none; color:#EF4444; }
#propina-monto-manual:focus{ outline:none; border-color:var(--vt-gold); }

/* ===== Ajustes finos 6 (2026-10) ===== */
.venta-buscador{ margin-left:auto; }
.venta-catalogo{ overflow-y:visible; max-height:none; }
.venta-ticket{ position:static; min-height:auto; }

/* ===== Ajustes finos 7 (2026-10) ===== */
.venta-ticket{ padding-top:28px; }
.ticket-header{ gap:5px; }
.venta-colab-row{ margin-bottom:36px; }

/* ===== Ajustes finos 8 (2026-10) - icono buscar ===== */
.venta-buscador::before{
  content:'';
  position:absolute;
  left:12px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238E897F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
}
.venta-buscador input{ padding-left:40px; }
/* ===== Ajustes finos 9 (2026-10) - fix alineacion vertical icono buscar ===== */
.venta-buscador::before{ top:24px; }
/* ===== Ajustes finos 10 (2026-10) - monograma + buscador en encabezado Nueva venta ===== */
.venta-titulo-row{ display:flex; align-items:center; gap:14px; }
.venta-monograma{ width:32px; height:32px; object-fit:contain; display:block; }
.venta-titulo-divisor{ width:1px; height:18px; background:#33363F; display:block; flex-shrink:0; }
.venta-catalogo-header .venta-titulo{ margin-top:12px; }
.venta-catalogo-header{ align-items:center; margin-bottom:0; }
.venta-tabs{ margin-top:24px; margin-bottom:0; }
.venta-grid{ margin-top:24px; }
.venta-catalogo-header .venta-buscador{
  width:360px;
  flex-shrink:0;
  height:44px;
  border-radius:12px;
  background:#1E2027;
  border:1px solid #33363F;
  padding:0 8px 0 14px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:10px;
}
.venta-catalogo-header .venta-buscador:focus-within{
  border-color:#C49B6E;
  box-shadow:none;
  outline:none;
}
.venta-catalogo-header .venta-buscador::before{
  position:static;
  left:auto;
  top:auto;
  transform:none;
  width:17px;
  height:17px;
  flex-shrink:0;
}
.venta-catalogo-header .venta-buscador input{
  width:auto;
  max-width:none;
  flex:1;
  height:auto;
  background:transparent;
  border:none;
  outline:none;
  box-shadow:none;
  padding:0;
  margin:0;
  font-size:14px;
  color:#F4EFE7;
}
.venta-catalogo-header .venta-buscador input::placeholder{ color:#7D7970; }
.venta-catalogo-header .btn-limpiar-buscador{
  position:static;
  right:auto;
  top:auto;
  transform:none;
  width:28px;
  height:28px;
  border-radius:8px;
  background:transparent;
  border:none;
  color:#8E897F;
  font-size:14px;
  flex-shrink:0;
}
.venta-catalogo-header .btn-limpiar-buscador:hover{ background:#2A2C34; color:#F4EFE7; }
@media (max-width: 700px){
  .venta-monograma{ width:28px; height:28px; }
  .venta-catalogo-header .venta-buscador{ width:100%; }
}
/* ===== Ajustes finos 11 (2026-10) - fix caret/placeholder buscador Nueva venta ===== */
.venta-catalogo-header .venta-buscador input{
  padding:0;
  margin:0;
  text-indent:0;
  border:0;
  background:transparent;
  height:100%;
  flex-grow:1;
  min-width:0;
  line-height:normal;
  font-size:14px;
  color:#F4EFE7;
  caret-color:#C49B6E;
}
.venta-catalogo-header .venta-buscador input::placeholder{ color:#7D7970; opacity:1; }
/* ===== Ajustes finos 12 (2026-10) - fix input buscar-cliente no se mostraba al abrir popover Cambiar ===== */
.popover-cliente:not(.oculto) #buscar-cliente.oculto{ display:block !important; }
/* ===== Ajustes finos 13 (2026-10) - icono lupa + outline dorado en buscador de cliente ===== */
.popover-cliente input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238E897F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:12px center;
  background-size:15px 15px;
  padding-left:34px;
  outline:none;
}
.popover-cliente input:focus{
  outline:none;
  border-color:#C49B6E;
  box-shadow:none;
}

/* ============ Control de Existencias - rediseno cosmetico ============ */
#panel-existencias-contenido .ex-header { margin-bottom:24px; }
#panel-existencias-contenido .ex-page-title { font-family:'EB Garamond', Garamond, serif; font-size:48px; line-height:1; margin:0; font-weight:500; color:#F4EFE7; }
#panel-existencias-contenido .ex-page-subtitle { margin:10px 0 0; font-size:15px; color:#A9A49B; }

#panel-existencias-contenido .ex-summary-grid { display:grid; grid-template-columns:2fr 1fr; gap:24px; margin-bottom:24px; }
#panel-existencias-contenido .ex-summary-group { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
#panel-existencias-contenido .ex-summary-card { background:#1B1D23; border:1px solid #2A2C34; border-radius:18px; padding:20px 24px; }
#panel-existencias-contenido .ex-summary-label { margin:0 0 8px; font-size:13px; font-weight:700; letter-spacing:.04em; color:#A9A49B; display:flex; align-items:center; gap:8px; }
#panel-existencias-contenido .ex-summary-value { margin:0; font-family:'EB Garamond', Garamond, serif; font-size:32px; font-weight:500; color:#F4EFE7; }
#panel-existencias-contenido .ex-summary-sub { font-size:14px; font-weight:400; color:#A9A49B; }
#panel-existencias-contenido .ex-summary-ayuda { margin:8px 0 0; font-size:12px; color:#8E897F; }
#panel-existencias-contenido .ex-link-gold, #panel-existencias-contenido .ex-link-gold:visited { color:#C49B6E; text-decoration:underline; }
#panel-existencias-contenido .ex-summary-card--alerta { background:#221F1B; border-color:#8A6D4C; }
#panel-existencias-contenido .ex-summary-card--alerta .ex-summary-value { color:#E8C98F; }
#panel-existencias-contenido .ex-dot-alerta { width:7px; height:7px; border-radius:50%; background:#E8A08F; display:inline-block; }
#panel-existencias-contenido .ex-layout-3col { display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start; }
#panel-existencias-contenido .ex-card { background:#1B1D23; border:1px solid #2A2C34; border-radius:20px; padding:24px 28px; }
#panel-existencias-contenido .ex-card-header { display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid #2A2C34; padding-bottom:16px; margin-bottom:16px; }
#panel-existencias-contenido .ex-card-header h2 { margin:0; font-size:13px; font-weight:700; letter-spacing:.16em; color:#A9A49B; }
#panel-existencias-contenido .ex-card-counter { font-size:13px; color:#8E897F; }

#panel-existencias-contenido .ex-filtros-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
#panel-existencias-contenido .ex-filtros-row--secundaria { justify-content:space-between; margin-bottom:16px; }
#panel-existencias-contenido #ex-filtro-marca { width:auto; min-width:180px; height:40px; border-radius:12px; background:#1E2027; border:1px solid #33363F; color:#F4EFE7; padding:0 32px 0 14px; font-size:14px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 7l5 5 5-5' stroke='%238E897F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px; }
#panel-existencias-contenido #ex-filtro-marca:focus { outline:none; border-color:#C49B6E; box-shadow:none; }

#panel-existencias-contenido .ex-seleccion-info { margin:0; font-size:13px; color:#8E897F; }
#panel-existencias-contenido .ex-btn-pill { height:34px; padding:0 16px; border-radius:999px; border:1px solid #5A4A38; background:transparent; color:#E8C98F; font-size:13px; font-weight:600; cursor:pointer; }
#panel-existencias-contenido .ex-btn-pill:hover { background:#221F1B; }
#panel-existencias-contenido .ex-tabla-scroll { overflow-x:auto; }
#panel-existencias-contenido #tabla-existencias { table-layout:fixed; width:100%; border-collapse:collapse; }
#panel-existencias-contenido #tabla-existencias th { font-size:13px; font-weight:600; color:#8E897F; border-bottom:1px solid #2A2C34; text-align:left; padding:0 8px 10px; }
#panel-existencias-contenido .ex-col-check { width:40px; }
#panel-existencias-contenido .ex-col-marca { width:112px; }
#panel-existencias-contenido .ex-col-ref { width:92px; }
#panel-existencias-contenido #tabla-existencias th.ex-col-umbral, #panel-existencias-contenido .ex-col-umbral { width:70px; text-align:right; }
#panel-existencias-contenido #tabla-existencias th.ex-col-existencia, #panel-existencias-contenido .ex-col-existencia { width:96px; text-align:right; }
#panel-existencias-contenido #tabla-existencias th.ex-col-pedido, #panel-existencias-contenido .ex-col-pedido { width:96px; text-align:center; }
#panel-existencias-contenido #tabla-existencias-body tr { min-height:64px; border-bottom:1px solid #24262E; background:transparent; }
#panel-existencias-contenido #tabla-existencias-body tr:hover { background:#23252D; }
#panel-existencias-contenido #tabla-existencias-body tr td { padding:12px 8px; }
#panel-existencias-contenido #tabla-existencias-body tr td:first-child { border-top-left-radius:10px; border-bottom-left-radius:10px; }
#panel-existencias-contenido #tabla-existencias-body tr td:last-child { border-top-right-radius:10px; border-bottom-right-radius:10px; }
#panel-existencias-contenido #tabla-existencias-body tr.fila-seleccionada { background:#221F1B !important; box-shadow:inset 3px 0 0 #C49B6E; }
#panel-existencias-contenido #tabla-existencias-body tr.fila-alerta { background:transparent; }
#panel-existencias-contenido #tabla-existencias-body tr.fila-alerta:hover { background:#23252D; }
#panel-existencias-contenido .ex-marca-celda { font-size:14px; color:#BDB8AE; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%; }
#panel-existencias-contenido .ex-ref-celda { font-size:13px; color:#8E897F; font-variant-numeric:tabular-nums; }
#panel-existencias-contenido .ex-producto-nombre { font-size:15px; font-weight:600; color:#F4EFE7; display:block; }
#panel-existencias-contenido .ex-producto-sub { font-size:12px; color:#8E897F; display:block; margin-top:2px; }
#panel-existencias-contenido .ex-umbral-celda { color:#8E897F; text-align:right; white-space:nowrap; }
#panel-existencias-contenido .ex-umbral-ast { color:#C49B6E; }
#panel-existencias-contenido .ex-nota-umbral { margin:12px 0 0; font-size:12px; color:#8E897F; }

#panel-existencias-contenido .ex-existencia-celda { font-weight:600; text-align:right; display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; float:right; }
#panel-existencias-contenido .ex-existencia-dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex:none; }
#panel-existencias-contenido .ex-existencia-celda.ex-estado-bajo { color:#E8A08F; }
#panel-existencias-contenido .ex-existencia-celda.ex-estado-bajo .ex-existencia-dot { background:#E8A08F; }
#panel-existencias-contenido .ex-existencia-celda.ex-estado-ok { color:#9FC79A; }
#panel-existencias-contenido .ex-existencia-celda.ex-estado-ok .ex-existencia-dot { background:#9FC79A; }
#panel-existencias-contenido .ex-existencia-celda.ex-estado-sin { color:#BDB8AE; }
#panel-existencias-contenido .ex-existencia-celda.ex-estado-sin .ex-existencia-dot { background:#3A3D46; }

#panel-existencias-contenido .input-pedido { width:64px; height:36px; border-radius:10px; background:#1E2027; border:1px solid #33363F; color:#F4EFE7; text-align:center; font-size:15px; font-weight:600; -moz-appearance:textfield; }
#panel-existencias-contenido .input-pedido::-webkit-outer-spin-button, #panel-existencias-contenido .input-pedido::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
#panel-existencias-contenido .input-pedido.ex-con-pedido { border-color:#8A6D4C; color:#E8C98F; }

#panel-existencias-contenido .chk-pedido { appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:5px; border:1.5px solid #5C5953; background:transparent; cursor:pointer; position:relative; margin:0; }
#panel-existencias-contenido .chk-pedido:checked { background:#C49B6E; border-color:#C49B6E; }
#panel-existencias-contenido .chk-pedido:checked::after { content:''; position:absolute; left:4px; top:1px; width:5px; height:9px; border:solid #15161B; border-width:0 2px 2px 0; transform:rotate(45deg); }
#panel-existencias-contenido .ex-card-lateral { display:flex; flex-direction:column; }
/* En escritorio la tarjeta de Producto/Pedido se queda a la vista al hacer
   scroll en la tabla; si su contenido es mas alto que la pantalla, se
   desplaza por dentro. En celular (una sola columna) sigue el flujo normal. */
@media (min-width:701px) {
  #panel-existencias-contenido .ex-card-lateral { position:sticky; top:24px; max-height:calc(100vh - 48px); overflow-y:auto; }
}
#panel-existencias-contenido .ex-tabs { display:flex; border:1px solid #2A2C34; border-radius:999px; padding:4px; margin-bottom:20px; }
#panel-existencias-contenido .ex-tab { flex:1; border:none; background:transparent; color:#BDB8AE; font-size:13px; font-weight:600; padding:8px 12px; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
#panel-existencias-contenido .ex-tab.ex-tab-activa { background:#F4EFE7; color:#15161B; }
#panel-existencias-contenido .ex-tab-badge { background:#C49B6E; color:#15161B; border-radius:999px; font-size:11px; font-weight:700; padding:1px 7px; }

#panel-existencias-contenido .ex-vacio { min-height:160px; border:1px dashed #33363F; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
#panel-existencias-contenido .ex-vacio-titulo { font-size:14px; font-weight:600; color:#BDB8AE; margin:0 0 6px; }
#panel-existencias-contenido .ex-vacio-texto { font-size:13px; color:#8E897F; margin:0; }
#panel-existencias-contenido .ex-vacio-pedido { min-height:100px; margin-bottom:16px; }

#panel-existencias-contenido .ex-form-producto { background:#17181D; border:1px solid #2A2C34; border-radius:14px; padding:16px; }
#panel-existencias-contenido .ex-form-titulo { font-size:15px; font-weight:600; color:#F4EFE7; margin:0 0 2px; }
#panel-existencias-contenido .ex-form-sub { font-size:12px; color:#8E897F; margin:0 0 14px; }
#panel-existencias-contenido .ex-datos-fila { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
#panel-existencias-contenido .ex-dato { display:flex; flex-direction:column; gap:4px; }
#panel-existencias-contenido .ex-dato-label { font-size:11px; font-weight:700; letter-spacing:.08em; color:#8E897F; }
#panel-existencias-contenido .ex-dato-valor { background:#1E2027; border:1px solid #33363F; border-radius:10px; height:40px; text-align:center; color:#F4EFE7; font-weight:600; }
#panel-existencias-contenido .ex-field-label { display:block; font-size:12px; font-weight:700; letter-spacing:.12em; color:#8E897F; margin:14px 0 6px; text-transform:uppercase; }
#panel-existencias-contenido .ex-field { width:100%; height:44px; border-radius:12px; background:#1E2027; border:1px solid #33363F; color:#F4EFE7; padding:0 14px; box-sizing:border-box; font-size:14px; }
#panel-existencias-contenido .ex-field::placeholder { color:#6F6B64; }
#panel-existencias-contenido .ex-field:focus { outline:none; border-color:#C49B6E; }
#panel-existencias-contenido .ex-field-textarea { height:auto; min-height:84px; padding:12px 14px; resize:vertical; }
#panel-existencias-contenido input#ex-umbral-manual.ex-field { margin-bottom:8px; }

#panel-existencias-contenido .ex-btn-enviar { width:100%; height:52px; border-radius:14px; background:#C49B6E; color:#15161B; font-size:15px; font-weight:700; border:none; cursor:pointer; margin-top:16px; }
#panel-existencias-contenido .ex-btn-enviar:hover { background:#D3AE84; }
#panel-existencias-contenido .ex-btn-enviar:disabled { background:#2A2C34; color:#6F6B64; cursor:not-allowed; }
#panel-existencias-contenido #btn-guardar-umbral-manual.ex-btn-enviar { height:44px; font-size:14px; margin-top:4px; margin-bottom:14px; }

#panel-existencias-contenido .ex-botones-secundarios { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
#panel-existencias-contenido .ex-btn-secundario { height:40px; border-radius:10px; border:1px solid #33363F; background:transparent; color:#F4EFE7; font-size:13px; font-weight:600; cursor:pointer; }
#panel-existencias-contenido .ex-btn-secundario:hover { background:#23252D; }

#panel-existencias-contenido .ex-pedido-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
#panel-existencias-contenido .ex-pedido-titulo { margin:0; font-size:13px; font-weight:700; letter-spacing:.1em; color:#F4EFE7; }
#panel-existencias-contenido .ex-pedido-contador { font-size:12px; color:#8E897F; }

#panel-existencias-contenido #pedido-preview.ex-preview { margin:14px 0 0; padding:14px 16px; border:1px solid #2A2C34; border-radius:14px; background:#17181D; color:#F4EFE7; }
#panel-existencias-contenido #pedido-preview.ex-preview table.table { margin-top:10px; }

@media (max-width:700px) {
  #panel-existencias-contenido .ex-summary-grid { grid-template-columns:1fr; }
  #panel-existencias-contenido .ex-summary-group { grid-template-columns:1fr; }
  #panel-existencias-contenido .ex-layout-3col { grid-template-columns:1fr; }
  #panel-existencias-contenido .ex-page-title { font-size:34px; }
  #panel-existencias-contenido .ex-tabla-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #panel-existencias-contenido #tabla-existencias { min-width:640px; }
}
#panel-existencias-contenido .ex-btn-pill--activo { background:#221F1B; color:#F4EFE7; }
#panel-existencias-contenido .ex-buscador-wrap { position:relative; margin-left:auto; width:320px; max-width:100%; }
#panel-existencias-contenido .ex-buscador-icono { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#6B6E78; pointer-events:none; }
#panel-existencias-contenido .ex-buscador { width:100%; background:#15161B; border:1px solid #33363F; border-radius:8px; color:#EDEAE3; font-family:inherit; font-size:14px; padding:10px 14px 10px 36px; box-sizing:border-box; }
#panel-existencias-contenido .ex-buscador::placeholder { color:#6B6E78; }
#panel-existencias-contenido .ex-buscador:focus { outline:none; border-color:#C49B6E; box-shadow:0 0 0 1px #C49B6E; }
#panel-existencias-contenido .input-umbral { width:34px; background:transparent; border:1px solid transparent; border-radius:6px; color:#EDEAE3; font-family:inherit; font-size:14px; text-align:right; padding:4px 2px; -moz-appearance:textfield; vertical-align:middle; }
#panel-existencias-contenido .input-umbral::-webkit-outer-spin-button, #panel-existencias-contenido .input-umbral::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
#panel-existencias-contenido .input-umbral:hover { border-color:#33363F; }
#panel-existencias-contenido .input-umbral:focus { outline:none; border-color:#C49B6E; background:#15161B; }
#panel-existencias-contenido .input-umbral:disabled { opacity:.5; }
#panel-existencias-contenido .ex-umbral-ast-oculto { visibility:hidden; }

.campo-ayuda {
  font-size: 12px;
  color: #888;
  margin: 6px 0 0;
}

/* ===== Fase: Catalogo de servicios — rediseno cosmetico (oscuro) ===== */
/* Todo escopado bajo #panel-catalogo-contenido para no afectar otras paginas
   que comparten clases genericas (colaboradores-wrap, btn-primario, etc). */

#panel-catalogo-contenido.page {
  gap: 24px;
}

#panel-catalogo-contenido .cat-page-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#panel-catalogo-contenido .page-subtitle {
  margin: 0;
  font-size: 15px;
  color: #A9A49B;
}

#panel-catalogo-contenido .cat-card {
  background: var(--vt-surface, #33363F);
  border: 1px solid #44464F;
  border-radius: 16px;
  padding: 24px;
  box-shadow: none;
}

#panel-catalogo-contenido .cat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

#panel-catalogo-contenido .cat-card-header-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#panel-catalogo-contenido .cat-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #A9A49B;
}

#panel-catalogo-contenido .cat-card-hint {
  font-size: 13px;
  color: #8E897F;
}

#panel-catalogo-contenido .cat-contador {
  font-size: 13px;
  color: #8E897F;
}

#panel-catalogo-contenido .categorias-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}

#panel-catalogo-contenido .categoria-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid #4A4C55;
  color: #E7E3DB;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

#panel-catalogo-contenido .categoria-chip:hover {
  border-color: var(--vt-gold-border, #5A4A38);
}

#panel-catalogo-contenido .categoria-chip-activa {
  border-color: var(--vt-gold, #C49B6E);
  color: var(--vt-gold-light, #E8C98F);
  background: rgba(196, 155, 110, 0.12);
}

#panel-catalogo-contenido .cat-sync-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: #8E897F;
}

#panel-catalogo-contenido .cat-sync-icon svg {
  width: 100%;
  height: 100%;
}

#panel-catalogo-contenido .quitar-categoria {
  background: none;
  border: none;
  color: #8E897F;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}

#panel-catalogo-contenido .quitar-categoria:hover {
  color: var(--vt-red, #E8A08F);
}

#panel-catalogo-contenido .cat-categorias-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #44464F;
  flex-wrap: wrap;
}

#panel-catalogo-contenido .cat-sync-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: #8E897F;
  max-width: 460px;
}

#panel-catalogo-contenido .agregar-categoria {
  display: flex;
  gap: 10px;
  align-items: center;
}

#panel-catalogo-contenido .agregar-categoria input[type="text"] {
  background: #272932;
  border: 1px solid #44464F;
  border-radius: 10px;
  color: #E7E3DB;
  padding: 10px 14px;
  font-size: 14px;
  min-width: 220px;
}

#panel-catalogo-contenido .agregar-categoria input[type="text"]::placeholder {
  color: #6E6A62;
}

#panel-catalogo-contenido .cat-btn-outline-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--vt-gold-border, #5A4A38);
  color: var(--vt-gold-light, #E8C98F);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  white-space: nowrap;
}

#panel-catalogo-contenido .cat-btn-outline-gold:hover {
  border-color: var(--vt-gold, #C49B6E);
  background: rgba(196, 155, 110, 0.08);
}

#panel-catalogo-contenido .cat-btn-outline-gold svg {
  width: 14px;
  height: 14px;
}

#panel-catalogo-contenido .cat-btn-sm {
  padding: 7px 14px;
  font-size: 13px;
}

#panel-catalogo-contenido .cat-btn-outline-coral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #6B3A34;
  color: var(--vt-red, #E8A08F);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

#panel-catalogo-contenido .cat-btn-outline-coral:hover {
  border-color: var(--vt-red, #E8A08F);
  background: rgba(232, 160, 143, 0.08);
}

#panel-catalogo-contenido .cat-btn-dorado-solido {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vt-gold, #C49B6E);
  border: 1px solid var(--vt-gold, #C49B6E);
  color: #241C14;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

#panel-catalogo-contenido .cat-btn-dorado-solido:hover {
  background: var(--vt-gold-hover, #D3AE84);
  border-color: var(--vt-gold-hover, #D3AE84);
}

#panel-catalogo-contenido .cat-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #4A4C55;
  color: #E7E3DB;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease;
}

#panel-catalogo-contenido .cat-btn-outline:hover {
  border-color: var(--vt-gold-border, #5A4A38);
  color: var(--vt-gold-light, #E8C98F);
}

#panel-catalogo-contenido .cat-btn-full {
  width: 100%;
}

#panel-catalogo-contenido .cat-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

#panel-catalogo-contenido .cat-card-servicios,
#panel-catalogo-contenido .cat-card-editor {
  min-width: 0;
}

#panel-catalogo-contenido .cat-table-wrap {
  overflow-x: auto;
}

#panel-catalogo-contenido #tabla-servicios {
  width: 100%;
  border-collapse: collapse;
}

#panel-catalogo-contenido #tabla-servicios thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8E897F;
  padding: 10px 12px;
  border-bottom: 1px solid #44464F;
  cursor: pointer;
  white-space: nowrap;
}

#panel-catalogo-contenido #tabla-servicios tbody td {
  padding: 12px;
  border-bottom: 1px solid #3A3C45;
  font-size: 14px;
  color: #E7E3DB;
  vertical-align: middle;
}

#panel-catalogo-contenido #tabla-servicios tbody tr:hover {
  background: rgba(196, 155, 110, 0.06);
  cursor: pointer;
}

#panel-catalogo-contenido #tabla-servicios tbody tr.fila-seleccionada {
  background: rgba(196, 155, 110, 0.12);
}

#panel-catalogo-contenido .cat-servicio-nombre {
  font-size: 14px;
  color: #E7E3DB;
}

#panel-catalogo-contenido .cat-servicio-ingles {
  font-size: 12px;
  color: #8E897F;
  margin-top: 2px;
}

#panel-catalogo-contenido .cat-chip-origen {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

#panel-catalogo-contenido .cat-chip-origen-sb {
  background: var(--vt-green-bg, #1C2620);
  color: #8FD6A8;
}

#panel-catalogo-contenido .cat-chip-origen-manual {
  background: #3A3C45;
  color: #C8C4BA;
}

#panel-catalogo-contenido .cat-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#panel-catalogo-contenido .cat-form label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8E897F;
  margin-bottom: -6px;
}

#panel-catalogo-contenido .cat-form input[type="text"],
#panel-catalogo-contenido .cat-form input[type="number"],
#panel-catalogo-contenido .cat-form select {
  background: #272932;
  border: 1px solid #44464F;
  border-radius: 10px;
  color: #E7E3DB;
  padding: 11px 14px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

#panel-catalogo-contenido .cat-form input::placeholder {
  color: #6E6A62;
}

#panel-catalogo-contenido .cat-form input:disabled,
#panel-catalogo-contenido .cat-form select:disabled {
  opacity: .6;
  cursor: not-allowed;
}

#panel-catalogo-contenido .cat-field-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#panel-catalogo-contenido .cat-input-affix {
  display: flex;
  align-items: center;
  background: #272932;
  border: 1px solid #44464F;
  border-radius: 10px;
  overflow: hidden;
}

#panel-catalogo-contenido .cat-input-affix input {
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
}

#panel-catalogo-contenido .cat-input-affix span {
  color: #8E897F;
  font-size: 14px;
  padding: 0 12px;
}

#panel-catalogo-contenido .cat-input-prefix span {
  border-right: 1px solid #44464F;
}

#panel-catalogo-contenido .cat-input-suffix span {
  border-left: 1px solid #44464F;
}

#panel-catalogo-contenido .cat-duracion-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

#panel-catalogo-contenido .cat-duracion-row .cat-input-affix {
  flex: 1;
}

#panel-catalogo-contenido .cat-divider {
  height: 1px;
  background: #44464F;
  margin: 4px 0;
}

#panel-catalogo-contenido .cat-receta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#panel-catalogo-contenido .cat-receta-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8E897F;
}

#panel-catalogo-contenido .cat-receta-costo-label {
  font-size: 12px;
  color: #8E897F;
}

#panel-catalogo-contenido .cat-receta-box {
  background: #272932;
  border: 1px solid #44464F;
  border-radius: 12px;
  padding: 4px;
}

#panel-catalogo-contenido .receta-lista {
  display: flex;
  flex-direction: column;
}

#panel-catalogo-contenido .receta-fila {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #3A3C45;
  font-size: 13px;
  color: #E7E3DB;
}

#panel-catalogo-contenido .receta-fila:last-child {
  border-bottom: none;
}

#panel-catalogo-contenido .receta-fila-cantidad,
#panel-catalogo-contenido .receta-fila-costo {
  color: #8E897F;
  white-space: nowrap;
}

#panel-catalogo-contenido .quitar-insumo-receta {
  background: none;
  border: none;
  color: #8E897F;
  cursor: pointer;
  font-size: 12px;
}

#panel-catalogo-contenido .quitar-insumo-receta:hover {
  color: var(--vt-red, #E8A08F);
}

#panel-catalogo-contenido .cat-receta-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed #4A4C55;
  border-radius: 10px;
  margin: 6px;
  color: #8E897F;
}

#panel-catalogo-contenido .cat-receta-vacio strong {
  color: #C8C4BA;
  font-size: 14px;
}

#panel-catalogo-contenido .cat-receta-vacio span {
  font-size: 13px;
}

#panel-catalogo-contenido .receta-costo-total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 12px 12px 8px;
  border-top: 1px solid #44464F;
  margin-top: 2px;
}

#panel-catalogo-contenido .cat-receta-total-label {
  font-size: 13px;
  color: #8E897F;
}

#panel-catalogo-contenido .cat-receta-total-monto {
  font-size: 16px;
  font-weight: 700;
  color: var(--vt-gold-light, #E8C98F);
  text-align: right;
}

#panel-catalogo-contenido .cat-agregar-insumo-row {
  display: grid;
  grid-template-columns: 1fr 110px auto;
  gap: 10px;
  align-items: center;
}

#panel-catalogo-contenido .cat-buscador-insumo {
  position: relative;
  display: flex;
  align-items: center;
  background: #272932;
  border: 1px solid #44464F;
  border-radius: 10px;
}

#panel-catalogo-contenido .cat-icon-search {
  width: 14px;
  height: 14px;
  color: #6E6A62;
  margin-left: 12px;
  flex-shrink: 0;
}

#panel-catalogo-contenido .cat-buscador-insumo input {
  border: none;
  background: transparent;
}

#panel-catalogo-contenido .ayuda-categorias {
  font-size: 13px;
  color: #8E897F;
  margin: 0;
}

#panel-catalogo-contenido .cat-botones-finales {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
}

@media (max-width: 1080px) {
  #panel-catalogo-contenido .cat-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  #panel-catalogo-contenido .cat-card {
    padding: 18px;
  }
  #panel-catalogo-contenido .cat-field-row-2 {
    grid-template-columns: 1fr;
  }
  #panel-catalogo-contenido .cat-agregar-insumo-row {
    grid-template-columns: 1fr;
  }
  #panel-catalogo-contenido .cat-categorias-footer {
    flex-direction: column;
    align-items: stretch;
  }
  #panel-catalogo-contenido .agregar-categoria {
    flex-direction: column;
    align-items: stretch;
  }
  #panel-catalogo-contenido .agregar-categoria input[type="text"] {
    min-width: 0;
  }
  #panel-catalogo-contenido .cat-botones-finales {
    grid-template-columns: 1fr;
  }
}