/* ============================================================================
   IVAE Marketing — Tema "Sistema IVA" (rediseño 2026, Claude Design).
   Capa de SOLO ESTILO, cargada DESPUÉS de app.css/tokens2.css/shell.css y de
   los CSS de vista, para ganar la cascada de :root. NO toca markup ni lógica:
   re-tinta toda la app cambiando los tokens + la tipografía a Outfit.
   Rollback limpio: quitar el <link> de este archivo en app.html.
   Paleta origen: Sistema IVA.dc.html (fondo #0A0A0E, cards #121218, acento
   magenta→violeta #E24DA0→#9D5BE0, fuente Outfit).
   ============================================================================ */

:root {
  /* Tipografía: Outfit como primaria (Inter de respaldo si no carga) */
  --font: "Outfit", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Superficies (near-black + cards) */
  --bg:            #0A0A0E;
  --surface:       #121218;
  --surface-2:     #16161D;
  --surface-3:     rgba(255, 255, 255, .03); /* hover/translucent tint */
  --border:        #1E1E26;
  --border-strong: #2C2C38;

  /* Texto */
  --text:      #ECECF1;
  --text-dim:  #9A9AA8;
  --text-mute: #62626F;

  /* Acento de marca: magenta → violeta (sustituye violeta/fuchsia/pink) */
  --violet:       #9D5BE0;
  --fuchsia:      #E24DA0;
  --pink:         #E24DA0;
  --brand:        #E24DA0;
  --brand-strong: #9D5BE0;
  --grad:      linear-gradient(135deg, #E24DA0 0%, #9D5BE0 100%);
  --grad-soft: linear-gradient(135deg, rgba(226, 77, 160, .18) 0%, rgba(157, 91, 224, .16) 100%);

  /* Glows/anillos re-teñidos al magenta */
  --sh-glow:       0 6px 22px -4px rgba(226, 77, 160, .42), 0 2px 8px -2px rgba(157, 91, 224, .30);
  --sh-glow-hover: 0 10px 30px -4px rgba(226, 77, 160, .52), 0 3px 12px -2px rgba(157, 91, 224, .38);
  --ring:          0 0 0 2px var(--bg), 0 0 0 4px var(--brand), 0 0 0 7px rgba(226, 77, 160, .28);

  /* El acento por-cliente sigue funcionando (shell.js lo escribe en body.style);
     su fallback ahora es el magenta nuevo. */
  --client-accent:      #E24DA0;
  --client-accent-soft: color-mix(in srgb, var(--client-accent) 18%, transparent);
  --client-accent-line: color-mix(in srgb, var(--client-accent) 35%, transparent);
}

/* Suavizado de fuente acorde al diseño */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Barras de scroll al tono del diseño (#26262F) */
::-webkit-scrollbar-thumb { background: #26262F; }
::-webkit-scrollbar-thumb:hover { background: #34343F; }

/* Chrome translúcido (topbar/nav/cabeceras sticky) al near-black nuevo.
   Eran rgba(11,11,18,…) hardcodeados; los igualamos al fondo nuevo. */
#topbar { background: rgba(10, 10, 14, .86) !important; }
.dash-head { background: rgba(10, 10, 14, .92) !important; }

/* ============================================================================
   FIDELIDAD AL DISEÑO "Sistema IVA" — Inicio. Solo estilo (no toca lógica).
   ============================================================================ */

/* BUG FIX: la cabecera sticky (toggle + mes) tapaba ~40px de las tarjetas KPI,
   ocultando los NÚMEROS (por eso se veían vacías). La dejamos en flujo normal
   para que las tarjetas y sus números queden visibles, como el mockup. */
.dash-head { position: static !important; margin-top: 0 !important; }

/* Tarjetas KPI estilo mockup: ETIQUETA mayúsculas arriba + puntito de estado
   arriba-derecha, NÚMERO grande blanco debajo, subtítulo abajo. */
.dash-counter {
  align-items: stretch !important;
  gap: 0 !important;
  padding: 18px 20px !important;
  min-height: 100px !important;
  border-radius: 14px !important;
  position: relative;
}
.dash-counter__label {
  order: -1 !important;
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 11px !important; font-weight: 600 !important;
  color: #6E6E7C !important; padding-right: 18px;
}
.dash-counter__value {
  order: 0 !important;
  font-size: 30px !important; line-height: 1 !important; margin-top: 12px;
  color: #F2F2F6 !important; font-variant-numeric: tabular-nums;
}
.dash-counter.is-warn  .dash-counter__value,
.dash-counter.is-danger .dash-counter__value,
.dash-counter.is-ok    .dash-counter__value { color: #F2F2F6 !important; }
.dash-counter__sub { order: 1 !important; margin-top: 5px; font-size: 12.5px !important; }
.dash-counter.is-ok .dash-counter__sub { color: #3FB984 !important; }
.dash-counter.is-danger { border-color: var(--border) !important; }
.dash-counter::after {
  content: ''; position: absolute; top: 20px; right: 20px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.dash-counter.is-warn::after  { background: #E0A43F; box-shadow: 0 0 0 4px rgba(224,164,63,.13); }
.dash-counter.is-danger::after{ background: #E0A43F; box-shadow: 0 0 0 4px rgba(224,164,63,.13); }
.dash-counter.is-ok::after    { background: #3FB984; box-shadow: 0 0 0 4px rgba(63,185,132,.13); }
.dash-counter:not(.is-warn):not(.is-danger):not(.is-ok):not(.is-brand)::after { background: #34343E; box-shadow: none; }

/* Logo de marca "iv ESTUDIOS" en el topbar (diseño Sistema IVA). */
.tb-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; margin-right: 6px; }
.tb-brand__mark {
  width: 27px; height: 27px; border-radius: 8px;
  background: var(--grad);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff; letter-spacing: -.04em;
}
.tb-brand__word {
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
  color: #7A7A88; text-transform: uppercase; white-space: nowrap;
}
/* En móvil angosto se oculta la palabra para ahorrar espacio (queda el cuadro). */
@media (max-width: 560px) { .tb-brand__word { display: none; } .tb-brand { margin-right: 2px; } }

/* Punto rosa para "Esta semana" (tone brand), como el diseño Sistema IVA. */
.dash-counter.is-brand::after { background: var(--brand); box-shadow: 0 0 0 4px rgba(226, 77, 160, .13); }

/* ============================================================================
   Pipeline estilo Sistema IVA: las 5 etapas SIEMPRE visibles, cada una con su
   mini-barra de progreso + conteo (reemplaza la leyenda colapsada con el link
   "Ver todos los estados"). Solo estilo; el markup lo arma dash-widgets.js.
   ============================================================================ */
.dash-pipeline .dash-pipe { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.dash-pipe__row {
  display: grid;
  grid-template-columns: 11px 94px 1fr 28px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 6px;
  background: none; border: 0; cursor: pointer; text-align: left;
  border-radius: 9px;
  transition: background .12s ease;
}
.dash-pipe__row:hover { background: rgba(255, 255, 255, .035); }
.dash-pipe__row.is-zero { opacity: .45; }
.dash-pipe__dot { width: 9px; height: 9px; border-radius: 50%; }
.dash-pipe__row.is-zero .dash-pipe__dot { background: #3A3A44 !important; }
.dash-pipe__label { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; }
.dash-pipe__track {
  height: 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .06); overflow: hidden;
}
.dash-pipe__fill { display: block; height: 100%; border-radius: 99px; min-width: 0; }
.dash-pipe__count {
  font-size: 14px; font-weight: 700; color: var(--text);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Layout ENTERPRISE full-width (el diseño Sistema IVA llena la pantalla).
   ANTES: #view y .tb-inner topaban a 1240px centrado -> en pantallas anchas
   (p. ej. 1710px) dejaban ~470px de negro a los lados = "espacios en blanco".
   AHORA: el contenido, la barra superior y el subhead llenan el ancho con
   margenes comodos y ALINEADOS entre si. Cap alto (1920) solo para monitores
   gigantes. Solo layout; no toca markup ni lógica.
   ============================================================================ */
#view {
  max-width: 1920px !important;
  padding-left: clamp(20px, 4vw, 72px) !important;
  padding-right: clamp(20px, 4vw, 72px) !important;
}
.tb-inner {
  max-width: 1920px !important;
  padding-left: clamp(20px, 4vw, 72px) !important;
  padding-right: clamp(20px, 4vw, 72px) !important;
}
#subhead {
  padding-left: clamp(20px, 4vw, 72px) !important;
  padding-right: clamp(20px, 4vw, 72px) !important;
}

/* ============================================================================
   Dashboard SIN HUECOS: filas limpias de 2 columnas (Pipeline | Racha,
   Por aprobar | Plataformas) donde las tarjetas se ESTIRAN para llenar (no
   dejan negro abajo), y Proximos/Atrasados a todo lo ancho. ANTES era una
   rejilla de 12 columnas con spans disparejos (8/4/6/5/7) que, con alturas
   distintas, dejaba huecos negros abajo de Racha y a la derecha de Plataformas.
   ============================================================================ */
@media (min-width: 900px) {
  .dash-body {
    grid-template-columns: 1.5fr 1fr !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
  }
  .dash-body > * { grid-column: auto !important; align-self: stretch !important; }
  .dash-counters { grid-column: 1 / -1 !important; }
  .dash-clients, .dash-skel { grid-column: 1 / -1 !important; }
  /* Almacenamiento: ancho completo justo debajo de Clientes. El
     `grid-column: span 12` de dashboard.css es CSS muerto aqui (lo pisa el
     `grid-column: auto !important` de arriba), y con order 5 empataba con
     Plataformas y se colaba en la columna angosta: Racha quedaba estirada,
     la barrita de cada fila se encogia a 78px y quedaba un hueco negro a la
     derecha del donut. order 2 = mismo grupo que Clientes, y el DOM lo pone
     despues. */
  .dash-storage { grid-column: 1 / -1 !important; order: 2 !important; }
  .dash-pipeline    { order: 2 !important; }
  .dash-streak      { order: 3 !important; }
  .dash-approvals   { order: 4 !important; }
  .dash-donutcard   { order: 5 !important; }
  .dash-overduecard { grid-column: 1 / -1 !important; order: 6 !important; }
  .dash-weekcard    { grid-column: 1 / -1 !important; order: 7 !important; }
  /* las cards ahora tienen contenido rico (mini-stats / barras) que llena el
     alto; el cuerpo crece para ocupar la card estirada. */
  .dash-streak, .dash-donutcard { justify-content: flex-start !important; }
  .dash-streak__body, .dash-donutcard__body { flex: 1 1 auto !important; }
}

/* ============================================================================
   OBRA MAESTRA ENTERPRISE — Pulido GLOBAL (toca toda la app de un golpe).
   Cards con profundidad (sheen + sombra en 2 capas + hover), micro-elevacion,
   cifras tabulares, y componentes reutilizables (.delta, .empty-rich).
   ============================================================================ */

/* Cards premium: dejan de fundirse con el fondo (profundidad tipo Notion/Linear). */
.dash-card, .dash-counter, .kb-card, .mt-kpi, .mt-vid, .meses-stat, .wl-person, .mw-stat {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 46%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 26px -16px rgba(0, 0, 0, .66) !important;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease !important;
}
.dash-card:hover, .dash-counter:hover, .kb-card:hover, .mt-kpi:hover, .mt-vid:hover,
.meses-stat:hover, .wl-person:hover { border-color: var(--border-strong) !important; }
/* Micro-elevacion en superficies clicables. */
.dash-counter:hover, .kb-card:hover, .mt-kpi:hover, .mt-vid:hover, .meses-stat:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .dash-card, .dash-counter, .kb-card, .mt-kpi, .mt-vid { transition: none !important; }
  .dash-counter:hover, .kb-card:hover, .mt-kpi:hover, .mt-vid:hover, .meses-stat:hover { transform: none; }
}
/* Hairline de acento arriba de las cards estrella del Inicio. */
.dash-pipeline, .dash-donutcard { position: relative; }
.dash-pipeline::before, .dash-donutcard::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  border-radius: 14px 14px 0 0; background: var(--grad); opacity: .5;
}

/* Cifras tabulares: ninguna cifra "baila" al re-render (pulido tipo Stripe). */
.dash-counter__value, .dash-pipe__count, .dash-mini__v, .dash-plat__val b, .dash-plat__total,
.kb-col__count, .tb-badge, .bn-badge, .mt-kpi__val, .meses-stat__v {
  font-variant-numeric: tabular-nums;
}

/* Pildora de delta/tendencia (▲ verde / ▼ rojo / = gris) — reutilizable. */
.delta {
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  display: inline-flex; gap: 3px; align-items: center; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.delta.is-up   { color: #3FB984; background: rgba(63, 185, 132, .12); }
.delta.is-down { color: #E0654F; background: rgba(224, 101, 79, .12); }
.delta.is-flat { color: var(--text-mute); background: var(--surface-3); }

/* Estado vacio premium reutilizable. */
.empty-rich { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 44px 20px; }
.empty-rich__ico {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px;
  background: var(--grad-soft); color: var(--brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent), 0 14px 44px -18px rgba(226, 77, 160, .5);
}
.empty-rich__t { font-weight: 800; letter-spacing: -.01em; color: var(--text); font-size: 16px; }
.empty-rich__s { font-size: 13px; color: var(--text-mute); max-width: 34ch; line-height: 1.5; }

/* ── Racha enriquecida: num+sparkline | mini-stats (llena el hueco) ── */
.dash-streak__body {
  display: grid !important; grid-template-columns: 1fr .92fr; gap: 18px;
  align-items: stretch; width: 100%; padding: 0; background: none; border: 0; text-align: left; cursor: pointer;
}
.dash-streak__left { display: flex; flex-direction: column; gap: 16px; justify-content: flex-start; min-width: 0; }
.dash-streak__stats { display: flex; flex-direction: column; justify-content: center; gap: 15px; border-left: 1px solid var(--border); padding-left: 18px; }
.dash-mini { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 10px; }
.dash-mini__k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); }
.dash-mini__v { font-size: 16px; font-weight: 700; color: var(--text); }
.dash-mini__bar { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; margin-top: 4px; }
.dash-mini__bar i { display: block; height: 100%; background: var(--grad); border-radius: 99px; }
/* En movil angosto, las mini-stats van debajo. */
@media (max-width: 560px) {
  .dash-streak__body { grid-template-columns: 1fr; }
  .dash-streak__stats { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
}

/* ── Plataformas: dona + total grande + barras horizontales (llena el hueco) ── */
.dash-plat__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.dash-plat__hero { display: flex; flex-direction: column; gap: 1px; }
.dash-plat__total { font-size: 30px; font-weight: 800; color: var(--text); line-height: 1; }
.dash-plat__cap { font-size: 12.5px; color: var(--text-mute); }
.dash-plat__bars { display: flex; flex-direction: column; gap: 13px; }
.dash-plat__row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px; background: none; border: 0; padding: 3px 0; cursor: pointer; text-align: left; width: 100%; border-radius: 6px; }
.dash-plat__name { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); white-space: nowrap; }
.dash-plat__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dash-plat__track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.dash-plat__track i { display: block; height: 100%; border-radius: 99px; min-width: 2px; }
.dash-plat__val { display: inline-flex; align-items: baseline; gap: 6px; min-width: 56px; justify-content: flex-end; }
.dash-plat__val b { font-size: 14px; font-weight: 700; color: var(--text); }
.dash-plat__val small { font-size: 11px; color: var(--text-mute); }

/* ── Metricas: cards con profundidad + pasos del estado vacio ── */
.mt-card {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 46%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 26px -16px rgba(0, 0, 0, .66) !important;
}
.mt-steps { list-style: none; margin: 8px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 11px; text-align: left; max-width: 380px; }
.mt-step { display: flex; align-items: center; gap: 13px; font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.mt-step__n {
  flex: none; width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--brand); background: var(--grad-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent);
}
/* La barra de audiencia con el gradiente de marca para verse premium. */
.mt-aud__bar i { background: var(--grad) !important; }

/* ── Calendario tabla: franja de stats + barra de progreso segmentada ── */
.meses-stats { display: flex; gap: 12px; margin: 2px 0 16px; flex-wrap: wrap; }
.meses-stat {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 18px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); min-width: 104px;
}
.meses-stat__v { font-size: 21px; font-weight: 800; color: var(--text); line-height: 1; }
.meses-stat__k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); }
.meses-stat.is-danger .meses-stat__v { color: #E0654F; }
.meses-stat.is-ok .meses-stat__v { color: #3FB984; }
.meses-prog__track--seg { display: flex !important; gap: 2px; height: 8px; background: none !important; }
.meses-prog__track--seg .meses-prog__seg { height: 100%; border-radius: 3px; min-width: 4px; }
/* TELEFONO: en fila con wrap las cuatro tarjetas quedaban de anchos distintos
   segun el largo de su palabra (PIEZAS, PUBLICADO, ATRASADOS, SIN APROBAR) y
   la reja se veia chueca. Dos columnas iguales (medido a 390px, 2026-09-08). */
@media (max-width: 560px) {
  .meses-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .meses-stat { min-width: 0; padding: 11px 14px; }
}

/* La pildora de delta vive junto al numero del KPI. */
.dash-counter__value { display: inline-flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }

/* ── Editor: panel mas hondo + cabecera con brillo + tab activo mas marcado ── */
.edpanel { box-shadow: -28px 0 70px -28px rgba(0, 0, 0, .72) !important; }
.edhead { background-image: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 70%); }
.edtabs__tab.is-active { border-bottom-width: 2px; }
.edblock { background-image: linear-gradient(180deg, rgba(255, 255, 255, .016), transparent 52%); }

/* ── Cuadricula: celdas con hover, HOY con halo magenta, pills con realce ── */
.cal-mcell { transition: background .12s ease; }
.cal-mcell:hover { background: rgba(255, 255, 255, .016); }
.cal-mcell.is-today { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 34px -12px rgba(226, 77, 160, .45) !important; }
.cal-pill { transition: transform .1s ease; }
.cal-pill:hover { transform: translateX(2px); }
.cal-card { transition: border-color .14s ease, transform .14s ease; }
.cal-card:hover { transform: translateY(-1px); border-color: var(--border-strong); }

/* ── Agenda movil (lista del dia): cada tarjeta como un CUADRO separado. ──────
   .cal-card quedaba FUERA del pase "cards con profundidad" (~linea 216), asi que
   sobre el fondo casi negro las tarjetas del dia se fundian en un solo bloque y
   costaba ver donde acaba una y empieza otra. Refuerza los 3 bordes (conservando
   el borde de COLOR de estado a la izquierda), sube un pelin la superficie, agrega
   profundidad y mas aire entre tarjetas. Solo estilo; no toca markup ni logica. */
.ag-list { gap: 16px; }
.ag-list .cal-card {
  /* Sobre el fondo casi negro un borde oscuro NO se ve, asi que la separacion
     real viene de: superficie NOTABLEMENTE mas clara que el fondo + sombra +
     mas aire. Valores hex propios (los tokens del tema son todos casi-negros).
     El borde de COLOR de estado a la izquierda se conserva (solo se refuerzan
     los otros 3 lados). */
  border-top-color: #3d3d4b;
  border-right-color: #3d3d4b;
  border-bottom-color: #3d3d4b;
  border-radius: 16px;
  background-color: #20202c;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 55%);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .5), 0 14px 32px -10px rgba(0, 0, 0, .8);
}