/* ============================================================
   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-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)); }

.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)); }

.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);
}

.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: 100%;
  padding: 0;
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  background: rgb(var(--color-surface));
}
.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)); }

/* ---- 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); }