/* ============================================================================
   Moderniva — glass: la piel "vidrio pastel" del MODO CLARO + Inter global.
   Se carga DESPUÉS de app.css y solo sobreescribe apariencia (fondos, bordes,
   sombras, tipografía). El modo oscuro NO se toca aquí salvo la fuente: sigue
   siendo negro sólido #000 sin blur ni glow (§11).

   Reglas de rendimiento (WebView de gama media):
   - backdrop-filter SOLO en capas flotantes fijas (barra de Inicio, tabbar,
     sheets, menú contextual). Las tarjetas dentro del scroll usan "vidrio
     falso": blanco translúcido sin blur — sobre un degradado liso se ve igual
     y no cuesta GPU.
   - Nada de animar blur. Solo transform/opacity, como siempre.

   Quitar esta piel = borrar este archivo y su <link> en index.html.
   ========================================================================== */

/* ------------------------------------------------- Inter (ambos temas) ----
   Variable 400–800, local, sin red — igual que Nunito. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
body {
  font-family: 'Switzer', 'Inter', 'Segoe UI', system-ui, sans-serif;   /* Switzer, respaldo Inter */
  letter-spacing: -.01em;   /* tracking apenas negativo. edita aquí */
}

/* ------------------------------------------------------ tokens (claro) ---- */
[data-tema="claro"] {
  /* Fondo blanco liso — edita aquí */
  --glass-fondo: #fff;

  /* La receta del vidrio — edita aquí (opacidades entre .45 y .75) */
  --vidrio: rgba(255, 255, 255, .62);
  --vidrio-suave: rgba(255, 255, 255, .48);
  --vidrio-borde: rgba(255, 255, 255, .72);
  --vidrio-sombra: 0 1px 2px rgba(74, 56, 34, .05), 0 10px 28px rgba(74, 56, 34, .09);
  --vidrio-blur: blur(18px) saturate(170%);
}

/* -------------------------------------------------- fondos con degradado ----
   Cada contenedor a pantalla completa pinta el MISMO degradado: como todos
   miden el viewport, queda alineado entre tabs, páginas y login. El chat
   (.pagina--chat) conserva su fondo de WhatsApp. */
[data-tema="claro"] body,
[data-tema="claro"] .splash,
[data-tema="claro"] .login,
[data-tema="claro"] .tabs,
[data-tema="claro"] .tab,
[data-tema="claro"] .pagina:not(.pagina--chat) {
  background: var(--glass-fondo);
}

/* Las filas de chat necesitan fondo OPACO (tapan los iconos de swipe detrás):
   blanco casi puro en vez de crema, para no chocar con el pastel. */
[data-tema="claro"] .fila-chat { background: #FDFCFB; }
[data-tema="claro"] .fila-chat:active { background: var(--superficie-2); }

/* ------------------------------------------------- tarjetas de vidrio ------
   Vidrio falso (sin blur): tarjetas y piezas que viven dentro del scroll. */
[data-tema="claro"] .tu-dia__interior,
[data-tema="claro"] .an-card,
[data-tema="claro"] .ajustes__grupo,
[data-tema="claro"] .rr-card,
[data-tema="claro"] .kanban__col,
[data-tema="claro"] .planos-app__resumen,
[data-tema="claro"] .planos-app__fila,
[data-tema="claro"] .ag-composer,
[data-tema="claro"] .ms-flujo,
[data-tema="claro"] .cz-card,
[data-tema="claro"] .ag-msg--bot {
  background: var(--vidrio);
  border-color: var(--vidrio-borde);
  box-shadow: var(--vidrio-sombra);
}
/* Grupos de Ajustes: sus tokens de tarjeta apuntan al vidrio */
[data-tema="claro"] .ajustes {
  --tarjeta-sombra: var(--vidrio-sombra);
  --tarjeta-borde: var(--vidrio-borde);
}
/* Tarjetas del kanban: van DENTRO de una columna de vidrio → más opacas */
[data-tema="claro"] .kanban__tarjeta { background: rgba(255, 255, 255, .78); border-color: var(--vidrio-borde); }

/* Piezas menores: de gris cálido plano a vidrio suave */
[data-tema="claro"] .buscador,
[data-tema="claro"] .chip-etapa:not(.activa),
[data-tema="claro"] .chip-dia:not(.chip-dia--alerta):not(.chip-dia--ambar),
[data-tema="claro"] .conmutador,
[data-tema="claro"] .ficha__estado:not(.activo),
[data-tema="claro"] .ficha__accion:not(.ficha__accion--bloqueada),
[data-tema="claro"] .chip-proy:not(.chip-proy--principal),
[data-tema="claro"] .lista-proy-elegir__item,
[data-tema="claro"] .planos-app__seltab,
[data-tema="claro"] .planos-app__dato,
[data-tema="claro"] .ag-acc,
[data-tema="claro"] .ag-chip {
  background: var(--vidrio-suave);
}
/* Estas reglas base son de igual especificidad que los estados de app.css y
   este archivo carga después: se re-declara el feedback al presionar. */
[data-tema="claro"] .rr-card:active,
[data-tema="claro"] .planos-app__fila:active { background: var(--superficie-2); }
[data-tema="claro"] .ag-acc:active,
[data-tema="claro"] .ag-chip:active { background: var(--acento-suave); }

/* Radios un punto más generosos en las tarjetas grandes del estilo */
[data-tema="claro"] .an-card,
[data-tema="claro"] .ms-flujo { border-radius: 18px; }

/* --------------------------------------------- vidrio real (con blur) ------
   Solo capas flotantes: contenido nítido pasa por detrás y el blur sí se ve. */
[data-tema="claro"] .in-top {
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--vidrio-sombra);
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
}
[data-tema="claro"] .in-top__ico { background: var(--vidrio-suave); border-color: var(--vidrio-borde); }
[data-tema="claro"] .tabbar {
  background: rgba(255, 255, 255, .58);
  border-top-color: var(--vidrio-borde);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
[data-tema="claro"] .sheet {
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
[data-tema="claro"] .menu-ctx {
  background: rgba(255, 255, 255, .86);
  border-color: var(--vidrio-borde);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

/* ------------------------------------------------------- Inicio (claro) ---- */
/* El bloque con título + contenido (Tus herramientas, Calendario) es la tarjeta
   de vidrio; la tira del calendario vive dentro y no lleva tarjeta propia. */
[data-tema="claro"] .in-bloque {
  background: var(--vidrio);
  border-color: var(--vidrio-borde);
  box-shadow: var(--vidrio-sombra);
}
[data-tema="claro"] .iw-strip { background: none; border: none; box-shadow: none; }
[data-tema="claro"] .inicio__seccion { color: #000; }
/* Los tracks de los gráficos, sobre vidrio, en gris neutro translúcido */
[data-tema="claro"] .g-barra__track { background: rgba(38, 37, 31, .08); }

/* ------------------------------------- geometría del hero (ambos temas) ----
   ÚNICO lugar para el TAMAÑO del hero (banner "chats sin responder"/felicitación).
   Antes se repetía en app.css y esta capa lo pisaba: los cambios allá no se veían.
   De banner gigante a tarjeta: chip cuadrado redondeado en vez de circulote. */
.in-hero { padding: 22px; gap: 16px; min-height: 136px; border-radius: 20px; border: 1px solid transparent; }  /* alto/espaciado del cuadro — edita aquí */
.in-hero__ico { width: 72px; height: 72px; border-radius: 20px; }   /* tamaño del ícono — edita aquí */
.in-hero__ico svg { width: 38px; height: 38px; stroke-width: 2.2; } /* tamaño y grosor del glifo dentro — edita aquí */
.in-hero__tit { font-size: 24px; }     /* tamaño del título — edita aquí */
.in-hero__sub { font-size: 16px; }     /* tamaño del subtítulo — edita aquí */