/* Sistema de diseño de RopiHappy, los mismos tokens que la app de Android. */

:root {
  --lienzo: #fbfaf8;
  --lienzo-alt: #f4f1ec;
  --superficie: #ffffff;
  --prenda-fondo: #ffffff;
  --tinta: #1b1a1f;
  --tinta-media: #5b5766;
  --tinta-suave: #6e6a78;
  --borde: #e7e3dd;
  --borde-fuerte: #cfc9c1;
  --lavanda-700: #5334b8;
  --lavanda-600: #6b4fd8;
  --lavanda-100: #ece7ff;
  --lavanda-050: #f6f3ff;
  --coral-600: #c9463c;
  --coral-500: #ff6f61;
  --salvia-600: #3d7a5f;
  --salvia-100: #e2f1e9;
  --ambar-600: #9a6a10;
  --ambar-100: #fdf0d9;
  --rojo-600: #b83227;
  --rojo-100: #fde8e5;

  --x1: 4px; --x2: 8px; --x3: 12px; --x4: 16px;
  --x5: 20px; --x6: 24px; --x8: 32px; --x10: 40px; --x12: 48px;

  --r-xs: 10px; --r-s: 14px; --r-m: 18px; --r-l: 24px; --r-xl: 32px;

  --sombra-card: 0 1px 2px rgba(27,26,31,.04), 0 4px 12px rgba(46,39,71,.06);
  --sombra-flotante: 0 6px 20px rgba(46,39,71,.24);
  --sombra-hoja: 0 -8px 32px rgba(27,26,31,.08);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lienzo: #131216;
    --lienzo-alt: #1b1a1f;
    --superficie: #1d1b22;
    /* El fondo de la prenda es blanco puro también de noche: es lo que hace
       que el armario parezca un catálogo. */
    --prenda-fondo: #ffffff;
    --tinta: #f5f3f7;
    --tinta-media: #b4afbe;
    --tinta-suave: #928d9c;
    --borde: #34313c;
    --borde-fuerte: #474453;
    --lavanda-700: #c9b8ff;
    --lavanda-600: #b9a3ff;
    --lavanda-100: #2e2747;
    --lavanda-050: #211c33;
    --coral-600: #ffb0a6;
    --coral-500: #ff8878;
    --salvia-600: #86c9a8;
    --salvia-100: #1f3229;
    --ambar-600: #e6bb6a;
    --ambar-100: #33280f;
    --rojo-600: #ff9b90;
    --rojo-100: #3a1f1c;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 22px;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Tipografía */
.display-xl { font-family: var(--display); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -.5px; margin: 0; }
.display-l  { font-family: var(--display); font-size: 31px; line-height: 36px; font-weight: 600; letter-spacing: -.4px; margin: 0; }
.display-m  { font-family: var(--display); font-size: 24px; line-height: 30px; font-weight: 600; margin: 0; }
.titulo     { font-size: 21px; line-height: 27px; font-weight: 700; margin: 0; }
.seccion    { font-size: 17px; line-height: 24px; font-weight: 700; margin: 0; }
.cuerpo     { font-size: 15px; line-height: 22px; margin: 0; }
.fuerte     { font-weight: 600; }
.apoyo      { font-size: 13px; line-height: 19px; margin: 0; }
.etiqueta   { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin: 0; }
.micro      { font-size: 11px; line-height: 14px; font-weight: 600; margin: 0; }
.media      { color: var(--tinta-media); }
.suave      { color: var(--tinta-suave); }

/* Estructura */
#vista {
  flex: 1;
  overflow-y: auto;
  padding: var(--x6) var(--x4) var(--x12);
  padding-top: max(var(--x6), env(safe-area-inset-top));
  -webkit-overflow-scrolling: touch;
}
#vista.sin-barra { padding-bottom: var(--x6); }

.pila { display: flex; flex-direction: column; gap: var(--x4); }
.fila { display: flex; align-items: center; gap: var(--x2); }
.fila-sep { display: flex; align-items: center; justify-content: space-between; gap: var(--x3); }
.crece { flex: 1; }

.tiras { display: flex; gap: var(--x2); overflow-x: auto; padding-bottom: var(--x1); scrollbar-width: none; }
.tiras::-webkit-scrollbar { display: none; }

/* Botones */
button, .boton { font-family: inherit; font-size: 15px; cursor: pointer; border: 0; }

.b-principal {
  width: 100%;
  min-height: 56px;
  border-radius: var(--r-l);
  background: var(--lavanda-600);
  color: #fff;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--x2);
  padding: var(--x3) var(--x5);
}
.b-principal:disabled { background: var(--lienzo-alt); color: var(--tinta-suave); }

.b-secundario {
  min-height: 48px;
  border-radius: var(--r-s);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  color: var(--tinta);
  font-weight: 600;
  padding: var(--x3) var(--x5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--x2);
}
.b-ancho { width: 100%; }

.b-texto { background: none; color: var(--lavanda-600); font-weight: 600; min-height: 44px; padding: 0 var(--x2); }
.b-peligro { color: var(--rojo-600); }

.b-icono {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center;
}

.flotante {
  position: fixed;
  right: var(--x4);
  bottom: calc(76px + var(--x4) + env(safe-area-inset-bottom));
  width: 60px; height: 60px;
  border-radius: 999px;
  background: var(--lavanda-600);
  color: #fff;
  box-shadow: var(--sombra-flotante);
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
}

button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--lavanda-600);
  outline-offset: 2px;
}

/* Pastillas y chips */
.pastilla {
  min-height: 44px;
  padding: 0 var(--x4);
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  color: var(--tinta-media);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.pastilla[aria-pressed="true"] {
  background: var(--lavanda-600);
  border-color: var(--lavanda-600);
  color: #fff;
  font-weight: 700;
}

.moods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--x2); }
.mood {
  min-height: 78px;
  border-radius: var(--r-m);
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--tinta-media);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--x2) 4px;
  font-size: 12px; line-height: 15px; text-align: center;
}
.mood .cara { font-size: 20px; line-height: 24px; }
.mood[aria-pressed="true"] {
  background: var(--lavanda-100);
  border-color: var(--lavanda-600);
  color: var(--lavanda-700);
  font-weight: 700;
}

/* Tarjetas */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: var(--x4);
  box-shadow: var(--sombra-card);
}
.tarjeta-plana { box-shadow: none; border-radius: var(--r-m); }

/* Prendas */
.rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--x3); }
.azulejo { background: none; border: 0; padding: 0; text-align: left; color: var(--tinta); display: block; width: 100%; }
.marco {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--prenda-fondo);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.marco img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.marco .insignia {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
}
.marco .nota {
  position: absolute; left: 6px; bottom: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--ambar-100); color: var(--ambar-600);
  font-size: 11px; line-height: 15px; font-weight: 700;
}
.azulejo .nom { display: block; font-size: 13px; line-height: 18px; font-weight: 600; margin-top: var(--x2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.azulejo .met { display: block; font-size: 12px; line-height: 16px; color: var(--tinta-suave); }

.collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--x2); }
.collage .marco { border-radius: var(--r-s); }
.collage-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--x2); }
.collage-4 .marco { border-radius: var(--r-s); }

/* Avisos */
.aviso { border-radius: var(--r-m); padding: var(--x4); }
.aviso.ok { background: var(--salvia-100); }
.aviso.avi { background: var(--ambar-100); }
.aviso.err { background: var(--rojo-100); }
.aviso.ia { background: var(--lavanda-050); border: 1px solid var(--lavanda-100); }

/* Formularios */
label.rot { display: block; margin: var(--x5) 0 var(--x2); }
input[type="text"] {
  width: 100%;
  min-height: 52px;
  border-radius: var(--r-s);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--tinta);
  padding: 0 var(--x4);
  font-family: inherit; font-size: 15px;
}
input[type="range"] { width: 100%; accent-color: var(--lavanda-600); height: 28px; }

.interruptor { display: flex; align-items: center; gap: var(--x3); padding: var(--x3) 0; }
.interruptor input { width: 44px; height: 26px; accent-color: var(--lavanda-600); }

.dato { display: flex; justify-content: space-between; align-items: center; gap: var(--x3); padding: var(--x3) 0; border-bottom: 1px solid var(--borde); }
.dato:last-child { border-bottom: 0; }
.muestra { width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--borde-fuerte); display: inline-block; vertical-align: -2px; margin-right: 6px; }

/* Barra inferior */
nav.barra {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  box-shadow: var(--sombra-hoja);
  padding: var(--x2) var(--x1) calc(var(--x3) + env(safe-area-inset-bottom));
  position: sticky; bottom: 0;
  z-index: 10;
}
nav.barra a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 52px; justify-content: center;
  color: var(--tinta-media);
  text-decoration: none;
  font-size: 11px; line-height: 14px; font-weight: 600;
}
nav.barra a[aria-current="page"] { color: var(--lavanda-600); font-weight: 700; }
nav.barra .disco {
  width: 50px; height: 50px; border-radius: 999px;
  background: var(--lavanda-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-top: -18px;
  box-shadow: 0 6px 20px rgba(46,39,71,.2);
}

/* Estados */
.vacio { text-align: center; padding: var(--x8) var(--x4); }
.vacio .huecos { display: flex; justify-content: center; gap: var(--x2); margin-bottom: var(--x5); }
.vacio .hueco {
  width: 60px; height: 60px; border-radius: var(--r-s);
  border: 1.5px dashed var(--borde-fuerte);
  display: flex; align-items: center; justify-content: center;
  color: var(--tinta-suave);
}

.esqueleto { background: var(--lienzo-alt); border-radius: var(--r-s); aspect-ratio: 1/1; }

.cargando { display: flex; align-items: center; gap: var(--x3); }
.rueda {
  width: 18px; height: 18px; flex: 0 0 18px;
  border: 2px solid var(--lavanda-100);
  border-top-color: var(--lavanda-600);
  border-radius: 999px;
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* Hoja inferior */
.velo {
  position: fixed; inset: 0;
  background: rgba(20,18,24,.48);
  z-index: 30;
  display: flex; align-items: flex-end;
}
.hoja {
  width: 100%;
  background: var(--lienzo);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--x3) var(--x4) calc(var(--x6) + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto;
}
.hoja .asa { width: 40px; height: 4px; border-radius: 999px; background: var(--borde-fuerte); margin: 0 auto var(--x4); }

/* Barra de acción anclada */
.anclado {
  position: sticky; bottom: 0;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding: var(--x3) var(--x4) calc(var(--x4) + env(safe-area-inset-bottom));
  margin: var(--x6) calc(var(--x4) * -1) calc(var(--x12) * -1);
  display: flex; gap: var(--x3);
}

/* Mensaje flotante */
#chivato {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(92px + env(safe-area-inset-bottom));
  background: var(--tinta); color: var(--lienzo);
  padding: var(--x3) var(--x5);
  border-radius: 999px;
  z-index: 50;
  box-shadow: var(--sombra-flotante);
  font-size: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
  max-width: calc(100% - 32px);
  text-align: center;
}
#chivato.visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}