* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #f3f4f6;
  color: #111;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Inputs y selects heredan la tipografía moderna (antes salían en Arial del navegador) */
input, select, textarea, button { font-family: inherit; }

/* ===== Layout ERP con menú lateral ===== */
.app-layout { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: #0f172a;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .app-brand {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 22px;
  display: flex;
  justify-content: center;
}
.sidebar .app-brand img { height: 30px; width: auto; display: block; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidebar nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  background: transparent;
  color: #cbd5e1;
  border: none;
  padding: 11px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.sidebar nav button svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.sidebar nav button:hover { background: #1e293b; color: #fff; }
.sidebar nav button.active { background: #16a34a; color: #fff; }
.sidebar nav button.active svg { opacity: 1; }

.logout-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 9px;
  background: transparent !important;
  border: 1px solid #b91c1c !important;
  color: #fca5a5 !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.logout-btn svg { width: 18px; height: 18px; }
.logout-btn:hover { background: #b91c1c !important; color: #fff !important; }

.app-main { flex: 1; min-width: 0; padding: 26px 30px; max-width: 1280px; margin: 0 auto; width: 100%; box-sizing: border-box; }
/* Instalaciones a todo lo ancho (sin centrar ni padding) para que el Gantt no deje espacio muerto */
.app-main.full { max-width: none; padding: 0; margin: 0; }

@media (max-width: 820px) {
  .app-layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: column; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar nav button span { display: none; }
}

/* ============ FORM CONTROLS ============ */
.controls {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 16px;
  align-items: end;
}
.controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.controls input,
.controls select,
.controls textarea {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.controls input:focus, .controls select:focus, .controls textarea:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.2);
}
.controls .col-full { grid-column: 1 / -1; }
/* Núm. de canchas: sin flechas (spinner), número libre */
#f-num-canchas::-webkit-outer-spin-button,
#f-num-canchas::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#f-num-canchas { -moz-appearance: textfield; appearance: textfield; }
.lock-btn { background: #fef9c3; border: 1px solid #fde047; color: #854d0e; border-radius: 6px; font-size: 10px; font-weight: 700; padding: 2px 7px; cursor: pointer; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.lock-btn:hover { background: #fef08a; }
.controls input.fecha-locked { background: #f1f5f9; color: #64748b; cursor: not-allowed; }

.actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.btn {
  padding: 8px 18px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary  { background: #22c55e; color: #fff; }
.btn-primary:hover { background: #16a34a; }
.btn-secondary { background: #64748b; color: #fff; }
.btn-secondary:hover { background: #475569; }
.btn-ghost { background: transparent; color: #475569; border: 1px solid #cbd5e1; }
.btn-ghost:hover { background: #f1f5f9; }
.btn-mail { background: #2563eb; color: #fff; }
.btn-mail:hover { background: #1d4ed8; }
.actions-bottom { margin-top: 18px; justify-content: center; }

/* ============ ORDEN DE COMPRA (replica del Excel) ============ */
.oc {
  background: #fff;
  padding: 28px 32px 24px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== Encabezado premium verde ===== */
.oc-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: start;
  border-top: 3px solid #16a34a;
  padding-top: 18px;
}
.oc-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.oc-brand-logo { width: 180px; height: auto; flex-shrink: 0; }
.oc-title-block { margin-left: 0; }
.oc-title { font-size: 30px; font-weight: 800; margin: 0; letter-spacing: -0.01em; color: #111827; }
.oc-razon { font-size: 12px; font-weight: 700; color: #374151; margin-top: 4px; }
.oc-rfc { font-size: 12px; color: #6b7280; }

.oc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.oc-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
.oc-card-tipo { background: #f0fdf4; border-color: #bbf7d0; }
.oc-card-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: #f0fdf4; display: flex; align-items: center; justify-content: center; }
.oc-card-ic svg { width: 18px; height: 18px; }
.oc-card-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
.oc-card-val { font-size: 13px; font-weight: 700; color: #111827; line-height: 1.2; }
.oc-card-val.tipo { color: #1d4ed8; }

.oc-cliente-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 14px;
  max-width: 380px;
}
.oc-cliente-val { font-size: 13px; color: #374151; }
.oc-cliente-card .oc-card-lbl { margin-bottom: 1px; }

/* ============ TABLA DE ITEMS ============ */
.oc-items {
  width: 100%;
  border-collapse: collapse;
  margin-top: 22px;
  font-size: 11.5px;
  table-layout: auto;
}
/* table-layout:auto + Descripción con width:100% = absorbe el espacio sobrante,
   las numéricas miden por su contenido (nowrap). Así la tabla SIEMPRE llena el ancho
   (sin hueco a la derecha) y funciona igual con o sin BASE/ALTO (cristales vs estructura). */
.oc-items col.c-cantidad  { width: 64px; }
.oc-items col.c-unidad    { width: 84px; }
.oc-items col.c-desc      { width: 100%; }
.oc-items col.c-base      { width: 62px; }
.oc-items col.c-alto      { width: 62px; }
.oc-items col.c-m2        { width: 96px; }
.oc-items col.c-precio    { width: 112px; }
.oc-items .col-m2 { display: none; }
.oc-items.has-m2 .col-m2 { display: table-cell; }
.oc-items col.c-subtotal  { width: 112px; }
.oc-items col.c-iva       { width: 104px; }
.oc-items col.c-total     { width: 124px; }
.oc-items { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.oc-items th, .oc-items td {
  border: 1px solid #e5e7eb;
  padding: 8px 4px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  word-wrap: break-word;
  white-space: normal;
}
.oc-items td.money { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 92px; }
/* min-width en el contenido numérico fuerza el ancho real de la columna en table-layout:auto,
   sin importar el recorrido por display:none de BASE/ALTO */
.oc-items .precio-cell { min-width: 92px; }
.oc-items th { min-width: 56px; }
/* Ocultar BASE/ALTO en órdenes no-cristales */
.oc-items.no-dim .dim-col,
.oc-items.no-dim td.dim { display: none; }
.oc-items .row-del {
  position: absolute;
  right: 2px;
  top: 2px;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: opacity 0.12s;
  z-index: 3;
}
.oc-items td:first-child { position: relative; }
.oc-items tr:hover .row-del { opacity: 1; }
@media (hover: none) { .oc-items .row-del { opacity: .9; } }  /* en táctil siempre visible */
.no-print.row-del, .oc-items .row-del { }
.oc-items th {
  background: #166534;
  color: #fff;
  font-weight: 700;
  height: 30px;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
/* cantidad: campo claramente editable */
.oc-items tbody td:first-child input[data-k="cantidad"] {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  width: 50px;
  height: 34px;
  margin: 0 auto;
  font-weight: 700;
  font-size: 15px;
  color: #15803d;
  text-align: center;
}
.oc-items tbody td:first-child input[data-k="cantidad"]:focus {
  outline: none;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.15);
  background: #fff;
}
.oc-items td.desc { text-align: left; line-height: 1.35; padding: 6px 8px; }
.oc-items td.dim { color: #c2410c; font-weight: 600; }
.oc-items input[type="number"],
.oc-items input[type="text"],
.oc-items textarea {
  border: none;
  background: transparent;
  width: 100%;
  text-align: center;
  font-size: 11.5px;
  font-family: inherit;
  padding: 2px 2px;
  -moz-appearance: textfield;
  resize: none;
  overflow: hidden;
  line-height: 1.35;
}
.oc-items textarea.desc-input {
  text-align: left;
  min-height: 36px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.oc-items textarea.unidad-input {
  min-height: 22px;
  font-weight: 600;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.oc-items input[type="number"]::-webkit-outer-spin-button,
.oc-items input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.oc-items td.desc input { text-align: left; }
.oc-items input:focus {
  outline: 1px solid #22c55e;
  background: #f0fdf4;
}
.oc-items tr.suma td {
  font-weight: 700;
  background: #d1d5db;
  height: 32px;
}
.oc-items tr.suma td.label-suma { background: transparent; border: none; }

/* ============ TOTALES ============ */
.oc-totales {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  margin-top: 20px;
  align-items: end;
}
.oc-totales table { border-collapse: collapse; width: 100%; font-size: 13px; }
.oc-totales td { padding: 6px 10px; height: 26px; }
.oc-totales td.label { text-align: right; font-weight: 700; }
.oc-totales td.value { border: 1px solid #6b7280; background: #fff; min-width: 130px; text-align: right; font-weight: 600; }
.oc-totales tr.resta td.label { text-decoration: underline; }
.oc-totales tr.resta td.value { font-weight: 700; }

.oc-anticipo-input {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  font-size: 12px;
  color: #475569;
}
.oc-anticipo-input input {
  width: 64px;
  padding: 2px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  text-align: center;
}

/* ============ FOOTER FIRMAS ============ */
.oc-firmas {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  font-size: 12px;
}
.oc-firma { display: flex; align-items: flex-start; gap: 10px; }
.oc-firma-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: #f0fdf4; display: flex; align-items: center; justify-content: center; }
.oc-firma-ic svg { width: 16px; height: 16px; }
.oc-firma-body { flex: 1; padding-top: 4px; }
.oc-firma .line { border-bottom: 1px solid #111; height: 14px; margin: 0 0 4px 8px; min-width: 180px; display: inline-block; }
.oc-firma .label { font-weight: 700; }
.oc-firma .nombre { color: #1f2937; margin-top: 2px; padding-left: 8px; }

.oc-notas {
  margin-top: 24px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 16px;
  min-height: 60px;
  font-size: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.oc-notas-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: #f0fdf4; display: flex; align-items: center; justify-content: center; }
.oc-notas-ic svg { width: 16px; height: 16px; }
.oc-notas .label { font-weight: 700; margin-bottom: 4px; color: #15803d; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; }
.oc-notas textarea {
  width: 100%;
  border: none;
  background: transparent;
  resize: vertical;
  min-height: 36px;
  font-family: inherit;
  font-size: 12px;
}
.oc-notas textarea:focus { outline: none; }

/* ============ HISTORIAL ============ */
.historial {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 20px;
}
.historial h2 { margin: 0 0 16px; font-size: 18px; }
.hist-filtros {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.hist-filtros input[type="search"] {
  flex: 1;
  min-width: 220px;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.hist-filtros select {
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.est-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}
.est-badge.proceso { background: #fef3c7; color: #92400e; }
.est-badge.pagada { background: #dcfce7; color: #15803d; }
.est-badge.proc { background: #dbeafe; color: #1d4ed8; }
.est-badge.parc { background: #fef3c7; color: #92400e; }
.est-badge.liq { background: #dcfce7; color: #15803d; }
.est-badge.ret { background: #fee2e2; color: #b91c1c; }
.hist-avance { height: 6px; background: #eef2f6; border-radius: 999px; margin-top: 5px; overflow: hidden; width: 90px; display: inline-block; vertical-align: middle; }
.hist-avance-fill { height: 100%; border-radius: 999px; }
.hist-avance-lbl { font-size: 11px; color: #64748b; margin-left: 6px; }
.hist-strip { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; padding: 14px 16px; background: #fff; border: 1px solid #e8edf3; border-radius: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.hist-strip .hs-item { display: flex; flex-direction: column; gap: 1px; min-width: 150px; }
.hist-strip .hs-l { font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.hist-strip .hs-v { font-size: 18px; font-weight: 800; color: #0f172a; }
.hist-strip .hs-s { font-size: 12px; color: #94a3b8; }

/* ===== Dashboard utilidad ===== */
.util-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
.kpi.util { background: #f0fdf4; border-color: #86efac; }
.kpi-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; font-weight: 700; }
.kpi-val { font-size: 22px; font-weight: 800; color: #1e293b; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi.util .kpi-val { color: #15803d; }

.util-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.util-table th, .util-table td { padding: 9px 10px; border-bottom: 1px solid #e5e7eb; text-align: left; white-space: nowrap; }
.util-table th { background: #f8fafc; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: #475569; }
.util-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.util-table td.pos { color: #15803d; font-weight: 700; }
.util-table td.neg { color: #dc2626; font-weight: 700; }
.util-table .u-retirado { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 12px; }
.util-table .u-nota { margin-top: 4px; width: 110px; padding: 4px 7px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 12px; display: block; }

.gastos-box { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; padding: 16px; }
.gastos-mes-row { margin-bottom: 12px; }
.gastos-mes-row label { font-size: 12px; font-weight: 700; color: #92400e; display: flex; flex-direction: column; gap: 4px; max-width: 220px; }
.gastos-mes-row select { padding: 7px 9px; border: 1px solid #fcd34d; border-radius: 5px; font-size: 13px; font-family: inherit; }
.gastos-table { width: 100%; border-collapse: collapse; }
.gastos-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: #92400e; padding: 6px 8px; }
.gastos-table td { padding: 5px 8px; }
.gastos-table input { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid #fcd34d; border-radius: 5px; font-size: 13px; font-family: inherit; }
.gastos-table .g-del { background: #fee2e2; color: #b91c1c; border: none; border-radius: 4px; width: 28px; height: 28px; cursor: pointer; font-weight: 700; }

.util-meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mes-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
.mes-nombre { font-size: 12px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.03em; }
.mes-util { font-size: 22px; font-weight: 800; color: #15803d; margin: 4px 0; }
.mes-meta { font-size: 12px; color: #64748b; }

/* correos del proveedor en catálogo */
.correos-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; }
.correos-box label { font-size: 12px; font-weight: 700; color: #1e3a8a; display: block; }
.correos-row { display: flex; gap: 8px; margin-top: 6px; }
.correos-row input { flex: 1; padding: 8px 10px; border: 1px solid #bfdbfe; border-radius: 6px; font-size: 13px; font-family: inherit; }

/* formulario usuarios */
.usuario-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
.usuario-form input, .usuario-form select { padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; font-family: inherit; }
.usuario-form input[type="text"], .usuario-form input[type="email"] { flex: 1; min-width: 160px; }

/* tabla vendedores */
.vend-table { width: 100%; border-collapse: collapse; }
.vend-table th, .vend-table td { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; text-align: left; }
.vend-table th { background: #f8fafc; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; }
.vend-table input {
  width: 100%; box-sizing: border-box;
  padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 5px;
  font-size: 13px; font-family: inherit;
}
.vend-table .del-prod {
  background: #fee2e2; color: #b91c1c; border: none; border-radius: 4px;
  width: 28px; height: 28px; cursor: pointer; font-weight: 700;
}
.vend-table .del-prod:hover { background: #fecaca; }
.historial table { width: 100%; border-collapse: collapse; font-size: 13px; }
.historial th, .historial td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e5e7eb; }
.historial th { background: #f8fafc; font-weight: 700; color: #475569; }
.historial tr:hover td { background: #f9fafb; }
.historial tr.row-click { cursor: pointer; }
.historial .total-col { text-align: right; font-weight: 600; }
.historial .acciones-col { text-align: right; white-space: nowrap; }
.historial .row-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  margin-left: 4px;
}
.historial .row-action.edit { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.historial .row-action.edit:hover { background: #bfdbfe; }
.historial .row-action.del { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.historial .row-action.del:hover { background: #fecaca; }
/* Inicio · dashboard ejecutivo */
.ix-head { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 18px; }
.ix-head h2 { font-size: 24px; font-weight: 800; color: #0f172a; margin: 0; }
.ix-sub { color: #64748b; font-size: 13px; }
.ix-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ix-kpi { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 18px 20px; }
.ix-l { font-size: 12.5px; color: #64748b; font-weight: 600; }
.ix-v { font-size: 28px; font-weight: 800; color: #0f172a; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ix-v.green { color: #15803d; } .ix-v.amber { color: #b45309; }
.ix-s { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.ix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .ix-grid { grid-template-columns: 1fr; } }

/* Canchas por mes — producción vs ingreso */
.cxm-tbl { width: 100%; border-collapse: collapse; }
.cxm-tbl th, .cxm-tbl td { padding: 13px 16px; text-align: center; font-size: 14px; }
.cxm-tbl th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #64748b; font-weight: 700; vertical-align: bottom;
  border-bottom: 2px solid #e5e7eb;
}
.cxm-tbl th span {
  display: block; margin-top: 3px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: #94a3b8; font-size: 11px;
}
.cxm-tbl td { color: #0f172a; border-bottom: 1px solid #f1f5f9; font-variant-numeric: tabular-nums; }
.cxm-tbl .l { text-align: left; }
.cxm-tbl tbody .l { font-weight: 700; }
.cxm-tbl tbody tr:hover { background: #f8fafc; }
.cxm-tbl tfoot td { border-top: 2px solid #e5e7eb; border-bottom: none; font-weight: 800; padding-top: 15px; }
.cxm-ing {
  display: inline-block; min-width: 38px; padding: 3px 12px;
  border-radius: 999px; background: #dcfce7; color: #15803d;
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
.cxm-ing.strong { background: #16a34a; color: #fff; }
.cxm-note { font-size: 12px; color: #64748b; padding: 14px 16px 4px; line-height: 1.55; }

/* Control · torre de logística */
.ctrl-badge { display: inline-block; min-width: 20px; text-align: center; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-left: 4px; }
.ctrl-badge.amber { background: #fef3c7; color: #92400e; }
.ctrl-badge.blue { background: #dbeafe; color: #1e40af; }
.ctrl-badge.violet { background: #ede9fe; color: #6d28d9; }
.ctrl-badge.green { background: #dcfce7; color: #15803d; }
.ctrl-badge.red { background: #fee2e2; color: #b91c1c; }
.ctrl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ctrl-eqfilter { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: #475569; background: #fff; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 7px 12px; }
.ctrl-eqfilter select { border: 0; font-size: 14px; font-family: inherit; font-weight: 600; color: #0f172a; background: transparent; cursor: pointer; }
.ctrl-fbtn { background: #fff; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 9px 16px; font-weight: 600; font-size: 14px; color: #334155; cursor: pointer; }
.ctrl-fbtn:hover { background: #f8fafc; }
.ctrl-fbtn.on { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.ctrl-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: #fff; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.ctrl-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.ctrl-filtros select, .ctrl-filtros input { padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 14px; font-family: inherit; min-width: 150px; color: #0f172a; background: #fff; }
.ctrl-filtros input[type="date"] { min-width: 0; }
.ctrl-filtros select:focus, .ctrl-filtros input:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.ctrl-kpi.clickable { cursor: pointer; }
.ctrl-kpi.clickable:hover { border-color: #bfdbfe; box-shadow: 0 2px 8px rgba(37,99,235,.12); }
.ctrl-list { max-height: 260px; overflow: auto; }
.ctrl-row { cursor: pointer; }
.ctrl-row:hover { background: #f8fafc; }

/* Control — diseño pro */
.ctrl-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 1100px) { .ctrl-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ctrl-kpis { grid-template-columns: repeat(2, 1fr); } }
.ctrl-kpi { background: #fff; border: 1px solid #eef2f6; border-radius: 14px; padding: 15px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.ctrl-kpi .kc-top { display: flex; align-items: center; gap: 10px; }
.ctrl-kpi .kc-ic { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.ctrl-kpi .kc-l { font-size: 12px; color: #64748b; font-weight: 600; }
.ctrl-kpi .kc-v { font-size: 28px; font-weight: 800; margin: 10px 0 4px; line-height: 1; color: #0f172a; }
.ctrl-kpi .kc-link { font-size: 12px; color: #2563eb; font-weight: 600; cursor: pointer; }
.ctrl-kpi .kc-link:hover { text-decoration: underline; }
.ctrl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .ctrl-grid { grid-template-columns: 1fr; } }
.ctrl-card { background: #fff; border: 1px solid #eef2f6; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow: hidden; }
.ctrl-card-h { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid #f1f5f9; font-weight: 700; font-size: 14px; color: #0f172a; }
.ctrl-card-h .cc-badge { margin-left: auto; }
.cc-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; border-bottom: 1px solid #f8fafc; }
.cc-row:last-child { border-bottom: 0; }
.cc-row:hover { background: #f8fafc; }
.cc-date { color: #2563eb; font-weight: 700; font-size: 12.5px; min-width: 62px; }
.cc-main { flex: 1; min-width: 0; }
.cc-main b { display: block; font-size: 14px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-main span { font-size: 12px; color: #94a3b8; }
.cc-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.cc-pill.amber { background: #fef3c7; color: #92400e; } .cc-pill.blue { background: #dbeafe; color: #1e40af; }
.cc-pill.violet { background: #ede9fe; color: #6d28d9; } .cc-pill.green { background: #dcfce7; color: #15803d; }
.cc-pill.red { background: #fee2e2; color: #b91c1c; }
.cc-pill.gray { background: #f1f5f9; color: #64748b; }

/* Mis comisiones — números centrados */
.mc-tbl th, .mc-tbl td { text-align: center; vertical-align: middle; }
.mc-tbl th:first-child, .mc-tbl td:first-child { text-align: left; }
.mc-tbl td.money { text-align: center; font-variant-numeric: tabular-nums; }
.cc-empty { text-align: center; padding: 28px 16px; color: #94a3b8; font-size: 13px; }
.cc-empty svg { display: block; margin: 0 auto 8px; }
.cc-empty .ce-t { color: #16a34a; font-weight: 600; font-size: 12px; margin-top: 4px; }
.cc-vertodos { text-align: center; padding: 11px; color: #2563eb; font-weight: 600; font-size: 13px; cursor: pointer; border-top: 1px solid #f1f5f9; }
.cc-vertodos:hover { background: #f8fafc; }
.ctrl-flash { animation: ctrlFlash 1.5s ease; }
@keyframes ctrlFlash {
  0% { box-shadow: 0 0 0 0 rgba(37,99,235,.55); }
  30% { box-shadow: 0 0 0 4px rgba(37,99,235,.55); }
  100% { box-shadow: 0 1px 3px rgba(0,0,0,.04); }
}
.ix-alerts { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ix-alert { font-size: 13px; padding: 9px 12px; border-radius: 8px; border-left: 4px solid #cbd5e1; background: #f8fafc; }
.ix-alert.red { background: #fef2f2; border-left-color: #dc2626; color: #991b1b; }
.ix-alert.amber { background: #fffbeb; border-left-color: #d97706; color: #b45309; }
.ix-alert.ok { background: #f0fdf4; border-left-color: #16a34a; color: #15803d; }
.ix-prox { padding: 6px 0; }
.ix-prox-row { display: flex; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.ix-prox-row:hover { background: #f8fafc; }
.ix-fecha { font-size: 12.5px; font-weight: 700; color: #2563eb; min-width: 80px; }
.ix-obra { display: flex; flex-direction: column; }
.ix-obra b { font-size: 13.5px; } .ix-obra span { font-size: 12px; color: #64748b; }

/* Menú "¿Qué deseas hacer?" al entrar a Cotizaciones */
.hub-title { text-align: center; font-size: 22px; font-weight: 700; color: #1e293b; margin: 28px 0 22px; }
.hub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
.hub-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 30px 28px; text-align: center; }
.hub-card.green { border-top: 4px solid #16a34a; }
.hub-card.blue { border-top: 4px solid #2563eb; }
.hub-ic { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.hub-card.green .hub-ic { background: #f0fdf4; } .hub-card.blue .hub-ic { background: #eff6ff; }
.hub-ic svg { width: 36px; height: 36px; }
.hub-card h3 { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.hub-card.green h3 { color: #16a34a; } .hub-card.blue h3 { color: #2563eb; }
.hub-card p { color: #64748b; font-size: 14px; line-height: 1.5; margin: 0 auto 18px; max-width: 360px; }
.hub-btn { width: auto; padding: 11px 22px; font-size: 14px; }
.hub-card.blue .hub-btn { background: #fff; color: #2563eb; border: 1px solid #bfdbfe; }
.hub-card.blue .hub-btn:hover { background: #eff6ff; }
.hub-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 4px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #f1f5f9; }
.hub-steps span { font-size: 11.5px; color: #94a3b8; font-weight: 600; }
.hub-steps i { color: #cbd5e1; font-style: normal; font-size: 12px; }

.editing-banner {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}
.editing-banner button {
  background: #fff;
  border: 1px solid #fcd34d;
  color: #92400e;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}
.historial .badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #dcfce7;
  color: #15803d;
}

.empty-state { text-align: center; padding: 40px; color: #94a3b8; }

/* ============ DASHBOARD COTIZACIONES ============ */
.dash-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
}
.dash-toolbar input[type="search"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.dash-toolbar input[type="search"]:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.2);
}
.dash-toolbar select {
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.hist-filtros .f-fecha { font-size: 11px; color: #64748b; font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.hist-filtros .f-fecha input { padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; font-size: 13px; }

.cotiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.cotiz-tile {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.cotiz-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-color: #22c55e;
}
.cotiz-tile .num {
  font-size: 11px;
  color: #15803d;
  background: #dcfce7;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cotiz-tile h3 {
  margin: 8px 0 4px;
  font-size: 17px;
  color: #1e293b;
}
.cotiz-tile .meta {
  color: #64748b;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
}
.cotiz-tile .stats {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cotiz-tile .ord-count { color: #475569; font-size: 12px; }
.cotiz-tile .total { font-weight: 700; font-size: 16px; color: #16a34a; }

.back-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cotiz-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 22px;
}
.cotiz-header {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 20px;
  align-items: start;
}
.cotiz-num {
  display: inline-block;
  background: #dcfce7;
  color: #15803d;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.cotiz-header h2 { margin: 0 0 8px; font-size: 22px; }
.cotiz-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: #475569;
  font-size: 13px;
  margin-bottom: 4px;
}
.cotiz-meta span { display: inline-flex; align-items: center; gap: 4px; }
.cotiz-meta span:empty { display: none; }
.cotiz-notas {
  color: #64748b;
  font-size: 13px;
  margin-top: 8px;
  white-space: pre-wrap;
}
.cotiz-total-box {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 14px;
  text-align: right;
}
.cotiz-total-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #16a34a;
  font-weight: 700;
}
.cotiz-total-val {
  font-size: 22px;
  font-weight: 700;
  color: #15803d;
  margin-top: 2px;
}

/* Caja de venta al cliente */
.venta-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 16px 18px;
  min-width: 240px;
}
.venta-total-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2563eb;
  font-weight: 700;
}
.venta-total-val {
  font-size: 24px;
  font-weight: 800;
  color: #1e3a8a;
  margin: 2px 0 10px;
}
.venta-pagos { border-top: 1px solid #bfdbfe; padding-top: 8px; }
.vp-row, .venta-saldo {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #334155;
  padding: 2px 0;
}
.vp-empty { font-size: 12px; color: #94a3b8; font-style: italic; }
.venta-saldo {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #bfdbfe;
  font-weight: 700;
  color: #1e3a8a;
}

/* Toolbar de órdenes: filtro estatus + resumen costos */
.ordenes-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.filtro-estatus { display: flex; gap: 6px; }
.fe-btn {
  padding: 8px 16px;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
.fe-btn.active { background: #1e293b; color: #fff; border-color: #1e293b; }
.fc-btn { padding: 8px 16px; border: 1px solid #cbd5e1; background: #fff; border-radius: 20px; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; }
.fc-btn.active { background: #16a34a; color: #fff; border-color: #16a34a; }
.costos-resumen { display: flex; gap: 18px; flex-wrap: wrap; }
.cr-item { font-size: 12px; color: #64748b; text-align: right; }
.cr-item strong { display: block; font-size: 15px; color: #1e293b; }
.cr-item.saldo strong { color: #b45309; }

/* números por categoría en la card */
.cat-nums {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.cat-nums .cn { flex: 1; font-size: 10.5px; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; }
.cat-nums .cn b { display: block; font-size: 14px; color: #1e293b; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cat-nums .cn.saldo b { color: #b45309; }

.ord-main { flex: 1; cursor: pointer; }
.ord-right { display: flex; align-items: center; gap: 8px; }
.ord-pay, .ord-unpay {
  border: none;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.ord-pay { background: #dcfce7; color: #15803d; }
.ord-pay:hover { background: #bbf7d0; }
.ord-unpay { background: #fef3c7; color: #92400e; }
.ord-unpay:hover { background: #fde68a; }

/* filas modal en 2 / 3 columnas */
.modal-row { display: flex; gap: 12px; }
.modal-row > label { flex: 1; }
.modal-row3 { display: flex; gap: 10px; }
.modal-row3 > label { flex: 1; }
.canchas-detalle { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.cancha-row {
  display: grid;
  /* el tipo de cancha tiene los nombres más largos ("Singles Semipanorámica"),
     por eso lleva más ancho que los colores */
  grid-template-columns: 44px minmax(165px, 1.8fr) 1fr 1fr;
  gap: 6px;
  align-items: center;
}
.cancha-row .cd-tipo { font-weight: 600; }
.cancha-row .cr-num { font-size: 12px; font-weight: 700; color: #475569; }
.cancha-row select, .cancha-row input {
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.cd-empty { font-size: 12px; color: #94a3b8; font-style: italic; }
.pago-hint { font-size: 12px; color: #64748b; margin: 2px 0 8px; }
.pago-row { display: flex; align-items: center; gap: 4px; }
.pago-row .pago-pct { width: 52px; text-align: right; padding: 6px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12.5px; font-family: inherit; }
.pago-row .pago-pct-sign { color: #94a3b8; font-size: 12px; margin-right: 2px; }
.pago-row .money-input { flex: 1; min-width: 0; }

.modal-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2563eb;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
  margin-bottom: 10px;
}

.comision-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #16a34a;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.comision-card:empty { display: none; }
.comision-info { flex: 1; min-width: 200px; }
.comision-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #16a34a; font-weight: 700; }
.comision-detalle { font-size: 14px; color: #374151; margin-top: 2px; }
.comision-monto { font-size: 22px; font-weight: 800; color: #15803d; font-variant-numeric: tabular-nums; }

.section-title {
  margin: 24px 0 12px;
  font-size: 15px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.categorias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.cat-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
}
.cat-card h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cat-card h4 .cat-total { color: #16a34a; font-weight: 700; }
.cat-card .ord-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  cursor: pointer;
}
.cat-card .ord-row:last-child { border-bottom: none; }
.cat-card .ord-row:hover { color: #16a34a; }
.cat-card .ord-row .folio { font-weight: 600; color: #15803d; }
.cat-card .ord-row .prov { color: #475569; font-size: 12px; }
.cat-card .ord-row .ord-total { font-weight: 600; }
.cat-card .add-row {
  margin-top: 10px;
  display: block;
  text-align: center;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  text-decoration: none;
}
.cat-card .add-row:hover { background: #f0fdf4; border-color: #22c55e; color: #15803d; }
.cat-card .ord-empty {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  padding: 10px 0;
}

/* ============ MODAL COTIZACIÓN ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #f1f5f9;
  overflow-y: auto;
  z-index: 50;
  padding: 0 0 48px;
}
.modal-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 28px 32px 0;
  width: 880px;
  max-width: 94vw;
  margin: 28px auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.modal-card .actions {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 14px 32px;
  margin: 22px -32px 0;
  border-top: 1px solid #eef2f6;
  border-radius: 0 0 14px 14px;
}
/* barra superior con flecha para regresar */
.sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.sheet-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.sheet-back:hover { background: #e2e8f0; }
.modal-card .sheet-head h3 { margin: 0; }
.modal-card h3 { margin: 0 0 16px; font-size: 18px; }
.modal-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.modal-card input,
.modal-card textarea,
.modal-card select {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.modal-card textarea { resize: vertical; min-height: 60px; }
.modal-card .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* ============ RECORDATORIO DE COTIZACIÓN (nueva orden) ============ */
.cotiz-reminder {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #1e3a5f;
}
.cotiz-reminder .cr-title {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2563eb;
  margin-bottom: 4px;
}
.cotiz-reminder .cr-canchas {
  font-weight: 700;
  font-size: 15px;
}
.cotiz-reminder .cr-meta {
  color: #475569;
  font-size: 13px;
  margin-top: 2px;
}
.cotiz-reminder .cr-detalle {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #bfdbfe;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cotiz-reminder .cr-cancha { font-size: 12.5px; color: #334155; }
.cotiz-reminder .cr-hl {
  background: #fde68a;
  color: #78350f;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

/* campos extra de estructura */
.estructura-extra { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
.ee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ee-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #3730a3; }
.ee-grid input, .ee-grid select { padding: 8px 10px; border: 1px solid #c7d2fe; border-radius: 5px; font-size: 14px; font-family: inherit; }
.ee-anticipos { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #c7d2fe; }
.ee-ant-title { font-size: 12px; font-weight: 700; color: #3730a3; margin-bottom: 8px; }
.ant-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.ant-row input { padding: 7px 9px; border: 1px solid #c7d2fe; border-radius: 5px; font-size: 13px; font-family: inherit; }
.ant-row .ant-monto { width: 130px; }
.ant-row .ant-quien { flex: 1; }
.ant-row .ant-del { background: #fee2e2; color: #b91c1c; border: none; border-radius: 4px; width: 28px; height: 28px; cursor: pointer; font-weight: 700; }
.oc-estructura { margin-top: 10px; }
.oc-estr-specs { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; color: #374151; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 14px; margin-bottom: 8px; }
.oc-ant-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.oc-ant-table th, .oc-ant-table td { border: 1px solid #e5e7eb; padding: 6px 8px; text-align: left; }
.oc-ant-table th { background: #f1f5f9; font-size: 10.5px; text-transform: uppercase; }

/* campos extra de pasto (rastreo) */
.pasto-extra {
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.pasto-extra .pe-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #0f172a; margin-bottom: 12px; }
.pasto-extra .pe-head small { font-weight: 500; color: #94a3b8; }
.pasto-extra .pe-ic { width: 28px; height: 28px; border-radius: 8px; background: #fef3c7; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.pasto-extra .pe-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.pasto-extra label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .4px; flex: 1; min-width: 200px; }
.pasto-extra input { padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; font-family: inherit; }
.oc-rastreo { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: #374151; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 14px; }
/* Bloque de cobranza (igual que Instalaciones) */
.cobranza-box { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.cob-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid #eef2f6; font-size: 12px; font-weight: 700; color: #475569; }
.cob-dots { display: inline-flex; gap: 5px; }
.cob-dots i { width: 11px; height: 11px; border-radius: 999px; background: #e2e8f0; display: inline-block; }
.cob-dots i.on { background: #16a34a; }
.cob-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.cob-row:last-child { border-bottom: 0; }
.cob-info { min-width: 170px; font-size: 13px; }
.cob-info b { font-size: 15px; color: #0f172a; }
.cob-info span { color: #64748b; }
.cob-state { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; justify-content: flex-end; }
.cob-paid { color: #15803d; font-weight: 700; font-size: 13px; }
.cob-monto { width: 130px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 9px; font-size: 13px; font-family: inherit; }
.cob-mark { background: #16a34a; color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.cob-mark:hover { background: #15803d; }
.cob-recibos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.cob-recibo { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 7px; padding: 5px 9px; font-size: 12px; font-weight: 600; cursor: pointer; }
.cob-add { background: #f0fdf4; color: #15803d; border: 1px dashed #86efac; border-radius: 7px; padding: 5px 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.cob-revert { background: none; border: 0; color: #94a3b8; cursor: pointer; font-size: 12px; }
.cob-revert:hover { color: #dc2626; }
.cob-pct-btn { margin-left: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 7px; padding: 4px 9px; font-size: 11px; font-weight: 700; color: #475569; cursor: pointer; }
.cob-pct-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: #fffbeb; border-bottom: 1px solid #fde68a; font-size: 13px; }
.cob-pct-edit input { width: 62px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 6px 8px; font-size: 13px; text-align: center; }
.cob-pct-edit .cob-mark { padding: 6px 12px; }
.cob-pct-sum { font-size: 12px; font-weight: 700; }

/* ============ PRODUCT PICKER (nueva orden) ============ */
.product-picker {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.product-picker .pp-label { font-weight: 600; font-size: 13px; color: #15803d; }
.product-picker select {
  flex: 1;
  min-width: 220px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.product-picker #pp-qty {
  width: 70px;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  text-align: center;
  font-family: inherit;
}
.product-picker .pp-link {
  font-size: 12px;
  color: #15803d;
  cursor: pointer;
  text-decoration: underline;
}

/* ============ CATÁLOGO PRECIOS ============ */
.catalogo-filters {
  display: flex;
  gap: 12px;
  align-items: end;
}
.catalogo-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 180px;
}
.catalogo-filters select {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

/* panel de descuentos por volumen */
.descuento-panel {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 0;
  margin-bottom: 18px;
}
.descuento-panel > .dp-summary { list-style: none; cursor: pointer; padding: 11px 16px; font-weight: 700; color: #92400e; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.descuento-panel > .dp-summary::-webkit-details-marker { display: none; }
.descuento-panel > .dp-summary::before { content: '▸'; color: #d97706; font-size: 12px; }
.descuento-panel[open] > .dp-summary::before { content: '▾'; }
.descuento-panel .dp-count { background: #fde68a; color: #92400e; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.descuento-panel .dp-body { padding: 0 16px 14px; }
.descuento-panel .dp-head { margin-bottom: 10px; }
.descuento-panel .dp-head strong { color: #92400e; font-size: 14px; }
.descuento-panel .dp-sub { color: #b45309; font-size: 12px; margin-left: 8px; }
.descuento-panel .dp-empty { color: #a16207; font-size: 13px; font-style: italic; padding: 4px 0; }
.desc-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #78350f;
}
.desc-tier input {
  width: 70px;
  padding: 5px 8px;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  text-align: center;
  font-family: inherit;
  font-size: 13px;
}
.desc-tier .desc-del {
  background: #fee2e2;
  color: #b91c1c;
  border: none;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-weight: 700;
}
.dp-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* editor de productos genéricos */
.prod-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.prod-table th, .prod-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
}
.prod-table th {
  background: #f8fafc;
  font-weight: 700;
  color: #475569;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.prod-table input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}
.prod-table input.precio { text-align: right; font-variant-numeric: tabular-nums; }
.prod-table .col-precio { width: 130px; }
.prod-table .col-unidad { width: 110px; }
.prod-table .col-del { width: 40px; text-align: center; }
.prod-table .del-prod {
  background: #fee2e2;
  color: #b91c1c;
  border: none;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-weight: 700;
}
.prod-table .del-prod:hover { background: #fecaca; }
.prod-table .dup-prod {
  background: #dbeafe; color: #1d4ed8; border: none; border-radius: 4px;
  width: 28px; height: 28px; cursor: pointer; font-weight: 700; margin-right: 4px;
}
.prod-table .dup-prod:hover { background: #bfdbfe; }
.unidad-fija { display: inline-block; padding: 6px 10px; background: #f1f5f9; border-radius: 5px; font-weight: 700; color: #475569; font-size: 13px; }
.unidad-sel { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; font-weight: 600; color: #334155; background: #fff; width: 100px; cursor: pointer; }
.param-sel { padding: 7px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; font-weight: 600; color: #334155; background: #fff; width: 100%; cursor: pointer; text-transform: capitalize; }
.param-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.param-chip { display: inline-flex; align-items: center; gap: 6px; background: #f0fdf4; border: 1px solid #86efac; color: #15803d; border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; font-weight: 600; text-transform: capitalize; }
.param-rm { background: #fee2e2; color: #b91c1c; border: 0; border-radius: 50%; width: 18px; height: 18px; line-height: 18px; font-size: 12px; cursor: pointer; padding: 0; }
.param-add { display: flex; gap: 8px; margin-bottom: 8px; }
.param-add input { flex: 1; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; }
/* Look pro del catálogo */
.prod-table td { padding: 8px 10px; vertical-align: middle; }
.prod-table input, .prod-table select { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-size: 14px; background: #fff; }
.prod-table input:focus, .prod-table select:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.prod-table .col-color { width: 165px; }
.prod-table .col-gram { width: 120px; }
.prod-table .col-cancha { text-align: center; width: 130px; }
.prod-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.prod-filtros .pf-lbl { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .4px; }
.prod-filtros select { border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 10px; font-size: 13px; background: #fff; }
.precio-cancha { font-weight: 700; color: #15803d; font-variant-numeric: tabular-nums; }
/* Constructor de canchas (pasto) */
.pasto-canchas { background: #fff; border: 1px solid #e8edf3; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.pasto-canchas .pc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: 14px; color: #0f172a; margin-bottom: 14px; }
.pc-head .pc-title { display: flex; align-items: center; gap: 8px; }
.pc-head .pc-title small { font-weight: 500; color: #94a3b8; }
.pc-head .pc-ic { width: 28px; height: 28px; border-radius: 8px; background: #dcfce7; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.pc-head .pc-total { background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.pc-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px dashed #eef2f6; flex-wrap: wrap; }
.pc-row:last-of-type { border-bottom: 0; }
.pc-num { font-weight: 700; color: #0f172a; min-width: 90px; }
.pc-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: .03em; }
.pc-f select { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; font-weight: 600; color: #0f172a; background: #fff; text-transform: capitalize; min-width: 140px; }
.pasto-canchas .btn { margin-top: 12px; }
.pc-hint { display: block; font-size: 12px; color: #64748b; margin-top: 8px; }
/* Filas de cancha estilo tarjeta (mockup) */
.pc-row { background: #fff; border: 1px solid #e8edf3; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.pc-badge { width: 24px; height: 24px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pc-lbl { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 3px; }
.pc-colorwrap { display: flex; align-items: center; gap: 7px; }
.pc-dot { width: 12px; height: 12px; border-radius: 999px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.pc-del { margin-left: auto; background: #f8fafc; border: 1px solid #e2e8f0; color: #94a3b8; border-radius: 8px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.pc-del:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
/* Botón grande "Agregar pasto" */
.pc-bigbtn { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 6px; background: linear-gradient(135deg,#16a34a,#15803d); color: #fff; border: 0; border-radius: 14px; padding: 16px 20px; cursor: pointer; box-shadow: 0 8px 22px rgba(22,163,74,.28); text-align: left; }
.pc-bigbtn:hover { filter: brightness(1.05); }
.pc-bigbtn-ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex: none; }
.pc-bigbtn-txt { display: flex; flex-direction: column; flex: 1; }
.pc-bigbtn-txt b { font-size: 16px; font-weight: 800; }
.pc-bigbtn-txt small { font-size: 12px; opacity: .9; font-weight: 500; }
.pc-bigbtn-arrow { width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.pc-extra-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pc-chev { color: #94a3b8; font-size: 18px; }
.pc-extra-wrap { margin-top: 12px; border-top: 1px dashed #e2e8f0; padding-top: 10px; }
/* Estructura: cantidad por modelo */
.ec-headrow { display: grid; grid-template-columns: 110px 1fr 40px; gap: 12px; padding: 0 4px 6px; font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
.ec-row { display: grid; grid-template-columns: 110px 1fr 40px; gap: 12px; align-items: center; background: #fff; border: 1px solid #e8edf3; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.ec-row .ec-cant { border: 1px solid #cbd5e1; border-radius: 8px; padding: 9px 10px; font-size: 15px; font-weight: 700; text-align: center; width: 100%; }
.ec-row .ec-cant::-webkit-outer-spin-button, .ec-row .ec-cant::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ec-row .ec-cant { -moz-appearance: textfield; appearance: textfield; }
.ec-row .ec-prod { width: 100%; }
.ec-row .pc-del { margin: 0; }
.ec-addmodelo { background: none; border: 0; color: #2563eb; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 0; }
.ec-addmodelo:hover { text-decoration: underline; }
.ec-counter { margin: 8px 0 4px; font-size: 14px; font-weight: 800; }
/* Pasto: cantidad por (color+gramaje) — mismo layout grid */
.pcm-headrow { display: grid; grid-template-columns: 110px 1.2fr 1fr 40px; gap: 12px; padding: 0 4px 6px; font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
.pasto-canchas .pc-row { display: grid; grid-template-columns: 110px 1.2fr 1fr 40px; gap: 12px; align-items: center; background: #fff; border: 1px solid #e8edf3; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.pasto-canchas .pc-row .ec-cant, .pasto-canchas .pc-row select { width: 100%; }
.pasto-canchas .pc-row .pc-del { margin: 0; }
.pasto-canchas .pc-colorwrap { display: flex; align-items: center; gap: 7px; }
/* Botones grandes de la orden de compra */
.oc-bigactions { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 12px; margin-top: 20px; }
@media (max-width: 900px) { .oc-bigactions { grid-template-columns: 1fr 1fr; } }
.oc-bigbtn { display: flex; align-items: center; gap: 12px; border: 0; border-radius: 14px; padding: 14px 16px; cursor: pointer; text-align: left; color: #fff; box-shadow: 0 6px 16px rgba(15,23,42,.12); }
.oc-bigbtn:hover { filter: brightness(1.05); }
.oc-bigbtn .oc-bi { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.oc-bigbtn .oc-bt { display: flex; flex-direction: column; flex: 1; }
.oc-bigbtn .oc-bt b { font-size: 15px; font-weight: 800; }
.oc-bigbtn .oc-bt small { font-size: 11.5px; opacity: .92; font-weight: 500; }
.oc-bigbtn .oc-ba { width: 30px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.oc-bigbtn.green { background: linear-gradient(135deg,#16a34a,#15803d); }
.oc-bigbtn.blue { background: #2563eb; }
.oc-bigbtn.dark { background: #475569; }
.oc-bigbtn.ghost { background: #fff; color: #475569; border: 1px solid #e2e8f0; box-shadow: none; }
.oc-bigbtn.ghost .oc-bi { background: #f1f5f9; color: #64748b; }
.oc-bigbtn.ghost .oc-bt small { color: #94a3b8; }
.pc-extra-btn { background: none; border: 0; color: #2563eb; font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 0; }
.pc-extra-btn:hover { text-decoration: underline; }
.pc-extra { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.pc-extra input { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; min-width: 90px; }
.prod-table .col-gram select, .prod-table .col-unidad select { width: 100%; }
.col-color .color-wrap { display: flex; align-items: center; gap: 9px; }
.col-color .color-wrap select { flex: 1; min-width: 0; text-transform: capitalize; }
.color-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e5e7eb; }
.col-acc { width: 96px; text-align: center; }
.icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; vertical-align: middle; }
.icon-btn.dup { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.icon-btn.del { background: #fef2f2; border-color: #fecaca; color: #dc2626; margin-left: 6px; }
.icon-btn:hover { filter: brightness(.95); }
.btn-saved { background: #15803d !important; color: #fff !important; }
/* Estado "Guardando…" — feedback inmediato al hacer clic */
.btn-saving { opacity: .9; cursor: progress; }
.btn-saving .spin {
  display: inline-block; width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px;
  border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; border-radius: 50%;
  animation: btnspin 0.6s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }

/* matriz 4×4 estructura */
.estr-grid th { text-align: center; }
.estr-grid .col-precio { text-align: center; width: auto; }
.estr-grid .estr-row-label { font-weight: 700; color: #1e293b; background: #f8fafc; white-space: nowrap; }
.estr-grid input.precio { text-align: right; min-width: 90px; }

/* ============ CATÁLOGO PRECIOS ============ */
.catalogo {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 20px 24px;
}
.catalogo-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}
.catalogo-header h2 { margin: 0; font-size: 20px; }
.catalogo-header label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 280px;
}
.catalogo-header select {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}
.catalogo-matrix-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.catalogo-matrix-table th,
.catalogo-matrix-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
}
.catalogo-matrix-table th {
  background: #f8fafc;
  font-weight: 700;
  color: #475569;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.catalogo-matrix-table tr.tipo-header td {
  background: #f1f5f9;
  font-weight: 700;
  color: #1e293b;
  padding: 8px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.catalogo-matrix-table .col-cantidad,
.catalogo-matrix-table .col-precio { text-align: right; }
.catalogo-matrix-table .col-unidad { font-weight: 600; }
.catalogo-matrix-table input.precio-input {
  width: 140px;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}
.catalogo-matrix-table input.precio-input:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.2);
}
.catalogo-matrix-table tr.empty td {
  color: #94a3b8;
  font-style: italic;
}
/* Inputs editables del catálogo (descripción, cantidad, unidad, medidas) */
.catalogo-matrix-table input.pi-edit,
.catalogo-matrix-table textarea.pi-edit {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.catalogo-matrix-table input.pi-edit:focus,
.catalogo-matrix-table textarea.pi-edit:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.18);
}
.catalogo-matrix-table .col-cantidad input.pi-edit { width: 64px; text-align: right; }
.catalogo-matrix-table .col-unidad input.pi-edit { width: 110px; }
.catalogo-matrix-table textarea.pi-desc { resize: vertical; min-height: 38px; line-height: 1.35; }
.catalogo-matrix-table .col-medidas { white-space: nowrap; }
.catalogo-matrix-table .col-medidas input.pi-dim { width: 78px; text-align: right; display: inline-block; }
.catalogo-matrix-table .col-medidas span { color: #94a3b8; margin: 0 4px; }
.catalogo-matrix-table .col-acc { width: 40px; text-align: center; }
.catalogo-matrix-table button.cristal-del {
  border: none; background: #fef2f2; color: #dc2626;
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
  font-size: 16px; line-height: 1; font-weight: 700;
}
.catalogo-matrix-table button.cristal-del:hover { background: #fee2e2; }
.catalogo-matrix-table tr.add-cristal-row td { padding: 6px 12px 14px; border-bottom: 1px solid #e5e7eb; }
.catalogo-matrix-table button.btn-add-cristal {
  border: 1px dashed #86efac; background: #f0fdf4; color: #15803d;
  padding: 7px 14px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 600;
}
.catalogo-matrix-table button.btn-add-cristal:hover { background: #dcfce7; border-color: #22c55e; }
/* Botón agregar cristal dentro de una orden */
.cristal-add { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; flex-wrap: wrap; }
.cristal-add .ca-hint { font-size: 12px; color: #64748b; }
.catalogo-actions {
  margin-top: 20px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ============ DASHBOARD DE PROYECTO (detalle de cotización) ============ */
.proj-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.proj-top-actions { display: flex; gap: 8px; }
.proj-head { margin-bottom: 16px; }
.proj-head h2 { margin: 0 0 8px; font-size: 22px; color: #0f172a; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proj-folio { font-size: 13px; font-weight: 700; color: #1d4ed8; background: #dbeafe; padding: 3px 10px; border-radius: 999px; }
.proj-meta { display: flex; flex-wrap: wrap; gap: 16px; color: #64748b; font-size: 13px; }
.proj-meta span { display: inline-flex; align-items: center; gap: 5px; }
.proj-notas { margin-top: 8px; font-size: 13px; color: #475569; font-style: italic; }

.proj-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.alert-chip { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; background: #fff; border-left: 4px solid #94a3b8; }
.alert-chip.warn { border-left-color: #f59e0b; background: #fffbeb; }
.alert-chip.info { border-left-color: #3b82f6; background: #eff6ff; }
.alert-chip.hito { border-left-color: #8b5cf6; background: #f5f3ff; }
.alert-chip .ac-l { font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.alert-chip .ac-v { font-size: 14px; font-weight: 700; color: #0f172a; margin-top: 2px; }

.proj-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pkpi { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; }
.pkpi .pk-l { font-size: 12px; color: #64748b; font-weight: 600; }
.pkpi .pk-v { font-size: 24px; font-weight: 800; color: #0f172a; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.pkpi .pk-v.green { color: #15803d; }
.pkpi .pk-v.amber { color: #b45309; }
.pkpi .pk-s { font-size: 11px; color: #94a3b8; }
.pkpi .pbar { height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.pkpi .pbar span { display: block; height: 100%; background: linear-gradient(90deg,#22c55e,#16a34a); border-radius: 999px; }

.proj-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
@media (max-width: 960px) { .proj-grid { grid-template-columns: 1fr; } }
.proj-main, .proj-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel { min-width: 0; }
.table-scroll { overflow-x: auto; }
.panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.panel-h { padding: 12px 16px; font-weight: 700; font-size: 13px; color: #334155; border-bottom: 1px solid #eef2f7; background: #f8fafc; text-transform: uppercase; letter-spacing: .03em; }

/* Semáforo de cobranza 70/20/10 */
.semaforo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 16px; }
.sem-chip { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; text-align: center; border-top: 4px solid #cbd5e1; background: #fff; }
.sem-chip.sem-gris  { border-top-color: #cbd5e1; }
.sem-chip.sem-ambar { border-top-color: #f59e0b; background: #fffbeb; }
.sem-chip.sem-verde { border-top-color: #16a34a; background: #f0fdf4; }
.sem-h { font-size: 12px; font-weight: 800; color: #334155; }
.sem-m { font-size: 17px; font-weight: 800; color: #0f172a; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.sem-est { font-size: 11px; font-weight: 600; margin-bottom: 8px; }
.sem-gris .sem-est { color: #94a3b8; }
.sem-ambar .sem-est { color: #b45309; }
.sem-verde .sem-est { color: #15803d; }
.sem-btn { border: none; border-radius: 7px; padding: 7px 10px; font-size: 12px; font-weight: 700; cursor: pointer; width: 100%; }
.sem-gris .sem-btn { background: #f59e0b; color: #fff; }
.sem-ambar .sem-btn { background: #16a34a; color: #fff; }
.sem-btn.revert { background: #f1f5f9; color: #64748b; font-weight: 600; }
.sem-ver { display: block; width: 100%; margin-bottom: 6px; border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 7px; padding: 6px 8px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.sem-ver:hover { border-color: #16a34a; color: #15803d; }
.sem-aviso { background:#fffbeb; border:1px solid #fde68a; color:#b45309; font-size:11px; font-weight:700; padding:5px 6px; border-radius:6px; margin-bottom:6px; }
.contrato-box { padding: 14px 16px; }
.contrato-box.pend { background: #fffbeb; }
.contrato-box .cx-est { font-size: 12.5px; color: #475569; margin-bottom: 10px; }
.contrato-box .cx-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.contrato-box .cx-actions .btn { font-size: 12.5px; }
@media (max-width: 600px) { .semaforo { grid-template-columns: 1fr; } }

.proj-ordenes { width: 100%; border-collapse: collapse; font-size: 13px; }
.proj-ordenes th { text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #64748b; border-bottom: 1px solid #eef2f7; white-space: nowrap; }
.proj-ordenes td { padding: 11px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.proj-ordenes td.money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proj-ordenes td.money.amber { color: #b45309; font-weight: 700; }
.proj-ordenes .cat-row.has { cursor: pointer; }
.proj-ordenes .cat-row.has:hover { background: #f8fafc; }
.cat-name { font-weight: 600; color: #0f172a; white-space: nowrap; }
.cat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: #94a3b8; vertical-align: middle; }
.cat-dot.d-cristales { background: #38bdf8; } .cat-dot.d-estructura { background: #6366f1; }
.cat-dot.d-pasto { background: #22c55e; } .cat-dot.d-flete { background: #f59e0b; }
.cat-dot.d-viaticos { background: #ec4899; } .cat-dot.d-arena { background: #d4a373; }
.cat-dot.d-pegamento { background: #14b8a6; } .cat-dot.d-otros { background: #94a3b8; }
.st-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.st-badge.ok { background: #dcfce7; color: #15803d; }
.st-badge.proc { background: #fef3c7; color: #b45309; }
.st-badge.warn { background: #fee2e2; color: #b91c1c; }
.st-badge.neutral { background: #f1f5f9; color: #64748b; }
.px-act { color: #1d4ed8; font-weight: 600; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.px-act:hover { text-decoration: underline; }
.cat-sub > td { background: #f8fafc; padding: 0 12px 10px; }
.sub-orders { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.so-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; }
.so-main { flex: 1; cursor: pointer; display: flex; flex-direction: column; min-width: 0; }
.so-main:hover b { color: #1d4ed8; }
.so-main .so-prov { font-size: 11px; color: #64748b; }
.so-total { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; white-space: nowrap; }
.so-act { border: 1px solid #cbd5e1; background: #fff; color: #475569; border-radius: 6px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.so-act.pay { background: #15803d; color: #fff; border-color: #15803d; }
.so-act:hover { filter: brightness(0.97); }

.timeline { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.tl-row .tl-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.tl-row .tl-name { flex: 1; color: #334155; font-weight: 600; }
.tl-row .tl-pct { color: #64748b; font-variant-numeric: tabular-nums; font-weight: 700; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: #e2e8f0; border: 2px solid #cbd5e1; flex: none; }
.tl-dot.prog { background: #fbbf24; border-color: #f59e0b; }
.tl-dot.done { background: #22c55e; border-color: #16a34a; }
.tl-bar { height: 6px; background: #eef2f7; border-radius: 999px; overflow: hidden; margin-top: 6px; margin-left: 20px; }
.tl-bar span { display: block; height: 100%; background: #16a34a; border-radius: 999px; }

.finsum { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.finsum .fs-row { display: flex; justify-content: space-between; align-items: center; color: #475569; }
.finsum .fs-row b { font-variant-numeric: tabular-nums; color: #0f172a; }
.finsum .fs-row.big { font-size: 15px; }
.finsum .fs-row b.green { color: #15803d; }
.finsum .fs-row b.amber { color: #b45309; }
.finsum .fs-sep { height: 1px; background: #eef2f7; margin: 2px 0; }

.proj-com { width: 100%; border-collapse: collapse; font-size: 13px; }
.proj-com th { text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #64748b; border-bottom: 1px solid #eef2f7; }
.proj-com td { padding: 11px 12px; border-bottom: 1px solid #f1f5f9; }
.proj-com td.money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proj-com td.money.green { color: #15803d; font-weight: 700; }
.proj-com .com-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ============ PRINT ============ */
@media print {
  body { background: #fff; }
  .app-header, .app-main > .controls, .app-main > .actions, .no-print { display: none !important; }
  .app-main { padding: 0; max-width: none; }
  .oc {
    border: none;
    border-radius: 0;
    padding: 12px 20px;
    max-width: none;
    box-shadow: none;
  }
  .oc-items input { border: none !important; }
  @page { size: letter landscape; margin: 12mm; }
}

/* ============ TOAST ============ */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #22c55e;
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #ef4444; }

.hidden { display: none !important; }

/* ============ LOGIN ============ */
.login-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.login-card {
  background: #fff;
  border-radius: 14px;
  padding: 36px 32px;
  width: 380px;
  max-width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  text-align: center;
}
.login-logo { margin-bottom: 12px; }
.login-card h1 { margin: 0 0 2px; font-size: 22px; color: #1e293b; }
.login-sub { margin: 0 0 24px; color: #64748b; font-size: 13px; }
.login-card label {
  display: block;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.login-card input {
  width: 100%;
  margin-top: 5px;
  padding: 11px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
}
.login-card input:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.2);
}
.login-card .btn-primary { width: 100%; padding: 12px; font-size: 15px; margin-top: 6px; }
.login-error {
  color: #ef4444;
  font-size: 13px;
  min-height: 18px;
  margin-bottom: 10px;
  font-weight: 600;
}

/* ── Venta al cliente / Anticipos (Nueva cotización) ───────────────────── */
.vc-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  margin: 6px 0 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.vc-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.vc-head-ic {
  flex: none; width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center; color: #0ea5e9; background: #e0f2fe;
}
.vc-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.vc-sub { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.vc-toprow { display: grid; grid-template-columns: 1fr 240px; gap: 16px; align-items: start; margin-bottom: 18px; }
.vc-total-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #475569; display: block; }
.vc-total-wrap { position: relative; margin-top: 6px; }
.vc-total-input { width: 100%; font-size: 18px !important; font-weight: 700; padding: 12px 56px 12px 14px !important; }
.vc-mxn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: #94a3b8; background: #f1f5f9; padding: 3px 7px; border-radius: 5px; }
.vc-hint { display: block; margin-top: 7px; font-size: 11.5px; color: #94a3b8; font-weight: 400; text-transform: none; letter-spacing: 0; }
.vc-resumen { border: 1px solid #e2e8f0; border-radius: 11px; background: #f8fafc; padding: 12px 14px; }
.vc-resumen-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; margin-bottom: 10px; }
.vc-resumen-body { display: flex; align-items: center; gap: 12px; }
.vc-donut { flex: none; width: 48px; height: 48px; border-radius: 50%; background: conic-gradient(#0ea5e9 0deg, #e2e8f0 0); position: relative; }
.vc-donut::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #f8fafc; }
.vc-donut-pct { font-size: 19px; font-weight: 800; color: #0ea5e9; line-height: 1; }
.vc-donut-montos { font-size: 11px; color: #64748b; margin-top: 3px; }
.vc-ant-head { margin-bottom: 10px; }
.vc-ant-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1d4ed8; }
.vc-ant-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.ant-card {
  display: grid;
  grid-template-columns: 20px 34px minmax(120px,1.4fr) 92px 110px minmax(120px,1.4fr) 34px;
  gap: 10px; align-items: end;
  padding: 12px; border: 1px solid #e9eef5; border-radius: 11px; background: #fcfdff; margin-bottom: 8px;
}
.ant-drag { color: #cbd5e1; padding-bottom: 9px; cursor: grab; display: grid; place-items: center; }
.ant-badge {
  align-self: end; margin-bottom: 4px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  color: #16a34a; background: #dcfce7;
}
.ant-f { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #64748b; display: flex; flex-direction: column; gap: 4px; }
.ant-f input { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 13px; font-family: inherit; font-weight: 500; text-transform: none; letter-spacing: 0; color: #0f172a; width: 100%; }
.ant-f input:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.12); }
.ant-pct-wrap { position: relative; }
.ant-pct-wrap input { padding-right: 26px; }
.ant-pct-wrap span { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #94a3b8; font-weight: 600; }
.ant-del {
  align-self: end; margin-bottom: 2px; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; cursor: pointer;
  display: grid; place-items: center; transition: background .15s;
}
.ant-del:hover { background: #fee2e2; }
.vc-add {
  width: 100%; margin-top: 4px; padding: 11px; border: 1.5px dashed #cbd5e1; border-radius: 10px;
  background: #f8fafc; color: #16a34a; font-weight: 700; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; transition: all .15s;
}
.vc-add small { width: 100%; text-align: center; color: #94a3b8; font-weight: 400; font-size: 11px; }
.vc-add:hover:not(:disabled) { border-color: #16a34a; background: #f0fdf4; }
.vc-add:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 720px) {
  .vc-toprow { grid-template-columns: 1fr; }
  .ant-card { grid-template-columns: 28px 1fr 1fr; grid-auto-rows: auto; }
  .ant-drag, .ant-badge { grid-row: span 1; }
}

/* ── Catálogo de precios (rediseño pro) ─────────────────────────────────── */
.cat-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cat-title-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #16a34a; background: #dcfce7; }
.cat-title-row h2 { margin: 0; font-size: 22px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.cat-subtitle { margin: 2px 0 0; font-size: 13px; color: #64748b; }
.cat-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.cat-filters { display: flex; gap: 14px; flex-wrap: wrap; }
.cat-field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #475569; }
.cat-field select { min-width: 200px; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 14px; font-family: inherit; font-weight: 500; color: #0f172a; background: #fff; text-transform: none; letter-spacing: 0; }
.cat-field select:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.cat-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end; }
.catbtn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 9px;
  border: 1px solid #cbd5e1; background: #fff; color: #334155; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.catbtn:hover { background: #f8fafc; border-color: #94a3b8; }
.catbtn svg { flex: none; }
.catbtn-green { border-color: #86efac; color: #15803d; background: #f0fdf4; }
.catbtn-green:hover { background: #dcfce7; border-color: #4ade80; }
.catbtn-red { border-color: #fca5a5; color: #b91c1c; background: #fef2f2; }
.catbtn-red:hover { background: #fee2e2; border-color: #f87171; }
.catbtn-solid { background: #16a34a; border-color: #16a34a; color: #fff; }
.catbtn-solid:hover { background: #15803d; border-color: #15803d; }
.catbtn:disabled { opacity: .5; cursor: not-allowed; }

/* Correos */
.correos-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.correos-lbl { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #1d4ed8; }
.correos-lbl svg { color: #2563eb; }
.correos-hint { color: #94a3b8; font-weight: 400; }
.correos-row { display: flex; gap: 10px; margin-top: 10px; }
.correos-row input { flex: 1; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 13.5px; font-family: inherit; }
.correos-row input:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }

/* Descuentos por volumen — toggle "Ver detalles" a la derecha */
.descuento-panel > .dp-summary { position: relative; padding-right: 130px; }
.descuento-panel .dp-ic { color: #d97706; flex: none; }
.descuento-panel > .dp-summary::before { content: '' !important; display: none; }
.descuento-panel .dp-sub { color: #b45309; font-weight: 400; }
.dp-toggle { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; color: #b45309; font-size: 12px; font-weight: 700; }
.descuento-panel[open] .dp-toggle svg { transform: rotate(180deg); }

/* Filas de producto */
.prod-table .col-prod { display: flex; align-items: center; gap: 9px; }
.prod-table .col-prod .prod-row-ic { flex: none; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: #16a34a; background: #dcfce7; }
.prod-table .col-prod input { flex: 1; }

/* ── Vendedores (rediseño pro) ──────────────────────────────────────────── */
.vend-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 22px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.vend-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.vend-table thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #64748b; padding: 10px 10px; border-bottom: 1px solid #e2e8f0; background: #f8fafc;
}
.vend-table thead th.vt-com { text-align: center; }
.vend-table thead th.vt-acc { text-align: center; width: 90px; }
.vend-table thead th.vt-drag { width: 34px; }
.vend-table tbody td { padding: 7px 10px; vertical-align: middle; }
.vend-table tbody tr + tr td { border-top: 1px solid #f1f5f9; }
.vt-drag { text-align: center; }
.vend-drag { color: #cbd5e1; cursor: grab; display: inline-grid; place-items: center; }
.vend-inp { width: 100%; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 13.5px; font-family: inherit; color: #0f172a; }
.vend-inp:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.vt-com { text-align: center; white-space: nowrap; }
.vend-com-cell { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.vend-com { width: 74px; text-align: center; padding: 9px 8px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 13.5px; font-weight: 600; font-family: inherit; color: #0f172a; }
.vend-com:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.vend-com-pct { color: #94a3b8; font-size: 13px; margin-left: 5px; font-weight: 600; }
/* quitar flechitas de subir/bajar (comisión se mete a mano) */
.no-spin::-webkit-outer-spin-button, .no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spin { -moz-appearance: textfield; appearance: textfield; }
.vend-field { position: relative; display: block; }
.vend-field-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #94a3b8; display: grid; place-items: center; pointer-events: none; }
.vend-field-ic.vend-ic-wa { color: #16a34a; }
.vend-field .vend-inp { padding-left: 32px; }
.vend-del {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid #fecaca; background: #fef2f2; color: #dc2626;
  cursor: pointer; display: inline-grid; place-items: center; transition: background .15s;
}
.vend-del:hover { background: #fee2e2; }
.vend-foot { display: flex; align-items: stretch; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.vend-add {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 10px 18px; border: 1.5px dashed #cbd5e1; border-radius: 10px; background: #f8fafc;
  color: #16a34a; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .15s;
}
.vend-add-top { display: inline-flex; align-items: center; gap: 7px; }
.vend-add small { color: #94a3b8; font-weight: 400; font-size: 11px; padding-left: 23px; }
.vend-add:hover { border-color: #16a34a; background: #f0fdf4; }

/* ── Builder "por cancha" rediseño (estructura) ─────────────────────────── */
.bld-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.bld-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.bld-ic { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: #15803d; background: #dcfce7; }
.bld-head-txt { flex: 1; min-width: 0; }
.bld-title { font-size: 15px; font-weight: 800; color: #0f172a; }
.bld-title small { font-weight: 500; color: #94a3b8; font-size: 12.5px; }
.bld-sub { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.bld-total { flex: none; align-self: flex-start; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.bld-card .ec-headrow { grid-template-columns: 150px 1fr 40px; }
.bld-card .ec-row { grid-template-columns: 150px 1fr 40px; }
.ec-stepper { display: flex; align-items: center; gap: 6px; }
.ec-step { flex: none; width: 30px; height: 34px; border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 8px; font-size: 18px; font-weight: 700; color: #475569; cursor: pointer; line-height: 1; display: grid; place-items: center; transition: all .12s; }
.ec-step:hover { background: #16a34a; border-color: #16a34a; color: #fff; }
.bld-card .ec-stepper .ec-cant { flex: 1; min-width: 0; padding: 9px 4px; }
.ec-modelwrap { position: relative; display: flex; align-items: center; }
.ec-model-ic { position: absolute; left: 10px; color: #16a34a; display: grid; place-items: center; pointer-events: none; }
.ec-modelwrap .ec-prod { width: 100%; padding-left: 32px !important; }
.bld-addmodelo { width: 100%; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1.5px dashed #cbd5e1; border-radius: 11px; background: #f8fafc; cursor: pointer; transition: all .15s; text-align: left; margin-bottom: 12px; }
.bld-addmodelo:hover { border-color: #16a34a; background: #f0fdf4; }
.bld-addmodelo-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #16a34a; background: #dcfce7; }
.bld-addmodelo-txt { display: flex; flex-direction: column; }
.bld-addmodelo-txt b { font-size: 13.5px; color: #15803d; font-weight: 700; }
.bld-addmodelo-txt small { font-size: 11.5px; color: #94a3b8; }
.bld-counter { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 11px; background: #f8fafc; margin: 4px 0 14px; }
.bld-donut { flex: none; width: 34px; height: 34px; border-radius: 50%; position: relative; }
.bld-donut::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: inherit; background: #fff; }
.bld-counter-txt { display: flex; flex-direction: column; }
.bld-counter-txt b { font-size: 14px; font-weight: 800; }
.bld-counter-txt small { font-size: 11.5px; color: #94a3b8; font-weight: 400; }

/* ── Hub bienvenida (landing admin) ─────────────────────────────────────── */
.hub-greet { max-width: 1000px; margin: 8px auto 22px; }
.hub-greet h1 { font-size: 30px; font-weight: 800; color: #0f172a; margin: 0 0 6px; letter-spacing: -.02em; }
.hub-greet .hub-wave { display: inline-block; }
.hub-greet p { color: #64748b; font-size: 14.5px; margin: 0; max-width: 560px; }
.hub-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; }
.hub-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .15s; }
.hub-card.green .hub-chip { border-color: #bbf7d0; color: #15803d; }
.hub-card.green .hub-chip:hover { background: #f0fdf4; border-color: #4ade80; }
.hub-card.blue .hub-chip { border-color: #bfdbfe; color: #2563eb; }
.hub-card.blue .hub-chip:hover { background: #eff6ff; border-color: #60a5fa; }

/* ── Órdenes de compra (vista rediseñada pro) ───────────────────────────── */
.oc-view { display: flex; flex-direction: column; gap: 16px; }
.oc-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
/* KPI cards */
.oc-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.oc-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 13px; padding: 16px 16px 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.oc-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oc-kpi-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.oc-kpi-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.ki-slate { color: #475569; background: #f1f5f9; } .ki-green { color: #16a34a; background: #dcfce7; }
.ki-amber { color: #d97706; background: #fef3c7; } .ki-blue { color: #2563eb; background: #dbeafe; }
.ki-red { color: #dc2626; background: #fee2e2; }
.oc-kpi-val { font-size: 22px; font-weight: 800; color: #0f172a; margin-top: 10px; letter-spacing: -.01em; }
.oc-kpi-s { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
/* Filtros card */
.oc-filtros-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 13px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.oc-filtros-card .hist-filtros { margin: 0; }
.oc-filtros-card .hist-filtros input[type="search"] { border-radius: 9px; }
.oc-filtros-card .hist-filtros select { border-radius: 9px; }
/* Tabla card */
.oc-table-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 13px; box-shadow: 0 1px 2px rgba(15,23,42,.04); overflow-x: auto; }
.oc-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 13px; }
.oc-table thead th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; padding: 13px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.oc-table thead th.total-col { text-align: right; }
.oc-table thead th.acciones-col { text-align: center; }
.oc-table tbody td { padding: 13px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #334155; }
.oc-table tbody tr:last-child td { border-bottom: 0; }
.oc-table tbody tr:hover { background: #f8fafc; }
.oc-table .total-col { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.oc-table .badge { display: inline-block; background: #dcfce7; color: #15803d; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 7px; }
.oc-table .acciones-col { text-align: center; white-space: nowrap; }
.oc-table .row-action { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 8px; border: 1px solid transparent; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; margin-left: 5px; transition: background .15s; }
.oc-table .row-action.edit { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.oc-table .row-action.edit:hover { background: #dbeafe; }
.oc-table .row-action.del { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.oc-table .row-action.del:hover { background: #fee2e2; }
.oc-table .est-badge { display: inline-block; }
.oc-table .hist-avance { width: 80px; }
.oc-pagination { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-top: 1px solid #f1f5f9; }
.oc-pag-info { font-size: 12.5px; color: #64748b; }
/* Tira inferior con iconos */
.oc-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 13px; padding: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.oc-strip .hs-item { display: flex; align-items: center; gap: 12px; }
.oc-strip .hs-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.oc-strip .hs-txt { display: flex; flex-direction: column; gap: 1px; }
.oc-strip .hs-l { font-size: 10.5px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.oc-strip .hs-v { font-size: 20px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.oc-strip .hs-s { font-size: 12px; color: #94a3b8; }
@media (max-width: 1100px) {
  .oc-kpis { grid-template-columns: repeat(2, 1fr); }
  .oc-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Barra de suma de anticipos (debe ser 100%) ─────────────────────────── */
.ant-sumbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; border: 1px solid #e2e8f0; background: #f8fafc; }
.ant-sumbar-bar { flex: none; width: 120px; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.ant-sumbar-fill { display: block; height: 100%; border-radius: 999px; transition: width .2s; }
.ant-sumbar-txt { font-size: 13px; font-weight: 600; }
.ant-sumbar.ok { background: #f0fdf4; border-color: #bbf7d0; }
.ant-sumbar.ok .ant-sumbar-fill { background: #16a34a; }
.ant-sumbar.ok .ant-sumbar-txt { color: #15803d; }
.ant-sumbar.under { background: #fffbeb; border-color: #fde68a; }
.ant-sumbar.under .ant-sumbar-fill { background: #f59e0b; }
.ant-sumbar.under .ant-sumbar-txt { color: #b45309; }
.ant-sumbar.over { background: #fef2f2; border-color: #fecaca; }
.ant-sumbar.over .ant-sumbar-fill { background: #dc2626; }
.ant-sumbar.over .ant-sumbar-txt { color: #b91c1c; }

/* ── Cobro por anticipo (proyecto: plan vs pago real) ───────────────────── */
.acob-box { padding: 4px 2px; }
.acob-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.acob-prog { flex: 1; height: 9px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.acob-prog-fill { display: block; height: 100%; border-radius: 999px; transition: width .25s; }
.acob-top-txt { font-size: 13px; color: #334155; white-space: nowrap; }
.acob-note { font-size: 11.5px; color: #94a3b8; margin-bottom: 12px; }
.acob-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: start; padding: 11px 0; border-top: 1px solid #f1f5f9; }
.acob-badge { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.acob-badge.proc { background: #dbeafe; color: #1d4ed8; } .acob-badge.parc { background: #fef3c7; color: #92400e; } .acob-badge.liq { background: #dcfce7; color: #15803d; }
.acob-body { min-width: 0; }
.acob-line { font-size: 13.5px; color: #0f172a; }
.acob-desc { color: #94a3b8; font-size: 12px; }
.acob-status { display: flex; align-items: center; gap: 9px; margin-top: 4px; flex-wrap: wrap; }
.acob-cobtxt { font-size: 12.5px; color: #64748b; }
.acob-abonos { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.acob-abono { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f8fafc; border: 1px solid #eef2f6; border-radius: 8px; padding: 5px 9px; font-size: 12px; }
.acob-abono-l { color: #475569; } .acob-abono-r { display: flex; align-items: center; gap: 4px; }
.acob-ver { background: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb; border-radius: 6px; padding: 2px 7px; cursor: pointer; font-size: 12px; }
.acob-del { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; border-radius: 6px; width: 22px; height: 22px; cursor: pointer; font-size: 11px; line-height: 1; }
.acob-form { margin-top: 9px; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 10px 12px; }
.acob-form label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .03em; display: flex; flex-direction: column; gap: 4px; }
.acob-form input { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; font-family: inherit; font-weight: 500; text-transform: none; letter-spacing: 0; }
.acob-form .acob-monto { width: 130px; }
.acob-upload { background: #16a34a; color: #fff; border: 0; border-radius: 9px; padding: 9px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.acob-upload:hover { background: #15803d; }
.acob-pay { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; border-radius: 9px; padding: 8px 13px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.acob-pay:hover { background: #dbeafe; }
.acob-done { color: #15803d; font-weight: 700; font-size: 13px; white-space: nowrap; }
.acob-empty { color: #94a3b8; font-size: 13px; font-style: italic; padding: 8px 0; }

/* Eliminar contrato + editar plan de cobranza */
.cx-del-btn { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.cx-del-btn:hover { background: #fee2e2; }
.acob-editplan { float: right; background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.acob-editplan:hover { background: #dbeafe; }

/* ── Resumen de cotización (Nueva orden) — estilo tarjeta pro ────────────── */
.crr-card { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.crr-ic { flex: none; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: #2563eb; background: #eff6ff; }
.crr-main { flex: 1; min-width: 0; }
.crr-title { font-size: 18px; font-weight: 700; color: #0f172a; }
.crr-title b { color: #2563eb; }
.crr-canchas { font-size: 13px; color: #64748b; margin-top: 2px; }
.crr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.crr-chip { display: inline-flex; align-items: center; gap: 5px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.crr-chip svg { width: 13px; height: 13px; }
.crr-config { flex: none; width: 320px; max-width: 42%; border-left: 1px solid #eef2f6; padding-left: 18px; }
.crr-config-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; margin-bottom: 8px; }
.crr-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 3px 0; }
.crr-line-k { color: #94a3b8; white-space: nowrap; }
.crr-line-v { color: #334155; text-align: right; }
.crr-line-v b { color: #0f172a; }
@media (max-width: 820px) { .crr-card { flex-direction: column; } .crr-config { width: 100%; max-width: none; border-left: 0; border-top: 1px solid #eef2f6; padding-left: 0; padding-top: 14px; } }

/* Centrar el número de canchas */
#f-num-canchas, #m-num-canchas { text-align: center; }

/* OC documento — toques finales */
.oc-status { display: inline-block; vertical-align: middle; margin-left: 10px; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; }
.oc-detalle-h { font-size: 15px; font-weight: 700; color: #0f172a; margin: 18px 2px 8px; }

/* ── Reporte financiero (rediseño pro) ──────────────────────────────────── */
.rf-view { display: flex; flex-direction: column; gap: 16px; }
.rf-datepill { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 13px; font-size: 13px; font-weight: 600; color: #475569; }
.rf-kpis { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1200px) { .rf-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .rf-kpis { grid-template-columns: repeat(2, 1fr); } }
.rf-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
@media (max-width: 1050px) { .rf-grid { grid-template-columns: 1fr; } }
.rf-side { display: flex; flex-direction: column; gap: 16px; }
.rf-card-h { font-size: 14px; font-weight: 700; color: #0f172a; padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
.rf-pad { padding-bottom: 14px; }
.rf-note { font-size: 11.5px; color: #64748b; background: #f8fafc; border-top: 1px solid #f1f5f9; padding: 11px 16px; }
.oc-table .rf-sub { font-size: 11.5px; color: #94a3b8; font-weight: 400; margin-top: 1px; }
.rf-tipo { display: inline-block; background: #eff6ff; color: #2563eb; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.rf-tot td { font-weight: 800; color: #0f172a; border-top: 2px solid #e2e8f0; background: #f8fafc; }
/* Donut */
.rf-donut-wrap { display: grid; place-items: center; padding: 18px 0 8px; }
.rf-donut { width: 160px; height: 160px; border-radius: 50%; position: relative; }
.rf-donut-hole { position: absolute; inset: 28px; background: #fff; border-radius: 50%; display: grid; place-content: center; text-align: center; }
.rf-donut-hole b { font-size: 18px; font-weight: 800; color: #0f172a; }
.rf-donut-hole span { font-size: 11px; color: #94a3b8; }
.rf-legend { padding: 4px 16px 4px; display: flex; flex-direction: column; gap: 9px; }
.rf-leg { display: flex; align-items: center; gap: 9px; }
.rf-leg-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.rf-leg-txt { display: flex; flex-direction: column; line-height: 1.25; }
.rf-leg-txt b { font-size: 12.5px; color: #334155; }
.rf-leg-txt span { font-size: 11.5px; color: #94a3b8; }
.rf-leg-empty { font-size: 12.5px; color: #94a3b8; font-style: italic; }
/* Resumen general */
.rf-sum { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font-size: 13px; color: #64748b; border-bottom: 1px solid #f6f8fb; }
.rf-sum b { color: #0f172a; font-weight: 700; }
.rf-sum b.green { color: #15803d; } .rf-sum b.amber { color: #b45309; }
.rf-export { width: calc(100% - 32px); margin: 14px 16px 4px; justify-content: center; }
.oc-table .green { color: #15803d; } .oc-table .amber { color: #b45309; }

/* Centrar columnas (tipo/estado/vencimiento) en tablas del reporte */
.oc-table th.tc, .oc-table td.tc { text-align: center; }

/* ── Cristales por cancha (rediseño pro + Información rápida) ────────────── */
.cc-layout { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; }
@media (max-width: 920px) { .cc-layout { grid-template-columns: 1fr; } }
.cc-headrow { display: grid; grid-template-columns: 70px 130px 1fr 70px; gap: 12px; padding: 0 4px 8px; font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
.cc-headrow span:nth-child(2), .cc-headrow span:nth-child(4) { text-align: center; }
.cc-row { display: grid; grid-template-columns: 70px 130px 1fr 70px; gap: 12px; align-items: center; background: #fff; border: 1px solid #e8edf3; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.cc-badge { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #1d4ed8; background: #eff6ff; }
.cc-cant { border: 1px solid #cbd5e1; border-radius: 8px; padding: 9px 10px; font-size: 15px; font-weight: 700; text-align: center; width: 100%; font-family: inherit; }
.cc-cant:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.cc-del { width: 36px; height: 36px; border-radius: 9px; border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; cursor: pointer; display: grid; place-items: center; justify-self: center; }
.cc-del:hover { background: #fee2e2; }
.cc-aside { background: #f8fafc; border: 1px solid #e8edf3; border-radius: 12px; padding: 14px; }
.cc-aside-h { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 12px; }
.cc-info { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: #fff; border: 1px solid #eef2f6; border-radius: 10px; margin-bottom: 8px; }
.cc-info-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.cc-info-ic.ki-violet { color: #7c3aed; background: #ede9fe; }
.cc-info-txt { display: flex; flex-direction: column; line-height: 1.2; }
.cc-info-l { font-size: 11.5px; color: #64748b; }
.cc-info-txt b { font-size: 17px; font-weight: 800; color: #0f172a; }
.cc-aside-note { display: flex; gap: 8px; font-size: 11.5px; color: #64748b; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 10px; padding: 10px 11px; margin-top: 4px; }
.cc-aside-note svg { flex: none; color: #2563eb; margin-top: 1px; }

/* Hub con 4 tarjetas */
.hub-cards-4 { grid-template-columns: repeat(4, 1fr); max-width: 1280px; }
.hub-cards-4 .hub-card { padding: 22px 18px; }
.hub-cards-4 .hub-card h3 { font-size: 18px; }
.hub-cards-4 .hub-ic { width: 64px; height: 64px; }
.hub-cards-4 .hub-ic svg { width: 30px; height: 30px; }
@media (max-width: 1180px) { .hub-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .hub-cards-4 { grid-template-columns: 1fr; } }

/* Pasto por cancha en la cabecera del proyecto */
.proj-pasto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.proj-pasto .pp-lbl { font-size: 12px; font-weight: 700; color: #64748b; }
.proj-pasto .pp-item { display: inline-flex; align-items: center; gap: 6px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 3px 10px; font-size: 12px; color: #334155; font-weight: 600; }
.proj-pasto .pp-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex: none; }

/* ── Combobox de ciudad (búsqueda type-ahead) ───────────────────────────── */
.combo { position: relative; }
.combo-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 12px 28px rgba(15,23,42,.14); max-height: 280px; overflow-y: auto; padding: 4px; }
.combo-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 10px; cursor: pointer; font-family: inherit; }
.combo-opt:hover, .combo-opt.on { background: #eff6ff; }
.combo-ic { color: #2563eb; display: grid; place-items: center; flex: none; }
.combo-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.combo-txt b { font-size: 13.5px; font-weight: 600; color: #0f172a; }
.combo-txt small { font-size: 11.5px; color: #94a3b8; }
.combo-empty { padding: 10px 12px; font-size: 12.5px; color: #94a3b8; }

/* Opción "Usar 'ciudad'" (creatable) en el buscador de ciudad */
.combo-create { background: #f0fdf4; }
.combo-create:hover, .combo-create.on { background: #dcfce7; }
.combo-create .combo-ic { color: #16a34a; font-weight: 800; font-size: 16px; }
.combo-create .combo-txt b { color: #15803d; }

/* Selects de modelo (cristales/estructura) con flecha moderna + tipografía limpia */
.ec-prod, .cd-tipo, .cd-pasto, .cd-peso {
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: #0f172a;
  border: 1px solid #cbd5e1; border-radius: 9px; padding: 9px 34px 9px 12px; background: #fff;
  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.ec-prod:focus, .cd-tipo:focus, .cd-pasto:focus, .cd-peso:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.ec-modelwrap .ec-prod { padding-left: 34px; }

/* Resumen ejecutivo (cabecera de cotización arriba de la orden) */
.crr-config { width: 380px; max-width: 46%; }
.crr-row2 { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; border-top: 1px solid #f6f8fb; }
.crr-row2:first-of-type { border-top: 0; }
.crr-k { flex: none; width: 78px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #94a3b8; }
.crr-v { font-size: 13px; color: #334155; }
.crr-v b { color: #0f172a; }
.crr-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.crr-stat { display: inline-flex; align-items: center; gap: 5px; background: #f1f5f9; border: 1px solid #e8edf3; border-radius: 999px; padding: 2px 9px; font-size: 12px; color: #334155; }
.crr-stat b { color: #0f172a; font-weight: 800; }
.crr-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex: none; }
@media (max-width: 820px) { .crr-config { width: 100%; max-width: none; } }