/* ============================================================
   nutrxia — Sistema de diseño v1.0
   Tokens (color, tipografía, espaciado, radios, sombras,
   transiciones) + componentes base.

   Filosofía: fresco · cálido · geométrico. Verde forestal +
   terracota cálida + neutros crema. Space Grotesk para títulos,
   Manrope para interfaz y cuerpo, Space Mono para etiquetas.

   Los colores se definen como canales RGB ("R G B") para que
   Tailwind pueda aplicar opacidad: rgb(var(--mint-600) / 0.5).
   En CSS plano se usan envueltos: rgb(var(--mint-600)).
   ============================================================ */

:root {
  /* ---- Primario · Verde forestal (Forest/Green/Sage) --------- */
  /* mint-* mantiene el nombre para compatibilidad con Tailwind.  */
  --mint-50:  242 248 244;   /* tinte muy claro */
  --mint-100: 229 240 233;   /* Mint 100 · #E5F0E9 */
  --mint-200: 185 212 195;   /* Sage 200 · #B9D4C3 */
  --mint-300: 111 168 136;   /* Sage 400 · #6FA888 */
  --mint-400: 62 142 105;    /* Green 500 · #3E8E69 */
  --mint-500: 62 142 105;    /* Green 500 · #3E8E69 */
  --mint-600: 36 92 66;      /* Forest 700 · #245C42 · CTA 5.6:1 (AA) */
  --mint-700: 36 92 66;      /* Forest 700 · #245C42 */
  --mint-800: 29 77 55;      /* Forest 800 · #1D4D37 */
  --mint-900: 20 58 40;      /* Forest 900 (oscuro extra) */

  /* ---- Acento · Terracota cálida (Clay/Peach) ---------------- */
  --accent-50:  246 233 220;  /* Sand 100 · #F6E9DC */
  --accent-100: 240 214 190;  /* Peach 200 · #F0D6BE */
  --accent-200: 235 183 143;  /* Peach 300 · #EBB78F */
  --accent-300: 217 142 95;   /* Clay 400 · #D98E5F */
  --accent-400: 217 142 95;   /* Clay 400 · #D98E5F */
  --accent-500: 194 104 63;   /* Clay 600 · #C2683F */
  --accent-600: 194 104 63;   /* Clay 600 · #C2683F · sólido 5.5:1 (AA) */
  --accent-700: 168 87 51;    /* Clay 700 · #A85733 */
  --accent-800: 139 69 40;    /* Clay oscuro */
  --accent-900: 110 52 32;    /* Clay más oscuro */

  /* ---- Neutros cálidos (Ink/Slate/Stone/Mist/Paper) ---------- */
  /* sand-* sustituye el anterior batiburrillo slate/stone/gray.  */
  --sand-50:  250 248 243;   /* Paper 50 · #FAF8F3 · fondo de página */
  --sand-100: 245 242 236;   /* entre Paper y Mist */
  --sand-200: 231 227 217;   /* Mist 200 · #E7E3D9 · bordes */
  --sand-300: 217 213 202;   /* Mist 300 · #D9D5CA · bordes fuertes */
  --sand-400: 169 169 159;   /* entre Stone y Mist */
  --sand-500: 122 122 112;   /* Stone 500 · #7A7A70 · texto sutil */
  --sand-600:  90  90  82;   /* #5A5A52 · texto secundario */
  --sand-700:  74  74  68;   /* Slate 700 · #4A4A44 */
  --sand-800:  35  35  32;   /* Ink 900 · #232320 · texto principal */
  --sand-900:  35  35  32;   /* Ink 900 · #232320 · títulos */

  /* ---- Estados ---------------------------------------------- */
  /* Éxito: Green 500 (#3E8E69) */
  --success-50:  229 240 233;
  --success-100: 185 212 195;
  --success-200: 140 196 170;
  --success-300: 111 168 136;
  --success-400:  84 155 115;
  --success-500:  62 142 105;  /* Green 500 · #3E8E69 */
  --success-600:  36  92  66;  /* Forest 700 */
  --success-700:  29  77  55;  /* Forest 800 */
  --success-800:  24  62  44;
  --success-900:  18  47  33;

  /* Aviso: #D9A441 */
  --warning-50:  252 240 207;
  --warning-100: 248 224 166;
  --warning-200: 243 204 118;
  --warning-300: 234 183  89;
  --warning-400: 217 164  65;  /* #D9A441 */
  --warning-500: 217 164  65;
  --warning-600: 185 137  45;
  --warning-700: 153 110  36;
  --warning-800: 122  85  26;
  --warning-900:  97  67  20;

  /* Error: #C7553F */
  --danger-50:  249 225 218;
  --danger-100: 243 196 185;
  --danger-200: 230 157 138;
  --danger-300: 215 117  97;
  --danger-400: 199  85  63;  /* #C7553F */
  --danger-500: 199  85  63;
  --danger-600: 168  68  48;
  --danger-700: 138  53  37;
  --danger-800: 110  40  27;
  --danger-900:  87  30  19;

  /* Info: #4A86A8 */
  --info-50:  219 234 242;
  --info-100: 184 213 229;
  --info-200: 146 190 214;
  --info-300: 105 162 195;
  --info-400:  74 134 168;  /* #4A86A8 */
  --info-500:  74 134 168;
  --info-600:  57 109 138;
  --info-700:  43  85 109;
  --info-800:  33  65  84;
  --info-900:  24  47  61;

  /* ---- Aliases semánticos (lo que usan plantillas) --------- */
  --color-bg:            250 248 243;   /* Paper 50 · #FAF8F3 */
  --color-surface:       255 255 255;
  --color-surface-muted: var(--sand-50);
  --color-border:        var(--sand-200);  /* Mist 200 */
  --color-border-strong: var(--sand-300);  /* Mist 300 */

  --color-primary:        var(--mint-600);  /* Forest 700 · #245C42 */
  --color-primary-hover:  var(--mint-800);  /* Forest 800 · #1D4D37 */
  --color-primary-subtle: var(--mint-100);  /* Mint 100 */
  --color-on-primary:     255 255 255;

  --color-text:          var(--sand-800);  /* Ink 900 · #232320 */
  --color-text-muted:    var(--sand-600);  /* #5A5A52 */
  --color-text-subtle:   var(--sand-500);  /* Stone 500 · #7A7A70 */
  --color-on-dark:       var(--sand-50);

  --color-focus:         var(--mint-400);  /* Green 500 */

  /* ---- Tipografía ------------------------------------------ */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'Courier New', monospace;

  --text-xs:   0.75rem;  --leading-xs:   1rem;
  --text-sm:   0.875rem; --leading-sm:   1.25rem;
  --text-base: 1rem;     --leading-base: 1.6rem;
  --text-lg:   1.125rem; --leading-lg:   1.75rem;
  --text-xl:   1.25rem;  --leading-xl:   1.75rem;
  --text-2xl:  1.5rem;   --leading-2xl:  2rem;
  --text-3xl:  1.875rem; --leading-3xl:  2.25rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ---- Espaciado · escala de 4px --------------------------- */
  --space-1:  0.25rem;  --space-2:  0.5rem;  --space-3:  0.75rem;
  --space-4:  1rem;     --space-5:  1.25rem; --space-6:  1.5rem;
  --space-8:  2rem;     --space-10: 2.5rem;  --space-12: 3rem;

  /* ---- Radios ---------------------------------------------- */
  --radius-sm:   0.375rem;  /* 6px */
  --radius-md:   0.625rem;  /* 10px */
  --radius-lg:   1rem;      /* 16px */
  --radius-xl:   1.25rem;   /* 20px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ---- Sombras (tinte cálido oscuro) ----------------------- */
  --shadow-sm: 0 1px 2px 0 rgb(35 35 32 / 0.06);
  --shadow-md: 0 4px 14px 0 rgb(35 35 32 / 0.08);
  --shadow-lg: 0 14px 36px 0 rgb(35 35 32 / 0.12);

  /* ---- Transiciones --------------------------------------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur:       150ms;
  --dur-slow:  250ms;
}

/* ============================================================
   Base
   ============================================================ */
body {
  font-family: var(--font-sans);
  background-color: rgb(var(--color-bg));
  color: rgb(var(--color-text));
}

::selection {
  background: #CDE5D6;
  color: rgb(var(--mint-800));
}

/* Foco visible coherente en toda la app (accesibilidad) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--color-focus));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

[x-cloak] { display: none !important; }

/* ============================================================
   Componentes
   ============================================================ */

/* ---- Botones --------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.5rem 1.125rem;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:disabled,
.btn[disabled] { cursor: not-allowed; }
.btn:disabled:not(.btn-primary),
.btn[disabled]:not(.btn-primary) { opacity: 0.5; }

.btn-sm { padding: 0.4375rem 0.75rem; font-size: var(--text-xs); }
.btn-lg { padding: 0.875rem 1.5rem; font-size: var(--text-base); border-radius: var(--radius-lg); }

/* <summary> usado como botón (dropdown nativo con <details>) */
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }

/* Menú desplegable simple */
.dropdown-menu {
  position: absolute;
  z-index: 20;
  margin-top: var(--space-1);
  min-width: 11rem;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
}
.dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--radius-md);
  padding: 0.375rem 0.75rem;
  font-size: var(--text-sm);
  color: rgb(var(--color-text));
  cursor: pointer;
}
.dropdown-item:hover { background: rgb(var(--color-surface-muted)); }
.dropdown-item-danger { color: rgb(var(--danger-500)); }
.dropdown-item-danger:hover { background: rgb(var(--danger-50)); }

/* ---- Tooltip de ayuda contextual (onboarding de features) ---- */
/* El elemento que lo dispara debe envolverse en un contenedor con
   position:relative para que el bocadillo se ancle correctamente. */
.tooltip-hint {
  position: absolute;
  z-index: 30;
  width: 15rem;
  background: rgb(var(--info-700));
  color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
}
.tooltip-hint::before {
  content: "";
  position: absolute;
  width: 0.625rem;
  height: 0.625rem;
  background: rgb(var(--info-700));
  transform: rotate(45deg);
}
.tooltip-hint-bottom { top: calc(100% + 0.5rem); left: 0; }
.tooltip-hint-bottom::before { top: -0.3125rem; left: 1rem; }
.tooltip-hint-top { bottom: calc(100% + 0.5rem); left: 0; }
.tooltip-hint-top::before { bottom: -0.3125rem; left: 1rem; }
/* Variante "-end": el bocadillo crece hacia la izquierda en vez de hacia la
   derecha. Úsala cuando el elemento que dispara el tooltip esté cerca del
   borde derecho de la pantalla (si no, el bocadillo se saldría del viewport). */
.tooltip-hint-bottom-end { top: calc(100% + 0.5rem); right: 0; }
.tooltip-hint-bottom-end::before { top: -0.3125rem; right: 1rem; }
.tooltip-hint-top-end { bottom: calc(100% + 0.5rem); right: 0; }
.tooltip-hint-top-end::before { bottom: -0.3125rem; right: 1rem; }
/* Alineado por arriba (no centrado) para que la flecha quede siempre junto
   al elemento que señala, aunque el texto sea largo y el bocadillo crezca
   hacia abajo — centrarlo verticalmente hacía ambiguo a qué apuntaba. */
.tooltip-hint-right { top: -0.25rem; left: calc(100% + 0.625rem); }
.tooltip-hint-right::before { top: 1rem; left: -0.3125rem; }
.tooltip-hint-left { top: 50%; right: calc(100% + 0.625rem); transform: translateY(-50%); }
.tooltip-hint-left::before { top: 50%; right: -0.3125rem; transform: translateY(-50%) rotate(45deg); }
.tooltip-hint-text { font-size: var(--text-xs); line-height: var(--leading-sm); }
.tooltip-hint-actions { margin-top: var(--space-2); text-align: right; }
.tooltip-hint-close {
  appearance: none;
  border: none;
  background: rgb(255 255 255 / 0.15);
  color: white;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.625rem;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  cursor: pointer;
}
.tooltip-hint-close:hover { background: rgb(255 255 255 / 0.25); }

/* Resalta el elemento exacto al que apunta un tooltip visible (como si
   estuviera en :hover), para que no haya duda sobre a qué se refiere. */
.relative:has(> .tooltip-hint) > .sidebar-link {
  background: rgb(var(--sand-100));
  color: rgb(var(--color-text));
}
.relative:has(> .tooltip-hint) > .btn,
.relative:has(> .tooltip-hint) > .section-title,
.relative:has(> .tooltip-hint) > h2,
.relative:has(> .tooltip-hint) > p {
  box-shadow: 0 0 0 2px rgb(var(--info-400) / 0.6);
  border-radius: var(--radius-md);
}

.btn-primary {
  background: rgb(var(--color-primary));
  color: rgb(var(--color-on-primary));
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) { background: rgb(var(--color-primary-hover)); }
.btn-primary:disabled,
.btn-primary[disabled] {
  background: rgb(var(--sand-200));
  color: rgb(var(--sand-400));
  box-shadow: none;
}

.btn-secondary {
  background: rgb(var(--color-surface));
  color: rgb(var(--color-text));
  border-color: rgb(var(--color-border-strong));
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) { background: rgb(var(--color-surface-muted)); }

.btn-danger {
  background: rgb(var(--color-surface));
  color: rgb(var(--danger-500));
  border-color: rgb(var(--danger-200));
}
.btn-danger:hover:not(:disabled) { background: rgb(var(--danger-50)); }

.btn-accent {
  background: rgb(var(--accent-600));
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover:not(:disabled) { background: rgb(var(--accent-700)); }

.btn-ghost {
  background: transparent;
  color: rgb(var(--sand-700));
}
.btn-ghost:hover:not(:disabled) { background: rgb(var(--sand-100)); }

/* ---- Campos de formulario -------------------------------- */
.input,
.select,
.textarea {
  width: 100%;
  border: 1px solid rgb(var(--color-border-strong));
  border-radius: var(--radius-md);
  background: rgb(var(--color-surface));
  padding: 0.6875rem 0.875rem;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-family: var(--font-sans);
  color: rgb(var(--color-text));
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.input::placeholder,
.textarea::placeholder { color: rgb(var(--color-text-subtle)); }

/* Safari iOS aplica sus propios estilos a date/time inputs; los reseteamos para
   que respeten nuestra clase .input sin romper el selector nativo. */
input[type="date"].input,
input[type="time"].input,
input[type="datetime-local"].input {
  -webkit-appearance: none;
  appearance: none;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: rgb(var(--mint-400));
  box-shadow: 0 0 0 3px rgb(var(--mint-400) / 0.15);
}

.input-error {
  border-color: rgb(var(--danger-400));
  box-shadow: 0 0 0 3px rgb(var(--danger-400) / 0.12);
}

/* iOS Safari hace zoom automático en inputs con font-size < 16px.
   En móvil forzamos 1rem para evitarlo sin deshabilitar el zoom del usuario. */
@media (max-width: 1023px) {
  .input, .select, .textarea { font-size: 1rem; }
}

.form-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: rgb(var(--sand-700));
}
.form-hint  { margin-top: var(--space-1); font-size: var(--text-xs); color: rgb(var(--color-text-muted)); }
.form-error { margin-top: var(--space-1); font-size: var(--text-xs); color: rgb(var(--danger-500)); }

/* ---- Tarjetas / superficies ------------------------------ */
.card {
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: var(--space-6); }

/* ---- Diálogos / modales ---------------------------------- */
.modal {
  width: calc(100vw - 2rem);
  padding: 0;
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  background: rgb(var(--color-surface));
}
@media (min-width: 640px) {
  .modal { width: 100%; }
}
.modal::backdrop { background: rgb(var(--sand-900) / 0.5); }

/* ---- Badges / etiquetas de estado ------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  border-radius: var(--radius-full);
  padding: 0.3125rem 0.6875rem;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.badge-primary { background: rgb(var(--mint-100));    color: rgb(var(--mint-600)); }
.badge-primary .badge-dot { background: rgb(var(--mint-400)); }
.badge-neutral { background: rgb(var(--sand-100));    color: rgb(var(--sand-700)); }
.badge-neutral .badge-dot { background: rgb(var(--sand-400)); }
.badge-success { background: rgb(var(--success-50));  color: rgb(var(--success-600)); }
.badge-success .badge-dot { background: rgb(var(--success-500)); }
.badge-warning { background: rgb(var(--warning-50));  color: rgb(var(--warning-700)); }
.badge-warning .badge-dot { background: rgb(var(--warning-500)); }
.badge-danger  { background: rgb(var(--danger-50));   color: rgb(var(--danger-500)); }
.badge-danger .badge-dot  { background: rgb(var(--danger-400)); }
.badge-info    { background: rgb(var(--info-50));     color: rgb(var(--info-600)); }
.badge-info .badge-dot    { background: rgb(var(--info-500)); }
.badge-accent  { background: rgb(var(--accent-50));   color: rgb(var(--accent-700)); }
.badge-accent .badge-dot  { background: rgb(var(--accent-500)); }

/* Etiquetas rectangulares */
.tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid;
  padding: 0.3125rem 0.6875rem;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}
.tag-primary { background: rgb(var(--mint-50));   border-color: rgb(var(--mint-200));   color: rgb(var(--mint-600)); }
.tag-accent  { background: rgb(var(--accent-50)); border-color: rgb(var(--accent-200)); color: rgb(var(--accent-700)); }
.tag-neutral { background: rgb(var(--sand-100));  border-color: rgb(var(--sand-200));   color: rgb(var(--sand-600)); }

/* ---- Alertas / mensajes ---------------------------------- */
.alert {
  border: 1px solid;
  border-radius: var(--radius-lg);
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-sm);
}
.alert-success { background: rgb(var(--success-50));  border-color: rgb(var(--success-200)); color: rgb(var(--success-700)); }
.alert-warning { background: rgb(var(--warning-50));  border-color: rgb(var(--warning-200)); color: rgb(var(--warning-700)); }
.alert-danger  { background: rgb(var(--danger-50));   border-color: rgb(var(--danger-200));  color: rgb(var(--danger-600)); }
.alert-info    { background: rgb(var(--info-50));     border-color: rgb(var(--info-200));    color: rgb(var(--info-600)); }

/* ---- Tipografía de página -------------------------------- */
.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.5rem);
  line-height: 1.08;
  font-weight: var(--font-semibold);
  letter-spacing: -0.02em;
  color: rgb(var(--sand-900));
}
.page-subtitle {
  margin-top: var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: rgb(var(--color-text-muted));
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  color: rgb(var(--sand-900));
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(var(--color-text-subtle));
}

/* ---- Tablas ---------------------------------------------- */
.table { width: 100%; font-size: var(--text-sm); }
.table thead { background: rgb(var(--color-surface-muted)); }
.table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--color-text-subtle));
}
.table td { padding: 0.75rem 1rem; }
.table tbody tr + tr { border-top: 1px solid rgb(var(--color-border)); }
.table-hover tbody tr:hover { background: rgb(var(--color-surface-muted)); }

/* ---- Sidebar -------------------------------------------- */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: rgb(var(--color-text-muted));
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar-link:hover {
  background: rgb(var(--sand-100));
  color: rgb(var(--color-text));
}
.sidebar-link-active,
.sidebar-link-active:hover {
  background: rgb(var(--mint-100));
  color: rgb(var(--mint-700));
  font-weight: var(--font-semibold);
}
.sidebar-link-danger:hover {
  background: rgb(var(--danger-50));
  color: rgb(var(--danger-600));
}

/* ---- Avatares -------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  color: #fff;
  flex-shrink: 0;
}
.avatar-sm  { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar-md  { width: 40px; height: 40px; font-size: var(--text-sm); }
.avatar-lg  { width: 48px; height: 48px; font-size: var(--text-base); }