/* =====================================================================
   Fuente
   Manrope variable (SIL Open Font License, ver wwwroot/fonts/OFL.txt).
   ===================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* =====================================================================
   Tokens
   Variables propias (--yp-*) y variables de Bootstrap que las heredan.
   Las variantes -rgb son las que Bootstrap usa en enlaces y utilidades
   de color (text-success, text-bg-danger, etc.).
   ===================================================================== */

:root {
  /* Paleta de Ybridio (ybridio.com): gris claro de fondo, blanco en tarjetas, negro para texto y botones principales,
     y el azul Ybridio como color de marca. Positivo, negativo y alerta son colores de significado. */
  --yp-fondo: #F5F5F5;
  --yp-superficie: #FFFFFF;
  --yp-tinta: #1A1A1A;
  --yp-texto-2: #6B6B6B;
  --yp-borde: #E7E7E7;
  /* Azul Ybridio (--e-global-color-primary del sitio): tarjeta del margen, enlaces, foco y etiquetas. */
  --yp-marca: #2B4E81;
  /* Fondo de etiquetas: el azul Ybridio al 10 % sobre blanco; el texto en --yp-marca da 7.13:1. */
  --yp-marca-suave: #EAEDF2;
  --yp-positivo: #1E7F55;
  --yp-negativo: #B8403A;
  --yp-alerta: #A15C07;
  /* Botón "Continuar con Google": colores oficiales de la guía de marca de Google; no cambian con la paleta. */
  --yp-google-fondo: #FFFFFF;
  --yp-google-borde: #747775;
  --yp-google-texto: #1F1F1F;
  --yp-radio-hero: 28px;
  --yp-radio-contenedor: 20px;
  --yp-radio-control: 12px;
  --yp-accion-positiva-fondo: color-mix(in srgb, var(--yp-positivo) 14%, white);
  --yp-accion-positiva-fondo-hover: color-mix(in srgb, var(--yp-positivo) 24%, white);
  --yp-accion-neutra-fondo: var(--yp-fondo);
  --yp-accion-neutra-fondo-hover: color-mix(in srgb, var(--yp-tinta) 10%, var(--yp-fondo));
  --yp-nav-movil-alto: 64px;
  /* Un poco más oscuro que --yp-fondo: el selector se distingue tanto sobre la página como dentro de tarjetas. */
  --yp-segmento-fondo: color-mix(in srgb, var(--yp-tinta) 7%, var(--yp-fondo));

  --bs-body-bg: var(--yp-fondo);
  --bs-body-bg-rgb: 245, 245, 245;
  --bs-body-color: var(--yp-tinta);
  --bs-body-color-rgb: 26, 26, 26;
  --bs-body-font-family: "Manrope", system-ui, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-secondary-color: var(--yp-texto-2);
  --bs-secondary-color-rgb: 107, 107, 107;
  --bs-border-color: var(--yp-borde);
  --bs-border-radius: 12px;
  --bs-link-color: var(--yp-marca);
  --bs-link-color-rgb: 43, 78, 129;
  --bs-link-hover-color: var(--yp-marca);
  --bs-link-hover-color-rgb: 43, 78, 129;
  --bs-success: var(--yp-positivo);
  --bs-success-rgb: 30, 127, 85;
  --bs-danger: var(--yp-negativo);
  --bs-danger-rgb: 184, 64, 58;

  /* Alertas (.alert-info, -success, -danger, -warning) y demás componentes "subtle" de Bootstrap 5.3. */
  --bs-info-bg-subtle: var(--yp-fondo);
  --bs-info-border-subtle: var(--yp-fondo);
  --bs-info-text-emphasis: var(--yp-tinta);
  --bs-success-bg-subtle: color-mix(in srgb, var(--yp-positivo) 12%, white);
  --bs-success-border-subtle: color-mix(in srgb, var(--yp-positivo) 12%, white);
  --bs-success-text-emphasis: color-mix(in srgb, var(--yp-positivo) 80%, black);
  --bs-danger-bg-subtle: color-mix(in srgb, var(--yp-negativo) 12%, white);
  --bs-danger-border-subtle: color-mix(in srgb, var(--yp-negativo) 12%, white);
  --bs-danger-text-emphasis: color-mix(in srgb, var(--yp-negativo) 80%, black);
  --bs-warning-bg-subtle: color-mix(in srgb, var(--yp-alerta) 12%, white);
  --bs-warning-border-subtle: color-mix(in srgb, var(--yp-alerta) 12%, white);
  --bs-warning-text-emphasis: color-mix(in srgb, var(--yp-alerta) 80%, black);
}

/* =====================================================================
   Tipografía
   ===================================================================== */

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
  line-height: 1.5;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  text-transform: none;
  letter-spacing: normal;
}

h1, .h1 {
  font-size: 1.75rem;
  font-weight: 700;
}

h2, .h2 {
  font-size: 1.25rem;
  font-weight: 700;
}

.yp-secundario {
  font-size: 0.875rem;
  color: var(--yp-texto-2);
}

/* =====================================================================
   Montos
   ===================================================================== */

.yp-monto {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.yp-monto-positivo {
  color: var(--yp-positivo);
}

.yp-monto-negativo {
  color: var(--yp-negativo);
}

/* =====================================================================
   Botones y foco
   ===================================================================== */

.btn-primary {
  --bs-btn-color: var(--yp-superficie);
  --bs-btn-bg: var(--yp-tinta);
  --bs-btn-border-color: var(--yp-tinta);
  --bs-btn-hover-color: var(--yp-superficie);
  --bs-btn-hover-bg: color-mix(in srgb, var(--yp-tinta) 85%, var(--yp-superficie));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--yp-tinta) 85%, var(--yp-superficie));
  --bs-btn-active-color: var(--yp-superficie);
  --bs-btn-active-bg: color-mix(in srgb, var(--yp-tinta) 85%, var(--yp-superficie));
  --bs-btn-active-border-color: color-mix(in srgb, var(--yp-tinta) 85%, var(--yp-superficie));
  --bs-btn-disabled-color: var(--yp-superficie);
  --bs-btn-disabled-bg: var(--yp-tinta);
  --bs-btn-disabled-border-color: var(--yp-tinta);
  border-radius: 999px;
  box-shadow: none;
}

.btn-outline-secondary {
  --bs-btn-color: var(--yp-tinta);
  --bs-btn-border-color: var(--yp-borde);
  --bs-btn-hover-color: var(--yp-tinta);
  --bs-btn-hover-bg: var(--yp-borde);
  --bs-btn-hover-border-color: var(--yp-borde);
  --bs-btn-active-color: var(--yp-tinta);
  --bs-btn-active-bg: var(--yp-borde);
  --bs-btn-active-border-color: var(--yp-borde);
  --bs-btn-disabled-color: var(--yp-texto-2);
  --bs-btn-disabled-border-color: var(--yp-borde);
  border-radius: 999px;
}

/* Recurrentes (Reanudar), Metas (Retirar) y la portada usan .btn-outline-primary; sin esto quedaría en el azul de Bootstrap. */
.btn-outline-primary {
  --bs-btn-color: var(--yp-tinta);
  --bs-btn-border-color: var(--yp-tinta);
  --bs-btn-hover-color: var(--yp-superficie);
  --bs-btn-hover-bg: var(--yp-tinta);
  --bs-btn-hover-border-color: var(--yp-tinta);
  --bs-btn-active-color: var(--yp-superficie);
  --bs-btn-active-bg: var(--yp-tinta);
  --bs-btn-active-border-color: var(--yp-tinta);
  border-radius: 999px;
}

/* .btn-success fija sus colores en la clase; se alinea con --yp-positivo ("Pagado"/"Recibido"). */
.btn-success {
  --bs-btn-bg: var(--yp-positivo);
  --bs-btn-border-color: var(--yp-positivo);
  --bs-btn-hover-bg: color-mix(in srgb, var(--yp-positivo) 85%, var(--yp-tinta));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--yp-positivo) 85%, var(--yp-tinta));
  --bs-btn-active-bg: color-mix(in srgb, var(--yp-positivo) 85%, var(--yp-tinta));
  --bs-btn-active-border-color: color-mix(in srgb, var(--yp-positivo) 85%, var(--yp-tinta));
}

/* Botón de solo icono para las acciones de fila; siempre lleva aria-label y title. */
.yp-btn-icono {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  text-decoration: none;
}

.yp-btn-icono:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.yp-btn-icono-positivo {
  background-color: var(--yp-accion-positiva-fondo);
  color: var(--yp-positivo);
}

.yp-btn-icono-positivo:hover,
.yp-btn-icono-positivo:focus-visible {
  background-color: var(--yp-accion-positiva-fondo-hover);
  color: var(--yp-positivo);
}

.yp-btn-icono-neutro {
  background-color: var(--yp-accion-neutra-fondo);
  color: var(--yp-tinta);
}

.yp-btn-icono-neutro:hover,
.yp-btn-icono-neutro:focus-visible {
  background-color: var(--yp-accion-neutra-fondo-hover);
  color: var(--yp-tinta);
}

/* Recibo ya registrado en el periodo: verde sólido, enlaza al movimiento. */
.yp-btn-icono-hecho {
  background-color: var(--yp-positivo);
  color: var(--yp-superficie);
}

.yp-btn-icono-hecho:hover,
.yp-btn-icono-hecho:focus-visible {
  background-color: color-mix(in srgb, var(--yp-positivo) 85%, var(--yp-tinta));
  color: var(--yp-superficie);
}

/* Deshabilitado no cambia de fondo al pasar el mouse. */
.yp-btn-icono-positivo:disabled:hover {
  background-color: var(--yp-accion-positiva-fondo);
}

.yp-btn-icono-neutro:disabled:hover {
  background-color: var(--yp-accion-neutra-fondo);
}

/* Botón con borde, icono y texto (Pausar/Reanudar en Editar recurrente). */
.yp-btn-con-icono {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Enlace rojo con icono y texto (Eliminar en las pantallas de edición). */
.yp-enlace-eliminar {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--yp-negativo);
  font-weight: 600;
  text-decoration: none;
}

.yp-enlace-eliminar:hover {
  color: var(--yp-negativo);
  text-decoration: underline;
}

/* Foco visible en todos los controles: contorno en el azul Ybridio en lugar del resplandor de Bootstrap. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.form-control:focus,
.form-select:focus,
.form-check-input:focus-visible {
  outline: 2px solid var(--yp-marca);
  outline-offset: 2px;
  box-shadow: none;
}

/* =====================================================================
   Formularios
   ===================================================================== */

.form-control,
.form-select {
  background-color: var(--yp-fondo);
  border-color: transparent;
  border-radius: var(--yp-radio-control);
  min-height: 44px;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--yp-fondo);
  border-color: var(--yp-tinta);
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Campos de dinero: el "$" y el campo se ven como una sola pieza (Bootstrap ya redondea solo
   las esquinas exteriores del grupo) y el contorno de foco rodea el grupo completo. */
.yp-grupo-monto > .input-group-text {
  background-color: var(--yp-fondo);
  color: var(--yp-texto-2);
  border-color: transparent;
  border-radius: var(--yp-radio-control);
  padding-right: 0.25rem;
}

.yp-grupo-monto > .form-control {
  border-radius: var(--yp-radio-control);
}

.yp-grupo-monto > .form-control:focus {
  outline: none;
  border-color: transparent;
}

.yp-grupo-monto:focus-within {
  outline: 2px solid var(--yp-marca);
  outline-offset: 2px;
  border-radius: var(--yp-radio-control);
}

/* Campos bloqueados: borde punteado y texto secundario para distinguirlos de los editables. */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: transparent;
  border: 1px dashed var(--yp-borde);
  color: var(--yp-texto-2);
  cursor: not-allowed;
}

/* Sin la flecha de lista: un select bloqueado no se despliega. */
.form-select:disabled {
  background-image: none;
}

/* =====================================================================
   Avisos dentro de formularios y tarjetas
   ===================================================================== */

.yp-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  background-color: var(--yp-fondo);
  color: var(--yp-tinta);
  border: 0;
  border-radius: var(--yp-radio-control);
  font-size: 0.9375rem;
}

.yp-aviso > svg {
  flex: 0 0 auto;
  color: var(--yp-texto-2);
  margin-top: 0.0625rem;
}

/* Sugerencias de recibos en el alta de movimientos: cada fila es un botón que liga el movimiento. */
.yp-sugerencias-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
}

.yp-sugerencias-titulo {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.yp-sugerencias-lista {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yp-sugerencia {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--yp-superficie);
  color: var(--yp-tinta);
  border: 1px solid var(--yp-borde);
  border-radius: var(--yp-radio-control);
  text-align: left;
}

.yp-sugerencia:hover {
  border-color: var(--yp-tinta);
}

.yp-sugerencia:focus-visible {
  outline: 2px solid var(--yp-marca);
  outline-offset: 2px;
}

.yp-sugerencia-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.yp-sugerencia-nombre {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.yp-sugerencia-vencido {
  color: var(--yp-negativo);
}

.yp-sugerencia-aviso {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
}

.yp-sugerencia-quitar {
  flex: 0 0 auto;
}

/* =====================================================================
   Selector de opciones (Gasto / Ingreso / Transferencia)
   Los inputs radio siguen ocultos con .btn-check de Bootstrap; el estilo va en sus etiquetas.
   ===================================================================== */

.yp-segmento {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background-color: var(--yp-segmento-fondo);
  border: 0;
  border-radius: 999px;
}

.yp-segmento-opcion {
  flex: 1 1 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.375rem 0.75rem;
  background-color: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--yp-texto-2);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

/* Variante secundaria (Gastos / Ingresos en el Resumen): del ancho de su contenido y alineada a la izquierda. */
.yp-segmento-chico {
  width: fit-content;
  max-width: 100%;
}

.yp-segmento-chico .yp-segmento-opcion {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0.25rem 0.875rem;
  font-size: 0.875rem;
}

.btn-check:not(:checked):not(:disabled) + .yp-segmento-opcion:hover {
  color: var(--yp-tinta);
}

.btn-check:checked + .yp-segmento-opcion {
  background-color: var(--yp-tinta);
  color: var(--yp-superficie);
}

.btn-check:focus-visible + .yp-segmento-opcion {
  outline: 2px solid var(--yp-marca);
  outline-offset: 2px;
}

/* Bloqueado: la opción elegida conserva su color; las demás se atenúan. */
.btn-check:disabled + .yp-segmento-opcion {
  cursor: not-allowed;
}

.btn-check:disabled:not(:checked) + .yp-segmento-opcion {
  opacity: 0.4;
}

.yp-segmento-candado {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 0.625rem 0 0.25rem;
  color: var(--yp-texto-2);
}

/* Placeholders de los formularios flotantes de Identity. */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* =====================================================================
   Tarjetas y alertas de Bootstrap
   Sin sombras; mismos bordes y radios que los contenedores propios.
   ===================================================================== */

.card {
  --bs-card-border-color: var(--yp-borde);
  --bs-card-border-radius: var(--yp-radio-contenedor);
  --bs-card-bg: var(--yp-superficie);
  box-shadow: none;
}

.alert {
  border-radius: var(--yp-radio-control);
  box-shadow: none;
}

/* Enlace al final de una notificación ("Ver movimiento"). */
.yp-alerta-enlace {
  margin-left: 0.25rem;
  color: var(--yp-marca);
  font-weight: 600;
  text-decoration: underline;
}

.yp-alerta-enlace:hover {
  color: var(--yp-marca);
}

/* Barra de avance de Metas: tinta en lugar del azul de Bootstrap; cumplida sigue en verde (bg-success). */
.progress {
  --bs-progress-bg: var(--yp-borde);
  --bs-progress-bar-bg: var(--yp-tinta);
}

/* =====================================================================
   Estructura: contenedor, encabezado, navegación y pie
   ===================================================================== */

.yp-contenedor {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1rem;
}

.yp-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0 1rem;
}

.yp-marca {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--yp-tinta);
  text-decoration: none;
}

.yp-marca:hover {
  color: var(--yp-tinta);
}

.yp-sesion {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  font-size: 0.875rem;
}

.yp-sesion-correo {
  color: var(--yp-texto-2);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yp-sesion-enlace {
  padding: 0;
  border: 0;
  background: none;
  color: var(--yp-tinta);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.yp-sesion-enlace:hover {
  text-decoration: underline;
}

/* Con sesión: Mi cuenta (avatar y correo), Ayuda y Cerrar sesión, centrados en vertical. */
.yp-sesion-activa {
  gap: 0.25rem;
}

.yp-sesion-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border-radius: 999px;
  text-decoration: none;
}

.yp-sesion-cuenta:hover,
.yp-sesion-cuenta:focus-visible {
  background-color: color-mix(in srgb, var(--yp-tinta) 6%, transparent);
}

.yp-sesion-cuenta .yp-sesion-correo {
  max-width: 220px;
}

/* 12 px entre Ayuda y Cerrar sesión: 4 px del gap más este margen. */
.yp-sesion-salir {
  margin-left: 8px;
}

.yp-btn-icono-encabezado {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: none;
  color: var(--yp-tinta);
}

.yp-btn-icono-encabezado:hover,
.yp-btn-icono-encabezado:focus-visible {
  background-color: color-mix(in srgb, var(--yp-tinta) 6%, transparent);
  color: var(--yp-tinta);
}

/* Avatar del usuario (_Avatar): círculo en superficie con borde, y el icono en texto secundario. */
.yp-avatar-usuario {
  display: block;
  flex: none;
  color: var(--yp-texto-2);
}

.yp-avatar-usuario-fondo {
  fill: var(--yp-superficie);
  stroke: var(--yp-borde);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Foto de perfil: el mismo círculo con borde que el icono. */
.yp-avatar-usuario-foto {
  border: 1px solid var(--yp-borde);
  border-radius: 50%;
  background-color: var(--yp-superficie);
  object-fit: cover;
}

/* Inicial del apodo: círculo en tinta con la letra en blanco. */
.yp-avatar-usuario-inicial circle {
  fill: var(--yp-tinta);
}

.yp-avatar-usuario-inicial text {
  fill: var(--yp-superficie);
  font-size: 15px;
  font-weight: 700;
}

/* Una sola fila; si no cabe, se desplaza horizontalmente. En menos de 768 px la reemplaza la barra inferior. */
.yp-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
  padding: 0.25rem 0.125rem;
}

.yp-nav-pildora {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  color: var(--yp-tinta);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.yp-nav-pildora:hover {
  color: var(--yp-tinta);
  text-decoration: underline;
}

.yp-nav-pildora.yp-activa {
  background-color: var(--yp-tinta);
  color: var(--yp-superficie);
}

.yp-nav-pildora.yp-activa:hover {
  text-decoration: none;
}

/* Entre 768 y 879 px el contenedor es más angosto que su máximo: con menos relleno caben las siete píldoras. */
@media (min-width: 768px) and (max-width: 879.98px) {
  .yp-nav-pildora {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

.yp-pie {
  margin-top: 3rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--yp-borde);
  font-size: 0.875rem;
  color: var(--yp-texto-2);
}

.yp-pie a {
  color: var(--yp-texto-2);
}

.yp-pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.25rem;
}

/* =====================================================================
   Páginas legales (aviso de privacidad y términos): bloque de lectura
   ===================================================================== */

.yp-legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem;
  background-color: var(--yp-superficie);
  border: 1px solid var(--yp-borde);
  border-radius: var(--yp-radio-contenedor);
  font-size: 1rem;
  line-height: 1.65;
}

.yp-legal h1 {
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.yp-legal-fecha {
  color: var(--yp-texto-2);
}

.yp-legal h2 {
  line-height: 1.35;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.yp-legal p:last-child,
.yp-legal ul:last-child {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .yp-legal {
    padding: 1.25rem 1rem;
  }
}

/* =====================================================================
   Navegación en celular (menos de 768 px)
   Con sesión iniciada (body.yp-con-barra), la barra inferior reemplaza a las
   píldoras y el encabezado deja solo la marca. Desde 768 px no se muestra.
   ===================================================================== */

.yp-nav-movil {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  min-height: calc(var(--yp-nav-movil-alto) + env(safe-area-inset-bottom, 0px));
  padding: 0.25rem 0.25rem env(safe-area-inset-bottom, 0px);
  background-color: var(--yp-superficie);
  border-top: 1px solid var(--yp-borde);
}

.yp-nav-movil-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-width: 44px;
  min-height: 52px;
  padding: 0.25rem 0;
  border: 0;
  border-radius: var(--yp-radio-control);
  background: none;
  color: var(--yp-texto-2);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.yp-nav-movil-item > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yp-nav-movil-item:hover {
  color: var(--yp-tinta);
}

.yp-nav-movil-item.yp-activa {
  color: var(--yp-tinta);
  font-weight: 800;
}

.yp-nav-movil-centro {
  display: flex;
  justify-content: center;
}

/* Círculo de 52 px en tinta; el borde del color de fondo lo separa de la barra al sobresalir. */
.yp-nav-movil-nuevo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-top: -1.5rem;
  border: 4px solid var(--yp-fondo);
  border-radius: 50%;
  background-color: var(--yp-tinta);
  color: var(--yp-superficie);
  /* Es un botón (abre el panel "¿Qué quieres hacer?"): sin el relleno por defecto. */
  padding: 0;
  cursor: pointer;
}

.yp-nav-movil-nuevo:hover {
  color: var(--yp-superficie);
}

.yp-nav-movil-nuevo svg {
  width: 24px;
  height: 24px;
}

.yp-panel-mas.offcanvas-bottom {
  height: auto;
  max-height: 90vh;
  border-top: 0;
  border-radius: var(--yp-radio-contenedor) var(--yp-radio-contenedor) 0 0;
}

.yp-panel-mas .offcanvas-title {
  margin-bottom: 0;
}

.yp-panel-mas .offcanvas-body {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.yp-panel-mas .yp-lista {
  margin-bottom: 1rem;
}

.yp-panel-mas-fila {
  min-height: 52px;
  font-weight: 600;
}

.yp-panel-mas-fila.yp-activa {
  font-weight: 800;
}

/* Panel del botón "+": tres acciones grandes, fáciles de tocar con el pulgar. */
.yp-panel-nuevo-fila {
  min-height: 64px;
  font-size: 1.0625rem;
}

.yp-panel-nuevo-fila svg {
  width: 24px;
  height: 24px;
}

.yp-panel-mas-sesion {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
}

.yp-panel-mas-correo {
  min-width: 0;
  color: var(--yp-texto-2);
  overflow-wrap: anywhere;
}

.yp-panel-mas-salir {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--yp-tinta);
  font-weight: 600;
}

.yp-panel-mas-salir:hover {
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  .yp-con-barra {
    padding-bottom: calc(var(--yp-nav-movil-alto) + env(safe-area-inset-bottom, 0px));
  }

  .yp-con-barra .yp-nav,
  .yp-con-barra .yp-sesion-escritorio,
  .yp-con-barra .yp-sesion-correo {
    display: none;
  }

  /* Área táctil de 44 px alrededor del avatar de 32 px. */
  .yp-con-barra .yp-sesion-cuenta {
    padding: 6px;
  }
}

@media (min-width: 768px) {
  .yp-nav-movil,
  .yp-panel-mas {
    display: none;
  }
}

/* =====================================================================
   Encabezados de página y barras de acciones
   ===================================================================== */

.yp-barra {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.yp-barra h1 {
  margin-bottom: 0;
}

.yp-mes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* =====================================================================
   Hero (exclusivo de la tarjeta del margen en Inicio)
   ===================================================================== */

/* Fondo en el azul Ybridio y texto blanco (8.37:1). Los colores de significado no se leen sobre el azul (el rojo da
   1.53:1): el monto negativo va en blanco y "Vas excedido" en una pastilla blanca con el texto en rojo. */
.yp-hero {
  background-color: var(--yp-marca);
  color: var(--yp-superficie);
  border: 0;
  border-radius: var(--yp-radio-hero);
  box-shadow: none;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .yp-hero {
    padding: 2rem;
  }
}

.yp-hero-etiqueta {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.yp-hero-numero {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.yp-hero-numero.yp-monto-negativo {
  color: var(--yp-superficie);
}

.yp-hero-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background-color: var(--yp-superficie);
  color: var(--yp-tinta);
  border-radius: var(--yp-radio-control);
}

/* "Vas excedido por…": pastilla blanca con el texto en rojo (5.48:1). */
.yp-hero-excedido {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--yp-radio-control);
  background-color: var(--yp-superficie);
  color: var(--yp-negativo);
  font-weight: 600;
}

/* Texto pequeño en blanco al 85 % (6.55:1) y línea divisoria en blanco translúcido. */
.yp-hero-desglose {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--yp-superficie) 30%, transparent);
  color: color-mix(in srgb, var(--yp-superficie) 85%, var(--yp-marca));
  font-size: 0.875rem;
}

/* Dentro del azul, el contorno de foco en azul no se vería: va en blanco. */
.yp-hero a:focus-visible,
.yp-hero button:focus-visible,
.yp-hero .btn:focus-visible {
  outline-color: var(--yp-superficie);
}

/* En la pastilla blanca del aviso, el contorno vuelve al azul. */
.yp-hero-aviso a:focus-visible,
.yp-hero-aviso button:focus-visible,
.yp-hero-aviso .btn:focus-visible {
  outline-color: var(--yp-marca);
}

/* =====================================================================
   Bloques de totales (Movimientos y Cuentas)
   ===================================================================== */

.yp-bloque {
  background-color: var(--yp-superficie);
  border: 1px solid var(--yp-borde);
  border-radius: var(--yp-radio-contenedor);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.yp-bloque-numero {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Pendiente de un préstamo en su Detalle. */
.yp-monto-grande {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
}

.yp-totales {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--yp-superficie);
  border: 1px solid var(--yp-borde);
  border-radius: var(--yp-radio-contenedor);
  margin-bottom: 1.5rem;
}

.yp-total {
  padding: 1rem;
  min-width: 0;
}

.yp-total + .yp-total {
  border-left: 1px solid var(--yp-borde);
}

.yp-total-monto {
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .yp-total {
    padding: 0.75rem;
  }

  .yp-total-monto {
    font-size: 1rem;
  }
}

/* =====================================================================
   Dos columnas (Inicio: gráfica y Qué viene pronto)
   Una columna por defecto; desde 992 px, dos iguales, cada bloque con su altura.
   ===================================================================== */

@media (min-width: 992px) {
  .yp-dos-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;
  }
}

/* =====================================================================
   Listas y filas
   ===================================================================== */

.yp-lista {
  background-color: var(--yp-superficie);
  border: 1px solid var(--yp-borde);
  border-radius: var(--yp-radio-contenedor);
  box-shadow: none;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* Separador entre elementos de la lista; nunca después del último. */
.yp-lista > * + * {
  border-top: 1px solid var(--yp-borde);
}

/*
   Orden de la fila: avatar, texto, monto y .yp-acciones. Con flex-wrap, las acciones pasan solas
   al segundo renglón (alineadas a la derecha por su margin-left: auto) cuando el texto se quedaría
   con menos de 5rem; el texto crece con el espacio que sobra y se corta con "…".
*/
.yp-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.875rem;
  row-gap: 0.5rem;
  padding: 0.875rem 1rem;
  color: var(--yp-tinta);
  text-decoration: none;
}

a.yp-fila:hover {
  background-color: var(--yp-fondo);
  color: var(--yp-tinta);
}

.yp-fila-texto {
  flex: 1 1 5rem;
  min-width: 0;
}

/* Avatar y texto como enlace, en filas que no son clicables completas porque tienen formularios. */
.yp-fila-enlace {
  flex: 1 1 calc(40px + 0.875rem + 5rem);
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--yp-tinta);
  text-decoration: none;
}

.yp-fila-enlace:hover {
  color: var(--yp-tinta);
}

.yp-fila-enlace:hover .yp-fila-principal {
  text-decoration: underline;
}

.yp-fila-principal {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yp-fila-secundaria {
  font-size: 0.875rem;
  color: var(--yp-texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yp-fila-monto {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.yp-fila-proximo {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--yp-texto-2);
}

.yp-fila-proximo.yp-monto-negativo {
  color: var(--yp-negativo);
}

.yp-acciones {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* Filas que todavía no aplican (próximos gastos después del corte). */
.yp-fila-apagada,
.yp-fila-apagada .yp-fila-principal {
  color: var(--yp-texto-2);
}

/* Préstamos liquidados: siguen en la lista, al final y atenuados. */
.yp-fila-liquidada {
  opacity: 0.6;
}

.yp-estado-prestamo {
  font-size: 0.875rem;
  font-weight: 600;
}

/* En la fila, el estado va debajo del pendiente. */
.yp-fila-monto .yp-estado-prestamo {
  display: block;
}

/* Enlace con icono y texto (teléfono en el Detalle de un préstamo). */
.yp-enlace-icono {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.yp-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--yp-fondo);
  color: var(--yp-tinta);
  font-weight: 700;
}

.yp-avatar-positivo {
  background-color: color-mix(in srgb, var(--yp-positivo) 12%, transparent);
  color: var(--yp-positivo);
}

.yp-avatar-negativo {
  background-color: color-mix(in srgb, var(--yp-negativo) 12%, transparent);
  color: var(--yp-negativo);
}

.yp-listo {
  flex: 0 0 auto;
  color: var(--yp-positivo);
  font-weight: 600;
}

/* =====================================================================
   Grupos (encabezados de día y subtítulos dentro de listas)
   ===================================================================== */

.yp-grupo {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--yp-texto-2);
  margin: 1.5rem 0 0.5rem;
}

.yp-lista > .yp-grupo {
  margin: 0;
  padding: 0.75rem 1rem 0.5rem;
}

/* =====================================================================
   Avance del periodo (dentro de la tarjeta del margen)
   ===================================================================== */

.yp-avance-pista {
  height: 6px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--yp-superficie) 25%, transparent);
  overflow: hidden;
}

.yp-avance-relleno {
  height: 100%;
  border-radius: 999px;
  background-color: var(--yp-superficie);
}

.yp-avance-texto {
  margin-top: 0.375rem;
  font-size: 0.875rem;
}

/* =====================================================================
   Gráficas SVG generadas en el servidor
   ===================================================================== */

/* El SVG llena el ancho de su contenedor y toma la altura de su proporción (viewBox). */
.yp-grafica {
  display: block;
  width: 100%;
  height: auto;
}

.yp-barra-en-margen {
  fill: color-mix(in srgb, var(--yp-positivo) 75%, transparent);
}

.yp-barra-excedida {
  fill: color-mix(in srgb, var(--yp-negativo) 70%, transparent);
}

/* Día sin margen (ingreso atrasado): gris tenue, distinto de la barra de cero. */
.yp-barra-sin-margen {
  fill: color-mix(in srgb, var(--yp-texto-2) 35%, transparent);
}

/* Día sin gasto: barra mínima para que se lea como cero. */
.yp-barra-cero {
  fill: var(--yp-borde);
}

/* Margen del día: línea punteada; el grosor y el punteado no escalan con el SVG. */
.yp-grafica-margen,
.yp-grafica-muestra-linea line {
  stroke: var(--yp-texto-2);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

.yp-grafica-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--yp-texto-2);
}

.yp-grafica-leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.yp-grafica-muestra-barra {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--yp-positivo) 75%, transparent);
}

.yp-grafica-muestra-linea {
  display: block;
  flex: none;
}

/* Iniciales de los días: una columna por día, centrada con su barra; no escalan con el SVG. */
.yp-grafica-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--yp-texto-2);
  text-align: center;
}

.yp-grafica-hoy {
  font-weight: 800;
  color: var(--yp-tinta);
}

/* =====================================================================
   Valor neto y resumen por grupo (Cuentas)
   ===================================================================== */

.yp-valor-neto {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.15;
}

.yp-mini-bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.yp-mini-bloque {
  background-color: var(--yp-superficie);
  border: 1px solid var(--yp-borde);
  border-radius: var(--yp-radio-control);
  padding: 0.75rem 1rem;
  min-width: 0;
}

/* Selector de opciones hecho con enlaces (filtros por URL). */
a.yp-segmento-opcion {
  text-decoration: none;
}

a.yp-segmento-opcion:hover {
  color: var(--yp-tinta);
}

.yp-segmento-opcion.yp-activa,
.yp-segmento-opcion.yp-activa:hover {
  background-color: var(--yp-tinta);
  color: var(--yp-superficie);
}

/* =====================================================================
   Reporte por categoría (Movimientos, vista "Por categoría")
   ===================================================================== */

.yp-reporte-total {
  font-weight: 600;
}

.yp-reporte-total .yp-monto {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.yp-reporte-variacion {
  font-weight: 600;
  margin: 0.25rem 0;
}

/* Pista de la barra: el relleno se mide contra la categoría mayor (ancho en línea, depende del dato). */
.yp-pista {
  height: 6px;
  margin-top: 0.375rem;
  border-radius: 999px;
  background-color: var(--yp-fondo);
  overflow: hidden;
}

.yp-pista-relleno {
  height: 100%;
  border-radius: 999px;
}

/* Barras de composición (Resumen por categoría y desglose de Recurrentes): muestran cómo se reparte un total, así
   que van en el azul Ybridio y no en rojo o verde. Al 70 % dan 3.87:1 sobre la superficie y 3.55:1 sobre la pista. */
.yp-pista-gasto,
.yp-pista-ingreso {
  background-color: color-mix(in srgb, var(--yp-marca) 70%, transparent);
}

.yp-reporte-detalle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
}

.yp-reporte-detalle .yp-secundario {
  font-size: inherit;
}

.yp-insignia {
  display: inline-block;
  padding: 0 0.4375rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, currentColor 12%, transparent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Color de una variación (TextosReporte.ClaseVariacion): en gastos subir es malo; en ingresos, bueno. */
.yp-variacion-mala {
  color: var(--yp-negativo);
}

.yp-variacion-buena {
  color: var(--yp-positivo);
}

.yp-variacion-neutra {
  color: var(--yp-texto-2);
}

/* Lista filtrada por categoría: total y "Quitar filtro". */
.yp-filtro-categoria {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
}

/* =====================================================================
   Búsqueda y filtros (Movimientos, vista Lista)
   El cuadro crece y "Filtros" queda junto a él en cualquier ancho; los campos
   del panel van en una columna en celular (col-12) y en rejilla desde 768 px.
   ===================================================================== */

.yp-busqueda {
  margin-bottom: 1rem;
}

.yp-busqueda-fila {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.yp-busqueda-cuadro {
  flex: 1 1 auto;
  min-width: 0;
}

/* Fuera de una tarjeta, el fondo de los campos (--yp-fondo) se perdería contra el de la página. */
.yp-busqueda-cuadro > .form-control {
  min-width: 0;
  background-color: var(--yp-superficie);
  border-color: var(--yp-borde);
}

.yp-filtros {
  margin: 0.75rem 0 0;
}

.yp-etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.yp-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.125rem 0.25rem 0.125rem 0.75rem;
  border: 1px solid var(--yp-borde);
  border-radius: 999px;
  background-color: var(--yp-superficie);
  font-size: 0.875rem;
  font-weight: 600;
}

.yp-etiqueta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yp-etiqueta-quitar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--yp-texto-2);
  text-decoration: none;
}

.yp-etiqueta-quitar:hover {
  background-color: var(--yp-fondo);
  color: var(--yp-tinta);
}

.yp-etiquetas-limpiar {
  font-size: 0.875rem;
  font-weight: 600;
}

.yp-totales-busqueda {
  margin-bottom: 0.5rem;
}

/* =====================================================================
   Presupuestos por categoría (vista "Por categoría" e Inicio)
   Nivel (CalculadoraPresupuestos): Normal (<80 %), Alerta (80-99 %), Excedido (>=100 %).
   ===================================================================== */

.yp-pista-normal {
  background-color: color-mix(in srgb, var(--yp-positivo) 55%, transparent);
}

.yp-pista-alerta {
  background-color: var(--yp-alerta);
}

.yp-pista-excedido {
  background-color: color-mix(in srgb, var(--yp-negativo) 70%, transparent);
}

.yp-presupuesto-normal {
  color: var(--yp-texto-2);
}

.yp-presupuesto-alerta {
  color: var(--yp-alerta);
}

.yp-presupuesto-excedido {
  color: var(--yp-negativo);
}

.yp-presupuestos-inicio li {
  font-weight: 600;
}

/* =====================================================================
   Documentos (fotos y tickets)
   ===================================================================== */

/* Miniatura cuadrada recortada; 48 px en listas, 96 px en el detalle de un movimiento o del escaneo. */
.yp-miniatura {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--yp-radio-control);
  background-color: var(--yp-fondo);
}

.yp-miniatura-grande {
  flex-basis: 96px;
  width: 96px;
  height: 96px;
}

.yp-miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Documento adjunto arriba del formulario de Nuevo movimiento. */
.yp-adjunto {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background-color: var(--yp-fondo);
  border-radius: var(--yp-radio-control);
}

.yp-foto-previa,
.yp-foto-completa {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--yp-radio-control);
}

/* La vista previa no debe empujar los botones fuera de la pantalla del celular. */
.yp-foto-previa {
  max-height: 60vh;
  margin: 0 auto;
}

.yp-boton-camara {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 1.0625rem;
}

/* Clip junto al título de un movimiento con documentos. */
.yp-icono-adjunto {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: 0.25rem;
  color: var(--yp-texto-2);
}

.yp-icono-adjunto svg {
  width: 14px;
  height: 14px;
}

.yp-ticket-lectura {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.yp-ticket-codigo {
  flex: 1 1 auto;
  min-width: 0;
}

/* Texto del código en una línea; completo en el title. */
.yp-codigo-texto {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.yp-datos-documento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
}

.yp-datos-documento dt {
  font-weight: 600;
}

.yp-datos-documento dd {
  margin: 0;
  min-width: 0;
}

/* =====================================================================
   Páginas de Identity (Areas/Identity/Pages)
   ===================================================================== */

/* Sin el fondo azul del autocompletado: una sombra interior del color del campo lo cubre. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--yp-fondo) inset;
  box-shadow: 0 0 0 1000px var(--yp-fondo) inset;
  -webkit-text-fill-color: var(--yp-tinta);
  caret-color: var(--yp-tinta);
}

/* Cuenta sin sesión: un bloque centrado con el título, los campos y los botones. */
.yp-identidad {
  max-width: 420px;
  margin: 0 auto 1.5rem;
  padding: 1.5rem;
  background-color: var(--yp-superficie);
  border: 1px solid var(--yp-borde);
  border-radius: var(--yp-radio-contenedor);
}

.yp-identidad h1 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.yp-identidad .yp-identidad-intro {
  color: var(--yp-texto-2);
  margin-bottom: 1.25rem;
}

.yp-identidad-enlaces {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
}

.yp-identidad-enlaces a {
  color: var(--yp-marca);
}

.yp-identidad-enlaces a:hover {
  color: var(--yp-marca);
}

/* Mi cuenta: en celular, la navegación es un .yp-segmento que se desplaza si no cabe;
   en computadora, una columna a la izquierda con la opción activa en tinta. */
.yp-cuenta-nav {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.yp-cuenta-nav .yp-segmento-opcion {
  flex: 1 0 auto;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .yp-cuenta {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }

  .yp-cuenta-nav {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
  }

  .yp-cuenta-nav .yp-segmento-opcion {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.yp-cuenta-contenido h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.yp-cuenta-dato {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* =====================================================================
   Web instalable: lo que solo se muestra en el navegador o solo instalada.
   display-mode cubre Chrome y Safari recientes; .yp-instalada (site.js),
   el Safari de iPhone que solo expone navigator.standalone.
   ===================================================================== */

.yp-solo-instalada {
  display: none;
}

.yp-instalada .yp-solo-navegador {
  display: none;
}

.yp-instalada .yp-solo-instalada {
  display: block;
}

@media (display-mode: standalone) {
  .yp-solo-navegador {
    display: none;
  }

  .yp-solo-instalada {
    display: block;
  }
}

/* =====================================================================
   Continuar con Google (Login y Register)
   Medidas y colores de las guías de marca de Google para el tema claro:
   alto 40 px, 12 px antes del logotipo, 10 px después y 12 px al final;
   fondo #FFFFFF, borde de 1 px #747775, texto #1F1F1F en Google Sans
   Medium 14/20. Solo se incluyen las letras de "Continuar con Google".
   ===================================================================== */

@font-face {
  font-family: "Google Sans";
  src: url("../fonts/GoogleSans-Medium-subset.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.yp-boton-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background-color: var(--yp-google-fondo);
  border: 1px solid var(--yp-google-borde);
  border-radius: 20px;
  color: var(--yp-google-texto);
  font-family: "Google Sans", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.yp-boton-google:hover {
  background-color: color-mix(in srgb, var(--yp-google-texto) 8%, var(--yp-google-fondo));
}

.yp-boton-google:focus-visible {
  outline: 3px solid var(--yp-tinta);
  outline-offset: 2px;
}

.yp-boton-google img {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

/* Separador con texto al centro: "o con tu correo". */
.yp-separador-texto {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  font-size: 0.875rem;
  color: var(--yp-texto-2);
}

.yp-separador-texto::before,
.yp-separador-texto::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--yp-borde);
}

/* Correo que entregó Google en "Crea tu cuenta": se muestra como dato, no como campo. */
.yp-correo-externo {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* =====================================================================
   reCAPTCHA v3: el sello flotante se oculta (tapa la barra inferior en
   celular) y en su lugar va el aviso que Google pide bajo el botón
   (developers.google.com/recaptcha/docs/faq).
   ===================================================================== */

.grecaptcha-badge {
  visibility: hidden;
}

.yp-aviso-recaptcha {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--yp-texto-2);
}

.yp-aviso-recaptcha a {
  color: var(--yp-texto-2);
}

/* =====================================================================
   Panel de marca (portada, Login y Register): eslogan animado y muestra
   del producto. La muestra es el único uso del limón fuera de Inicio.
   ===================================================================== */

/* Encabezado sin sesión: "Crear cuenta" como píldora pequeña. */
.yp-sesion-boton {
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-padding-x: 0.875rem;
  --bs-btn-font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.yp-eslogan {
  margin: 0 0 1rem;
  color: var(--yp-tinta);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.yp-eslogan-grande {
  font-size: clamp(2.25rem, 6vw, 4rem);
}

.yp-eslogan-mediano {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}

.yp-eslogan-fijo {
  display: block;
}

/* Copias invisibles de todas las frases y la frase animada en la misma celda: la línea toma el alto de la frase
   que más ocupa con el ancho disponible, así nada se mueve al escribir o borrar. */
.yp-eslogan-linea {
  display: grid;
}

.yp-eslogan-reserva,
.yp-eslogan-frase {
  grid-area: 1 / 1;
}

.yp-eslogan-reserva {
  visibility: hidden;
}

/* "Tus gastos al día," en tinta y la frase animada en el azul Ybridio (el cursor toma el mismo color). */
.yp-eslogan-frase {
  color: var(--yp-marca);
}

.yp-eslogan-cursor {
  display: inline-block;
  width: 0.08em;
  height: 0.85em;
  margin-left: 0.06em;
  vertical-align: -0.05em;
  background-color: currentColor;
  animation: yp-parpadeo 1s steps(1, end) infinite;
}

@keyframes yp-parpadeo {
  50% {
    opacity: 0;
  }
}

/* Movimiento reducido: la frase cambia completa cada 4 segundos (eslogan.js) y no hay cursor. */
@media (prefers-reduced-motion: reduce) {
  .yp-eslogan-cursor {
    display: none;
  }
}

/* Muestra del producto: tarjeta del margen girada y "Qué viene pronto" desplazada debajo. Sin sombras. */
.yp-muestra {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 0.5rem 0.5rem 0;
}

.yp-muestra-hero {
  margin-bottom: 0;
  transform: rotate(-2deg);
}

.yp-muestra-hero .yp-hero-etiqueta {
  margin-bottom: 0.25rem;
}

.yp-muestra-hero .yp-hero-numero {
  font-size: 2.75rem;
  margin-bottom: 0.5rem;
}

.yp-muestra-periodo {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

.yp-muestra-avance {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--yp-superficie) 25%, transparent);
}

.yp-muestra-avance-relleno {
  display: block;
  width: 67%;
  height: 100%;
  border-radius: 999px;
  background-color: var(--yp-superficie);
}

.yp-muestra-pronto {
  position: relative;
  width: 86%;
  margin: -1rem 0 0 auto;
  padding: 1rem 1.125rem;
  background-color: var(--yp-superficie);
  border: 1px solid var(--yp-borde);
  border-radius: var(--yp-radio-contenedor);
}

.yp-muestra-pronto-titulo {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.yp-muestra-fila {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
}

.yp-muestra-fila .yp-avatar {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  font-size: 0.8125rem;
}

.yp-muestra-fila-texto {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.yp-muestra-fila-nombre {
  font-weight: 600;
}

.yp-muestra-fila-fecha {
  font-size: 0.8125rem;
  color: var(--yp-texto-2);
}

/* Portada (Home/Index sin sesión): una columna en celular; texto y muestra lado a lado desde 992 px. */
.yp-portada {
  display: grid;
  gap: 2.5rem;
  padding: 1rem 0 1.5rem;
}

.yp-portada-subtitulo {
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
  color: var(--yp-texto-2);
}

.yp-portada-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.yp-portada-confianza {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--yp-texto-2);
}

.yp-portada-confianza li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.yp-portada-confianza svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 767.98px) {
  .yp-portada-botones {
    flex-direction: column;
  }

  .yp-portada-botones .btn {
    width: 100%;
  }
}

/* Columna de la muestra fija en 290 px: así "Tus gastos al día," (unos 513 px a 64 px) cabe en una línea
   dentro del contenedor de 880 px. */
@media (min-width: 992px) {
  .yp-portada {
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: center;
    gap: 2.25rem;
    padding-top: 2rem;
  }
}

/* Login y Register: eslogan arriba del formulario en celular (sin muestra); panel de marca a la izquierda desde 992 px. */
.yp-acceso {
  display: grid;
  gap: 0.5rem;
}

.yp-acceso-marca {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* En la cuadrícula el bloque no se encoge a su contenido: conserva su ancho de siempre (hasta 420 px). */
.yp-acceso .yp-identidad {
  width: 100%;
}

.yp-acceso-muestra {
  display: none;
}

@media (min-width: 992px) {
  .yp-acceso {
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: start;
    gap: 3rem;
  }

  .yp-acceso-marca {
    max-width: none;
    margin: 0;
  }

  .yp-acceso-muestra {
    display: block;
    margin-top: 1rem;
  }

  .yp-acceso-muestra .yp-muestra {
    margin: 0;
  }

  .yp-acceso .yp-identidad {
    margin: 0 0 1.5rem;
  }
}

/* =====================================================================
   Ayuda (/ayuda): bloque de lectura con índice, conceptos (dl),
   módulos y preguntas frecuentes en details/summary.
   ===================================================================== */

.yp-ayuda {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem;
  background-color: var(--yp-superficie);
  border: 1px solid var(--yp-borde);
  border-radius: var(--yp-radio-contenedor);
  font-size: 1rem;
  line-height: 1.65;
}

/* Al saltar desde un enlace, el destino queda con aire arriba en lugar de pegado al borde. */
.yp-ayuda [id] {
  scroll-margin-top: 1rem;
}

.yp-ayuda h1 {
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.yp-ayuda h2 {
  line-height: 1.35;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.yp-ayuda-intro {
  color: var(--yp-texto-2);
}

/* Selector de las tres páginas (Preguntas, Conceptos, Módulos): enlaces con la página actual marcada. */
.yp-ayuda-selector {
  margin-top: 1.25rem;
}

/* Menos relleno lateral: así las tres opciones caben sin desplazarse desde 375 px. */
.yp-ayuda-selector .yp-segmento-opcion {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Accesos rápidos a cada módulo: píldoras con borde que pasan de renglón. */
.yp-ayuda-accesos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.yp-ayuda-acceso {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--yp-borde);
  border-radius: 999px;
  color: var(--yp-tinta);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.yp-ayuda-acceso:hover {
  background-color: var(--yp-fondo);
  color: var(--yp-tinta);
}

.yp-ayuda-conceptos dt {
  margin-top: 1rem;
  font-weight: 700;
}

.yp-ayuda-conceptos dd {
  margin: 0;
}

.yp-ayuda-modulo {
  padding: 1.25rem 0;
  border-top: 1px solid var(--yp-borde);
}

.yp-ayuda-modulo h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.yp-ayuda-modulo h4 {
  margin: 0.75rem 0 0.125rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--yp-texto-2);
}

.yp-ayuda-modulo p {
  margin-bottom: 0;
}

/* Preguntas frecuentes y desplegables (.yp-desplegable): details nativo, sin el triángulo del navegador; el chevron gira al abrir. */
.yp-pregunta {
  border-top: 1px solid var(--yp-borde);
}

.yp-pregunta:last-child {
  border-bottom: 1px solid var(--yp-borde);
}

.yp-pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.75rem 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.yp-pregunta summary::-webkit-details-marker,
.yp-desplegable summary::-webkit-details-marker {
  display: none;
}

.yp-pregunta summary svg,
.yp-desplegable summary svg {
  flex: 0 0 auto;
  color: var(--yp-texto-2);
  transition: transform 0.15s ease;
}

.yp-pregunta[open] summary svg,
.yp-desplegable[open] summary svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .yp-pregunta summary svg,
  .yp-desplegable summary svg {
    transition: none;
  }
}

.yp-pregunta-respuesta {
  padding-bottom: 0.75rem;
}

.yp-pregunta-respuesta p {
  margin-bottom: 0.5rem;
}

.yp-pregunta-ver {
  font-size: 0.9375rem;
  color: var(--yp-texto-2);
}

.yp-ayuda-fuentes {
  font-size: 0.875rem;
  color: var(--yp-texto-2);
}

.yp-ayuda-arriba {
  margin: 2rem 0 0;
}

@media (max-width: 575.98px) {
  .yp-ayuda {
    padding: 1.25rem 1rem;
  }
}

/* =====================================================================
   Recurrentes: resumen mensual (equivalente mensual de ingresos y
   gastos fijos) y total al pie de cada sección.
   ===================================================================== */

/* La tarjeta del resumen queda cerca de la nota que la explica. */
.yp-resumen-tarjeta {
  margin-bottom: 0.5rem;
}

.yp-resumen-recurrentes {
  display: grid;
  gap: 1rem;
}

.yp-resumen-monto {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
}

.yp-resumen-queda {
  font-size: 1.75rem;
  font-weight: 800;
}

.yp-resumen-nota {
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: var(--yp-texto-2);
}

.yp-fila-total {
  justify-content: space-between;
  font-weight: 700;
}

/* "Ver por categoría": franja a todo el ancho de la tarjeta, debajo de las cifras. Los márgenes negativos
   llevan el borde de orilla a orilla y el relleno devuelve el de .yp-bloque (1.5rem a los lados). */
.yp-desglose {
  margin: 1rem -1.5rem 0;
  padding: 0 1.5rem;
  border-top: 1px solid var(--yp-borde);
}

.yp-desplegable summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  min-height: 44px;
  padding-top: 0.75rem;
  list-style: none;
  cursor: pointer;
}

.yp-desglose-titulo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Filas sin contenedor propio: solo separadores suaves, como .yp-lista. Celular: nombre y monto arriba;
   barra y porcentaje abajo. Las columnas son de la lista y cada fila las hereda con subgrid: la columna
   auto del monto se mide con todas las filas, así los montos quedan alineados y las barras miden igual. */
.yp-desglose-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  margin-top: 0.5rem;
}

.yp-desglose-fila {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-areas:
    "nombre monto"
    "barra porcentaje";
  align-items: center;
  row-gap: 0.25rem;
  padding: 0.625rem 0;
}

.yp-desglose-fila + .yp-desglose-fila {
  border-top: 1px solid var(--yp-borde);
}

.yp-desglose-nombre {
  grid-area: nombre;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yp-desglose-barra {
  grid-area: barra;
  margin-top: 0;
}

.yp-desglose-monto {
  grid-area: monto;
  text-align: right;
  white-space: nowrap;
}

.yp-desglose-porcentaje {
  grid-area: porcentaje;
  text-align: right;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .yp-resumen-recurrentes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  /* Cuatro columnas iguales en todas las filas: las barras comparten largo de base. */
  .yp-desglose-lista {
    grid-template-columns: 9rem minmax(0, 1fr) auto 3.5rem;
    column-gap: 1rem;
  }

  .yp-desglose-fila {
    grid-template-areas: "nombre barra monto porcentaje";
  }
}

@media (max-width: 767.98px) {
  .yp-desplegable summary {
    padding-bottom: 0.5rem;
  }

  /* En celular, la frase pasa debajo de "Ver por categoría". */
  .yp-desplegable summary > .yp-secundario {
    flex-basis: 100%;
  }
}

@media (min-width: 992px) {
  .yp-desglose-lista {
    max-width: 720px;
  }
}

/* =====================================================================
   Detalle de un documento: movimiento ligado, búsqueda para ligar y
   folio fiscal de facturas del SAT.
   ===================================================================== */

.yp-documento-ligado {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.yp-documento-ligado-texto {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  color: var(--yp-tinta);
  text-decoration: none;
}

.yp-documento-ligado-texto:hover .yp-fila-principal {
  text-decoration: underline;
}

.yp-buscar-movimiento-campos {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 576px) {
  .yp-buscar-movimiento-campos {
    grid-template-columns: minmax(0, 1fr) 11rem auto;
    align-items: end;
  }
}

/* El folio fiscal (UUID) es largo y sin espacios: se parte en celular para no desbordar. */
.yp-folio-fiscal {
  overflow-wrap: anywhere;
}

/* Movimientos para ligar un documento: la fecha y la cuenta pasan de renglón en lugar de cortarse,
   porque son justo lo que distingue a dos movimientos del mismo monto. */
.yp-lista-ligar .yp-fila-principal,
.yp-lista-ligar .yp-fila-secundaria {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Motivo de una sugerencia ("Mismo total", "$5.00 menos", "Fechas cercanas"). */
.yp-motivo {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background-color: var(--yp-marca-suave);
  color: var(--yp-marca);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Botones para corregir la diferencia entre el total del documento y el monto del movimiento. */
.yp-corregir-montos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* =====================================================================
   Escanear ticket: botones de cámara y escaneo en vivo (escaner.js)
   ===================================================================== */

.yp-acciones-camara {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Panel a pantalla completa con el video de la cámara trasera. */
.yp-escaner {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--yp-tinta);
  color: var(--yp-superficie);
}

.yp-escaner-abierto {
  overflow: hidden;
}

.yp-escaner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marco guía al centro: ancho como un código de barras, alto suficiente para un QR. */
.yp-escaner-marco {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80vw, 420px);
  height: min(45vh, 280px);
  transform: translate(-50%, -50%);
  border: 3px solid var(--yp-superficie);
  border-radius: 16px;
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--yp-tinta) 45%, transparent);
}

.yp-escaner-pie {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.yp-escaner-texto {
  margin: 0;
  font-weight: 600;
}

.yp-escaner-agotado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.yp-escaner-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.yp-escaner .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}

/* Diagnóstico del escaneo en vivo (?diagnostico=1): texto pequeño en la esquina superior del panel. */
.yp-escaner-diagnostico {
  position: absolute;
  top: calc(0.5rem + env(safe-area-inset-top, 0px));
  left: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--yp-tinta) 70%, transparent);
  color: var(--yp-superficie);
  font-size: 0.6875rem;
  line-height: 1.35;
}

/* Mi perfil: la foto en grande con sus acciones al lado (abajo en pantallas angostas). */
.yp-perfil-foto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.yp-perfil-foto-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}