recordalexia/frontend/src/styles.scss

// Estilos globales de recordaLexia.
// Las @font-face (OpenDyslexic/Fredoka/Nunito) se cargan desde @fontsource vía
// angular.json. Tokens en styles/_theme.scss; animaciones en styles/_animations.scss.
@use 'styles/theme';
@use 'styles/animations';

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text-strong);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  // Fondo calmado del handoff: color base + dos gradientes radiales suaves.
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 700px at 12% -10%, #fbf4e9 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 120%, #e2f0ec 0%, transparent 55%);
  background-attachment: fixed;
}

// Dos "blobs" orgánicos difuminados de fondo (sin DOM extra, vía pseudo-elementos).
// Decorativos y detrás del contenido; no capturan toques.
body::before,
body::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  filter: blur(2px);
}

body::before {
  top: -120px;
  left: -100px;
  width: 420px;
  height: 420px;
  border-radius: 48% 52% 60% 40% / 55% 45% 60% 45%;
  background: #fcebd3;
  opacity: 0.55;
}

body::after {
  bottom: -140px;
  right: -90px;
  width: 460px;
  height: 460px;
  border-radius: 60% 40% 45% 55% / 50% 55% 45% 50%;
  background: #d7ece5;
  opacity: 0.6;
}

// El contenido de la app va por encima de los blobs.
app-root {
  position: relative;
  z-index: 1;
  display: block;
}

// Tipografía base.
h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--text-strong);
}

button {
  font-family: var(--font-display);
}

// Mata el retardo de doble-tap del navegador en la tablet kiosko: la pulsación
// debe responder al instante (se conserva el scroll y el pinch-zoom de página).
button,
a,
select,
input,
[role='button'] {
  touch-action: manipulation;
}

// --- Helpers del panel de padres (formularios de administración) ---
.adm-card {
  background: var(--surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-4);
}
.adm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.adm-input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 14px;
  border: 2px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-strong);
  min-width: 0;
}
.adm-input--sm { width: 70px; text-align: center; }
.adm-btn {
  font-family: var(--font-display);
  font-weight: 700;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  min-height: 44px;
  background: var(--accent-blue);
  color: #fff;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
.adm-btn:active { transform: scale(0.97); }
.adm-btn:disabled { opacity: 0.4; cursor: default; }
.adm-del {
  all: unset;
  cursor: pointer;
  color: var(--accent-pink);
  font-size: 1.2rem;
  // Área táctil mínima real aunque el glifo sea pequeño.
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: transform var(--dur-press) var(--ease-out), background var(--dur-settle) var(--ease-out);
}
.adm-del:active { transform: scale(0.9); background: var(--surface-softer); }
.adm-del:disabled { opacity: 0.35; cursor: default; }
.adm-list { display: flex; flex-direction: column; gap: 10px; }
.adm-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
}
.adm-item__grow { flex: 1; }
.adm-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  // Los chips actúan como botones (selector de días): área táctil de 44px mínimo.
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-softer);
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--text-1);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), background var(--dur-settle) var(--ease-out),
    color var(--dur-settle) var(--ease-out);
}
.adm-chip:active { transform: scale(0.95); }
.adm-empty { color: var(--text-3); padding: var(--space-4); text-align: center; }
.adm-label { font-weight: 600; color: var(--text-1); }