/* ============================================================
   DASSA · template de las apps del ecosistema — v1 · 14-09-2026
   Manual de Marca 4.0. Una sola hoja para que las 26 apps hijas se vean
   como una sola cosa: la franja roja con el lockup, el fondo crema, la
   tarjeta de radio 12 y las dos tipografías.

   CÓMO SE USA
   1. La app monta el design system en su carpeta pública (las hijas ya lo
      tienen como symlink `ds/ → dassa4/design-system/`) y carga esta hoja:
        <link rel="stylesheet" href="ds/dassa-app.css">
      En una app con build (Vite), alcanza con `@import "…/dassa-app.css";`
      arriba de todo en su CSS de entrada, o copiar `fonts/` a `public/`.
   2. El header se arma con el marcado de abajo (ver HEADER).
   3. Lo que la app ya tenía no se toca: esta hoja aporta variables y el
      chrome; el contenido sigue con el CSS de cada una.

   ⚠️ Las webfonts van SERVIDAS POR LA PROPIA APP, nunca desde Google: la
   CSP de los servers del ecosistema es `'self'` y además así no dependen
   de la red. Las rutas de abajo son relativas a esta hoja — si tu app la
   copia en vez de montarla, copiá `fonts/` al lado.
   ============================================================ */

@font-face { font-family:"Montserrat"; src:url("fonts/montserrat-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("fonts/montserrat-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("fonts/montserrat-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("fonts/montserrat-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("fonts/montserrat-800.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("fonts/montserrat-900.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"Open Sans"; src:url("fonts/opensans-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Open Sans"; src:url("fonts/opensans-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

:root {
  /* Paleta 4.0. El #C8202C y el #2BB8BE están deprecados. */
  --dassa-red:       #BF1E2E;
  --dassa-red-deep:  #A8121E;
  --dassa-celeste:   #5BBDC9;   /* acento, nunca fondo grande (regla del 5%) */
  --dassa-cream:     #F5F3F3;   /* fondo de página, cálido, no blanco puro   */
  --dassa-line:      #E4E0E0;   /* contorno de tarjeta y separadores         */
  --dassa-ink:       #141414;
  --dassa-ink-2:     #4A4A4A;
  --dassa-ink-3:     #5E5E5E;
  --dassa-radio:     12px;      /* radio único de tarjeta                    */

  /* Manual 4.0: Montserrat es TODO lo visible —cuerpo, UI, botones, nav,
     formularios—. Open Sans queda para el pie, los legales y la letra chica. */
  --dassa-font:      "Montserrat", system-ui, -apple-system, sans-serif;
  --dassa-font-pie:  "Open Sans", system-ui, -apple-system, sans-serif;
  --dassa-font-datos:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- BASE ----------
   Se aplica sólo si la app marca su <body class="dassa-app">: así una app
   puede traer las variables sin que la hoja le pise el layout que ya tiene. */
body.dassa-app {
  margin: 0;
  background: var(--dassa-cream);
  color: var(--dassa-ink);
  font-family: var(--dassa-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.dassa-app h1,
body.dassa-app h2,
body.dassa-app h3,
body.dassa-app h4 {
  font-family: var(--dassa-font);
  letter-spacing: -0.018em;
}

/* ---------- HEADER ----------
   <header class="dassa-top">
     <div class="dassa-top__in">
       <a class="dassa-top__marca" href="https://apps.dassa.com.ar" title="Volver a Smart DASSA Apps">
         <img class="dassa-top__logo" src="ds/logos/dassa-lockup.png" alt="DASSA">
       </a>
       <span class="dassa-top__div"></span>
       <span class="dassa-top__nombre">Nombre de la app</span>
       <nav class="dassa-nav"> <a class="dassa-nav__link is-on">Sección</a> … </nav>
       <div class="dassa-top__yo"> … </div>
     </div>
   </header>
   El logo va primero y es la vuelta al portal: se entra desde ahí y se
   vuelve por ahí. El rojo tapiza sólo esta franja. */
.dassa-top {
  background: var(--dassa-red);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(26,26,26,.10);
}
.dassa-top__in {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dassa-top__marca { display: flex; align-items: center; flex: none; text-decoration: none; }
.dassa-top__logo {
  height: 26px;
  width: auto;
  display: block;
  /* El lockup oficial pintado de blanco: el manual pide el archivo, no
     redibujar el wordmark con tipografía. */
  filter: brightness(0) invert(1);
}
.dassa-top__div { width: 1px; height: 22px; background: rgba(255,255,255,.35); flex: none; }
.dassa-top__nombre {
  font-family: var(--dassa-font);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}
/* Descriptor opcional al lado del nombre ("datos e indicadores"). En un
   celular no entra: se esconde. */
.dassa-top__sub {
  font-family: var(--dassa-font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.82);
}
@media (max-width: 720px) { .dassa-top__sub { display: none; } }

.dassa-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dassa-nav__link {
  font-family: var(--dassa-font);
  font-weight: 600;
  font-size: 12.5px;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 9999px;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.dassa-nav__link:hover { background: rgba(255,255,255,.16); color: #fff; }
.dassa-nav__link.is-on { background: #fff; color: var(--dassa-red); }

.dassa-top__yo {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--dassa-font);
  font-size: 12.5px;
  color: #fff;
}
.dassa-top__yo b { font-weight: 700; }
.dassa-top__yo a { color: rgba(255,255,255,.85); text-decoration: none; }
.dassa-top__yo a:hover { color: #fff; }
.dassa-top__salir {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  font-weight: 700;
}

/* ---------- SUPERFICIES ----------
   Lo mínimo para que una tarjeta y una tabla se vean igual en todas. */
.dassa-card {
  background: #fff;
  border: 1px solid var(--dassa-line);
  border-radius: var(--dassa-radio);
  padding: 18px 20px;
}
.dassa-shell { max-width: 1400px; margin: 0 auto; padding: 20px; }
.dassa-num { font-family: var(--dassa-font-datos); font-variant-numeric: tabular-nums; }