:root {
    --forest: #1C5836;
    --forest-dark: #12402A;
    --forest-light: #97BC62;
    --terracotta: #B85042;
    --gold: #D4A24C;
    --cream: #EFE9DC;
    --sand: #E7E8D1;
    --ink: #1A1F1A;
    --muted: #5F6B5F;
  }
  * { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
  /* Los títulos van en la misma sans que el cuerpo, con más peso y el
     tracking cerrado. La serif se probó y no era la lectura que buscábamos. */
  .font-display {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 800;
    letter-spacing: -0.022em;
  }
  body { background: linear-gradient(135deg, #FAFAF5 0%, #F0EDE2 100%); color: var(--ink); }
  .glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .scrollbar-hide::-webkit-scrollbar { display: none; }
  .gradient-forest { background: linear-gradient(135deg, #1C5836 0%, #12402A 100%); }
  .gradient-terracotta { background: linear-gradient(135deg, #B85042 0%, #8B3A2E 100%); }
  .gradient-gold { background: linear-gradient(135deg, #D4A24C 0%, #A6792E 100%); }
  .gradient-text { background: linear-gradient(135deg, #1C5836, #97BC62); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .nav-item { transition: all 0.2s ease; }
  .nav-item.active { background: linear-gradient(90deg, rgba(28,88,54,0.15), transparent); border-left: 3px solid var(--forest); }
  .nav-item:hover:not(.active) { background: rgba(28,88,54,0.05); }
  .card-hover { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
  .card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.08); }
  .score-ring { transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
  @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
  .fade-in { animation: fadeInUp 0.4s ease-out forwards; }
  .view { display: none; }
  .view.active { display: block; animation: fadeInUp 0.3s ease-out forwards; }

  /* Buttons */
  .btn-primary { background: var(--forest); color: white; padding: 0.625rem 1.25rem; border-radius: 0.625rem; font-weight: 600; transition: all 0.15s; }
  .btn-primary:hover { background: var(--forest-dark); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(28,88,54,0.4); }
  .btn-secondary { background: rgba(28,88,54,0.08); color: var(--forest); padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; transition: all 0.15s; }
  .btn-secondary:hover { background: rgba(28,88,54,0.15); }
  .btn-accent { background: var(--terracotta); color: white; padding: 0.625rem 1.25rem; border-radius: 0.625rem; font-weight: 600; transition: all 0.15s; }
  .btn-accent:hover { background: #8B3A2E; }
  /* Con "html" adelante: el preflight de Tailwind (CDN) se inyecta después de
     esta hoja y con la misma especificidad pisaba padding y font-size, dejando
     los controles sin relleno. */
  /* :where() no suma especificidad: la regla queda en (0,0,2), por encima
     del preflight y por debajo de las utilidades (pl-9, !py-1.5, etc.). */
  html input:not(:where([type=checkbox], [type=radio], [type=file])), html select, html textarea {
    width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #C7C7BE;
    border-radius: 0.625rem; font-size: 0.9375rem; line-height: 1.3;
    transition: border-color 0.15s, box-shadow 0.15s; background: white;
  }
  html input:focus, html select:focus, html textarea:focus {
    outline: none; border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(28,88,54,0.1);
  }
  textarea { min-height: 5.5rem; }
  .field-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.375rem; }

  /* Tarjeta de acceso (landing) */
  .auth-card {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(16px);
    border-radius: 1.25rem;
    overflow: hidden;
    color: var(--ink);
    box-shadow: 0 30px 60px -20px rgba(10,25,10,0.55), 0 0 0 1px rgba(255,255,255,0.4);
  }
  .auth-card-top {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg, rgba(28,88,54,0.07), rgba(28,88,54,0));
    border-bottom: 1px solid rgba(28,88,54,0.1);
  }

  /* Input con ícono adelante y botón opcional atrás */
  .input-icon { position: relative; display: block; }
  .input-icon > svg {
    position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: #9AA39A; pointer-events: none; z-index: 1;
  }
  html .input-icon > input,
  html .input-icon > select { padding-left: 2.5rem; }
  .input-icon > input:focus ~ svg, .input-icon > input:focus + svg { color: var(--forest); }

  /* ---------- Controles de formulario parejos ----------
     El select traía el chevron del sistema, que cambia de tamaño y posición
     según el navegador, y quedaba más bajo que los inputs con ícono: puestos
     uno al lado del otro se notaba enseguida. Va todo con la misma altura
     y un chevron propio. */
  html select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA39A' stroke-width='2.2' 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 0.75rem center;
    background-size: 15px;
    padding-right: 2.4rem;
  }
  /* Mientras no se eligió nada, el texto se lee como placeholder y no como valor */
  select:has(option[value=""]:checked) { color: #9AA39A; }

  /* Las flechitas del number no aportan nada en campos de cantidad y
     rompen la altura del control */
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type=number] { -moz-appearance: textfield; }

  /* Deshabilitado tiene que leerse como "esperando", no como "roto" */
  html input:disabled, html select:disabled {
    background-color: #FAFAF8; color: #A8A29E; cursor: not-allowed; border-color: #E5E5E0;
  }
  .input-icon > input:disabled ~ svg { opacity: .5; }
  .input-trailing {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border-radius: 0.375rem; color: #9AA39A; transition: color .15s, background .15s;
  }
  .input-trailing:hover { color: var(--forest); background: rgba(28,88,54,0.08); }
  .input-trailing svg { width: 16px; height: 16px; }
  .input-icon:has(.input-trailing) > input { padding-right: 2.75rem; }

  /* Cajón lateral.
     Antes esto se resolvía alternando las utilidades -translate-x-full y
     lg:translate-x-0 de Tailwind, y cuál ganaba dependía del orden en que
     el CDN las emitiera. Falló dos veces: en desktop el sidebar quedaba
     fuera de pantalla con la hamburguesa oculta (o sea, sin navegación), y
     en mobile el transform quedaba pegado al sacar la clase. Va con CSS
     propio, que no depende de ese orden. */
  #sidebar { transition: transform .3s ease-out; }
  @media (max-width: 1023.98px) {
    #sidebar { transform: translateX(-100%); }
    #sidebar.abierto { transform: translateX(0); }
  }
  @media (min-width: 1024px) {
    #sidebar { transform: none; }
    #sidebar-backdrop { display: none; }
  }

  /* Los hijos de una grilla tienen min-width:auto por defecto: si adentro hay
     una tabla, una grilla anidada o un texto largo sin cortes, el track crece
     hasta el min-content del contenido y empuja la página entera hacia el
     costado. En las vistas de la app siempre queremos lo contrario: que la
     columna se ajuste al ancho disponible y que lo ancho scrollee adentro.
     Se vio en "Mi información contable", donde el track medía 675 px dentro
     de un contenedor de 342. */
  #app-shell .grid > * { min-width: 0; }

  /* ---------- Secciones de la landing ----------
     Antes iban translúcidas sobre la foto del hero: las tarjetas quedaban
     lavadas y el texto competía con el pasto del fondo. Ahora apoyan sobre
     fondo sólido, que además le da respiro al scroll. */
  .auth-page {
    position: relative; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1.25rem 3rem;
  }
  /* Fondo liso en verde: las pantallas de acceso van sin foto, como el resto
     de la plataforma. */
  .auth-media {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    background: linear-gradient(160deg, #1C5836 0%, #12402A 55%, #16311A 100%);
  }
  .auth-wrap { position: relative; z-index: 1; width: 100%; max-width: 25rem; }
  .auth-wrap-ancho { max-width: 30rem; }

  .auth-marca {
    display: flex; align-items: center; gap: 0.7rem;
    color: #fff; margin-bottom: 1.5rem; justify-content: center;
  }
  .auth-marca-icono {
    width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    /* La baldosa es del mismo verde que el fondo de acceso: un anillo claro la separa. */
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.32), 0 8px 18px -10px rgba(0,0,0,0.6);
  }
  .auth-marca-icono img { display: block; width: 100%; height: 100%; object-fit: cover; }

  .auth-card-pie {
    padding: 1rem 1.5rem; text-align: center; font-size: 0.875rem;
    background: rgba(250,250,248,0.8); border-top: 1px solid rgba(214,211,209,0.7);
  }
  .auth-error {
    font-size: 0.875rem; font-weight: 600; line-height: 1.4;
    color: var(--terracotta); background: #FEF2F2;
    border: 1px solid #FEE2E2; border-radius: 0.5rem; padding: 0.625rem 0.75rem;
  }
  .auth-ok {
    font-size: 0.875rem; font-weight: 600; line-height: 1.4;
    color: #047857; background: #ECFDF5;
    border: 1px solid #D1FAE5; border-radius: 0.5rem; padding: 0.625rem 0.75rem;
  }

  .auth-loading {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center; background: #12402A;
  }
  .auth-spinner {
    width: 40px; height: 40px; border-radius: 50%;
    border: 3px solid rgba(239,233,220,.25); border-top-color: #EFE9DC;
    animation: spin .9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Progreso del onboarding: pasos numerados encadenados.
     La barra de progreso sola no decía en cuál de los tres estabas. */
  .onb-pasos { display: flex; align-items: flex-start; }
  .onb-paso {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 0.4rem; position: relative; text-align: center;
  }
  /* Línea que une un paso con el siguiente */
  .onb-paso:not(:last-child)::after {
    content: ''; position: absolute;
    top: 0.9rem; left: calc(50% + 1.15rem); right: calc(-50% + 1.15rem);
    height: 2px; background: #E5E5E0; transition: background .3s;
  }
  .onb-paso.hecho::after { background: var(--forest-light); }

  .onb-paso-bola {
    width: 1.8rem; height: 1.8rem; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
    background: #EDEDE8; color: #A8A29E;
    transition: background .25s, color .25s, box-shadow .25s;
  }
  .onb-paso.activo .onb-paso-bola {
    background: var(--forest); color: #fff;
    box-shadow: 0 0 0 4px rgba(28,88,54,0.12);
  }
  .onb-paso.hecho .onb-paso-bola { background: var(--forest-light); color: var(--forest-dark); }

  .onb-paso-txt { font-size: 11px; font-weight: 600; color: #A8A29E; transition: color .25s; }
  .onb-paso.activo .onb-paso-txt { color: var(--forest); }
  .onb-paso.hecho  .onb-paso-txt { color: var(--muted); }

  /* Etiquetas del onboarding: capitalización normal en vez de mayúsculas.
     El formulario de alta se lee mejor con voz de persona que de planilla. */
  .campo-label {
    display: block; font-size: 0.8125rem; font-weight: 600;
    color: var(--ink); margin-bottom: 0.4rem;
  }
  .campo-opcional {
    font-size: 0.6875rem; font-weight: 500; color: var(--muted);
    background: #F0EFEA; border-radius: 999px;
    padding: 0.1rem 0.45rem; margin-left: 0.3rem;
    vertical-align: 1px;
  }

  /* Buscador de localidades */
  .geo-campo { position: relative; }
  .geo-lista {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1px solid #E5E5E0; border-radius: 0.6rem;
    box-shadow: 0 12px 28px -10px rgba(0,0,0,.22);
    max-height: 13rem; overflow-y: auto; padding: 0.25rem;
  }
  .geo-opcion {
    display: block; width: 100%; text-align: left;
    padding: 0.5rem 0.6rem; border-radius: 0.4rem;
    font-size: 0.875rem; color: var(--ink);
  }
  .geo-opcion:hover, .geo-opcion.marcada { background: rgba(28,88,54,0.08); }
  #onb-localidad:disabled { background: #F7F7F4; color: #A8A29E; cursor: not-allowed; }

  .onb-fuerza {
    flex: 1; height: 4px; border-radius: 999px;
    background: #E5E5E0; transition: background .2s;
  }

  /* Panel superadmin */
  .admin-tab {
    padding: 0.6rem 0.9rem; font-size: 0.8125rem; font-weight: 600;
    color: rgba(239,233,220,0.55); border-bottom: 2px solid transparent;
    white-space: nowrap; transition: color .15s, border-color .15s;
  }
  .admin-tab:hover { color: rgba(239,233,220,0.9); }
  .admin-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
  #admin-shell code { font-size: 0.95em; }

  /* Score badges */
  .score-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
  .score-A1 { background: #DCFCE7; color: #14532D; }
  .score-A2 { background: #D1FAE5; color: #166534; }
  .score-B1 { background: #ECFCCB; color: #3F6212; }
  .score-B2 { background: #FEF9C3; color: #713F12; }
  .score-C1 { background: #FED7AA; color: #7C2D12; }
  .score-C2 { background: #FECACA; color: #7F1D1D; }
  .score-D  { background: #FEE2E2; color: #991B1B; }

  /* Toast */
  #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
  .toast { padding: 14px 18px; border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.15); background: white; border-left: 4px solid var(--forest); display: flex; align-items: center; gap: 12px; min-width: 280px; animation: fadeInUp 0.25s; }
  .toast.error { border-left-color: var(--terracotta); }

  /* Modal */
  .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 50; display: none; align-items: center; justify-content: center; padding: 16px; }
  .modal-backdrop.open { display: flex; }
  .modal-content { background: white; border-radius: 16px; padding: 28px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; animation: fadeInUp 0.25s; }

  .logo-card { border-radius: 12px; padding: 10px; display: flex; align-items: center; justify-content: center; min-height: 56px; min-width: 130px; }

  /* CUIT autocomplete */
  /* Stepper de Nueva operación (5 pasos, compartido por las tres vistas).
     En desktop: número + etiqueta en línea con conectores que se pintan al
     avanzar. En móvil: "Paso N de 5" con barra de progreso. */
  .op-steps-card {
    background: white; border: 1px solid #F0EFE9; border-radius: 1rem;
    padding: 0.85rem 1.25rem; box-shadow: 0 1px 2px rgba(20,30,20,0.03);
  }
  .op-steps { display: flex; align-items: center; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
  .op-step {
    display: flex; align-items: center; gap: 0.55rem; white-space: nowrap;
    font-size: 0.8rem; font-weight: 600; color: #8A948A; transition: color .2s;
  }
  .op-step-num {
    width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #DDDDD6; background: white; color: #8A948A;
    font-size: 0.75rem; font-weight: 700; transition: all .2s;
  }
  .op-step-num svg { width: 14px; height: 14px; }
  .op-step.actual { color: var(--forest-dark); }
  .op-step.actual .op-step-label { font-weight: 700; }
  .op-step.actual .op-step-num {
    border-color: var(--forest); background: var(--forest); color: white;
    box-shadow: 0 0 0 4px rgba(28,88,54,0.12);
  }
  .op-step.done { color: var(--forest); cursor: pointer; }
  .op-step.done .op-step-num { border-color: var(--forest); background: rgba(28,88,54,0.1); color: var(--forest); }
  .op-step.done:hover .op-step-num { background: var(--forest); color: white; }
  .op-step-sep { flex: 1; height: 2px; min-width: 14px; border-radius: 2px; background: #E7E7E1; }
  .op-step-sep.done { background: var(--forest); }
  .op-steps-mobile { display: none; }
  .op-steps-bar { height: 6px; border-radius: 999px; background: #EDEDE7; overflow: hidden; margin-top: 0.6rem; }
  .op-steps-bar > div { height: 100%; width: 100%; border-radius: 999px; background: var(--forest); transform-origin: left center; transition: transform .3s; }
  @media (max-width: 767px) {
    .op-steps { display: none; }
    .op-steps-mobile { display: block; }
  }

  .autocomplete-results { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #E5E5E0; border-radius: 0.5rem; box-shadow: 0 12px 24px -8px rgba(0,0,0,0.12); margin-top: 4px; z-index: 30; max-height: 280px; overflow-y: auto; }
  .autocomplete-results > div { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #F0F0EC; }
  .autocomplete-results > div:last-child { border-bottom: 0; }
  .autocomplete-results > div:hover, .autocomplete-results > div.active { background: rgba(28,88,54,0.05); }

  /* File chip */
  .file-chip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(28,88,54,0.06); border: 1px solid rgba(28,88,54,0.18); border-radius: 10px; }

  /* Las vistas van sobre el fondo liso del body: sin fotos detrás de las tablas. */
  .view { min-height: 100vh; }