/*
 * Construction OS — componentes en CSS puro (sin Tailwind ni React).
 * Cada clase reproduce las clases de la app (shadcn/ui "new-york" + el sistema de diseño
 * en src/components/ds). Al lado va la clase original de la app como referencia.
 * Requiere: ../estilos/tokens.css (y efectos.css si usas las clases fx-).
 */

*, *::before, *::after { box-sizing: border-box; }
body.cos {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.cos-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.cos-icon-lg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* ---------- Tipografía (src/components/ds/README.md) ---------- */
.cos-page-title { font-size: var(--text-2xl); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 2rem; margin: 0; }
.cos-page-desc { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0.25rem 0 0; }
.cos-section-title { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-tight); margin: 0; }
.cos-metric { font-size: var(--text-2xl); font-weight: 800; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; margin: 0; }
.cos-metric-2 { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.cos-overline { font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted-foreground); margin: 0; }
.cos-help { font-size: var(--text-xs); color: var(--muted-foreground); }

/* ---------- Botones (components/ui/button.tsx) ---------- */
.cos-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  white-space: nowrap; border-radius: var(--radius-md); font: inherit;
  font-size: var(--text-sm); font-weight: 500; line-height: 1.25rem;
  height: 2.25rem; padding: 0.5rem 1rem; cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
  transition-property: color, background-color, border-color;
  transition-duration: var(--duration); transition-timing-function: var(--ease);
}
.cos-btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--ring); }
.cos-btn:disabled, .cos-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.cos-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; pointer-events: none; }
/* default: bg-primary text-primary-foreground shadow hover:bg-primary/90 */
.cos-btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow); }
.cos-btn-primary:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
/* outline: border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground */
.cos-btn-outline { background: var(--background); color: var(--foreground); border-color: var(--input); box-shadow: var(--shadow-sm); }
.cos-btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
/* secondary: bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 */
.cos-btn-secondary { background: var(--secondary); color: var(--secondary-foreground); box-shadow: var(--shadow-sm); }
.cos-btn-secondary:hover { background: color-mix(in oklab, var(--secondary) 80%, transparent); }
/* ghost: hover:bg-accent hover:text-accent-foreground */
.cos-btn-ghost { background: transparent; color: var(--foreground); }
.cos-btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }
/* destructive: bg-destructive text-destructive-foreground shadow-sm */
.cos-btn-destructive { background: var(--destructive); color: var(--destructive-foreground); box-shadow: var(--shadow-sm); }
.cos-btn-destructive:hover { background: color-mix(in oklab, var(--destructive) 90%, transparent); }
/* link: text-primary underline-offset-4 hover:underline */
.cos-btn-link { background: transparent; color: var(--primary); text-underline-offset: 4px; }
.cos-btn-link:hover { text-decoration: underline; }
/* sizes */
.cos-btn-sm { height: 2rem; padding: 0 0.75rem; font-size: var(--text-xs); }
.cos-btn-lg { height: 2.5rem; padding: 0 2rem; }
.cos-btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; }

/* ---------- Tarjetas ---------- */
/* Card base: rounded-xl border bg-card shadow */
.cos-card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.cos-card-header { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem; }
.cos-card-title { font-weight: 600; line-height: 1; letter-spacing: var(--tracking-tight); margin: 0; }
.cos-card-desc { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0; }
.cos-card-content { padding: 0 1.5rem 1.5rem; }
/* Panel / StatCard: rounded-2xl border-border shadow-[var(--shadow-card)] p-5 */
.cos-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); padding: 1.25rem; }
.cos-stat { display: flex; flex-direction: column; gap: 0.5rem; }
.cos-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.cos-stat-icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); }
.cos-stat-icon svg { width: 1rem; height: 1rem; }
.cos-stat-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .cos-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cos-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Fila de lista: rounded-xl p-3 */
.cos-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); }

/* Tonos (StatCard toneMap): fondo pastel + texto del color */
.tone-primary { background: var(--primary-soft); color: var(--primary); }
.tone-teal { background: var(--teal-soft); color: var(--teal); }
.tone-accent { background: var(--accent-soft); color: var(--accent); }
.tone-success { background: var(--success-soft); color: var(--success); }
.tone-warning { background: var(--warning-soft); color: var(--warning); }
.tone-destructive { background: var(--destructive-soft); color: var(--destructive); }
.tone-neutral { background: var(--muted); color: var(--muted-foreground); }

/* ---------- Pestañas (components/ui/tabs.tsx) ---------- */
.cos-tabs { display: inline-flex; align-items: center; height: 2.25rem; padding: 0.25rem; border-radius: var(--radius-lg); background: var(--muted); color: var(--muted-foreground); max-width: 100%; overflow-x: auto; }
.cos-tab { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); font-weight: 500; padding: 0.25rem 0.75rem; border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration) var(--ease); }
.cos-tab[aria-selected="true"], .cos-tab.is-active { background: var(--background); color: var(--foreground); box-shadow: var(--shadow); }
.cos-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }

/* ---------- Etiquetas ---------- */
/* Badge base: rounded-md border px-2.5 py-0.5 text-xs font-semibold */
.cos-badge { display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: var(--radius-md); padding: 0.125rem 0.625rem; font-size: var(--text-xs); font-weight: 600; line-height: 1rem; }
.cos-badge-default { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow); }
.cos-badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.cos-badge-destructive { background: var(--destructive); color: var(--destructive-foreground); }
.cos-badge-outline { border-color: var(--border); color: var(--foreground); }
/* StatusBadge: rounded-full px-2 py-0.5 text-[11px] font-medium + tono */
.cos-status { display: inline-flex; align-items: center; white-space: nowrap; border-radius: var(--radius-full); padding: 0.125rem 0.5rem; font-size: var(--text-2xs); font-weight: 500; line-height: 1rem; }
/* Chip de contexto de las tarjetas KPI */
.cos-chip { display: inline-block; border-radius: var(--radius-full); padding: 0.125rem 0.5rem; font-size: var(--text-2xs); font-weight: 500; }
/* Categorías de costo (lib/costs/category-visuals) */
.cat-materials { background: var(--cat-materials); color: var(--cat-materials-ink); }
.cat-subs { background: var(--cat-subs); color: var(--cat-subs-ink); }
.cat-labor { background: var(--cat-labor); color: var(--cat-labor-ink); }
.cat-equipment { background: var(--cat-equipment); color: var(--cat-equipment-ink); }
.cat-permits { background: var(--cat-permits); color: var(--cat-permits-ink); }
.cat-disposal { background: var(--cat-disposal); color: var(--cat-disposal-ink); }
.cat-delivery { background: var(--cat-delivery); color: var(--cat-delivery-ink); }
.cat-fuel { background: var(--cat-fuel); color: var(--cat-fuel-ink); }
.cat-other { background: var(--cat-other); color: var(--cat-other-ink); }

/* ---------- Barra de progreso (components/ui/progress.tsx) ---------- */
/* h-2 rounded-full bg-primary/20 ; indicador bg-primary */
.cos-progress { position: relative; height: 0.5rem; width: 100%; overflow: hidden; border-radius: var(--radius-full); background: color-mix(in oklab, var(--primary) 20%, transparent); }
.cos-progress > span { display: block; height: 100%; background: var(--primary); border-radius: inherit; transition: width var(--duration) var(--ease); }
.cos-progress.is-teal { background: color-mix(in oklab, var(--teal) 20%, transparent); }
.cos-progress.is-teal > span { background: var(--teal); }

/* ---------- Formularios ---------- */
.cos-field { display: flex; flex-direction: column; gap: 0.375rem; }
.cos-label { font-size: var(--text-sm); font-weight: 500; line-height: 1; }
/* Input: h-9 rounded-md border-input bg-transparent px-3 py-1 shadow-sm md:text-sm */
.cos-input, .cos-select, .cos-textarea {
  width: 100%; font: inherit; font-size: var(--text-base); color: var(--foreground);
  background: transparent; border: 1px solid var(--input); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.cos-input, .cos-select { height: 2.25rem; padding: 0.25rem 0.75rem; }
.cos-textarea { min-height: 60px; padding: 0.5rem 0.75rem; resize: vertical; }
@media (min-width: 768px) { .cos-input, .cos-select, .cos-textarea { font-size: var(--text-sm); } }
.cos-input::placeholder, .cos-textarea::placeholder { color: var(--muted-foreground); }
.cos-input:focus-visible, .cos-select:focus-visible, .cos-textarea:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--ring); }
.cos-input:disabled { opacity: 0.5; cursor: not-allowed; }
.cos-input[aria-invalid="true"] { border-color: var(--destructive); }
.cos-error-text { font-size: var(--text-xs); color: var(--destructive); }
.cos-input-icon { position: relative; }
.cos-input-icon > svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--muted-foreground); pointer-events: none; }
.cos-input-icon > .cos-input { padding-left: 2.25rem; background: var(--background); height: 2.5rem; }
.cos-money { text-align: right; font-variant-numeric: tabular-nums; }
.cos-checkbox { width: 1rem; height: 1rem; accent-color: var(--primary); }
/* Switch: pista primary cuando está encendido */
.cos-switch { appearance: none; width: 2.25rem; height: 1.25rem; border-radius: 9999px; background: var(--input); position: relative; cursor: pointer; transition: background var(--duration) var(--ease); }
.cos-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 9999px; background: var(--background); box-shadow: var(--shadow-lg); transition: transform var(--duration) var(--ease); }
.cos-switch:checked { background: var(--primary); }
.cos-switch:checked::after { transform: translateX(1rem); }

/* ---------- Tabla (ds/DataTable) ---------- */
.cos-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cos-table th { text-align: left; font-size: var(--text-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted-foreground); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.cos-table td { padding: 0.75rem; border-bottom: 1px solid var(--border); }
.cos-table tr:hover td { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.cos-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Estado vacío (ds/states.tsx) ---------- */
.cos-empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 3.5rem 1.5rem; border: 1px dashed var(--border); border-radius: var(--radius-2xl); }
.cos-empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-2xl); background: var(--primary-soft); color: var(--primary); }
.cos-empty-icon svg { width: 1.25rem; height: 1.25rem; }

/* ---------- Alerta / aviso ---------- */
.cos-alert { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 1rem; border-radius: var(--radius-xl); border: 1px solid var(--border); font-size: var(--text-sm); }
.cos-alert svg { width: 1rem; height: 1rem; margin-top: 0.125rem; flex-shrink: 0; }
.cos-alert.is-warning { background: var(--warning-soft); border-color: transparent; color: var(--warning-foreground); }
.cos-alert.is-warning svg { color: var(--warning); }

/* ---------- Avatar con iniciales ---------- */
.cos-avatar { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); font-size: var(--text-2xs); font-weight: 600; }

/* ---------- Navegación (layout/SidebarNav.tsx + Topbar.tsx) ---------- */
.cos-sidebar { background: var(--sidebar); color: var(--sidebar-foreground); width: var(--sidebar-width); display: flex; flex-direction: column; }
.cos-sidebar-head { display: flex; align-items: center; gap: 0.75rem; height: 4rem; padding: 0 1rem; border-bottom: 1px solid var(--sidebar-border); }
.cos-sidebar nav { padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.cos-nav-group { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; padding-top: 0.875rem; font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: color-mix(in oklab, var(--sidebar-foreground) 45%, transparent); }
.cos-nav-group svg { width: 0.875rem; height: 0.875rem; }
.cos-nav-item { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-xl); font-size: var(--text-sm); font-weight: 500; color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent); text-decoration: none; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); }
.cos-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.cos-nav-item:hover { background: color-mix(in oklab, var(--sidebar-accent) 60%, transparent); color: var(--sidebar-accent-foreground); }
.cos-nav-item.is-active { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.cos-nav-item.is-active svg { color: var(--sidebar-primary); }
.cos-nav-item.is-active::before { content: ""; position: absolute; left: 0; top: 0.375rem; bottom: 0.375rem; width: 0.25rem; border-radius: 9999px; background: var(--sidebar-primary); }
.cos-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 0.75rem; height: 4rem; padding: 0 1.5rem; border-bottom: 1px solid var(--border); background-color: color-mix(in oklab, var(--card) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---------- Marca ---------- */
.cos-brand { display: inline-flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
.cos-brand img, .cos-brand svg { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.cos-brand b { font-size: var(--text-sm); font-weight: 800; letter-spacing: var(--tracking-tight); }