/*
 * ============================================================================
 * PEHUEN THEME - Variables de color
 * ============================================================================
 *
 * Este archivo define únicamente las variables de color del tema Pehuen.
 * Los estilos de componentes se aplican con clases inline de Tailwind.
 *
 * Paleta de colores:
 * - Primario: Verde salvia suave - Para elementos principales y branding
 * - Secundario: Stone (Tailwind) - Tonos grises cálidos para texto y borders
 * - Acento: Amber/dorado suave - Para highlights y elementos especiales
 */

:root {
  /* ---------- Primary: Verde salvia suave ---------- */
  --pehuen-primary-50: #f4f7f5;
  --pehuen-primary-100: #e8efe9;
  --pehuen-primary-200: #c9ddd0;
  --pehuen-primary-300: #a3c5ad;
  --pehuen-primary-400: #75a685;
  --pehuen-primary-500: #558968;  /* Color principal */
  --pehuen-primary-600: #446f54;
  --pehuen-primary-700: #365944;
  --pehuen-primary-800: #2d4938;
  --pehuen-primary-900: #263c2f;

  /* ---------- Accent: Amber cálido suave ---------- */
  --pehuen-accent-50: #fefbf3;
  --pehuen-accent-100: #fdf6e3;
  --pehuen-accent-200: #fbebc2;
  --pehuen-accent-300: #f7dc96;
  --pehuen-accent-400: #f2c560;
  --pehuen-accent-500: #eda939;  /* Color de acento */
  --pehuen-accent-600: #d88b28;
  --pehuen-accent-700: #b36b23;
  --pehuen-accent-800: #915424;
  --pehuen-accent-900: #764621;

  /* ---------- Theme Variables ---------- */
  /* Variables globales usadas en toda la aplicación */
  --color-text: theme(colors.stone.800);
  --color-border-light: theme(colors.stone.200);
  --color-primary: var(--pehuen-primary-500);
}

.pehuen-theme {
  font-family: "Cabin", var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  /* El background principal ahora es manejado por #sidebar y #main individualmente */
  min-block-size: 100vh;
  position: relative;
  overflow: hidden;
  color: var(--color-text);
}


.pehuen-card {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: min(30rem, calc(100% - 2.5rem));
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-border-light) 70%, rgba(74, 124, 89, 0.25) 30%);
  background: color-mix(in srgb, rgba(255, 255, 255, 0.92) 75%, rgba(239, 244, 229, 0.85) 15%, rgba(249, 240, 203, 0.65) 10%);
  box-shadow: 0 32px 68px -38px rgba(20, 60, 40, 0.32);
  isolation: isolate;
}

.pehuen-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 2.5vw, 1.85rem);
  padding: clamp(2.1rem, 4vw, 2.6rem) clamp(1.9rem, 4vw, 2.5rem);
}

.pehuen-card__form {
  display: flex;
  flex-direction: column;
  gap: clamp(1.05rem, 2vw, 1.45rem);
}

.pehuen-card__field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pehuen-card__field label {
  font-weight: 600;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--stone-700) 50%, rgba(18, 62, 45, 0.7) 30%, rgba(162, 126, 34, 0.85) 20%);
}

.pehuen-card__submit {
  inline-size: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 1rem;
}

.pehuen-card__submit svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
}

.pehuen-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  font-size: 0.95rem;
}

.pehuen-card__links a {
  color: color-mix(in srgb, var(--blue-700) 40%, rgba(36, 96, 68, 0.7) 40%, rgba(248, 226, 140, 0.75) 20%);
  font-weight: 500;
}

.pehuen-card__links a:hover {
  text-decoration: underline;
}

@media (max-width: 36rem) {
  .pehuen-card {
    inline-size: min(100%, calc(100% - 1.5rem));
    border-radius: 1.5rem;
  }

  .pehuen-card__body {
    padding-inline: clamp(1.25rem, 4vw, 1.8rem);
  }
}