/* Base mínima. El resto del aspecto viaja dentro de app.js */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #F5F4F0; -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #252626; }

/* Los controles nativos no heredan la tipografía: se les impone */
input, select, textarea, button, optgroup, option {
  font-family: inherit; font-size: inherit; line-height: inherit;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid #E8B24D; outline-offset: 1px;
}
::placeholder { color: #9B9C9C; opacity: 1; }
noscript { display: block; padding: 40px; text-align: center; color: #6E7070; }


/* ══════════════════════════════════════════════════════════════
   AJUSTES DE PANTALLA

   Casi todo el diseño viaja en el programa, que ya distingue entre
   móvil, tablet y escritorio. Aquí quedan las reglas que el programa
   no puede aplicar: comportamiento del navegador y de los controles.
   ══════════════════════════════════════════════════════════════ */

/* En iPhone, un campo con letra menor de 16px hace que el navegador
   acerque la pantalla al tocarlo. Se evita subiendo el tamaño. */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Las tablas anchas se desplazan solas y con inercia en el teléfono */
.tabla-ancha { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Barras de desplazamiento discretas, sin robar espacio */
* { scrollbar-width: thin; scrollbar-color: #D8D5CE transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #D8D5CE; border-radius: 5px; }
*::-webkit-scrollbar-thumb:hover { background: #C3BFB6; }

/* El área táctil mínima cómoda es de unos 40px */
@media (pointer: coarse) {
  button, select, input[type="checkbox"], input[type="radio"] { min-height: 40px; }
  input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
}

/* Respuesta al tacto y al puntero, sin animaciones que distraigan */
button { transition: filter .12s ease, opacity .12s ease; }
button:not(:disabled):hover { filter: brightness(0.97); }
button:not(:disabled):active { filter: brightness(0.93); }
select, input, textarea { transition: border-color .12s ease; }

/* Foco visible para quien navega con teclado */
:focus-visible { outline: 2px solid #E8B24D; outline-offset: 2px; border-radius: 4px; }

/* Los números en columna se comparan mejor con ancho fijo */
table { font-variant-numeric: tabular-nums; }

/* Nada de resaltados azules al tocar en el móvil */
* { -webkit-tap-highlight-color: transparent; }

/* Quien pide menos movimiento, no lo recibe */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Al imprimir, fuera la navegación */
@media print {
  nav, aside, button { display: none !important; }
  body { background: #fff; }
}