/*
 * ============================================================================
 * 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: var(--font-sans);
  /* El background principal ahora es manejado por #sidebar y #main individualmente */
  min-block-size: 100vh;
  position: relative;
  overflow: clip;
  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);
  }
}

.penalty-summary {
  overflow: hidden;
}

.penalty-summary__body {
  display: grid;
  padding: var(--size-6);
  row-gap: var(--size-6);
}

.penalty-summary__toolbar,
.penalty-summary__identity,
.penalty-summary__actions,
.penalty-summary__destination {
  align-items: center;
  display: flex;
}

.penalty-summary__relations {
  display: grid;
  align-content: start;
  gap: var(--size-5);
  min-inline-size: 0;
}

.penalty-summary__details > div {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.penalty-summary__toolbar {
  justify-content: space-between;
  gap: var(--size-4);
}

.penalty-summary__identity,
.penalty-summary__actions {
  flex-wrap: wrap;
  gap: var(--size-2);
}

.penalty-summary__actions {
  flex-shrink: 0;
  justify-content: flex-end;
}

.penalty-summary__heading {
  align-items: end;
  display: grid;
  gap: var(--size-8);
  grid-template-columns: minmax(0, 1fr) auto;
}

.penalty-summary__amount {
  min-inline-size: 12rem;
  text-align: end;
}

.penalty-summary__details {
  background-color: var(--stone-50);
  border-block-start: var(--border) solid var(--stone-200);
  display: grid;
  gap: var(--size-6);
  grid-template-columns: minmax(15rem, 2fr) minmax(12rem, 1.25fr) minmax(7rem, .7fr) minmax(9rem, 1fr);
  padding: var(--size-5) var(--size-6);
}

.penalty-summary__destination {
  align-items: flex-start;
  gap: var(--size-3);
  min-inline-size: 0;
}

.penalty-summary__destination-body {
  min-inline-size: 0;
}

@media (width < 64rem) {
  .penalty-summary__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width < 40rem) {
  .penalty-summary__body {
    padding: var(--size-5);
  }

  .penalty-summary__toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .penalty-summary__actions {
    justify-content: flex-start;
  }

  .penalty-summary__heading {
    gap: var(--size-5);
    grid-template-columns: minmax(0, 1fr);
  }

  .penalty-summary__amount {
    min-inline-size: 0;
    text-align: start;
  }

  .penalty-summary__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--size-5);
  }

  .penalty-summary__relations,
  .penalty-summary__client {
    grid-column: 1 / -1;
  }
}