/* ==========================================================================
   AutoCosto — Hoja de Estilo Profesional y Autónoma (Sin dependencia de CDN)
   Colores Oficiales: Navy #0B192C, Rojo #FF1616, Azul Confianza #1D4ED8
   ========================================================================== */

:root {
  --brand-navy: #0B192C;
  --brand-navy-light: #1E293B;
  --brand-navy-dark: #060E18;
  --brand-red: #FF1616;
  --brand-red-dark: #E01212;
  --brand-red-light: #FEE2E2;
  --brand-blue: #1D4ED8;
  --brand-blue-hover: #1E40AF;
  --brand-blue-light: #EFF6FF;
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --emerald-50: #ECFDF5;
  --emerald-200: #A7F3D0;
  --emerald-500: #10B981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065F46;
  --amber-50: #FFFBEB;
  --amber-200: #FDE68A;
  --amber-500: #F59E0B;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --red-50: #FEF2F2;
  --red-200: #FECACA;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-950: #450A0A;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  color: var(--slate-900);
  background-color: var(--slate-50);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.font-lexend {
  font-family: 'Lexend', sans-serif;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Scrollbar refinado */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--slate-100);
}
::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--slate-400);
}

/* Clases de Fondos y Textos de Marca */
.bg-brand-navy { background-color: var(--brand-navy) !important; }
.bg-brand-navy-light { background-color: var(--brand-navy-light) !important; }
.bg-brand-red { background-color: var(--brand-red) !important; }
.bg-brand-red-dark { background-color: var(--brand-red-dark) !important; }
.bg-brand-blue { background-color: var(--brand-blue) !important; }
.text-brand-red { color: var(--brand-red) !important; }
.text-brand-blue { color: var(--brand-blue) !important; }

/* Animaciones */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Impresión Optimizada */
@media print {
  header, footer, .no-print, #smart-input, #btn-auto-detect, #btn-recalculate,
  #btn-copy-whatsapp, #btn-export-png, #btn-view-breakdown, #mode-budget-btn, #mode-bid-btn {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
  main {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .bg-brand-navy {
    background-color: #0B192C !important;
    color: #FFFFFF !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* ==========================================================================
   COMPORTAMIENTO DE LA APP (sin color)
   La capa visual "cabina" que vivia aqui fue eliminada: el mundo visual lo
   define ahora premium-calculator.css / home-premium.css, y las dos hojas se
   pisaban en 42 selectores, dejando controles invisibles.
   Solo sobrevive lo que sostiene comportamiento y que la hoja premium no
   cubre. Nada de esto define color, fondo, sombra ni tipografia.
   ========================================================================== */

/* El tablero del resultado no existe hasta que hay resultado. Premium reacomoda
   la reticula pero no oculta la columna, asi que esta regla sigue siendo suya. */
.grid:has(#post-detect.hidden) > .lg\:col-span-5 { display: none !important; }

/* Nada que reiniciar antes de traer un lote. */
.grid:has(#post-detect.hidden) #btn-reset-all { display: none !important; }

/* Ajustes plegados: <details> nativo, sin JavaScript y accesible por teclado.
   Solo geometria; el color lo pone la hoja premium. */
.adv-item > .adv-sum {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 15px 18px;
}
.adv-item > .adv-sum::-webkit-details-marker { display: none; }
.adv-sum-t { font-weight: 600; white-space: nowrap; }
/* El valor actual se ve siempre, tambien en movil: es lo que evita abrir. */
.adv-sum-v { margin-left: auto; min-width: 0; text-align: right; font-size: 13px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-chev { margin-left: 4px; transition: transform .16s ease; }
.adv-item[open] .adv-chev { transform: rotate(180deg); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}