/* ==========================================================================
   Safira — base.css
   Reset, tipografía base, foco visible y las primitivas de layout.
   Requiere tokens.css cargado antes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  min-height: 100%;
  font-family: var(--fuente);
  font-size: var(--texto-base);
  font-weight: var(--peso-normal);
  line-height: var(--interlineado-normal);
  color: var(--tinta);
  background-color: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--borde);
  margin: var(--esp-6) 0;
}

fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

dialog { color: inherit; }

[hidden] { display: none !important; }

::selection {
  background: var(--petroleo-200);
  color: var(--petroleo-900);
}

/* --------------------------------------------------------------------------
   2. Tipografía
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .titulo {
  font-weight: var(--peso-negrita);
  line-height: var(--interlineado-justo);
  letter-spacing: var(--espaciado-letras-titulo);
  color: var(--tinta);
  text-wrap: balance;
}

h1, .titulo-1 { font-size: var(--texto-2xl); line-height: var(--interlineado-apretado); font-weight: var(--peso-extra); }
h2, .titulo-2 { font-size: var(--texto-xl); }
h3, .titulo-3 { font-size: var(--texto-lg); }
h4, .titulo-4 { font-size: var(--texto-md); font-weight: var(--peso-semi); }
h5, .titulo-5 { font-size: var(--texto-base); font-weight: var(--peso-semi); }
h6, .titulo-6 { font-size: var(--texto-sm); font-weight: var(--peso-semi); text-transform: uppercase; letter-spacing: var(--espaciado-letras-sello); color: var(--tinta-suave); }

.titulo-portada {
  font-size: var(--texto-3xl);
  font-weight: var(--peso-extra);
  line-height: var(--interlineado-apretado);
  letter-spacing: -0.025em;
}

p { text-wrap: pretty; }
p + p { margin-top: var(--esp-3); }

/* La "bajada": texto fino y aireado, como la bajada del logo */
.bajada {
  font-weight: var(--peso-normal);
  font-size: var(--texto-md);
  line-height: var(--interlineado-normal);
  color: var(--tinta-suave);
}

/* Sello: etiqueta chica en mayúsculas, para títulos de grupo */
.sello {
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-letras-sello);
  color: var(--tinta-suave);
}

strong, b { font-weight: var(--peso-semi); }
small, .texto-chico { font-size: var(--texto-sm); }
.texto-xs { font-size: var(--texto-xs); }
.texto-md { font-size: var(--texto-md); }
.texto-suave { color: var(--tinta-suave); }
.texto-tenue { color: var(--tinta-tenue); }
.texto-marca { color: var(--marca); }
.texto-exito { color: var(--exito); }
.texto-atencion { color: var(--atencion); }
.texto-error { color: var(--error); }
.texto-centrado { text-align: center; }
.texto-derecha { text-align: right; }
.texto-medio { font-weight: var(--peso-medio); }
.texto-semi { font-weight: var(--peso-semi); }
.texto-negrita { font-weight: var(--peso-negrita); }
.num { font-variant-numeric: tabular-nums; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

code, kbd, .mono {
  font-family: var(--fuente-mono);
  font-size: 0.875em;
}

code {
  background: var(--fondo-hundido);
  padding: 0.1em 0.4em;
  border-radius: var(--radio-xs);
  color: var(--petroleo-800);
}

/* --------------------------------------------------------------------------
   3. Enlaces
   -------------------------------------------------------------------------- */
a {
  color: var(--marca);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--marca) 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: var(--transicion);
}

a:hover {
  color: var(--marca-hover);
  text-decoration-color: currentColor;
}

a.discreto, .discreto a {
  color: inherit;
  text-decoration: none;
}

a.discreto:hover, .discreto a:hover { color: var(--marca); }

/* --------------------------------------------------------------------------
   4. Foco visible (igual para todo lo interactivo)
   -------------------------------------------------------------------------- */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--radio-xs);
}

/* Un título que recibe foco por programa (al cambiar de paso) no muestra anillo */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus,
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* Dentro de superficies oscuras el anillo va en arena */
.superficie-oscura :focus-visible,
.barra-lateral :focus-visible {
  outline-color: var(--color-arena);
}

/* Saltar al contenido (para teclado) */
.saltar {
  position: absolute;
  left: var(--esp-4);
  top: calc(-1 * var(--esp-20));
  z-index: var(--capa-aviso);
  padding: var(--esp-2) var(--esp-4);
  background: var(--marca);
  color: var(--tinta-inversa);
  border-radius: var(--radio-md);
  text-decoration: none;
  transition: top var(--dur-rapida) var(--curva);
}

.saltar:focus { top: var(--esp-4); }

/* --------------------------------------------------------------------------
   5. Accesibilidad y visibilidad
   -------------------------------------------------------------------------- */
.oculto-visualmente {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Punto de quiebre único: 56rem (896px). Debajo es "celular", arriba "escritorio". */
@media (max-width: 55.99rem) {
  .solo-escritorio { display: none !important; }
}

@media (min-width: 56rem) {
  .solo-celular { display: none !important; }
}

/* --------------------------------------------------------------------------
   6. Contenedores
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-amplio);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

.contenedor--angosto { max-width: var(--ancho-angosto); }
.contenedor--medio   { max-width: var(--ancho-medio); }
.contenedor--fluido  { max-width: none; }

@media (min-width: 56rem) {
  .contenedor { padding-inline: var(--esp-8); }
}

/* Separación vertical de secciones de página */
.seccion { padding-block: var(--esp-6); }
.seccion + .seccion { padding-top: 0; }

@media (min-width: 56rem) {
  .seccion { padding-block: var(--esp-8); }
}

/* --------------------------------------------------------------------------
   7. Pila (columna con separación) y Fila (horizontal)
   -------------------------------------------------------------------------- */
.pila {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.pila--1 { gap: var(--esp-1); }
.pila--2 { gap: var(--esp-2); }
.pila--3 { gap: var(--esp-3); }
.pila--4 { gap: var(--esp-4); }
.pila--6 { gap: var(--esp-6); }
.pila--8 { gap: var(--esp-8); }
.pila--12 { gap: var(--esp-12); }

.fila {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--esp-3);
}

.fila--2 { gap: var(--esp-2); }
.fila--4 { gap: var(--esp-4); }
.fila--6 { gap: var(--esp-6); }
.fila--envolver { flex-wrap: wrap; }
.fila--separar { justify-content: space-between; }
.fila--centrar { justify-content: center; }
.fila--derecha { justify-content: flex-end; }
.fila--arriba { align-items: flex-start; }
.fila--estirar { align-items: stretch; }
.fila--base { align-items: baseline; }

.crecer { flex: 1 1 auto; min-width: 0; }
.no-encoger { flex-shrink: 0; }
.empujar { margin-left: auto; }

/* --------------------------------------------------------------------------
   8. Grillas
   -------------------------------------------------------------------------- */
.grilla {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(var(--columnas, 1), minmax(0, 1fr));
}

.grilla--2 { --columnas: 2; }
.grilla--3 { --columnas: 3; }
.grilla--4 { --columnas: 4; }

/* Auto: tantas columnas como entren de un ancho mínimo */
.grilla--auto {
  grid-template-columns: repeat(auto-fill, minmax(var(--min-columna, 16rem), 1fr));
}

.grilla--auto-chica { --min-columna: 11rem; }
.grilla--auto-grande { --min-columna: 22rem; }

.grilla--6 { gap: var(--esp-6); }
.grilla--2-gap { gap: var(--esp-2); }

/* En celular las grillas numeradas colapsan a una o dos columnas */
@media (max-width: 55.99rem) {
  .grilla--3, .grilla--4 { --columnas: 2; }
  .grilla--2.grilla--apilar, .grilla--3.grilla--apilar, .grilla--4.grilla--apilar { --columnas: 1; }
}

@media (max-width: 30rem) {
  .grilla--3, .grilla--4 { --columnas: 1; }
}

.abarcar-2 { grid-column: span 2; }
.abarcar-todo { grid-column: 1 / -1; }

/* Ficha con barra lateral de contenido (ej. ficha del perro + panel de datos) */
.con-aparte {
  display: grid;
  gap: var(--esp-6);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56rem) {
  .con-aparte { grid-template-columns: minmax(0, 1fr) var(--ancho-aparte, 20rem); }
  .con-aparte--izquierda { grid-template-columns: var(--ancho-aparte, 20rem) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   9. Separadores y utilidades de espacio
   -------------------------------------------------------------------------- */
.separador {
  border: 0;
  border-top: 1px solid var(--borde);
  margin: 0;
}

.separador--espaciado { margin-block: var(--esp-6); }

.mt-2 { margin-top: var(--esp-2); }
.mt-4 { margin-top: var(--esp-4); }
.mt-6 { margin-top: var(--esp-6); }
.mt-8 { margin-top: var(--esp-8); }
.mb-2 { margin-bottom: var(--esp-2); }
.mb-4 { margin-bottom: var(--esp-4); }
.mb-6 { margin-bottom: var(--esp-6); }
.p-4 { padding: var(--esp-4); }
.p-6 { padding: var(--esp-6); }
.ancho-total { width: 100%; }

/* --------------------------------------------------------------------------
   10. Estructura de aplicación: las dos conchas
   -------------------------------------------------------------------------- */

/* Escritorio (empleado y dueña): barra lateral fija + contenido */
.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;   /* barra, contenido, firma */
}

.app__contenido {
  min-width: 0;
  padding-bottom: var(--esp-4);
}

/* La firma de desarrollo es la última fila de la cáscara: queda pegada al final de la página.
   En el celular del cliente, la barra inferior fija va por encima: la firma le deja su lugar. */
.app--celular .pie-firma { padding-bottom: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom) + var(--esp-1)); }

@media (min-width: 56rem) {
  .app--escritorio {
    grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .app--escritorio .app__contenido { padding-bottom: var(--esp-6); }
  .app--escritorio .pie-firma { grid-column: 2; }
}

/* Celular (cliente): contenido angosto + barra inferior */
.app--celular .app__contenido {
  width: 100%;
  max-width: var(--ancho-angosto);
  margin-inline: auto;
}

@media (min-width: 56rem) {
  /* En una compu, la vista de cliente se ve como un celular centrado, sin romperse */
  .app--celular { background: var(--fondo-hundido); }
  .app--celular .app__contenido {
    background: var(--fondo);
    min-height: 100vh;
    box-shadow: var(--sombra-0);
  }
}