/* Tarjetas — profundidad por borde, no por sombra (lenguaje visual 2026) */
.card {
  background-color: var(--surface-1);
  border-radius: var(--radius-lg); /* Bordes más redondeados tipo Apple */
  border: 1px solid var(--surface-border); /* Borde sutil = la "profundidad" */
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, background-color 0.2s ease;
}

/* Interacción sutil en tarjetas que se pueden tocar. No existe :hover en
   touch — sin su equivalente :active, el borde de acento se queda pegado
   después del toque hasta el próximo tap en cualquier otro lado, dando la
   sensación de que la tarjeta quedó trabada. */
.card.tappable:hover, .card.tappable:active {
  transform: translateY(-2px);
  border-color: var(--accent-primary);
}

.card--elevated {
  background-color: var(--surface-2);
  border-color: var(--surface-border);
}

/* Tarjeta "vidrio" — para héroes y cabeceras destacadas */
.card--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
}

/* Filas de lista reutilizables (movimientos, sobres, metas, recurrentes) */
.list-row {
  background: var(--bg-base);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.list-row:hover, .list-row:active { border-color: var(--surface-border); }
.list-row:active { transform: scale(0.99); }

/* Círculo de ícono con tinte de color de categoría */
.icon-chip {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { opacity: 0.8; transform: scale(0.97); }

.btn-filled { background-color: var(--accent-primary); color: #000; }
.btn-outlined { background-color: transparent; border: 1px solid var(--text-disabled); color: var(--text-primary); }
.btn-pill { border-radius: 20px; padding: 6px 16px; font-size: 12px; }

/* Botón primario tipo iOS: relleno, esquinas grandes, glow sutil del color */
.btn-primary {
  width: 100%;
  color: #000;
  padding: 16px;
  border: none;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  transition: opacity 0.15s, transform 0.1s ease;
}
.btn-primary:active { transform: scale(0.98); opacity: 0.9; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Segmented control tipo iOS (pestañas de Finanzas, filtros de historial) */
.segmented-control {
  display: flex; gap: 4px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: 14px;
}
.segmented-control button {
  flex: 1 0 auto;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.segmented-control button.active {
  background: var(--surface-1);
  color: var(--text-primary);
}



/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.badge--high { background-color: rgba(239, 68, 68, 0.15); color: var(--state-high); }
.badge--medium { background-color: rgba(245, 158, 11, 0.15); color: var(--state-medium); }
.badge--low { background-color: rgba(34, 197, 94, 0.15); color: var(--state-low); }

/* Avatares */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background-color: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}

/* Header UI */
.ui-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-4);
  padding-top: var(--space-2);
}
.ui-header h1 { font-size: 24px; font-weight: 700; margin: 0; font-family: var(--font-display); }

/* Título de cada vista (Ritual, Semana, Anotaciones, Hábitos, Tareas...):
   en la práctica ninguna vista usa la clase .ui-header de arriba — cada
   una escribe su propio <h1> con estilo inline (ver cabecera() en
   anotaciones.js o el bloque "Greeting" de dashboard.js) — así que el
   font-family real para "extender Space Grotesk a los títulos de vista"
   tiene que entrar por acá, no por esa clase. Ninguno de esos <h1> fija
   font-family inline, así que esta regla gana limpio sin !important. */
#view-root h1 { font-family: var(--font-display); }

/* Grid / Util */
.flex-row { display: flex; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.text-muted { color: var(--text-secondary); font-size: 13px; }

/* ============================================================
   Sistema global de modales (bottom sheet estilo iOS)
   Usado por TODAS las vistas (Finanzas, Entrenamiento, Tareas) y
   por el diálogo de confirmación global (#global-confirm-modal).
   Nota: finanzas.js define su propia copia local (misma forma) que
   gana la cascada mientras esa vista está montada; esta versión
   global cubre al resto para que nunca queden sin estilo.
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 3000;
  display: none;
  align-items: flex-end; justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 0;
}
.modal-overlay.open { opacity: 1; display: flex; }

.modal-content {
  background: var(--surface-1);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 30%);
  width: 100%; max-width: 500px;
  border-radius: 28px 28px 0 0;
  border: 1px solid var(--glass-border); border-bottom: none;
  padding: 14px 24px calc(28px + env(safe-area-inset-bottom)) 24px;
  transform: translateY(100%); opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  max-height: 88vh; overflow-y: auto; box-sizing: border-box;
  /* MK III: sin sombra — el border de 1px de arriba (var(--glass-border))
     ya separa la hoja del fondo oscuro detrás. */
}
.modal-content::before {
  content: ''; display: block; width: 36px; height: 4px; border-radius: 2px;
  background: var(--surface-border); margin: 0 auto 18px auto;
}
@media (min-width: 640px) {
  .modal-overlay { align-items: center; padding: 20px; }
  .modal-content { border-radius: 24px; border-bottom: 1px solid var(--glass-border); transform: scale(0.95) translateY(20px); padding: 30px 24px; }
  .modal-content::before { display: none; }
}

/* Sin esto, Chrome/Android dibuja el texto e ícono de type="date" con su
   esquema claro por defecto (texto negro), invisible sobre nuestro fondo
   oscuro — parece un campo vacío aunque tenga valor. */
input[type="date"] { color-scheme: dark; }

.input-group { margin-bottom: 20px; }
.input-group label { display: block; color: var(--text-secondary); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.input-group input, .input-group select, .input-group textarea {
  width: 100%; background: var(--bg-base); border: 1px solid var(--surface-border); color: var(--text-primary);
  padding: 14px 16px; border-radius: 14px; font-size: 16px; box-sizing: border-box; outline: none;
  font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-group textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus {
  border-color: var(--accent-primary);
  /* color-mix en vez de una tripleta rgba() fija: esta regla vive fuera de
     cualquier scope mk3-*, así que antes el foco de CUALQUIER input en
     CUALQUIER vista se veía morado sin importar el módulo (quedó pegado al
     acento viejo). Con color-mix sigue a --accent-primary automáticamente
     la próxima vez que la paleta cambie, sin que alguien tenga que acordarse
     de venir a actualizar este valor a mano. */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

/* ============================================================
   VANGUARD MK III — activado dentro de <html class="mk3-entreno">,
   <html class="mk3-finanzas"> o <html class="mk3-tareas"> (alternadas
   por el router en app.js según la vista montada, nunca dos a la vez).
   Rollout por fase: Entreno, Finanzas, y ahora Tareas — con esto las
   tres secciones quedan migradas.

   Redefine las variables semánticas de superficie/texto/acento en vez
   de tocar cada plantilla: todo lo que ya usa var(--surface-1),
   var(--text-primary), var(--accent-teal)/var(--accent-purple), etc. (la
   enorme mayoría del HTML de cada sección) hereda la paleta nueva
   automáticamente. Geometría y tipografía sí necesitan reglas con
   !important porque varias plantillas fijan border-radius/font-family por
   elemento, que gana por especificidad inline sobre cualquier regla de
   clase sin !important.
   ============================================================ */
.mk3-entreno {
  --bg-base: var(--bg);
  --surface-1: var(--panel);
  --surface-2: var(--line);
  --surface-border: var(--line);
  --text-primary: var(--t1);
  --text-secondary: var(--t2);
  --text-disabled: var(--t3);
  --accent-teal: var(--cy);
  --accent-primary: var(--cy); /* focus ring de inputs (.input-group input:focus) */
  --state-high: var(--rd); /* el rojo solo debe verse en alertas reales */
  font-variant-numeric: tabular-nums;
}

.mk3-finanzas {
  --bg-base: var(--bg);
  --surface-1: var(--panel);
  --surface-2: var(--line);
  --surface-border: var(--line);
  --text-primary: var(--t1);
  --text-secondary: var(--t2);
  --text-disabled: var(--t3);
  --accent-purple: var(--am); /* Finanzas dejaba de compartir el morado con Tareas */
  --accent-primary: var(--am);
  --state-high: var(--rd);
  font-variant-numeric: tabular-nums;
}

.mk3-tareas {
  --bg-base: var(--bg);
  --surface-1: var(--panel);
  --surface-2: var(--line);
  --surface-border: var(--line);
  --text-primary: var(--t1);
  --text-secondary: var(--t2);
  --text-disabled: var(--t3);
  --accent-purple: var(--vi); /* Tareas ya no comparte el morado con Finanzas */
  --accent-primary: var(--vi);
  --state-high: var(--rd);
  font-variant-numeric: tabular-nums;
}

/* Inicio/Dashboard: a diferencia de las otras tres, esta pantalla muestra
   Entreno + Finanzas + Tareas a la vez, así que NO tiene un acento único
   propio — no se redefine --accent-teal/--accent-purple/--accent-primary
   acá. dashboard.js usa var(--cy)/var(--am)/var(--vi) directo por elemento
   (reactor, filas heroicas, insignias). Sí hereda superficies/texto/
   tipografía/geometría como las demás. */
.mk3-dashboard {
  --bg-base: var(--bg);
  --surface-1: var(--panel);
  --surface-2: var(--line);
  --surface-border: var(--line);
  --text-primary: var(--t1);
  --text-secondary: var(--t2);
  --text-disabled: var(--t3);
  --state-high: var(--rd);
  font-variant-numeric: tabular-nums;
}

.mk3-entreno *,
.mk3-finanzas *,
.mk3-tareas *,
.mk3-dashboard * {
  box-shadow: none !important;
}

/* Dos familias, no una: la mono en TODO cansaba la lectura y borraba la
   jerarquía entre un dato y su descripción. La base (heredada de body,
   ver layout.css) es sans (--font-body); .num/.dato marca explícitamente
   lo que es un dato numérico — cifras, montos, fechas, contadores, series,
   repeticiones, porcentajes — que sí va en mono con anchura tabular para
   que los dígitos no salten al actualizarse en vivo. */
.num, .dato {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Geometría — el chaflán marca jerarquía, no decora: antes lo llevaba
   parejo CUALQUIER .card/.list-row/.modal-content/botón/input, así que
   dejaba de significar nada. Ahora solo lo llevan la tarjeta principal de
   cada pantalla (.card-hero: el reactor de Inicio, el balance de
   Finanzas, completadas/pendientes de Tareas, la racha de Hábitos, "Hoy
   toca" de Entreno), el
   botón de acción primaria (.btn-primary) y el FAB (.mk3-fab) — el resto
   queda recto (sin border-radius, sin clip-path). :not([style*="50%"])
   sigue protegiendo los círculos genuinos que no son FAB (icon-chip,
   avatares, el +/- del timer de descanso). */
.mk3-entreno .card:not(.card-hero), .mk3-entreno .list-row, .mk3-entreno .modal-content,
.mk3-entreno button:not(.icon-chip):not([style*="50%"]):not(.btn-primary):not(.mk3-fab),
.mk3-entreno input, .mk3-entreno select, .mk3-entreno textarea,
.mk3-finanzas .card:not(.card-hero), .mk3-finanzas .list-row, .mk3-finanzas .modal-content,
.mk3-finanzas button:not(.icon-chip):not([style*="50%"]):not(.btn-primary):not(.mk3-fab),
.mk3-finanzas input, .mk3-finanzas select, .mk3-finanzas textarea,
.mk3-tareas .card:not(.card-hero), .mk3-tareas .list-row, .mk3-tareas .modal-content,
.mk3-tareas button:not(.icon-chip):not([style*="50%"]):not(.btn-primary):not(.mk3-fab),
.mk3-tareas input, .mk3-tareas select, .mk3-tareas textarea,
.mk3-dashboard .card:not(.card-hero), .mk3-dashboard .list-row, .mk3-dashboard .modal-content,
.mk3-dashboard button:not(.icon-chip):not([style*="50%"]):not(.btn-primary):not(.mk3-fab),
.mk3-dashboard input, .mk3-dashboard select, .mk3-dashboard textarea {
  border-radius: 0 !important;
  clip-path: none !important;
}

/* Chaflán en dos esquinas OPUESTAS (sup-izquierda / inf-derecha), no en
   las cuatro — corte más discreto que el octógono anterior. */
.chaflan {
  clip-path: polygon(
    var(--chaflan) 0, 100% 0,
    100% calc(100% - var(--chaflan)), calc(100% - var(--chaflan)) 100%,
    0 100%, 0 var(--chaflan)
  );
}
.mk3-entreno .card-hero, .mk3-entreno .btn-primary, .mk3-entreno .mk3-fab,
.mk3-finanzas .card-hero, .mk3-finanzas .btn-primary, .mk3-finanzas .mk3-fab,
.mk3-tareas .card-hero, .mk3-tareas .btn-primary, .mk3-tareas .mk3-fab,
.mk3-dashboard .card-hero, .mk3-dashboard .btn-primary, .mk3-dashboard .mk3-fab {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--chaflan) 0, 100% 0,
    100% calc(100% - var(--chaflan)), calc(100% - var(--chaflan)) 100%,
    0 100%, 0 var(--chaflan)
  ) !important;
}

/* clip-path recorta su propio anillo de foco (outline/box-shadow no se ven
   más allá del polígono) — .btn-primary y .mk3-fab son los únicos
   controles enfocables con chaflán, así que el foco se dibuja con un
   filtro drop-shadow: a diferencia de outline/box-shadow, un filtro se
   compone DESPUÉS del recorte y no queda contenido por él. */
.mk3-entreno .btn-primary:focus-visible, .mk3-entreno .mk3-fab:focus-visible,
.mk3-finanzas .btn-primary:focus-visible, .mk3-finanzas .mk3-fab:focus-visible,
.mk3-tareas .btn-primary:focus-visible, .mk3-tareas .mk3-fab:focus-visible,
.mk3-dashboard .btn-primary:focus-visible, .mk3-dashboard .mk3-fab:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 1.5px var(--accent-primary)) drop-shadow(0 0 4px var(--accent-primary));
}

/* Hoja inferior (bottom sheet) — Gasto/Ingreso/Ahorro/Transferir y el alta
   de hábito. Con el teclado abierto, un modal centrado queda partido a la
   mitad; una hoja que sube desde abajo deja el campo justo sobre el
   teclado. Clase independiente de .modal-content a propósito: esa clase
   pasa a centrada en escritorio y finanzas.js le inyecta su propia copia
   local (ver comentario en ese archivo) — pelear con esa cascada para un
   caso especial habría sido más frágil que tener una clase propia. El
   overlay SÍ reusa .modal-overlay (con el modificador .sheet-overlay)
   porque history.js rastrea esa clase para el botón atrás del sistema;
   nunca le pasa nada aunque el contenido de adentro cambie de clase. */
.sheet-overlay { align-items: flex-end !important; }
.sheet-content {
  background: var(--surface-1);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 30%);
  width: 100%; max-width: 500px;
  border: 1px solid var(--glass-border); border-bottom: none;
  padding: 14px 24px calc(28px + env(safe-area-inset-bottom)) 24px;
  box-sizing: border-box;
  max-height: 90dvh; overflow-y: auto;
  transform: translateY(100%); opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.sheet-content::before {
  content: ''; display: block; width: 36px; height: 4px; border-radius: 2px;
  background: var(--surface-border); margin: 0 auto 18px auto;
  cursor: grab;
}
.modal-overlay.open .sheet-content { transform: translateY(0); opacity: 1; }

/* Chaflán solo en la esquina superior izquierda: la hoja está pegada al
   borde de abajo (las esquinas de abajo no existen visualmente) y la
   superior derecha queda recta a propósito — acá no hay una "esquina
   opuesta" que tenga sentido cortar, como sí la había en .card-hero. */
.mk3-entreno .sheet-content, .mk3-finanzas .sheet-content,
.mk3-tareas .sheet-content, .mk3-dashboard .sheet-content {
  clip-path: polygon(var(--chaflan) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chaflan));
}

/* Etiquetas de categoría/sección: todas las que ya se escribieron con
   text-transform: uppercase inline pasan a 11px / tracking 2px. */
.mk3-entreno [style*="text-transform: uppercase"],
.mk3-finanzas [style*="text-transform: uppercase"],
.mk3-tareas [style*="text-transform: uppercase"],
.mk3-dashboard [style*="text-transform: uppercase"] {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  font-family: var(--font-display) !important;
}

/* ============================================================
   MK III — fase "vida": Ritual, Planificador y Anotaciones.
   Mismo patrón que los otros scopes MK III de arriba: variables
   semánticas de superficie/texto/acento redefinidas en .mk3-X, más
   geometría/box-shadow replicadas acá en vez de sumadas a los
   selectores agrupados de arriba, para que este bloque se pegue
   entero sin editar ninguna línea existente. Cada sección tiene su
   propio acento (violeta amanecer / verde / gris azulado) para que
   se distingan entre sí en el heatmap y en el log de eventos — igual
   que Entreno/Finanzas/Tareas no comparten color entre ellas.
   ============================================================ */
.mk3-ritual {
  --bg-base: var(--bg);
  --surface-1: var(--panel);
  --surface-2: var(--line);
  --surface-border: var(--line);
  --text-primary: var(--t1);
  --text-secondary: var(--t2);
  --text-disabled: var(--t3);
  --accent-ritual: #8B7CFF;          /* violeta amanecer */
  --rtp: rgba(139, 124, 255, 0.14);  /* tinte del círculo de racha */
  --accent-primary: var(--accent-ritual);
  --state-high: var(--rd);
  font-variant-numeric: tabular-nums;
}

.mk3-planificador {
  --bg-base: var(--bg);
  --surface-1: var(--panel);
  --surface-2: var(--line);
  --surface-border: var(--line);
  --text-primary: var(--t1);
  --text-secondary: var(--t2);
  --text-disabled: var(--t3);
  --accent-plan: #4ADE80;            /* verde: distinto de cian/ámbar/violeta */
  --accent-primary: var(--accent-plan);
  --state-high: var(--rd);
  font-variant-numeric: tabular-nums;
}

.mk3-anotaciones {
  --bg-base: var(--bg);
  --surface-1: var(--panel);
  --surface-2: var(--line);
  --surface-border: var(--line);
  --text-primary: var(--t1);
  --text-secondary: var(--t2);
  --text-disabled: var(--t3);
  --accent-notas: #94A3B8;           /* gris azulado: la nota manda, no el color */
  --accent-primary: var(--accent-notas);
  --state-high: var(--rd);
  font-variant-numeric: tabular-nums;
}

.mk3-ritual *,
.mk3-planificador *,
.mk3-anotaciones * {
  box-shadow: none !important;
}

/* Geometría — mismo criterio que el resto de MK III: la tarjeta
   principal (.card-hero) y el botón primario llevan chaflán; el resto
   (tarjetas normales, list-row, inputs, botones genéricos) queda recto. */
.mk3-ritual .card:not(.card-hero), .mk3-ritual .list-row, .mk3-ritual .modal-content,
.mk3-ritual button:not(.icon-chip):not([style*="50%"]):not(.btn-primary):not(.mk3-fab),
.mk3-ritual input, .mk3-ritual select, .mk3-ritual textarea,
.mk3-planificador .card:not(.card-hero), .mk3-planificador .list-row, .mk3-planificador .modal-content,
.mk3-planificador button:not(.icon-chip):not([style*="50%"]):not(.btn-primary):not(.mk3-fab),
.mk3-planificador input, .mk3-planificador select, .mk3-planificador textarea,
.mk3-anotaciones .card:not(.card-hero), .mk3-anotaciones .list-row, .mk3-anotaciones .modal-content,
.mk3-anotaciones button:not(.icon-chip):not([style*="50%"]):not(.btn-primary):not(.mk3-fab),
.mk3-anotaciones input, .mk3-anotaciones select, .mk3-anotaciones textarea {
  border-radius: 0 !important;
  clip-path: none !important;
}

.mk3-ritual .card-hero, .mk3-ritual .btn-primary, .mk3-ritual .mk3-fab,
.mk3-planificador .card-hero, .mk3-planificador .btn-primary, .mk3-planificador .mk3-fab,
.mk3-anotaciones .card-hero, .mk3-anotaciones .btn-primary, .mk3-anotaciones .mk3-fab {
  border-radius: 0 !important;
  clip-path: polygon(
    var(--chaflan) 0, 100% 0,
    100% calc(100% - var(--chaflan)), calc(100% - var(--chaflan)) 100%,
    0 100%, 0 var(--chaflan)
  ) !important;
}

.mk3-ritual .btn-primary:focus-visible, .mk3-ritual .mk3-fab:focus-visible,
.mk3-planificador .btn-primary:focus-visible, .mk3-planificador .mk3-fab:focus-visible,
.mk3-anotaciones .btn-primary:focus-visible, .mk3-anotaciones .mk3-fab:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 1.5px var(--accent-primary)) drop-shadow(0 0 4px var(--accent-primary));
}

.mk3-ritual [style*="text-transform: uppercase"],
.mk3-planificador [style*="text-transform: uppercase"],
.mk3-anotaciones [style*="text-transform: uppercase"] {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  font-family: var(--font-display) !important;
}

/* Panal hexagonal de insignias (Inicio) — hexágono de punta arriba/abajo
   vía clip-path, reemplaza las cajas redondeadas genéricas. */
.mk3-hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Flecha de avance rápido (Tareas) — feedback sutil de opacidad, sin
   sombras (la regla global ya fuerza box-shadow:none en todo mk3-tareas). */
.btn-advance-task {
  opacity: 0.8;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.btn-advance-task:hover { opacity: 1; }
.btn-advance-task:active { opacity: 0.5; transform: scale(0.88); }

/* ============================================================
   Finanzas — rediseño visual (referencia: vanguard-finanzas-module/).
   Patrones genéricos de layout (eyebrow tags, stats grid, listas de
   fila plana, budget cards, empty states) — no dependen de datos, por
   eso viven acá como utilidades en vez de estar inline en finanzas.js.
   El chaflán/color ámbar ya los pone el bloque MK III de arriba
   (.mk3-finanzas .card / button / input / select): estas clases
   solo definen tipografía y layout, no geometría ni acento.
   ============================================================ */
.fin-eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--text-secondary); margin: 0; }

.fin-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fin-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
  .fin-grid3 { grid-template-columns: 1fr; }
  .fin-grid2 { grid-template-columns: 1fr; }
}

.fin-stat-value { font-size: 26px; font-weight: 700; margin-top: 6px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.fin-row-list .fin-row { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--line); }
.fin-row-list .fin-row:first-child { border-top: none; }
.fin-row .fin-who { flex: 1; min-width: 0; }
.fin-row .fin-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-row .fin-meta { color: var(--text-secondary); font-size: 11.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-row .fin-amt { font-weight: 600; white-space: nowrap; flex-shrink: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.fin-bc-head { display: flex; align-items: center; justify-content: space-between; }
.fin-bc-figures { margin-top: 4px; color: var(--text-secondary); font-size: 12px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.fin-meter { height: 6px; background: var(--bg-base); border: 1px solid var(--line); overflow: hidden; margin-top: 10px; }
.fin-meter i { display: block; height: 100%; background: var(--accent-purple); }
.fin-meter i.warn { background: var(--state-medium); }
.fin-meter i.danger { background: var(--state-high); }

.fin-empty { padding: 48px 24px; text-align: center; }
.fin-empty .fin-eyebrow { margin-bottom: 10px; }
.fin-empty p.fin-desc { color: var(--text-secondary); max-width: 380px; margin: 10px auto 0; font-size: 12.5px; }

/* Empty state genérico: generaliza el mismo patrón de .fin-empty de arriba
   (texto centrado, sin caja ni ícono genérico) para el resto de la app —
   lo consume EmptyState() en utils/states.js, compartido por Análisis,
   Anotaciones y Hábitos. .fin-empty queda intacto (Finanzas ya lo usa
   directo con su propio eyebrow) para no arrastrar cambios a esa vista. */
.vg-empty { padding: 48px 24px; text-align: center; }
.vg-empty h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.vg-empty p.vg-desc { color: var(--text-secondary); max-width: 380px; margin: 10px auto 0; font-size: 12.5px; }

.fin-bal { font-size: 20px; font-weight: 700; margin-top: 8px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Accesibilidad de movimiento — global, no depende de qué sección esté
   activa: no hay razón para esperar el rollout completo del sistema para
   respetar esta preferencia del sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}