/* componentes.css — botón, campo, aviso, tarjeta, toast, estado vacío, skeleton, menú.
   Solo transform y opacity se animan (<= 300 ms). Hover únicamente bajo
   (hover: hover) and (pointer: fine). Colores: solo tokens. */

/* ---- Íconos del sprite /img/iconos.svg ---- */
.icono {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.icono--sm {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---- Marca (logo + nombre), usada en el shell y en el acceso ---- */
.marca {
  display: flex;
  align-items: center;
  min-height: var(--tactil);
  gap: var(--esp-3);
  color: var(--tinta-marca);
  font-size: var(--texto-md);
  font-weight: var(--peso-negro);
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* El sello es el monograma "SS" (disco crema + letras doradas, símbolo #logo del sprite). */
.marca__sello {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

.marca__sello .icono {
  width: 100%;
  height: 100%;
}

/* ---- Botón "con labio" (estilo Duolingo) ----
   Estructura: <button class="boton"><span class="boton__cara">…</span></button>.
   El labio es el fondo del botón; al presionar la cara baja encima de él. */
.boton {
  --cara: var(--acento);
  --cara-texto: var(--blanco);
  --cara-borde: transparent;
  --labio-color: var(--acento-labio);
  --cara-hover: var(--acento-hover);
  display: inline-block;
  padding: 0 0 var(--labio);
  border: 0;
  border-radius: var(--radio-md);
  background: var(--labio-color);
  cursor: pointer;
  text-decoration: none;
  font-weight: var(--peso-extra);
}

.boton--bloque {
  display: block;
  width: 100%;
}

.boton__cara {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--alto-control);
  padding: 0 var(--esp-6);
  border: 2px solid var(--cara-borde);
  border-radius: var(--radio-md);
  background: var(--cara);
  color: var(--cara-texto);
  font-size: var(--texto-base);
  font-weight: var(--peso-extra);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  /* Liberación más lenta que la presión: se siente respuesta inmediata. */
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.boton:active .boton__cara {
  transform: translateY(var(--labio));
  transition-duration: var(--dur-presion);
}

.boton--secundario {
  --cara: var(--superficie);
  --cara-texto: var(--rosa-700);
  --cara-borde: var(--rosa-300);
  --labio-color: var(--rosa-300);
}

/* Botón crema (C-28): el crema del logo en los botones NEUTROS (cancelar, cerrar, volver,
   descargar Excel). Se suma a .boton--secundario. Los primarios y el resto no cambian. */
.boton--crema {
  --cara: var(--crema-200);
  --cara-texto: var(--tinta-marca);
  --cara-borde: var(--crema-400);
  --labio-color: var(--crema-400);
}

.boton--peligro {
  --cara: var(--peligro);
  --cara-hover: var(--peligro-labio);
  --labio-color: var(--peligro-labio);
}

/* Botón de texto: sin cara ni labio (acciones terciarias: volver, cerrar sesión). */
.boton--texto {
  --cara: transparent;
  --cara-texto: var(--rosa-700);
  --labio-color: transparent;
  padding-bottom: 0;
}

.boton--texto:active .boton__cara {
  transform: none;
  opacity: 0.7;
}

.boton--chico .boton__cara {
  min-height: var(--tactil);
  padding: 0 var(--esp-4);
  font-size: var(--texto-sm);
}

.boton:disabled,
.boton[aria-disabled="true"] {
  cursor: not-allowed;
  --labio-color: var(--rosa-200);
}

.boton:disabled .boton__cara,
.boton[aria-disabled="true"] .boton__cara {
  opacity: 0.55;
}

.boton:disabled:active .boton__cara,
.boton[aria-disabled="true"]:active .boton__cara {
  transform: none;
}

.boton--texto:disabled,
.boton--texto[aria-disabled="true"] {
  --labio-color: transparent;
}

/* Cargando: ícono girando + el texto cambia (nunca depende solo de la animación). */
.boton[aria-busy="true"] {
  cursor: progress;
}

.boton__giro {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radio-pildora);
}

.boton[aria-busy="true"] .boton__giro {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .boton[aria-busy="true"] .boton__giro {
    animation: girar var(--dur-giro) linear infinite;
  }
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Campo de texto ---- */
.campo {
  display: grid;
  gap: var(--esp-2);
}

.campo__etiqueta {
  color: var(--titulo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-extra);
}

.campo__control {
  position: relative;
}

.campo__entrada {
  display: block;
  width: 100%;
  height: var(--alto-control);
  padding: 0 var(--esp-4);
  border: 2px solid var(--borde-control);
  border-radius: var(--radio-md);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--texto-base);
  font-weight: var(--peso-fuerte);
}

.campo__control--con-accion .campo__entrada {
  padding-right: calc(var(--tactil) + var(--esp-2));
}

.campo__entrada::placeholder {
  color: var(--texto-suave);
  font-weight: var(--peso-normal);
}

.campo__entrada:focus-visible {
  border-color: var(--foco);
  outline-offset: 1px;
}

.campo__entrada[aria-invalid="true"] {
  border-color: var(--peligro);
}

.campo__entrada:-webkit-autofill {
  -webkit-text-fill-color: var(--texto);
  box-shadow: 0 0 0 100px var(--superficie) inset;
}

.campo__ayuda,
.campo__error {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  line-height: 1.4;
}

.campo__ayuda {
  color: var(--texto-suave);
}

.campo__error {
  color: var(--peligro);
  font-weight: var(--peso-fuerte);
}

.campo__accion {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: var(--alto-control);
  height: var(--alto-control);
  padding: 0;
  border: 0;
  border-radius: var(--radio-md);
  background: transparent;
  color: var(--tinta-marca);
  cursor: pointer;
}

/* ---- Aviso en línea (errores del formulario, avisos persistentes) ---- */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-md);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  line-height: 1.4;
}

.aviso--error {
  background: var(--peligro-fondo);
  color: var(--peligro);
}

.aviso--alerta {
  background: var(--alerta-fondo);
  color: var(--alerta);
}

.aviso--exito {
  background: var(--exito-fondo);
  color: var(--exito);
}

.aviso--info {
  background: var(--info-fondo);
  color: var(--info);
}

.aviso .icono {
  margin-top: 0.05rem;
}

/* ---- Tarjeta ---- */
.tarjeta {
  padding: var(--esp-8);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

/* ---- Estado vacío ---- */
.vacio {
  display: grid;
  justify-items: center;
  gap: var(--esp-3);
  padding: var(--esp-10) var(--esp-6);
  text-align: center;
}

.vacio__imagen {
  width: min(16rem, 70%);
  height: auto;
  margin-bottom: var(--esp-2);
}

.vacio__titulo {
  font-size: var(--texto-lg);
}

.vacio__texto {
  max-width: 34ch;
  color: var(--texto-suave);
}

/* ---- Skeleton (carga) ---- */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-sm);
  background: var(--rosa-100);
}

.skeleton--linea {
  height: 1rem;
}

.skeleton--titulo {
  height: 2rem;
  width: 55%;
}

.skeleton--bloque {
  height: 9rem;
  border-radius: var(--radio-lg);
}

@media (prefers-reduced-motion: no-preference) {
  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--rosa-50), transparent);
    transform: translateX(-100%);
    animation: brillo var(--dur-brillo) ease-in-out infinite;
  }
}

@keyframes brillo {
  to {
    transform: translateX(100%);
  }
}

/* ---- Toast ---- */
.toasts {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-4);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  max-width: 26rem;
  padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-4);
  border-radius: var(--radio-md);
  background: var(--tinta);
  color: var(--blanco);
  box-shadow: var(--sombra-flotante);
  font-weight: var(--peso-fuerte);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.toast[data-visible="true"] {
  opacity: 1;
  transform: none;
}

.toast__icono {
  color: var(--rosa-bebe);
}

.toast--error .toast__icono {
  color: var(--rosa-300);
}

.toast__cerrar {
  display: grid;
  place-items: center;
  width: var(--tactil);
  height: var(--tactil);
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--blanco);
  cursor: pointer;
}

.toast :focus-visible {
  outline-color: var(--rosa-bebe);
}

@media (min-width: 48rem) {
  .toasts {
    left: auto;
    align-items: flex-end;
  }
}

/* ---- Avatar y menú de usuaria ---- */
.avatar {
  display: grid;
  place-items: center;
  width: var(--tactil);
  height: var(--tactil);
  border-radius: var(--radio-pildora);
  background: var(--rosa-100);
  color: var(--tinta-marca);
  font-weight: var(--peso-negro);
  font-size: var(--texto-sm);
  flex: none;
}

.menu {
  position: relative;
}

.menu__boton {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  min-height: 3.25rem;
  padding: var(--esp-1) var(--esp-2);
  border: 0;
  border-radius: var(--radio-md);
  background: transparent;
  color: var(--tinta-marca);
  text-align: left;
  cursor: pointer;
}

.menu__nombre {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.menu__nombre strong {
  overflow: hidden;
  font-weight: var(--peso-extra);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__nombre small {
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}

.menu__panel {
  position: absolute;
  z-index: var(--z-menu);
  bottom: calc(100% + var(--esp-2));
  left: 0;
  width: max(100%, 15rem);
  padding: var(--esp-2);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  box-shadow: var(--sombra-flotante);
  transform-origin: bottom left;
  /* Nunca desde scale(0): entrada mínima 0.95. */
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: transform var(--dur-rapida) var(--ease-out), opacity var(--dur-rapida) var(--ease-out);
}

.menu__panel[data-abierto="true"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.menu__cabecera {
  display: grid;
  padding: var(--esp-3) var(--esp-3) var(--esp-2);
  color: var(--texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  overflow-wrap: anywhere;
}

.menu__cabecera strong {
  color: var(--titulo);
  font-size: var(--texto-base);
  font-weight: var(--peso-extra);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  min-height: var(--tactil);
  padding: 0 var(--esp-3);
  border: 0;
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--tinta-marca);
  font-weight: var(--peso-extra);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.insignia {
  display: inline-block;
  padding: 0 var(--esp-2);
  border-radius: var(--radio-pildora);
  background: var(--rosa-100);
  color: var(--tinta-marca);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
}

/* ==========================================================================
   Componentes compartidos por las pantallas de negocio.
   ========================================================================== */

.icono--xs {
  width: 1rem;
  height: 1rem;
}

/* Botón de texto en color de peligro (acciones destructivas secundarias). */
.boton--texto-peligro {
  --cara: transparent;
  --cara-texto: var(--peligro);
  --labio-color: transparent;
  padding-bottom: 0;
}

.boton--texto-peligro:active .boton__cara {
  transform: none;
  opacity: 0.7;
}

.boton--texto-peligro:disabled,
.boton--texto-peligro[aria-disabled="true"] {
  --labio-color: transparent;
}

/* ---- Insignias (siempre con texto; el color solo acompaña) ---- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-height: 1.5rem;
  line-height: 1.2;
  white-space: nowrap;
}

.insignia--exito {
  background: var(--exito-fondo);
  color: var(--exito);
}

.insignia--alerta {
  background: var(--alerta-fondo);
  color: var(--alerta);
}

.insignia--peligro {
  background: var(--peligro-fondo);
  color: var(--peligro);
}

.insignia--neutra {
  background: var(--rosa-50);
  color: var(--tinta-suave);
}

.insignia--vos {
  background: var(--acento);
  color: var(--blanco);
}

.insignia__punto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radio-pildora);
  background: currentColor;
}

/* ---- Aviso: contenido con varias líneas y enlace de acción ---- */
.aviso__texto {
  display: grid;
  gap: var(--esp-1);
  min-width: 0;
}

.aviso__titulo {
  font-weight: var(--peso-negro);
}

.aviso__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-height: var(--tactil);
  color: inherit;
  font-weight: var(--peso-negro);
}

/* ---- Skeleton: variantes para listas ---- */
.skeleton--circulo {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radio-pildora);
  flex: none;
}

.skeleton--corta {
  width: 60%;
}

/* ---- Chips seleccionables (radio-grupo nativo: flechas para moverse) ---- */
.chips {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.chips__leyenda {
  padding: 0;
  color: var(--titulo);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
  letter-spacing: 0.02em;
}

.chips__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.chip__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip__cara {
  display: inline-flex;
  align-items: center;
  min-height: var(--tactil);
  padding: 0 var(--esp-4);
  border: 2px solid var(--borde-control);
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  color: var(--tinta-marca);
  font-size: var(--texto-sm);
  font-weight: var(--peso-extra);
  /* Liberación más lenta que la presión (asimétrico). */
  transition: transform var(--dur-base) var(--ease-out);
}

.chip__radio:checked + .chip__cara {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--blanco);
}

.chip__radio:focus-visible + .chip__cara {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* ---- Presión uniforme (C-21): todo control presionable sin "labio" responde igual.
   Los botones con labio (.boton) tienen su propia mecánica más arriba. ---- */
.chip__cara,
.periodo__cara,
.paso,
.etiqueta,
.resumen,
.atajo,
.pestana,
.nav__enlace,
.leyenda__fila,
.interruptor,
.toast__cerrar {
  transition: transform var(--dur-base) var(--ease-out);
}

.chip:active .chip__cara,
.periodo:active .periodo__cara,
.paso:active,
.etiqueta:active,
.resumen:active,
.atajo:active,
.pestana:active,
.nav__enlace:active,
.leyenda__fila:active,
.interruptor:active,
.toast__cerrar:active {
  transform: scale(0.97);
  transition-duration: var(--dur-presion);
}

/* ---- Entrada del contenido que reemplaza a un esqueleto (C-21, ui/transicion.js).
   Solo en la primera carga de una vista; la clase se quita al terminar. ---- */
@media (prefers-reduced-motion: no-preference) {
  .entra {
    animation: entra var(--dur-base) var(--ease-out) both;
  }

  .entra--escalonada > * {
    animation: entra var(--dur-base) var(--ease-out) both;
  }

  .entra.entra--escalonada {
    animation: none;
  }

  .entra--escalonada > :nth-child(2) {
    animation-delay: var(--escalon);
  }

  .entra--escalonada > :nth-child(3) {
    animation-delay: var(--escalon-2);
  }

  .entra--escalonada > :nth-child(n + 4) {
    animation-delay: var(--escalon-3);
  }

  .toast--exito[data-visible="true"] .toast__icono {
    animation: pop var(--dur-base) var(--ease-out) both;
  }
}

@keyframes entra {
  from {
    opacity: 0;
    transform: translateY(0.375rem);
  }
}

@keyframes entra-fundido {
  from {
    opacity: 0;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* ---- Diálogo modal (<dialog> + showModal) ---- */
.dialogo {
  width: min(30rem, calc(100vw - 2 * var(--esp-4)));
  max-height: calc(100dvh - 2 * var(--esp-4));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radio-lg);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-flotante);
  overflow: auto;
  overscroll-behavior: contain;
}

.dialogo::backdrop {
  background: var(--velo);
}

.dialogo__caja {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-6);
}

.dialogo__imagen {
  width: 7.5rem;
  height: auto;
  margin: calc(var(--esp-2) * -1) auto 0;
}

.dialogo__titulo {
  position: relative; /* ancla de los destellos de la bienvenida */
  font-size: var(--texto-lg);
}

.dialogo__descripcion,
.dialogo__cuerpo {
  color: var(--texto);
}

.dialogo__cuerpo {
  display: grid;
  gap: var(--esp-3);
}

.dialogo__error:empty {
  display: none;
}

.dialogo__pie,
.dialogo__acciones {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: var(--esp-3);
}

.dialogo__pie > [hidden] {
  display: none;
}

@media (max-width: 29.99rem) {
  .dialogo__pie,
  .dialogo__acciones {
    flex-direction: column-reverse;
  }

  .dialogo__pie .boton,
  .dialogo__acciones .boton {
    width: 100%;
  }
}

/* Entrada scale(.96) + opacidad 200 ms; salida 150 ms (más rápida que la entrada). */
@media (prefers-reduced-motion: no-preference) {
  .dialogo[open] {
    animation: dialogo-entra var(--dur-base) var(--ease-out);
  }

  .dialogo[open]::backdrop {
    animation: velo-entra var(--dur-base) var(--ease-out);
  }

  .dialogo[data-saliendo="true"] {
    animation: dialogo-sale var(--dur-rapida) var(--ease-out) forwards;
  }

  .dialogo[data-saliendo="true"]::backdrop {
    animation: velo-sale var(--dur-rapida) var(--ease-out) forwards;
  }
}

/* Movimiento reducido: solo un fundido de opacidad (sin escala). */
@media (prefers-reduced-motion: reduce) {
  .dialogo[open] {
    animation-name: velo-entra;
    animation-duration: var(--dur-rapida) !important;
  }

  .dialogo[data-saliendo="true"] {
    animation-name: velo-sale;
    animation-duration: var(--dur-rapida) !important;
    animation-fill-mode: forwards;
  }
}

@keyframes dialogo-entra {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes dialogo-sale {
  to {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes velo-entra {
  from {
    opacity: 0;
  }
}

@keyframes velo-sale {
  to {
    opacity: 0;
  }
}

/* ---- Hover: solo con puntero fino y capaz de hover ---- */
@media (hover: hover) and (pointer: fine) {
  .boton--texto-peligro:not(:disabled):not([aria-disabled="true"]):hover .boton__cara {
    background: var(--peligro-fondo);
  }

  .chip__radio:not(:checked):hover + .chip__cara {
    background: var(--rosa-100);
  }

  .boton:not(.boton--secundario):not(.boton--texto):not(.boton--texto-peligro):not(:disabled):not([aria-disabled="true"]):hover .boton__cara {
    background: var(--cara-hover);
  }

  .boton--secundario:not(:disabled):hover .boton__cara,
  .boton--texto:not(:disabled):hover .boton__cara {
    background: var(--rosa-100);
  }

  .boton--secundario.boton--crema:not(:disabled):hover .boton__cara {
    background: var(--crema-300);
  }

  .campo__entrada:hover:not(:focus-visible):not([aria-invalid="true"]) {
    border-color: var(--tinta-marca);
  }

  .campo__accion:hover,
  .menu__boton:hover,
  .menu__item:hover {
    background: var(--rosa-100);
  }

  .toast__cerrar:hover {
    background: var(--tinta-marca);
  }
}

/* ---- Movimiento reducido: sin escalas ni traslados; feedback por opacidad ---- */
@media (prefers-reduced-motion: reduce) {
  .boton:active .boton__cara {
    transform: none;
    opacity: 0.75;
  }

  .chip:active .chip__cara,
  .periodo:active .periodo__cara,
  .paso:active,
  .etiqueta:active,
  .resumen:active,
  .atajo:active,
  .pestana:active,
  .nav__enlace:active,
  .leyenda__fila:active,
  .interruptor:active,
  .toast__cerrar:active {
    transform: none;
    opacity: 0.75;
  }

  .entra,
  .entra--escalonada > * {
    animation: entra-fundido var(--dur-rapida) var(--ease-out) both !important;
  }

  .toast {
    transform: none;
  }

  .menu__panel {
    transform: none;
  }
}

/* ---- Marca "Sabrina · Estudio Contable" (re-marca C-18): nombre + bajada ---- */
.marca__nombre {
  display: grid;
  line-height: 1.1;
}

.marca__nombre strong {
  font-weight: var(--peso-negro);
}

.marca__nombre small {
  color: var(--texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
  letter-spacing: 0.02em;
}