/* ============================================
   CID Aprueba — Global Stylesheet
   ============================================ */

/* --- Custom Properties --- */
:root {
  --color-primary: #B44F22;
  --color-secondary: #5A7A1C;
  --color-accent: #3D5A1E;
  --color-bg: #F5F0E8;
  --color-surface: #FFFFFF;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-border: #E0D8CC;
  --color-danger: #B22222;
  --color-warning: #E6A817;
  --color-warning-dark: #8C6407; /* text-safe warning (5.3:1 on white) */
  /* Same colour as --color-accent/--color-primary by default; only the dark theme
     lightens these, for the few places where the hue is used as TEXT rather than a filled background. */
  --color-accent-text: var(--color-accent);
  --color-in-review-text: #a04820;

  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 6px;
  --radius-lg: 10px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
  --transition: 0.18s var(--ease);

  --sidebar-width: 220px;
  --header-height: 52px;
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.5;
  min-height: 100vh;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-accent);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  font-size: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

img {
  max-width: 100%;
}

/* --- Utility --- */
.hidden {
  display: none !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-light);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1;
  transition: background-color var(--transition), opacity var(--transition),
    transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn--primary:hover:not(:disabled) {
  background-color: #b04e24;
}

.btn--secondary {
  background-color: var(--color-secondary);
  color: #fff;
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--color-accent);
}

.btn--danger {
  background-color: var(--color-danger);
  color: #fff;
}

.btn--danger:hover:not(:disabled) {
  background-color: #8b1a1a;
}

.btn--outline {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

/* Secondary row actions: same footprint as outline, no border, so the primary one leads. */
.btn--ghost {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--color-text-light);
}

.btn--ghost:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text);
}

.btn--outline:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--sm {
  padding: 6px 12px;
  font-size: 0.8125rem;
}

.btn--block {
  width: 100%;
}

/* --- Post-login splash --- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--color-bg);
  transition: opacity 0.45s ease, visibility 0.45s;
}

.splash--out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash__logo {
  width: min(456px, 84vw);
  filter: drop-shadow(0 12px 28px color-mix(in srgb, var(--color-primary) 18%, transparent));
}

.splash__logo svg,
.splash__logo img {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Initial state: everything hidden until .splash--play kicks in */
.splash__logo .cls-1,
.splash__logo .cls-2,
.splash__logo .cls-3 {
  opacity: 0;
  transform-box: fill-box;
}

.splash__logo .cls-1,
.splash__logo .cls-3 {
  transform-origin: center;
}

.splash__logo .cls-2 {
  transform-origin: center bottom;
}

/* The two figures pop in with a spring, one after the other */
.splash--play .splash__logo .cls-3 {
  animation: splash-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

.splash--play .splash__logo .cls-1 {
  animation: splash-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

/* Each letter of the wordmark rises in reading order */
.splash--play .splash__logo .cls-2 {
  animation: splash-rise 0.45s ease-out both;
  animation-delay: calc(0.55s + var(--i, 0) * 11ms);
}

.splash--play .splash__logo {
  animation: splash-breathe 2.2s ease-in-out 1.7s infinite;
}

@keyframes splash-pop {
  from {
    opacity: 0;
    transform: scale(0.2) rotate(-14deg);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes splash-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes splash-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

.splash__bar {
  width: 240px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.splash__bar-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.splash--play .splash__bar-fill {
  animation: splash-fill 2.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes splash-fill {
  from { width: 0; }
  to { width: 100%; }
}

.splash__text {
  font-size: 0.95rem;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
  opacity: 0;
}

.splash--play .splash__text {
  animation: splash-rise 0.6s ease-out 1.1s both;
}

@media (prefers-reduced-motion: reduce) {
  .splash--play .splash__logo,
  .splash--play .splash__logo .cls-1,
  .splash--play .splash__logo .cls-2,
  .splash--play .splash__logo .cls-3,
  .splash--play .splash__text {
    animation: splash-fade 0.4s ease-out both;
  }

  .splash--play .splash__bar-fill {
    animation-duration: 0.6s;
  }
}

@keyframes splash-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Login Page --- */
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 16px;
  position: relative;
  overflow: hidden;
  background-color: #fcf9f3;
  background-image: url('../assets/fondo-slider-la-cid-textura.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Decorative SVG figures overlay */
.login::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  background-image: url('../assets/fondos-logo-figuras-la-cid-38.svg');
  background-size: 125% auto;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.login__card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 52px 45px;
  width: 100%;
  max-width: 449px;
  position: relative;
  z-index: 1;
  animation: modal-scale-in 0.35s var(--ease);
}

.login__brand {
  text-align: center;
  margin-bottom: 35px;
}

.login__logo-img {
  display: block;
  max-width: 232px;
  height: auto;
  margin: 0 auto 11px;
}

.login__error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--color-danger);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-bottom: 16px;
}

/* --- Forms --- */
.form__group {
  margin-bottom: 18px;
}

.form__label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 6px;
}

.form__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.form__label-row .form__label {
  margin-bottom: 6px;
}

/* A quiet, secondary marker for a non-required field — sits opposite the label */
.form__label-optional {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
  opacity: 0.65;
}

.form__hint {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  margin-top: 6px;
  animation: hint-fade-in 0.18s var(--ease);
}

@keyframes hint-fade-in {
  from { opacity: 0; }
}

.form__input {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.9375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition);
  outline: none;
}

.form__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.form__input--file {
  padding: 8px;
}

textarea.form__input {
  resize: vertical;
  min-height: 100px;
}

/* --- App Layout --- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 0;
  height: 100vh;
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar__brand {
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
}

.sidebar__logo-img {
  display: block;
  max-width: 140px;
  height: auto;
  margin: 0 auto 6px;
}

.sidebar__nav {
  flex: 1;
  padding: 16px 0;
}

.sidebar__credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--color-border);
  opacity: 0.88;
  transition: opacity var(--transition);
}

.sidebar__credit:hover,
.sidebar__credit:focus-visible {
  opacity: 1;
}

.sidebar__credit-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.sidebar__credit-logo {
  display: block;
  width: 130px;
  height: auto;
}

.sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 8px 1px 0;
  padding: 8px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-text-light);
  font-size: 0.9375rem;
  font-weight: 400;
  transition: color var(--transition), background-color var(--transition);
  border-left: 3px solid transparent;
}

.sidebar__link:hover {
  color: var(--color-text);
  background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.sidebar__link--active {
  color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-left-color: var(--color-primary);
  font-weight: 500;
}

/* --- Header --- */
.header {
  grid-area: header;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.header__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.header__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header__user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.header__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.header__user-info {
  text-align: right;
}

.header__user-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.header__user-role {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.header__logout {
  color: var(--color-text-light);
  font-size: 0.8125rem;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: color var(--transition), border-color var(--transition);
}

.header__logout:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* --- Main Content --- */
.main {
  grid-area: main;
  padding: 20px;
  overflow-y: auto;
}

.main__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.main__header > :only-child { margin-left: auto; } /* the page title lives in the top bar */

.main__title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text);
}

/* --- Stat Cards --- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition), transform var(--transition);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-card {
  border-left: 3px solid var(--color-border);
}

.stat-card--total {
  border-left-color: var(--color-text-light);
}

.stat-card--pending {
  border-left-color: var(--color-primary);
}

.stat-card--approved {
  border-left-color: var(--color-secondary);
}

.stat-card--rejected {
  border-left-color: var(--color-danger);
}

.stat-card__label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  font-weight: 400;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card__value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.stat-card--total .stat-card__value {
  color: var(--color-text);
}

.stat-card--pending .stat-card__value {
  color: var(--color-primary);
}

.stat-card--approved .stat-card__value {
  color: var(--color-secondary);
}

.stat-card--rejected .stat-card__value {
  color: var(--color-danger);
}

/* --- Section --- */
.section {
  margin-bottom: 22px;
}

.section__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

/* --- Table --- */
.table-wrap {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  overflow-x: auto;
}

.table {
  width: 100%;
  font-size: 0.875rem;
}

.table th {
  text-align: left;
  padding: 9px 14px;
  font-weight: 600;
  color: var(--color-text-light);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--color-border);
  background: #faf8f5;
}

.nowrap {
  white-space: nowrap;
}

.table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.table tbody tr {
  transition: background-color var(--transition);
}

.table tbody tr:hover {
  background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table__row--clickable {
  cursor: pointer;
}

/* --- Status Badges --- */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}

.badge--pending {
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}

.badge--in_review {
  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-in-review-text);
}

.badge--approved {
  background-color: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  color: var(--color-accent-text);
}

.badge--rejected {
  background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}

/* --- Requisition Detail --- */
.req-detail {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
  align-items: start;
}

.req-detail__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.req-detail__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 28px;
}

.req-detail__info {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: 18px;
}

.req-detail__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--color-text);
  line-height: 1.3;
}

.req-detail__meta {
  list-style: none;
}

.req-detail__meta li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
}

.req-detail__meta-label {
  flex-shrink: 0;
}

.req-detail__meta-value {
  text-align: right;
}

.req-detail__meta li:last-child {
  border-bottom: none;
}

.req-detail__meta-label {
  color: var(--color-text-light);
  font-weight: 400;
}

.req-detail__meta-value {
  font-weight: 500;
  color: var(--color-text);
}

.req-detail__description {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

.req-detail__actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

/* --- Approval Timeline --- */
.timeline {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: 18px;
}

.timeline__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--color-text);
}

.timeline__list {
  list-style: none;
  position: relative;
}

.timeline__item {
  position: relative;
  padding-left: 28px;
  padding-bottom: 20px;
}

.timeline__more {
  margin: 4px 0 0 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.timeline__more:hover { text-decoration: underline; }

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 24px;
  bottom: 0;
  width: 1px;
  background-color: var(--color-border);
}

.timeline__item:last-child::before {
  display: none;
}

.timeline__dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
}

.timeline__item--approved .timeline__dot {
  border-color: var(--color-secondary);
  background-color: var(--color-secondary);
}

.timeline__item--rejected .timeline__dot {
  border-color: var(--color-danger);
  background-color: var(--color-danger);
}

.timeline__item--pending .timeline__dot {
  border-color: var(--color-border);
  background-color: var(--color-bg);
}

.timeline__item--current .timeline__dot {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.timeline__level {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.timeline__step-role {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 1px;
}

.timeline__status {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  margin-top: 2px;
}

.timeline__comment {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  margin-top: 4px;
  font-style: italic;
}

/* --- Approval Action Panel --- */
.approval-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: 18px;
}

.approval-panel__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--color-text);
}

.approval-panel__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* --- Upload Layout (two-column) --- */
.upload-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* --- Upload Form --- */
.upload-form {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: 32px;
}

.upload-form__file-area {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  transition: border-color var(--transition), background-color var(--transition);
  cursor: pointer;
}

.upload-form__file-area:hover {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 2%, transparent);
}

.upload-form__file-area--active {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.upload-form__file-text {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-bottom: 8px;
}

.upload-form__file-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary);
  margin-top: 8px;
}

/* --- Upload Preview Panel --- */
.upload-preview {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  overflow: hidden;
  position: sticky;
  top: 28px;
}

.upload-preview__header {
  padding: 16px 24px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  background: #faf8f5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.upload-preview__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 200px;
  justify-content: center;
}

.upload-preview__empty {
  text-align: center;
  color: var(--color-text-light);
}

.upload-preview__empty svg {
  margin-bottom: 12px;
  opacity: 0.4;
}

.upload-preview__empty p {
  font-size: 0.875rem;
}

.upload-preview__image-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.upload-preview__image {
  max-width: 100%;
  max-height: 400px;
  border-radius: var(--radius);
  object-fit: contain;
  box-shadow: var(--shadow-sm);
}

.upload-preview__pdf-wrap {
  width: 100%;
  margin-bottom: 16px;
}

.upload-preview__pdf {
  width: 100%;
  height: 600px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.upload-preview__file-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 18px;
}

.upload-preview__file-ext {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.upload-preview__info {
  text-align: center;
  width: 100%;
}

.upload-preview__filename {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  word-break: break-all;
  margin-bottom: 4px;
}

.upload-preview__filesize {
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

/* --- Activity List --- */
.activity-list {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item__text {
  flex: 1;
  color: var(--color-text);
  line-height: 1.4;
}

.activity-item__time {
  font-size: 0.75rem;
  color: var(--color-text-light);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Activity groups: one card per requisition, older entries collapsed --- */
.activity-group {
  border-bottom: 1px solid var(--color-border);
}

.activity-group:last-child {
  border-bottom: none;
}

.activity-group .activity-item {
  border-bottom: none;
}

.activity-group__more {
  padding: 0 20px 12px 44px;
}

.activity-group__more summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--color-text-light);
  list-style: none;
}

.activity-group__more summary::-webkit-details-marker {
  display: none;
}

.activity-group__more summary::before {
  content: '▸ ';
}

.activity-group__more[open] summary::before {
  content: '▾ ';
}

.activity-group__more .activity-item {
  padding: 8px 0 0 0;
  font-size: 0.8125rem;
}

.activity-item--compact .activity-item__text {
  color: var(--color-text-light);
}

/* --- Pending List --- */
.pending-list {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background-color var(--transition);
}

.pending-item__body {
  flex: 1;
  min-width: 0;
}

.pending-item__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pending-item:hover {
  background-color: color-mix(in srgb, var(--color-primary) 2%, transparent);
}

.pending-item:last-child {
  border-bottom: none;
}

.pending-item__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.pending-item__project {
  font-weight: 400;
  color: var(--color-text-light);
}

.pending-item__meta {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 2px;
}

/* --- Alert / Feedback --- */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-bottom: 16px;
}

.alert--success {
  background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 30%, transparent);
  color: var(--color-accent);
}

.alert--error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--color-danger);
}

/* --- Loading --- */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.loading__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Route transition --- */
.route-fade {
  animation: route-fade-in 0.22s var(--ease);
}

@keyframes route-fade-in {
  from { opacity: 0; transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .route-fade {
    animation: none;
  }
}

/* --- Skeleton (loading placeholder shaped like the real content) --- */
.skeleton {
  display: block;
  max-width: 100%;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}

.skeleton-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.skeleton-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

@keyframes skeleton-pulse {
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* --- Empty State --- */
.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.empty--positive::before,
.empty--neutral::before {
  content: '\2713';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  color: var(--color-secondary);
  font-size: 1.05rem;
  font-weight: 700;
}

.empty--neutral::before {
  content: '\2013';
  background: var(--color-border);
  color: var(--color-text-light);
}

/* --- Back Link --- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 6px 14px;
  margin-bottom: 20px;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition),
    transform var(--transition);
}

.back-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.back-link:active {
  transform: scale(0.97);
}

/* --- Mobile Menu Toggle --- */
.mobile-toggle {
  display: none;
  padding: 8px;
  color: var(--color-text);
}

/* --- Modal --- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  animation: modal-fade-in 0.18s var(--ease);
}

.modal__content {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  width: 100%;
  max-width: 420px;
  z-index: 1;
  animation: modal-scale-in 0.2s var(--ease);
}

@keyframes modal-fade-in {
  from { opacity: 0; }
}

@keyframes modal-scale-in {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
}

.modal__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.modal__text {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-bottom: 20px;
  line-height: 1.5;
}

.modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

/* --- Confirmation Dialog (native <dialog>) ---
   The app's global reset (`* { margin: 0 }`) zeroes out the UA stylesheet's
   `margin: auto` that normally centers a modal <dialog>, so centering is
   done explicitly here instead of relying on it. */
.confirm-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  width: calc(100% - 32px);
  max-width: 420px;
}

.confirm-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.confirm-dialog .modal__text {
  font-size: 1rem;
  color: var(--color-text);
}

.confirm-dialog .modal__actions {
  justify-content: flex-end;
}

/* --- Approval result dialog (blocks accidental double-clicks between steps) --- */
.approval-result-dialog {
  --tone: var(--color-accent);
  --tone-soft: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px 32px;
  width: calc(100% - 32px);
  max-width: 420px;
  text-align: center;
  overflow: visible;
}

.approval-result-dialog--warning { --tone: var(--color-warning-dark); --tone-soft: color-mix(in srgb, var(--color-warning) 16%, transparent); }
.approval-result-dialog--danger { --tone: var(--color-danger); --tone-soft: color-mix(in srgb, var(--color-danger) 12%, transparent); }

.approval-result-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  animation: modal-fade-in 0.18s var(--ease);
}

.approval-result-dialog__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: result-pop-in 0.42s cubic-bezier(0.22, 1.4, 0.36, 1);
}

.approval-result-dialog__icon {
  position: relative;
  margin-bottom: 16px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tone-soft) 70%, transparent), var(--tone-soft));
}

.approval-result-dialog__icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--tone);
  opacity: 0.5;
  animation: result-ring-pulse 0.7s ease-out 0.15s;
}

.approval-result-dialog__svg {
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 1;
}

.approval-result-dialog__ring {
  stroke: var(--tone);
  stroke-width: 2.5;
  opacity: 0.3;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: result-draw 0.5s var(--ease) forwards;
}

.approval-result-dialog__mark {
  stroke: var(--tone);
  stroke-width: 4;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: result-draw 0.35s ease-out 0.3s forwards;
}

.approval-result-dialog__mark--delay {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: result-draw 0.25s ease-out 0.5s forwards;
}

.approval-result-dialog__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--tone);
  opacity: 0;
  animation: result-fade-up 0.35s var(--ease) 0.25s forwards;
}

.approval-result-dialog .modal__text {
  font-size: 0.95rem;
  color: var(--color-text);
  text-align: center;
  opacity: 0;
  animation: result-fade-up 0.35s var(--ease) 0.32s forwards;
}

.approval-result-dialog .modal__actions {
  justify-content: center;
  width: 100%;
  opacity: 0;
  animation: result-fade-up 0.35s var(--ease) 0.4s forwards;
}

@keyframes result-pop-in {
  from { opacity: 0; transform: scale(0.85) translateY(6px); }
}

@keyframes result-ring-pulse {
  from { transform: scale(0.8); opacity: 0.6; }
  to { transform: scale(1.35); opacity: 0; }
}

@keyframes result-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes result-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .approval-result-dialog__content,
  .approval-result-dialog__icon::before,
  .approval-result-dialog__ring,
  .approval-result-dialog__mark,
  .approval-result-dialog__mark--delay,
  .approval-result-dialog__title,
  .approval-result-dialog .modal__text,
  .approval-result-dialog .modal__actions {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* --- Profile Page --- */
.profile {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

.profile__card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: 32px;
  width: 100%;
  max-width: 620px;
}

.profile__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
  }

  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    width: 260px;
    height: 100vh;
    z-index: 100;
    transition: left var(--transition);
    box-shadow: var(--shadow-lg);
  }

  .sidebar--open {
    left: 0;
  }

  .mobile-toggle {
    display: block;
  }

  .header {
    padding: 0 16px;
  }

  .main {
    padding: 20px 16px;
  }

  .req-detail {
    grid-template-columns: 1fr;
  }

  .req-detail__right {
    position: static;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .table th,
  .table td {
    padding: 10px 12px;
  }

  .login::before {
    background-size: 250% auto;
    background-position: center center;
  }

  .upload-layout {
    grid-template-columns: 1fr;
  }

  .upload-preview {
    position: static;
  }
}

@media (max-width: 480px) {
  /* Keep a 2x2 grid instead of stacking 4 full-width cards before any useful content shows */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-card {
    padding: 14px 16px;
  }

  .stat-card__value {
    font-size: 1.5rem;
  }

  .header {
    padding: 0 12px;
    gap: 8px;
  }

  /* Give the page title room to fit on one line; the logout button alone is enough identity on this size */
  .header__user-info {
    display: none;
  }

  /* Long labels ("Cotización seleccionada") and their values no longer sit pressed against each other */
  .req-detail__meta li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .req-detail__meta-value {
    text-align: left;
  }

  .login::before {
    background-size: 350% auto;
    background-position: center center;
  }

  .login__card {
    padding: 36px 28px;
  }

  .login__logo-img {
    max-width: 180px;
  }

  .modal__content {
    padding: 24px 20px;
  }

  .modal__actions {
    flex-direction: column;
  }

  .upload-preview__pdf {
    height: 300px;
  }
}

/* --- Quotation Panel --- */
.quotations-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: 18px;
}

.quotations-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.quotations-panel__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.quotations-panel__add-btn {
  flex-shrink: 0;
}

/* --- Quotation Form --- */
.quotation-form {
  background: #faf8f5;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.quotation-form__field {
  margin-bottom: 14px;
}

.quotation-form__payment-terms {
  display: flex;
  gap: 12px;
}

.quotation-form__payment-terms-col {
  flex: 1;
  min-width: 0;
}

.quotation-form__payment-terms-col .form__input:disabled {
  color: var(--color-text-light);
  cursor: not-allowed;
}

.quotation-form__actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* --- Quotation Card --- */
.quotation-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  background: var(--color-surface);
  transition: box-shadow var(--transition);
}

.quotation-card:hover {
  box-shadow: var(--shadow-sm);
}

.quotation-card:last-child {
  margin-bottom: 0;
}

.quotation-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: 8px;
}

.quotation-card__provider {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.quotation-card__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #faf8f5;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 0.875rem;
  color: var(--color-text);
  flex-wrap: wrap;
  gap: 8px;
}

.quotation-card__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.quotation-card__documents {
  margin-top: 8px;
}

.quotation-card__documents--optional {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
}

.quotation-card__documents-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.quotation-card__doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8125rem;
  flex-wrap: wrap;
  gap: 6px;
}

.quotation-card__doc-item:last-child {
  border-bottom: none;
}

.quotation-card__doc-status {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.quotation-card__doc-status--complete {
  color: var(--color-accent-text);
}

.quotation-card__doc-status--missing {
  color: var(--color-text-light);
}

.quotation-card__doc-status--optional {
  color: var(--color-text-light);
  opacity: 0.75;
}

.quotation-card__attach-btn {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.quotation-card__attach-btn input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* --- Quotation Warning --- */
.quotation-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--color-primary);
  margin-top: 16px;
  line-height: 1.4;
}

/* --- Clickable Filenames --- */
.quotation-card__filename,
.quotation-card__doc-filename,
.req-detail__file-link {
  cursor: pointer;
  transition: color var(--transition);
}

.quotation-card__filename:hover,
.quotation-card__doc-filename:hover,
.req-detail__file-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --- File Preview Panel --- */
.file-preview {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.file-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #faf8f5;
  border-bottom: 1px solid var(--color-border);
  gap: 10px;
}

.file-preview__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.file-preview__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-light);
  transition: background-color var(--transition), color var(--transition);
  flex-shrink: 0;
}

.file-preview__close:hover {
  background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}

.file-preview__content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 120px;
  justify-content: center;
}

.file-preview__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.file-preview__iframe {
  width: 100%;
  height: 500px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.file-preview__image {
  max-width: 100%;
  max-height: 500px;
  border-radius: var(--radius);
  object-fit: contain;
  box-shadow: var(--shadow-sm);
}

.file-preview__fname {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--color-text-light);
  text-align: center;
  word-break: break-all;
}

.file-preview__message {
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.875rem;
  padding: 24px 16px;
}

.file-preview__message p {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .file-preview__iframe {
    height: 350px;
  }

  .file-preview {
    order: 99;
  }
}

/* --- Quotation Selection (Step 5) --- */
.quotation-selection {
  margin-bottom: 20px;
}

.quotation-selection__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.quotation-selection__option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

.quotation-selection__option:hover {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 2%, transparent);
}

.quotation-selection__option:has(input:checked) {
  border-color: var(--color-secondary);
  background-color: color-mix(in srgb, var(--color-secondary) 6%, transparent);
}

.quotation-selection__option--incomplete {
  opacity: 0.6;
  cursor: not-allowed;
}

.quotation-selection__option--incomplete:hover {
  border-color: var(--color-border);
  background-color: transparent;
}

.quotation-selection__radio {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-secondary);
}

.quotation-selection__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.quotation-selection__provider {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.quotation-selection__file {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  word-break: break-all;
}

.quotation-selection__warning {
  font-size: 0.8125rem;
  color: var(--color-primary);
}

.quotation-selection__complete {
  font-size: 0.8125rem;
  color: var(--color-accent);
}

/* --- Document Preview Modal --- */
.document-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: docModalFadeIn 0.2s ease;
}

@keyframes docModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.document-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.document-modal__container {
  position: relative;
  width: 90vw;
  height: 85vh;
  max-width: 1400px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: 1;
  overflow: hidden;
  animation: docModalSlideIn 0.25s ease;
}

@keyframes docModalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.document-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  background: #faf8f5;
  gap: 12px;
  flex-shrink: 0;
}

.document-modal__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  margin: 0;
}

.document-modal__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.document-modal__download {
  text-decoration: none;
}

.document-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-light);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
  flex-shrink: 0;
  line-height: 1;
}

.document-modal__close:hover {
  background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}

.document-modal__body {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0ede8;
}

.document-modal__body iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.document-modal__body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.document-modal__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.document-modal__error {
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.875rem;
  padding: 32px 16px;
}

@media (max-width: 768px) {
  .document-modal {
    padding: 8px;
  }

  .document-modal__container {
    width: 100%;
    height: 90vh;
  }

  .document-modal__header {
    padding: 10px 14px;
    flex-wrap: wrap;
  }

  .document-modal__title {
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .document-modal__container {
    height: 95vh;
    border-radius: var(--radius);
  }

  .document-modal__header-actions {
    gap: 4px;
  }
}

/* --- User Management --- */
.user-form-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: 24px 32px;
  margin-bottom: 24px;
}

.user-form-panel__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.user-form-panel__subtitle {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-bottom: 16px;
}

.user-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.user-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.user-actions {
  white-space: nowrap;
}

.user-actions .btn {
  margin-right: 4px;
}

.user-actions .btn:last-child {
  margin-right: 0;
}

/* --- User Active/Inactive Badges --- */
.badge--user-active {
  background-color: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  color: var(--color-accent);
}

.badge--user-inactive {
  background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}

@media (max-width: 768px) {
  .user-form-grid {
    grid-template-columns: 1fr;
  }

  .user-form-panel {
    padding: 20px 16px;
  }

  .user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .user-actions .btn {
    margin-right: 0;
  }
}

/* --- Overlay for mobile sidebar --- */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
}

.overlay--visible {
  display: block;
}

/* --- Project Select --- */
.project-select {
  cursor: pointer;
}

.project-select option[value="new"] {
  font-weight: 700;
  color: var(--color-primary);
  border-top: 1px solid var(--color-border);
}

/* --- Project Modal --- */
.project-modal__content {
  max-width: 520px;
}

.project-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

@media (max-width: 480px) {
  .project-modal__row {
    grid-template-columns: 1fr;
  }

  .project-modal__content {
    max-width: 100%;
  }
}

/* --- Search & Filters --- */
.search-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-filters__input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-filters__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.search-filters__select {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  background: var(--color-surface);
  color: var(--color-text);
  min-width: 140px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
}

.search-filters__select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.search-filters__date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-filters__date-label {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  white-space: nowrap;
}

.search-filters__date {
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-filters__date:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.search-filters__export-group {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 768px) {
  .search-filters__date-range {
    flex-wrap: wrap;
  }

  .search-filters__export-group {
    margin-left: 0;
    width: 100%;
  }

  .search-filters__export-group .btn {
    flex: 1;
  }

  .search-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .search-filters__input {
    min-width: 0;
  }

  .search-filters__select {
    min-width: 0;
  }
}

/* --- Checkbox Label (e.g., "Fecha no definida aún") --- */
.form__checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-top: 6px;
  cursor: pointer;
}

.form__checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ============================================
   Toast Notification System
   ============================================ */

/* --- Toast Container --- */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 420px;
  width: calc(100% - 40px);
}

/* --- Individual Toast --- */
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border-left: 4px solid var(--color-text-light);
  position: relative;
  overflow: hidden;
  transform: translateX(120%);
  opacity: 0;
  animation: toast-slide-in 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast--dismissing {
  animation: toast-slide-out 0.3s ease forwards;
}

/* Toast type borders */
.toast--success {
  border-left-color: var(--color-secondary);
}

.toast--error {
  border-left-color: var(--color-danger);
}

.toast--warning {
  border-left-color: var(--color-primary);
}

.toast--info {
  border-left-color: var(--color-accent);
}

/* Toast icon */
.toast__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  margin-top: 1px;
}

.toast--success .toast__icon {
  color: var(--color-secondary);
  animation: toast-icon-pop 0.45s var(--ease) 0.1s backwards;
}

@keyframes toast-icon-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

.toast--error .toast__icon { color: var(--color-danger); }
.toast--warning .toast__icon { color: var(--color-primary); }
.toast--info .toast__icon { color: var(--color-accent); }

/* Toast message */
.toast__message {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text);
  padding-right: 8px;
}

/* Toast close button */
.toast__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--color-text-light);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  line-height: 1;
}

.toast__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

/* Toast auto-dismiss progress bar */
.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: left;
  animation: toast-progress 4s linear forwards;
}

.toast--success .toast__progress { background: var(--color-secondary); }
.toast--error .toast__progress { background: var(--color-danger); }
.toast--warning .toast__progress { background: var(--color-primary); }
.toast--info .toast__progress { background: var(--color-accent); }

/* Toast animations */
@keyframes toast-slide-in {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* --- Toast Responsive --- */
@media (max-width: 600px) {
  .toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
    width: auto;
  }

  .toast {
    padding: 12px 14px;
    gap: 10px;
  }

  .toast__message {
    font-size: 0.85rem;
  }
}

/* ============================================
   Requisition Progress Bar
   ============================================ */

/* --- Progress Bar in Requisition Table --- */
.req-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  padding: 2px 0;
}

.req-progress__bar {
  width: 100%;
  height: 9px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.req-progress__fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  width: 0;
  transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Shimmer/shine animation on filled portion */
.req-progress__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  animation: progress-shimmer 2.5s ease-in-out infinite;
}

@keyframes progress-shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* Approved: full green */
.req-progress__fill--approved {
  background: linear-gradient(90deg, var(--color-secondary), #8FBC3A);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-secondary) 35%, transparent);
}

/* Rejected: red bar */
.req-progress__fill--rejected {
  background: linear-gradient(90deg, #B22222, #D44040);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-danger) 35%, transparent);
}

/* No shimmer on rejected */
.req-progress__fill--rejected::after {
  animation: none;
  display: none;
}

.req-progress__label {
  font-size: 0.72rem;
  color: var(--color-text-light);
  line-height: 1.2;
  white-space: nowrap;
}

.req-progress__label--approved {
  color: var(--color-secondary);
  font-weight: 600;
}

.req-progress__label--rejected {
  color: var(--color-danger);
  font-weight: 600;
}

/* ============================================
   Dashboard Charts & Animated Counters
   ============================================ */

/* --- Animated Counter Styling --- */
.stat-counter {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* --- Dashboard Charts Container --- */
.dashboard-charts {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
  align-items: stretch;
}

.chart-card {
  flex: 1;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition);
}

.chart-card:hover {
  box-shadow: var(--shadow-md);
}

.chart-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

/* --- Donut Chart --- */
.chart-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: center;
}

.donut-svg {
  display: block;
}

.donut-segment {
  opacity: 0;
  animation: donut-appear 0.6s ease forwards;
}

@keyframes donut-appear {
  from {
    opacity: 0;
    stroke-dashoffset: 440;
  }
  to {
    opacity: 1;
  }
}

.donut-center-text {
  pointer-events: none;
}

.donut-center-number {
  font-size: 1.75rem;
  font-weight: 800;
  fill: var(--color-text);
}

.donut-center-label {
  font-size: 0.75rem;
  font-weight: 500;
  fill: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Chart Legend --- */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: center;
}

.chart-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text);
}

.chart-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-legend__label {
  color: var(--color-text-light);
}

.chart-legend__value {
  font-weight: 600;
  color: var(--color-text);
}

/* --- Bar Chart (Minimalist) --- */
.chart-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  justify-content: center;
}

.bar-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bar-row--zero .bar-fill {
  display: none;
}

.bar-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.bar-label {
  font-size: 0.8125rem;
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: 0.01em;
  min-width: 0;
}

.bar-row--zero .bar-label {
  color: var(--color-text-light);
  font-weight: 400;
}

.bar-track {
  flex-shrink: 0;
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  width: 0%;
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  min-width: 0;
}

.bar-row:not(.bar-row--zero) .bar-fill {
  min-width: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.bar-count {
  font-size: 0.8125rem;
  color: var(--color-text);
  font-weight: 700;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bar-count--zero {
  color: var(--color-text-light);
  font-weight: 400;
}

/* --- Charts Responsive --- */
@media (max-width: 768px) {
  .dashboard-charts {
    flex-direction: column;
  }

  .chart-card {
    padding: 16px 14px;
  }
}

@media (max-width: 480px) {
  .stat-counter {
    font-size: 1.75rem;
  }

  .chart-legend {
    gap: 8px 14px;
  }

  .chart-legend__item {
    font-size: 0.75rem;
  }
}

/* ============================================
   Dark Mode
   ============================================ */

/* --- Smooth Transitions for Theme Switch --- */
body,
.sidebar,
.header,
.main,
.login__card,
.stat-card,
.chart-card,
.table-wrap,
.table th,
.table td,
.timeline,
.approval-panel,
.quotations-panel,
.quotation-card,
.quotation-form,
.upload-form,
.upload-preview,
.file-preview,
.activity-list,
.pending-list,
.pending-item,
.activity-item,
.modal__content,
.document-modal__container,
.document-modal__header,
.document-modal__body,
.profile__card,
.user-form-panel,
.form__input,
.search-filters__input,
.search-filters__select,
.toast,
.req-detail__info,
.section__title,
.alert,
.btn--outline,
.header__logout,
.sidebar__link,
.sidebar__brand,
.back-link {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* --- Dark Theme Custom Properties --- */
[data-theme="dark"] {
  --color-bg: #1a1a2e;
  --color-surface: #16213e;
  --color-text: #e0e0e0;
  --color-text-light: #a0a0a0;
  --color-border: #2a2a4a;
  /* Only for accent/primary used as TEXT (not as a button/dot background, which keep --color-accent/--color-primary
     since those still contrast fine with the white text/fill used there) */
  --color-accent-text: #8BC34A;
  --color-in-review-text: #F0955A;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Orange as TEXT on the dark surface needs the lighter tint (7:1); buttons keep --color-primary. */
[data-theme="dark"] a:not([class]), /* plain text links only; styled links (nav, buttons) keep theirs */
[data-theme="dark"] .timeline__more { color: var(--color-in-review-text); }

/* --- Dark Mode: Login Page --- */
[data-theme="dark"] .login {
  background-color: #0f0f23;
}

[data-theme="dark"] .login::before {
  background-color: #1a1a2e;
  opacity: 0.3;
}

[data-theme="dark"] .login__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .login__error {
  background-color: color-mix(in srgb, var(--color-danger) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

/* --- Dark Mode: Sidebar --- */
[data-theme="dark"] .sidebar {
  background-color: #0f1629;
}

[data-theme="dark"] .sidebar__link:hover {
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

[data-theme="dark"] .sidebar__link--active {
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* --- Dark Mode: Header --- */
[data-theme="dark"] .header {
  background-color: #0f1629;
}

/* --- Dark Mode: Forms / Inputs --- */
[data-theme="dark"] .form__input,
[data-theme="dark"] .search-filters__input,
[data-theme="dark"] .search-filters__select {
  background-color: #1e2a4a;
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .form__input:focus,
[data-theme="dark"] .search-filters__input:focus,
[data-theme="dark"] .search-filters__select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

[data-theme="dark"] .form__input::placeholder,
[data-theme="dark"] .search-filters__input::placeholder {
  color: #6a6a8a;
}

[data-theme="dark"] .form__input:disabled {
  background-color: #141c34;
  color: #6a6a8a;
}

[data-theme="dark"] select.form__input option,
[data-theme="dark"] .search-filters__select option {
  background-color: #1e2a4a;
  color: var(--color-text);
}

/* --- Dark Mode: Tables --- */
[data-theme="dark"] .table th {
  background: #0f1629;
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .table tbody tr:hover {
  background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

[data-theme="dark"] .table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* --- Dark Mode: Modal --- */
[data-theme="dark"] .modal__backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .modal__content,
[data-theme="dark"] .confirm-dialog,
[data-theme="dark"] .approval-result-dialog {
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .confirm-dialog::backdrop,
[data-theme="dark"] .approval-result-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

/* --- Dark Mode: Document Modal --- */
[data-theme="dark"] .document-modal__backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .document-modal__header {
  background: #0f1629;
}

[data-theme="dark"] .document-modal__body {
  background: #111827;
}

[data-theme="dark"] .document-modal__container {
  border: 1px solid var(--color-border);
}

/* --- Dark Mode: Toast --- */
[data-theme="dark"] .toast {
  background: #1e2a4a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .toast__close:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* --- Dark Mode: Alerts --- */
[data-theme="dark"] .alert--success {
  background-color: color-mix(in srgb, var(--color-secondary) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
}

[data-theme="dark"] .alert--error {
  background-color: color-mix(in srgb, var(--color-danger) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

/* --- Dark Mode: Quotation Form & Cards --- */
[data-theme="dark"] .quotation-form {
  background: #1e2a4a;
}

[data-theme="dark"] .quotation-card__file {
  background: #1e2a4a;
}

/* The unfilled ring was barely visible: dark border on an already-dark card surface */
[data-theme="dark"] .timeline__item--pending .timeline__dot {
  border-color: #4a5578;
}

[data-theme="dark"] .quotation-warning {
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* --- Dark Mode: Upload Preview --- */
[data-theme="dark"] .upload-preview__header {
  background: #0f1629;
}

[data-theme="dark"] .upload-form__file-area {
  border-color: var(--color-border);
}

[data-theme="dark"] .upload-form__file-area:hover {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

/* --- Dark Mode: File Preview --- */
[data-theme="dark"] .file-preview__header {
  background: #0f1629;
}

/* --- Dark Mode: Progress Bar Track --- */
[data-theme="dark"] .req-progress__bar {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .req-progress__fill {
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* --- Dark Mode: Bar Chart Track --- */
[data-theme="dark"] .bar-track {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .bar-fill {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* --- Dark Mode: Badges --- */
[data-theme="dark"] .badge--pending {
  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

[data-theme="dark"] .badge--in_review {
  background-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}

[data-theme="dark"] .badge--approved {
  background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

[data-theme="dark"] .badge--rejected {
  background-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}

[data-theme="dark"] .badge--user-active {
  background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

[data-theme="dark"] .badge--user-inactive {
  background-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}

/* --- Dark Mode: Pending Items --- */
[data-theme="dark"] .pending-item:hover {
  background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

/* --- Dark Mode: Overlay --- */
[data-theme="dark"] .overlay--visible {
  background: rgba(0, 0, 0, 0.5);
}

/* --- Dark Mode: Scrollbar --- */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f1629;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2a2a4a;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #3a3a5a;
}

/* ============================================
   Dark Mode Toggle Switch
   ============================================ */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s;
}

.theme-toggle:hover {
  background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

[data-theme="dark"] .theme-toggle:hover {
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.theme-toggle__icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.theme-toggle__track {
  position: relative;
  width: 40px;
  height: 22px;
  background: #ccc;
  border-radius: 11px;
  transition: background-color 0.3s;
  flex-shrink: 0;
}

[data-theme="dark"] .theme-toggle__track {
  background: var(--color-primary);
}

.theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .theme-toggle__thumb {
  transform: translateX(18px);
}

.theme-toggle__label {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  white-space: nowrap;
}

/* ============================================
   Activity Badge (Sidebar Nav)
   ============================================ */

.sidebar__badge {
  position: absolute;
  top: 6px;
  right: 12px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-danger);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1;
  animation: badge-pulse 2s ease-in-out infinite;
  transition: opacity 0.3s, transform 0.3s;
}

.sidebar__badge--hidden {
  opacity: 0;
  transform: scale(0);
  animation: none;
}

@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 40%, transparent);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 0%, transparent);
  }
}

/* ============================================
   Returns / versions / acta (workflow v2)
   ============================================ */


/* --- Buttons --- */
.btn--warning {
  background-color: var(--color-warning-dark);
  color: #fff;
}

.btn--warning:hover:not(:disabled) {
  background-color: #8f6508;
}

.btn--warning-outline {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-warning-dark);
}

.btn--ghost.btn--warning-outline,
.btn--ghost.btn--success-outline,
.btn--ghost.btn--danger-outline { border-color: transparent; }

.btn--warning-outline:hover:not(:disabled) {
  border-color: var(--color-warning-dark);
  background-color: rgba(179, 127, 10, 0.08);
}

.btn--success-outline {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-secondary);
}

.btn--success-outline:hover:not(:disabled) {
  border-color: var(--color-secondary);
  background-color: color-mix(in srgb, var(--color-secondary) 8%, transparent);
}

/* --- Badges & tags --- */
.badge--returned {
  background-color: color-mix(in srgb, var(--color-warning) 16%, transparent);
  color: var(--color-warning-dark);
}

[data-theme="dark"] .badge--returned {
  background-color: color-mix(in srgb, var(--color-warning) 25%, transparent);
  color: var(--color-warning);
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

.tag--success {
  background-color: color-mix(in srgb, var(--color-secondary) 14%, transparent);
  color: var(--color-accent);
}

.tag--warning {
  background-color: color-mix(in srgb, var(--color-warning) 18%, transparent);
  color: var(--color-warning-dark);
}

[data-theme="dark"] .tag--success {
  color: var(--color-secondary);
}

[data-theme="dark"] .tag--warning {
  color: var(--color-warning);
}

.req-number {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.version-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  vertical-align: middle;
}

/* --- Alerts --- */
.alert--info {
  background-color: color-mix(in srgb, var(--color-secondary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 25%, transparent);
  color: var(--color-text);
}

.alert--warning {
  background-color: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning) 45%, transparent);
  color: var(--color-text);
}

[data-theme="dark"] .alert--warning {
  background-color: color-mix(in srgb, var(--color-warning) 16%, transparent);
}

/* --- Detail heading --- */
.req-detail__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.req-detail__number {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.3px;
}

/* --- Returned banner --- */
.returned-banner {
  margin-bottom: 0;
  border-left: 4px solid var(--color-warning);
}

.returned-banner__title {
  font-weight: 600;
}

.returned-banner__reason {
  margin: 8px 0;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--color-warning) 60%, transparent);
  font-style: italic;
  color: var(--color-text-light);
}

.returned-banner__hint {
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

/* --- Approval options (radio group) --- */
.approval-options {
  border: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.approval-options legend {
  padding: 0;
}

.approval-options__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}

.approval-options__option:hover {
  border-color: var(--color-text-light);
}

.approval-options__option:has(input:checked) {
  animation: option-settle 0.28s var(--ease);
}

@keyframes option-settle {
  0% { transform: scale(0.98); }
  50% { transform: scale(1.008); }
  100% { transform: scale(1); }
}

.approval-options__option--approve:has(input:checked) {
  border-color: var(--color-secondary);
  background-color: color-mix(in srgb, var(--color-secondary) 8%, transparent);
}

.approval-options__option--return_previous:has(input:checked),
.approval-options__option--return_start:has(input:checked) {
  border-color: var(--color-warning);
  background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

.approval-options__option--reject:has(input:checked) {
  border-color: var(--color-danger);
  background-color: color-mix(in srgb, var(--color-danger) 8%, transparent);
}

.approval-options__option--approve input {
  accent-color: var(--color-secondary);
}

.approval-options__option--return_previous input,
.approval-options__option--return_start input {
  accent-color: var(--color-warning-dark);
}

.approval-options__option--reject input {
  accent-color: var(--color-danger);
}

.approval-panel__required {
  font-size: 0.8125rem;
  color: var(--color-warning-dark);
  font-weight: 500;
}

.form__error {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--color-danger);
}

.form__input--invalid {
  border-color: var(--color-danger) !important;
}

/* --- Resubmit panel --- */
.resubmit-panel {
  border-left: 4px solid var(--color-warning);
}

.resubmit-panel__hint {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-bottom: 16px;
}

/* --- Versions --- */
.versions-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: 18px;
}

.versions-panel__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--color-text);
}

.versions-panel__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.version-item {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.version-item--current {
  border-color: color-mix(in srgb, var(--color-secondary) 50%, transparent);
}

.version-item__main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.version-item__file {
  font-weight: 500;
  word-break: break-all;
}

.version-item__meta {
  color: var(--color-text-light);
  font-size: 0.8125rem;
  margin-top: 4px;
}

.version-item__comment {
  color: var(--color-text-light);
  font-style: italic;
  font-size: 0.8125rem;
  margin-top: 4px;
}

.version-item__actions {
  margin-top: 8px;
}

/* --- Quotation amounts & comparison --- */
.quotation-card__price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quotation-card__amount {
  font-weight: 700;
  color: var(--color-accent);
}

.quotation-card__notes {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  margin-bottom: 12px;
}

.quotation-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.quotation-card__payment-terms {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-accent-text);
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: 100px;
  padding: 2px 10px;
}

.quotation-card__quotation-date {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-light);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 100px;
  padding: 2px 10px;
}

.comparison-document__required {
  color: var(--color-danger);
  font-weight: 600;
  font-size: 0.8125rem;
}

.comparison-document__optional {
  color: var(--color-text-light);
  font-weight: 400;
  font-size: 0.8125rem;
}

.quotation-card--selected {
  border-color: var(--color-secondary);
}

.quotation-compare {
  margin-top: 8px;
  overflow-x: auto; /* the table may be wider than a phone; scroll it, never the page */
}

/* Grid tracks must be allowed to shrink below their content's intrinsic width */
.req-detail__left,
.req-detail__right {
  min-width: 0;
}

.quotation-compare .table td {
  vertical-align: middle;
}

.quotation-compare__provider {
  font-weight: 600;
  margin-right: 6px;
}

.quotation-compare__notes {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 2px;
}

.quotation-compare__amount {
  font-weight: 600;
  white-space: nowrap;
}

.quotation-compare__diff {
  white-space: nowrap;
  color: var(--color-text-light);
}

.quotation-compare__select {
  text-align: center;
}

.quotation-compare__row--lowest td {
  background-color: color-mix(in srgb, var(--color-secondary) 8%, transparent);
}

.quotation-compare__row--incomplete {
  opacity: 0.65;
}

.quotation-compare__row:has(input:checked) td {
  box-shadow: inset 3px 0 0 var(--color-secondary);
}

/* --- Timeline / history: returns --- */
.timeline__item--returned .timeline__dot {
  border-color: var(--color-warning);
  background-color: var(--color-warning);
}

.activity-item--returned {
  border-left: 3px solid var(--color-warning);
}

.activity-item__target {
  color: var(--color-warning-dark);
  font-weight: 500;
}

.activity-item__project {
  color: var(--color-text-light);
}

[data-theme="dark"] .activity-item__target {
  color: var(--color-warning);
}

/* --- Progress bar: returned --- */
.req-progress__fill--returned {
  background: linear-gradient(90deg, var(--color-warning-dark), var(--color-warning));
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.req-progress__fill--returned::after {
  animation: none;
  display: none;
}

.req-progress__label--returned {
  color: var(--color-warning-dark);
  font-weight: 600;
}

/* --- Dashboard: section header, pending tags --- */
.section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.section__header .section__title {
  margin-bottom: 0;
}

.pending-item__tag {
  margin-left: 6px;
}

/* --- Acta de aprobación --- */
.acta-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.acta-toolbar__actions {
  display: flex;
  gap: 10px;
}

.acta-notice {
  margin-top: 16px;
}

.acta {
  background: #fff;
  color: #111;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 40px 48px;
  max-width: 960px;
  margin: 0 auto;
  font-size: 0.875rem;
}

.acta__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid #111;
  margin-bottom: 24px;
}

.acta__logo {
  height: 64px;
  width: auto;
}

.acta__heading {
  text-align: right;
}

.acta__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.acta__number {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 4px;
}

.acta__section {
  margin-bottom: 28px;
}

.acta__section-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid #999;
}

.acta__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
}

.acta__facts div {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted #ccc;
}

.acta__facts dt {
  font-weight: 600;
  min-width: 160px;
  flex-shrink: 0;
}

.acta__facts dd {
  margin: 0;
}

.acta__description {
  margin-top: 12px;
  line-height: 1.6;
}

.acta__table {
  width: 100%;
  border-collapse: collapse;
}

.acta__table th,
.acta__table td {
  border: 1px solid #999;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.acta__table th {
  background: #f0f0f0;
  font-weight: 700;
}

.acta__step-no {
  text-align: center;
  width: 32px;
}

/* Fixed column widths so long comments get real room to wrap instead of being squeezed
   by the browser's auto layout (which otherwise sizes columns off the shortest content). */
.acta__table--steps {
  table-layout: fixed;
}

.acta__table--steps th:nth-child(1), .acta__table--steps td:nth-child(1) { width: 5%; }
.acta__table--steps th:nth-child(2), .acta__table--steps td:nth-child(2) { width: 19%; }
.acta__table--steps th:nth-child(3), .acta__table--steps td:nth-child(3) { width: 15%; }
.acta__table--steps th:nth-child(4), .acta__table--steps td:nth-child(4) { width: 15%; }
.acta__table--steps th:nth-child(5), .acta__table--steps td:nth-child(5) { width: 13%; }
.acta__table--steps th:nth-child(6), .acta__table--steps td:nth-child(6) { width: 33%; }

.acta__comments {
  font-style: italic;
  color: #333;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.acta__amount {
  white-space: nowrap;
  font-weight: 600;
}

.acta__row--selected td {
  background: #eef3e2;
  font-weight: 600;
}

.acta__selected-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid #3D5A1E;
  border-radius: 100px;
  font-size: 0.6875rem;
  color: #3D5A1E;
}

.acta__signatures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 40px 32px;
  margin-top: 48px;
}

.acta__signature-line {
  border-top: 1px solid #111;
  margin-bottom: 6px;
}

.acta__signature-name {
  font-weight: 600;
}

.acta__signature-role {
  font-size: 0.8125rem;
  color: #333;
}

.acta__footer {
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px solid #999;
  font-size: 0.75rem;
  color: #555;
  text-align: center;
}

@media (max-width: 768px) {
  .acta {
    padding: 24px 20px;
  }

  .acta__facts {
    grid-template-columns: 1fr;
  }

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

  .acta__heading {
    text-align: left;
  }
}

/* --- Print --- */
@page {
  size: A4;
  margin: 18mm;
}

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }

  .sidebar,
  .header,
  .overlay,
  .toast-container,
  .acta-toolbar,
  .back-link,
  .btn,
  .mobile-toggle {
    display: none !important;
  }

  .app {
    display: block !important;
  }

  .main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
  }

  .acta {
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
    color: #000;
  }

  .acta__section {
    break-inside: avoid;
  }

  .acta__table th {
    background: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .acta__row--selected td {
    background: #e8e8e8 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a {
    color: #000;
    text-decoration: none;
  }
}

/* ============================================
   Requisitions built in the platform (items)
   ============================================ */
.upload-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

/* --- PDF / platform switch --- */
.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.mode-switch__option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.mode-switch__option:hover {
  border-color: var(--color-primary);
}

.mode-switch__option--active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.mode-switch__title {
  font-weight: 600;
}

.mode-switch__hint {
  font-size: 0.85rem;
  color: var(--color-text-light);
}

/* --- Item editor --- */
.items-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.items-editor__head,
.items-editor__row {
  display: grid;
  /* # · Nombre · Marca · Rubro · Foto · Unidad · Cantidad · Comentario · quitar */
  grid-template-columns: 24px minmax(140px, 2fr) minmax(90px, 1fr) minmax(90px, 1fr) 124px 96px 80px minmax(110px, 1.6fr) 32px;
  gap: 8px;
  align-items: center;
}

.items-editor__head {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-light);
  padding: 0 4px;
}

.items-editor__row {
  padding: 8px 4px;
  border-top: 1px solid var(--color-border);
}

.items-editor__num {
  font-weight: 600;
  color: var(--color-text-light);
  text-align: center;
}

.items-editor__cell .form__input {
  width: 100%;
}

.items-editor__remove {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.6;
  border-radius: var(--radius);
  padding: 4px;
}

.items-editor__remove:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.items-editor__add {
  align-self: flex-start;
  margin-top: 4px;
}

.items-editor__photo-size {
  font-size: 0.72rem;
  color: var(--color-text-light);
}

.items-editor__photo-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-danger);
  cursor: pointer;
  line-height: 1;
  font-size: 1rem;
}

/* --- Suggestions dropdown (e.g. registered providers under the provider field) --- */
.suggest-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 4px;
}

.suggest-menu__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  border-radius: var(--radius);
  cursor: pointer;
}

.suggest-menu__option:hover {
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}

.suggest-menu__name {
  flex: 1;
}

.suggest-menu__meta {
  font-size: 0.75rem;
  color: var(--color-text-light);
  white-space: nowrap;
}

/* --- Item photo thumbnail --- */
.item-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text-light);
  cursor: pointer;
  flex-shrink: 0;
}

.item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item-thumb--empty {
  cursor: default;
}

/* --- Photo picker (catalog gallery of the item) --- */
.photo-picker {
  position: relative;
}

.photo-picker__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.photo-picker__open {
  white-space: nowrap;
}

.photo-picker__menu {
  position: absolute;
  z-index: 25;
  top: calc(100% + 6px);
  left: 0;
  width: 316px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.photo-picker__menu {
  overflow-y: auto;
}

.photo-picker__menu--up {
  top: auto;
  bottom: calc(100% + 6px);
}

.photo-picker__title {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.photo-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 84px);
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 2px;
}

.photo-picker__upload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.photo-picker__upload:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.photo-picker__upload--busy {
  cursor: progress;
  font-size: 0.7rem;
  color: var(--color-text-light);
}

.photo-picker__empty {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--color-text-light);
}

.item-thumb__loading {
  width: 60%;
  height: 60%;
  border-radius: 4px;
  background: var(--color-border);
  animation: item-thumb-pulse 1.2s ease-in-out infinite;
}

/* --- Item list on the requisition detail --- */
.items-panel__count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--color-bg);
  color: var(--color-text-light);
  vertical-align: middle;
}

.items-table-wrap {
  overflow-x: auto;
}

.items-table {
  width: 100%;
  border-collapse: collapse;
}

.items-table th,
.items-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.items-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-light);
}

.items-table__num {
  text-align: right !important;
  white-space: nowrap;
}

.items-table__muted {
  color: var(--color-text-light);
}

.items-table__review {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.items-table__review-by {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.items-table__review-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

@media (max-width: 900px) {
  .mode-switch {
    grid-template-columns: 1fr;
  }

  .items-editor__head {
    display: none;
  }

  .items-editor__row {
    grid-template-columns: 24px 1fr 32px;
    grid-template-areas: none;
  }

  .items-editor__cell {
    grid-column: 2;
  }

  .items-editor__cell::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-bottom: 2px;
  }

  .items-editor__num {
    grid-row: 1;
    align-self: start;
  }

  .items-editor__remove {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }
}

@keyframes item-thumb-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* Drag an image onto an item's photo cell */
.photo-picker--dragging .photo-picker__open,
.photo-picker--dragging .photo-picker__current {
  outline: 2px dashed var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.photo-picker__drop-hint {
  position: absolute;
  z-index: 26;
  left: 0;
  bottom: calc(100% + 4px);
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

button.photo-picker__upload {
  background: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Quotation above the requisition's budget (allowed, just flagged) */
.over-budget {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--color-in-review-text);
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
}

/* Provider directory */
.provider-input {
  position: relative;
}

.provider-input__hint {
  color: var(--color-accent-text);
}

.provider-doc-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.6;
  vertical-align: middle;
  color: var(--color-accent-text);
  background: color-mix(in srgb, var(--color-secondary) 14%, transparent);
}

.providers-view__search {
  max-width: 360px;
  margin: 8px 0 16px;
}

.providers-view__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
}

.provider-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}

.provider-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.provider-card__name {
  font-weight: 600;
}

.provider-card__meta,
.provider-card__date {
  font-size: 0.78rem;
  color: var(--color-text-light);
}

.provider-card__date {
  margin-left: 6px;
}

.storage-warning {
  margin-bottom: 16px;
}

@media (max-width: 600px) {
  .providers-view__list {
    grid-template-columns: 1fr;
  }
}

/* --- Dashboard layout ---
   Small screens: everything stacked (the page scrolls). Desktop: the whole panel fits
   one screen — stats on top, then three columns (estado + pendientes | etapas |
   actividad); long lists scroll inside their own card instead of the page. */
.dashboard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.dashboard__grid .section {
  margin-bottom: 0;
}

@media (min-width: 1100px) {
  .dashboard__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard__pending,
  .dashboard__activity {
    grid-column: span 1;
  }
}

@media (min-width: 1100px) and (min-height: 640px) {
  .dashboard {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height) - 40px); /* .main padding: 20px top + bottom */
    min-height: 560px;
  }

  .dashboard .stats {
    margin-bottom: 14px;
  }

  .dashboard__grid {
    flex: 1;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "donut bars activity"
      "pending bars activity";
    gap: 14px;
  }

  .dashboard__donut { grid-area: donut; }
  .dashboard__bars { grid-area: bars; }
  .dashboard__pending { grid-area: pending; }
  .dashboard__activity { grid-area: activity; }

  .dashboard__grid > * {
    min-height: 0;
  }

  .dashboard__grid .chart-card {
    padding: 14px 16px;
    overflow: hidden;
  }

  .dashboard__grid .chart-card__title {
    margin-bottom: 10px;
  }

  /* The donut shrinks with its card on shorter screens. */
  .dashboard__donut .chart-donut {
    min-height: 0;
    gap: 8px;
  }

  .dashboard__donut .donut-svg {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 170px;
    width: auto;
  }

  .dashboard__bars .chart-bars {
    gap: 6px;
    justify-content: space-evenly;
    overflow-y: auto;
  }

  .dashboard__bars .bar-label,
  .dashboard__bars .bar-count {
    font-size: 0.78rem;
  }

  /* Pendientes / Actividad: a card with a fixed header and a scrolling body. */
  .dashboard__panel {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
    overflow: hidden;
  }

  .dashboard__panel .section__title {
    font-size: 0.875rem;
    margin-bottom: 10px;
  }

  .dashboard__panel .section__header {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: nowrap;
  }

  .dashboard__panel .section__header .section__title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    flex: 1;
  }

  .dashboard__panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -16px -14px;
  }

  .dashboard__panel-body .pending-list,
  .dashboard__panel-body .activity-list {
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  .dashboard__panel-body .empty {
    padding: 24px 16px;
  }
}

/* --- Release notice (beta mark) — see frontend/src/config/release.js --- */
.main { padding-bottom: 44px; } /* room so the fixed mark never covers the last line */

.release-notice {
  position: fixed;
  right: 12px;
  bottom: 10px;
  z-index: 40; /* above content, below modals and toasts */
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  backdrop-filter: blur(2px);
  color: var(--color-text-light);
  font-size: 0.68rem;
  line-height: 1.4;
  opacity: 0.8;
  transition: opacity var(--transition);
}

.release-notice:hover,
.release-notice:focus-within {
  opacity: 1;
}

.release-notice__stage {
  flex-shrink: 0;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.release-notice__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.release-notice__link:hover {
  color: var(--color-primary);
}

@media (max-width: 600px) {
  .release-notice__text {
    display: none; /* phones: just the "Beta" pill */
  }
}

@media print {
  .release-notice {
    display: none;
  }
}

/* --- Per-item prices of a quotation (requisitions built from items) --- */
.item-prices {
  overflow-x: auto;
  margin: 6px 0 4px;
}

.item-prices__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.item-prices__table th,
.item-prices__table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.item-prices__table th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-light);
  white-space: nowrap;
}

.item-prices__table tfoot td {
  border-bottom: none;
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  font-weight: 600;
}

.item-prices__num {
  text-align: right !important;
  white-space: nowrap;
}

.item-prices__brand {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.item-prices__input {
  width: 130px;
  text-align: right;
  padding: 5px 8px;
}

.item-prices__vat {
  width: 76px;
  padding: 5px 6px;
}

.item-prices__missing {
  color: var(--color-in-review-text);
  font-size: 0.78rem;
}

.quotation-prices {
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.quotation-prices__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quotation-prices__toggle {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
  margin-right: auto;
}

.quotation-prices__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Email log (Gestión de Usuarios) */
.email-log__error {
  margin-top: 2px;
  max-width: 360px;
  font-size: 0.72rem;
  color: var(--color-text-light);
  word-break: break-word;
}

/* ============================================
   Administration panel
   ============================================ */
.admin-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 18px;
  scrollbar-width: thin;
}

.admin-tabs__tab {
  flex-shrink: 0;
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-light);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}

.admin-tabs__tab:hover {
  color: var(--color-text);
}

.admin-tabs__tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.admin-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 12px;
}

.admin-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.admin-section__hint {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.admin-section__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Metrics */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.admin-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-width: 0;
}

.admin-metric--ok { border-left-color: var(--color-secondary); }
.admin-metric--warn { border-left-color: var(--color-warning); }
.admin-metric--error { border-left-color: var(--color-danger); }

.admin-metric__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
}

.admin-metric__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.admin-metric__hint {
  font-size: 0.75rem;
  color: var(--color-text-light);
  overflow-wrap: anywhere;
}

/* Alerts */
.admin-alerts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.admin-alert {
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 0.84rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-bottom: 18px;
}

.admin-alerts .admin-alert { margin-bottom: 0; }
.admin-alert--error { border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); background: color-mix(in srgb, var(--color-danger) 7%, var(--color-surface)); }
.admin-alert--warn { border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); background: color-mix(in srgb, var(--color-warning) 9%, var(--color-surface)); }
.admin-alert--ok { border-color: color-mix(in srgb, var(--color-secondary) 40%, transparent); background: color-mix(in srgb, var(--color-secondary) 7%, var(--color-surface)); }

/* Filters */
.admin-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.admin-filters .form__input {
  width: auto;
  min-width: 200px;
  flex: 0 1 auto;
}

.admin-filters input[type="search"] {
  flex: 1 1 280px;
}

.admin-segmented {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.admin-segmented button {
  padding: 6px 12px;
  border: none;
  background: var(--color-surface);
  color: var(--color-text-light);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.admin-segmented button + button { border-left: 1px solid var(--color-border); }
.admin-segmented button.is-active { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); font-weight: 600; }

/* Tables */
.admin-table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.admin-table th,
.admin-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: color-mix(in srgb, var(--color-primary) 3%, transparent); }

.admin-table th {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
  white-space: nowrap;
  background: color-mix(in srgb, var(--color-bg) 50%, var(--color-surface));
}

.admin-table__muted { color: var(--color-text-light); }
.admin-table__nowrap { white-space: nowrap; }
.admin-table__num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-table__wide { min-width: 220px; }
.admin-table__bad { color: var(--color-danger); font-weight: 600; }
.admin-table__actions { text-align: right; white-space: nowrap; }
.admin-table__sub { display: block; font-size: 0.74rem; color: var(--color-text-light); }
.admin-table__link { color: var(--color-primary); font-weight: 600; text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
.admin-table__link:hover { text-decoration: underline; }
.admin-table__error { margin-top: 3px; font-size: 0.72rem; color: var(--color-text-light); max-width: 420px; overflow-wrap: anywhere; }
.admin-table--bars td { border-bottom: none; padding: 5px 8px; vertical-align: middle; }
.admin-table__bar { width: 40%; }

.admin-more { margin: 0 auto 14px; display: block; }

/* Pills */
.admin-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--color-text-light) 12%, transparent);
  color: var(--color-text-light);
}

.admin-pill--ok, .admin-pill--approved, .admin-pill--uploaded, .admin-pill--resubmitted { background: color-mix(in srgb, var(--color-secondary) 14%, transparent); color: var(--color-accent-text); }
.admin-pill--warn, .admin-pill--returned { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-in-review-text); }
.admin-pill--error, .admin-pill--rejected { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }

/* Cards & bars */
.admin-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.admin-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  min-width: 0;
}

.admin-card__title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.admin-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-text-light) 12%, transparent);
  overflow: hidden;
}

.admin-bar__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

/* Server log */
.admin-log {
  background: #16171a;
  color: #d8dadf;
  border-radius: var(--radius-lg);
  padding: 8px 0;
  max-height: 64vh;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  line-height: 1.5;
}

.admin-log__line {
  display: grid;
  grid-template-columns: 190px 56px 1fr;
  gap: 10px;
  padding: 2px 14px;
}

.admin-log__line:hover { background: rgba(255, 255, 255, 0.04); }
.admin-log__time { color: #8a8f98; white-space: nowrap; }
.admin-log__level { text-transform: uppercase; font-weight: 700; color: #8a8f98; }
.admin-log__line--warn .admin-log__level { color: #e6b84a; }
.admin-log__line--error .admin-log__level, .admin-log__line--error .admin-log__msg { color: #ff8a80; }
.admin-log__line--debug { opacity: 0.7; }
.admin-log__msg { overflow-wrap: anywhere; white-space: pre-wrap; }
.admin-log__meta { margin: 2px 0 0; color: #9aa0aa; white-space: pre-wrap; font-size: 0.72rem; }

.admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--color-text-light);
  cursor: pointer;
}

/* Maintenance */
.admin-maintenance { margin-bottom: 22px; max-width: 640px; }
.admin-maintenance--on { border-color: color-mix(in srgb, var(--color-warning) 55%, transparent); }
.admin-maintenance__state { margin-bottom: 10px; }
.admin-maintenance__actions { margin-top: 10px; }

.maintenance-banner {
  margin: -4px 0 14px;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-warning) 45%, transparent);
  font-size: 0.86rem;
  color: var(--color-text);
}

.maintenance-banner__admin { color: var(--color-text-light); }

/* Users tab extras */
.admin-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.user-actions__more {
  position: relative;
  display: inline-block;
}

.user-actions__more > summary {
  list-style: none;
  cursor: pointer;
}

.user-actions__more > summary::-webkit-details-marker { display: none; }

.user-actions__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 230px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.user-actions__menu button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  border-radius: var(--radius);
  cursor: pointer;
}

.user-actions__menu button:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }

/* Password confirmation dialog */
.password-confirm__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

#password-confirm-dialog .form__input { width: 100%; margin-top: 4px; }

.btn--danger-outline {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid color-mix(in srgb, var(--color-danger) 45%, transparent);
}

.btn--danger-outline:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
}

@media (max-width: 700px) {
  .admin-log__line { grid-template-columns: 1fr; gap: 0; padding: 4px 12px; }
  .admin-filters .form__input { min-width: 0; width: 100%; }
}

/* --- Hidden console shell --- */
.console { min-height: 100vh; background: var(--color-bg); }

.console__header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: #16171a;
  color: #e8e9ec;
}

.console__brand { font-weight: 700; letter-spacing: 0.02em; margin-right: auto; }
.console__user { font-size: 0.82rem; color: #9aa0aa; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.console__header .btn { color: #e8e9ec; border-color: #3a3d44; background: transparent; }
.console__main { padding: 20px 24px 40px; }

.console-signin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16171a;
}

.console-signin__card {
  width: min(360px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.console-signin__title { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.console-signin__card .btn { margin-top: 8px; }

/* --- Modal (read-only requisition, row editor) --- */
.admin-modal {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.admin-modal::backdrop { background: rgba(0, 0, 0, 0.45); }

.admin-modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.admin-modal__number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; color: var(--color-primary); font-weight: 600; }
.admin-modal__title { font-size: 1.05rem; font-weight: 600; }
.admin-modal__body { padding: 14px 18px 18px; }
.admin-modal__body .admin-card__title { margin-top: 16px; }
.admin-modal__desc { margin: 8px 0; font-size: 0.85rem; color: var(--color-text-light); }

.admin-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 16px;
}

.admin-facts dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-light); }
.admin-facts dd { font-size: 0.86rem; }

button.admin-table__link { border: none; background: none; padding: 0; cursor: pointer; }

/* --- Database explorer --- */
.db-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.db-tables {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.db-tables__item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: left;
  cursor: pointer;
}

.db-tables__item:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.db-tables__item.is-active { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); font-weight: 600; }
.db-tables__count { color: var(--color-text-light); white-space: nowrap; }
.db-main { min-width: 0; }

.db-table td {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
}

.db-table th { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: none; letter-spacing: 0; }
.db-table__row { cursor: pointer; }
.db-null { color: var(--color-text-light); font-style: italic; }

.db-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; }

.db-form { display: flex; flex-direction: column; gap: 8px; }
.db-form__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: start; }
.db-form__label { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; padding-top: 6px; }
.db-form__type { font-size: 0.7rem; color: var(--color-text-light); }
.db-form__input { display: flex; align-items: center; gap: 8px; }
.db-form__input textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; resize: vertical; }
.db-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.db-console { margin-top: 6px; }
.db-console__input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
.db-console__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; }

@media (max-width: 800px) {
  .db-layout { grid-template-columns: 1fr; }
  .db-tables { max-height: 180px; }
  .db-form__row { grid-template-columns: 1fr; gap: 4px; }
}

/* The global reset removes <dialog>'s auto margins: center the console modals again. */
.admin-modal { margin: auto; }

.db-form__input textarea.form__input {
  min-height: 34px;
  height: auto;
  padding: 6px 10px;
  line-height: 1.4;
}

/* --- Provider directory: new provider, other documents --- */
.providers-view__bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.providers-view__bar .providers-view__search { margin: 0; }
.providers-view__new { display: flex; gap: 8px; flex: 1; min-width: 280px; }
.providers-view__new .form__input { flex: 1; }
.provider-card__other { color: var(--color-text); cursor: pointer; }
.provider-card__add {
  align-self: flex-start;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.provider-card__add:hover { text-decoration: underline; }
.provider-card__add-form { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.provider-card__add-form .form__input { flex: 1; min-width: 0; padding: 6px 10px; }
.btn.is-disabled { opacity: 0.5; pointer-events: none; }
[data-theme="dark"] .provider-card__add { color: var(--color-in-review-text); }

/* --- Items: delivery (applies to the whole requisition) --- */
.items-editor__delivery {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 4px 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.items-editor__delivery .form__group { margin-bottom: 0; }
.items-editor__delivery-title {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.items-panel__delivery {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0 0 12px;
  font-size: 0.875rem;
}
.items-panel__delivery-label,
.items-table__unit { color: var(--color-text-light); }
.items-panel__delivery-label { margin-right: 4px; }
@media (max-width: 720px) {
  .items-editor__delivery { grid-template-columns: 1fr; }
}

/* --- Data protection: legal documents, one-time acceptance, data rights --- */
.legal-doc { max-width: 820px; margin: 0 auto; padding: 32px 24px 64px; line-height: 1.65; }
.legal-doc__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 24px; font-size: 0.875rem; }
.legal-doc__body h2 { font-size: 1.6rem; margin-bottom: 8px; }
.legal-doc__body h3 { font-size: 1.05rem; margin: 28px 0 8px; }
.legal-doc__body p, .legal-doc__body ul, .legal-doc__body ol { margin: 0 0 12px; }
.legal-doc__body ul, .legal-doc__body ol { padding-left: 22px; }
.legal-doc__body li { margin-bottom: 4px; }
.legal-doc__table { overflow-x: auto; margin: 0 0 14px; }
.legal-doc__table table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.legal-doc__table th, .legal-doc__table td { border-bottom: 1px solid var(--color-border); padding: 6px 10px; text-align: left; }
.legal-doc__hash { margin-top: 32px; font-size: 0.75rem; color: var(--color-text-light); }

.legal-gate__check, .consent-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; cursor: pointer; }
.legal-gate__check input, .consent-check input { margin-top: 3px; flex-shrink: 0; }
.legal-gate__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.consent-check { margin-top: 8px; color: var(--color-text-light); }
.consent-check--inline { margin-top: 0; align-items: center; white-space: nowrap; }

.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; font-size: 0.6875rem; color: var(--color-text-light); text-align: center; }
.legal-links a { color: inherit; text-decoration: underline; }
.legal-links--sidebar { padding: 10px 12px 0; border-top: 1px solid var(--color-border); }
.legal-links--login { margin-top: 18px; }

.my-data__form { display: grid; gap: 8px; margin-top: 16px; max-width: 520px; }
.my-data__form .btn { justify-self: start; }
.my-data__list { margin: 16px 0 0; padding-left: 18px; font-size: 0.875rem; line-height: 1.7; }
.my-data__response { color: var(--color-text-light); }

.data-request { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 12px; }
.data-request--overdue { border-color: var(--color-danger); }
.data-request__head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.data-request__meta, .data-request__due { font-size: 0.8125rem; color: var(--color-text-light); }
.data-request--overdue .data-request__due { color: var(--color-danger); font-weight: 600; }
.data-request__details { margin: 8px 0; }
.data-request .form__input { margin-top: 8px; }
.data-request__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* One dialog for the legal documents and their acceptance */
.legal-dialog { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.legal-dialog[open] { display: flex; flex-direction: column; }
.legal-dialog__body { flex: 1; min-height: 200px; overflow-y: auto; max-width: none; margin: 0; padding: 8px 28px 24px; }
.legal-dialog__foot { padding: 14px 28px 18px; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.legal-dialog__tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.legal-dialog__tab { border: 0; background: none; padding: 6px 12px; border-radius: var(--radius); font: inherit; font-size: 0.875rem; color: var(--color-text-light); cursor: pointer; }
.legal-dialog__tab:hover { color: var(--color-text); }
.legal-dialog__tab.is-active { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-text); font-weight: 600; }
.legal-summary h2 { font-size: 1.25rem; margin: 12px 0; }
.legal-summary p { margin: 0 0 12px; }