/* ==========================================================================
   Alquila Ya · «Libro claro» — base y utilidades
   Elementos HTML con los tokens nuevos. Las utilidades van en la última capa:
   ganan por el orden de las capas, sin reglas forzadas.
   ========================================================================== */

/* Inter 4 variable (pesos 400–700 y eje óptico), autoalojada desde Google
   Fonts. El nombre del archivo lleva la versión: se puede guardar para siempre. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-v20-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-v20-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Al tabular, nada queda escondido bajo la barra superior ni la inferior */
    scroll-padding-top: calc(var(--barra-alto) + var(--esp-4));
    scroll-padding-bottom: var(--esp-16);
  }
  body {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: var(--texto-m);
    line-height: var(--lh-m);
    font-optical-sizing: auto;
    color: var(--color-texto);
    background: var(--color-lienzo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1, h2, h3, h4 {
    margin: 0 0 var(--esp-3);
    font-weight: 600;
    color: var(--color-texto);
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  h1 { font-size: var(--titulo-1); line-height: var(--lh-t1); letter-spacing: -0.015em; }
  h2 { font-size: var(--titulo-2); line-height: var(--lh-t2); letter-spacing: -0.01em; }
  h3 { font-size: var(--titulo-3); line-height: var(--lh-l); }
  h4 { font-size: var(--texto-m); line-height: var(--lh-m); }
  p { margin: 0 0 var(--esp-3); }
  p, li, dd { text-wrap: pretty; }
  ul, ol { padding-left: var(--esp-6); }
  a {
    color: var(--color-primario);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  a:hover { color: var(--color-primario-hover); text-decoration-thickness: 2px; }
  b, strong { font-weight: 600; }
  small { font-size: var(--texto-xs); line-height: var(--lh-xs); }
  img, video, canvas { max-width: 100%; height: auto; }
  code, kbd, samp, pre {
    font-family: var(--fuente-texto);
    font-variant-numeric: tabular-nums slashed-zero;
  }
  code { font-size: .92em; overflow-wrap: anywhere; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  kbd {
    display: inline-block;
    min-width: 1.75em;
    padding: 0 6px;
    border: 1px solid var(--color-borde-control);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--color-superficie);
    color: var(--color-texto-2);
    font-size: var(--texto-xs);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }
  mark {
    background: var(--color-aviso-sutil);
    color: var(--color-texto);
    box-shadow: inset 0 -2px 0 var(--color-aviso-borde);
    border-radius: 2px;
    padding: 0 1px;
  }
  hr { border: 0; border-top: 1px solid var(--color-borde); margin: var(--esp-6) 0; }
  table { border-collapse: collapse; }
  button, input, select, textarea { font: inherit; color: inherit; }
  fieldset {
    margin: 0 0 var(--esp-4);
    padding: var(--esp-4);
    min-width: 0;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-m);
  }
  legend { padding: 0 var(--esp-2); font-weight: 600; }
  dl { margin: 0 0 var(--esp-3); }
  dt { font-weight: 600; }
  dd { margin: 0 0 var(--esp-2); }

  /* Plegables: flecha propia que gira al abrir (sin el triángulo nativo) */
  summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    min-height: var(--control-alto);
    cursor: pointer;
  }
  summary::-webkit-details-marker { display: none; }
  summary::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin: 0 3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .7;
    transform: rotate(-45deg);
    transition: transform var(--dur-rapida) var(--curva);
  }
  details[open] > summary::before { transform: rotate(45deg); }
  ::selection { background: var(--color-primario-sutil); color: var(--color-texto); }

  /* Foco: anillo de 2 px con separación de 2 px, siempre visible con teclado */
  :focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; }
  /* Los segmentos internos de fecha y hora no marcan :focus-visible en Chromium */
  input[type="date"]:focus,
  input[type="time"]:focus,
  input[type="datetime-local"]:focus,
  input[type="month"]:focus { outline: 2px solid var(--color-foco); outline-offset: 2px; }
}

@layer utilidades {
  /* `hidden` manda sobre cualquier `display` de las capas anteriores */
  [hidden] { display: none; }
  .solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .tabular-nums, .num { font-variant-numeric: tabular-nums; }
  .mono { font-variant-numeric: tabular-nums slashed-zero; letter-spacing: 0; }
  .tenue { color: var(--color-texto-3); }
  .ingreso { color: var(--color-positivo); }
  .egreso { color: var(--color-negativo); }

  /* Refuerzo que pone app.js cuando el foco llega con el teclado */
  .foco-forzado { outline: 2px solid var(--color-foco); outline-offset: 2px; }

  
  

  /* Movimiento reducido: sin desplazamientos ni animaciones */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms;
      animation-iteration-count: 1;
      transition-duration: .01ms;
      scroll-behavior: auto;
    }
  }

  @media print {
    .no-imprimir { display: none; }
  }
}