/* ============================================================
   RATIONUM — tema "TR" (31-ago, v2)
   Fintech sobrio estilo Trade Republic / Revolut: superficies planas,
   monocromo disciplinado, color solo en los numeros, tipografia grande.
   Inyectado via nginx sub_filter.
   Revertir al anterior: cp custom-theme.css.bak-modern-dark custom-theme.css
   ============================================================ */

/* ---- 0. Tipografia: la del sistema de Apple (San Francisco), en todo ---- */
[data-theme] body,
[data-theme] body * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[data-theme] body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Saldos protagonistas: grandes, densos, numeros tabulares — sin adornos */
[data-theme] p.text-3xl.privacy-sensitive,
[data-theme] p.text-4xl.privacy-sensitive,
[data-theme] .text-3xl.font-medium.privacy-sensitive {
  font-weight: 650;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
}

/* Importes en listas y tablas: alineacion perfecta de cifras */
[data-theme] span.privacy-sensitive,
[data-theme] td.privacy-sensitive {
  font-variant-numeric: tabular-nums;
}

/* Micro-etiquetas de seccion: discretas, tipo ficha de producto */
[data-theme] .bg-container > p.text-sm.text-secondary:first-child {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  font-weight: 600;
}

/* ---- 1. CLARO: gris neutro frio + tarjetas blancas planas ---- */
[data-theme="light"] {
  --color-surface: #F4F4F6;
  --color-surface-hover: #EDEDF0;
  --color-surface-inset: #EFEFF2;
  --color-surface-inset-hover: #E8E8EC;
  --color-container: #FFFFFF;
  --color-container-hover: #FAFAFB;
  --color-container-inset: #F5F5F7;
  --color-container-inset-hover: #F0F0F3;
  --color-success: #0BA05F;
  --color-destructive: #D93843;
  --border-radius-sm: 10px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --shadow-xs: 0 1px 2px rgba(16,17,20,.04), 0 0 0 1px rgba(16,17,20,.04);
  --shadow-sm: 0 1px 3px rgba(16,17,20,.05), 0 0 0 1px rgba(16,17,20,.04);
  --shadow-md: 0 4px 12px -4px rgba(16,17,20,.08), 0 0 0 1px rgba(16,17,20,.04);
  --shadow-lg: 0 12px 28px -8px rgba(16,17,20,.12), 0 0 0 1px rgba(16,17,20,.05);
}
[data-theme="light"] ::selection { background: rgba(16,17,20,.12); }
[data-theme="light"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(16,17,20,.18); border-radius: 8px; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(16,17,20,.32); }

/* ---- 2. OSCURO: negro casi puro, tarjetas grafito ---- */
[data-theme="dark"] {
  --color-surface: #0A0A0C;
  --color-surface-hover: #121214;
  --color-surface-inset: #0E0E10;
  --color-surface-inset-hover: #151518;
  --color-container: #151517;
  --color-container-hover: #1B1B1E;
  --color-container-inset: #101012;
  --color-container-inset-hover: #17171A;
  --color-success: #35C77F;
  --color-destructive: #F0655F;
  --border-radius-sm: 10px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-sm: 0 2px 5px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-md: 0 6px 18px -6px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-lg: 0 14px 32px -8px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
}
[data-theme="dark"] ::selection { background: rgba(255,255,255,.18); }
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); }

/* ---- 3. Movimiento: poco y bien puesto ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: no-preference) {
  [data-theme] a, [data-theme] button, [data-theme] summary,
  [data-theme] [role="button"], [data-theme] label[class*="cursor"],
  [data-theme] .bg-container, [data-theme] [class*="rounded"] {
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .2s ease,
                transform .12s cubic-bezier(.2,.7,.3,1), opacity .15s ease;
  }
  [data-theme] button:active:not(:disabled),
  [data-theme] [role="button"]:active { transform: scale(.98); }
  [data-theme] tr { transition: background-color .13s ease; }
  [data-theme] tr:hover { background-color: var(--color-surface-hover); }
  [data-theme] dialog[open], [data-theme] [role="menu"],
  [data-theme] [role="dialog"] { animation: sureFade .16s ease both; }
  @keyframes sureFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  /* Entrada del panel: cascada corta y seca */
  @keyframes ratReveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  [data-theme] main .bg-container { animation: ratReveal .38s cubic-bezier(.2,.7,.25,1) both; }
  [data-theme] main .bg-container:nth-of-type(2) { animation-delay: .05s; }
  [data-theme] main .bg-container:nth-of-type(3) { animation-delay: .1s; }
  [data-theme] main .bg-container:nth-of-type(4) { animation-delay: .15s; }
  [data-theme] main .bg-container:nth-of-type(5) { animation-delay: .2s; }
  [data-theme] main .bg-container:nth-of-type(6) { animation-delay: .25s; }
}

/* ---- 4. Movil: dashboard compacto (heredado, conservado) ---- */
@media (max-width: 640px) {
  #cashflow-sankey-chart .h-96 { height: 13rem; }
  #cashflow-sankey-chart { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  [data-theme] h1 { font-size: 1.35rem; line-height: 1.75rem; }
}

/* ---- 5. Sankey de flujo de caja (heredado, conservado) ---- */
#cashflow-sankey-chart .sankey-link { opacity: .38; transition: opacity .22s ease; }
#cashflow-sankey-chart:hover .sankey-link { opacity: .22; }
#cashflow-sankey-chart .sankey-link:hover { opacity: .92 !important; }

/* ---- 6. Panel operativo de un vistazo (escritorio) — anclas de v25 ---- */
@media (min-width: 1024px) {
  #op-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: row dense;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
  }
  #op-grid > * { margin-bottom: 0 !important; }

  /* Fila 0: metricas del mes en tira fina */
  .op-stats {
    order: -1;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
  }
  .op-stats > div { padding: .55rem 1.1rem !important; }
  .op-stats p.text-2xl, .op-stats p.text-xl { font-size: 1.45rem; line-height: 1.7rem; }
  .op-stats p.mb-3 { margin-bottom: .25rem !important; }
  .op-stats p.mt-1\.5 { margin-top: .15rem !important; }

  /* Zona central: pila izquierda (disponible + negocio + te-deben),
     deudas al centro, donut ancho a la derecha */
  .op-disp, .op-bp, .op-owed { grid-column: 1 / 4; }
  .op-debo   { grid-column: 4 / 7;  grid-row: span 3; }
  .op-donuts { grid-column: 7 / -1; grid-row: span 3; }

  /* Cabeceras compactas */
  .op-disp p.text-3xl, .op-debo p.text-3xl { margin-bottom: .25rem !important; }
  .op-disp .mt-5, .op-debo .mt-5 { margin-top: .25rem !important; }

  /* Filas de cuentas y deudas prietas; logo pequeño */
  .op-disp a, .op-debo a { padding-top: .2rem !important; padding-bottom: .2rem !important; }
  .op-disp a > span:first-child, .op-debo a > span:first-child,
  .op-disp a > div:first-child, .op-debo a > div:first-child {
    width: 22px !important; height: 22px !important;
  }
  .op-owed .flex.items-center { padding-top: .2rem !important; padding-bottom: .2rem !important; }

  /* Donut: forzar anillo + leyenda LADO A LADO siempre — el @container de la
     app solo lo hace a partir de 672px de tarjeta y la columna se queda corta */
  .op-donuts #outflows-donut-section > div > div.flex {
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  .op-donuts #outflows-donut-section > div > div.flex > div:first-child {
    width: 38% !important;
    max-width: 230px !important;
    margin: 0 !important;
  }
  .op-donuts #outflows-donut-section > div > div.flex > div:last-child {
    width: auto !important;
    flex: 1 1 0% !important;
    min-width: 0;
  }
  .op-donuts [data-controller="donut-chart"] { height: 195px !important; }
  .op-donuts #outflows-donut-section [data-donut-chart-target="amount"] {
    font-size: 1.35rem; line-height: 1.6rem;
  }
  .op-donuts .space-y-1 > * {
    padding-top: .2rem !important; padding-bottom: .2rem !important;
  }
  /* iconos de la leyenda mas pequeños: es lo que engorda cada fila */
  .op-donuts .space-y-1 .w-8, .op-donuts .space-y-1 .h-8 {
    width: 22px !important; height: 22px !important;
  }
  .op-donuts .space-y-1 svg { width: 13px !important; height: 13px !important; }
  .op-donuts > .bg-container > p.mb-2 { margin-bottom: .3rem !important; }

  /* Patrimonio neto: grafica mas baja para que quepa entera bajo el panel */
  [data-section-key="net_worth_chart"] { --dash-widget-h: 300px !important; }
  [data-section-key="net_worth_chart"] .h-96 { height: 11.5rem !important; }
  /* menos aire muerto entre el panel y las secciones de abajo */
  #op-grid { margin-bottom: .25rem; }

  /* "En que se va": tira a todo el ancho, categorias en 5 columnas */
  .op-cats { grid-column: 1 / -1; }
  .op-cats .space-y-3 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: .5rem;
  }
  .op-cats .space-y-3 > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  .op-cats > p.mb-3 { margin-bottom: .4rem !important; }
}