/* ═══════════════════════════════════════
   TRATAMIENTOS & PRESUPUESTOS — CSS
   ═══════════════════════════════════════ */

/* ── Toolbar ── */
.trat-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap;
}

/* ── Buscador paciente (reutiliza odonto-pac-row) ── */
.trat-pac-panel {
  background: var(--neutral-900); border: var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap;
}

/* ── Layout principal ── */
.trat-layout {
  display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-4);
}
@media (max-width: 1100px) { .trat-layout { grid-template-columns: 1fr; } }

/* ── Plan de tratamiento ── */
.plan-wrap {
  background: var(--neutral-900); border: var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
}
.plan-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: var(--border-subtle);
  background: var(--neutral-850);
}
.plan-header-title { font-size: var(--text-sm); font-weight: 600; color: var(--neutral-200); }
.plan-body { padding: var(--sp-4) var(--sp-5); }

/* ── Item del plan ── */
.plan-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--neutral-850); border: var(--border-subtle);
  border-radius: var(--radius-md); margin-bottom: var(--sp-2);
  transition: border-color var(--t-fast);
}
.plan-item:hover { border-color: var(--neutral-600); }
.plan-item-check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--neutral-600); flex-shrink: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast); font-size: 11px; color: transparent;
}
.plan-item-check.done { background: var(--success); border-color: var(--success); color: #fff; }
.plan-item-check.en_curso { background: var(--info); border-color: var(--info); color: #fff; }
.plan-item-info { flex: 1; min-width: 0; }
.plan-item-nombre { font-size: var(--text-sm); font-weight: 500; color: var(--neutral-100); }
.plan-item-meta   { font-size: var(--text-xs); color: var(--neutral-500); margin-top: 1px; display: flex; gap: var(--sp-2); }
.plan-item-precio { font-size: var(--text-sm); font-weight: 600; color: var(--neutral-200); white-space: nowrap; }
.plan-item-prioridad {
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 9px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
}
.prioridad-urgente   { background: rgba(244,63,94,.12);  color: var(--danger); }
.prioridad-necesario { background: rgba(245,158,11,.12); color: var(--warning); }
.prioridad-electivo  { background: rgba(56,189,248,.12); color: var(--info); }

/* ── Agregar procedimiento ── */
.add-proc-form {
  background: var(--neutral-850); border: var(--border-default);
  border-radius: var(--radius-md); padding: var(--sp-4);
  margin-top: var(--sp-3); display: none;
}
.add-proc-form.open { display: block; }

/* ── Columna derecha: presupuesto ── */
.presup-wrap {
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.presup-card {
  background: var(--neutral-900); border: var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
}
.presup-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: var(--border-subtle);
  background: var(--neutral-850);
}
.presup-title { font-size: var(--text-sm); font-weight: 600; color: var(--neutral-200); }
.presup-body  { padding: var(--sp-4) var(--sp-5); }

/* ── Items presupuesto ── */
.presup-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: var(--border-subtle); font-size: var(--text-sm);
}
.presup-item:last-child { border-bottom: none; }
.presup-item-nombre { flex: 1; color: var(--neutral-200); }
.presup-item-cant   { width: 40px; text-align: center; color: var(--neutral-500); font-size: var(--text-xs); }
.presup-item-precio { width: 90px; text-align: right; color: var(--neutral-200); font-family: var(--font-mono); font-size: var(--text-xs); }
.presup-item-del    { background: none; border: none; color: var(--neutral-600); cursor: pointer; font-size: 12px; transition: color var(--t-fast); }
.presup-item-del:hover { color: var(--danger); }

/* ── Totales ── */
.presup-totales { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--border-subtle); }
.presup-subtotal { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--neutral-500); margin-bottom: var(--sp-1); }
.presup-descuento-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.presup-descuento-label { font-size: var(--text-xs); color: var(--neutral-500); flex: 1; }
.presup-descuento-input { width: 60px; }
.presup-total { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: var(--border-default); }
.presup-total-label { font-size: var(--text-sm); font-weight: 700; color: var(--neutral-100); }
.presup-total-monto { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--brand-accent); }

/* ── Nomenclador / Aranceles ── */
.nomenclador-wrap {
  background: var(--neutral-900); border: var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
}
.nomenclador-search {
  padding: var(--sp-3) var(--sp-4); border-bottom: var(--border-subtle); background: var(--neutral-850);
}
.nomenclador-list { max-height: 320px; overflow-y: auto; }
.nomenclador-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: var(--border-subtle);
  cursor: pointer; transition: background var(--t-fast);
}
.nomenclador-item:hover { background: var(--neutral-850); }
.nomenclador-item:last-child { border-bottom: none; }
.nomenclador-codigo { font-family: var(--font-mono); font-size: 10px; color: var(--neutral-600); min-width: 50px; }
.nomenclador-nombre { flex: 1; font-size: var(--text-sm); color: var(--neutral-200); }
.nomenclador-precio { font-size: var(--text-sm); font-weight: 600; color: var(--brand-accent); white-space: nowrap; }

/* ── Estado del plan ── */
.plan-estado-bar {
  display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5);
  border-bottom: var(--border-subtle); background: var(--neutral-850);
  flex-wrap: wrap;
}
.plan-estado-item { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--neutral-500); }
.plan-estado-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Historial presupuestos ── */
.presup-hist-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--neutral-850);
  border: var(--border-subtle); border-radius: var(--radius-md); margin-bottom: var(--sp-2);
  cursor: pointer; transition: border-color var(--t-fast);
}
.presup-hist-item:hover { border-color: var(--neutral-600); }
.presup-hist-num   { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--brand-accent); }
.presup-hist-fecha { font-size: var(--text-xs); color: var(--neutral-500); }
.presup-hist-total { font-weight: 600; color: var(--neutral-100); margin-left: auto; }