/* Bolsa de Trabajo ACOTEC · estilos base (formulario y panel)
   Colores de la marca; modo claro y oscuro. */

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-soft: #F4F5F4;
  --surface: #FFFFFF;
  --surface-2: #F7F7F7;
  --border: #E4E6E5;
  --border-strong: #D5D8D7;
  --text: #1B1F1E;
  --text-2: #4A4F4D;
  --text-3: #5F6362;
  --primary: #3E7B1F;
  --primary-strong: #2F5E17;
  --on-primary: #FFFFFF;
  --primary-soft: #EEF5E8;
  --primary-line: #BFD6AE;
  --ok-bg: #E6F0DE;   --ok-fg: #2F5E17;
  --neu-bg: #EEEFEE;  --neu-fg: #4A4F4D;
  --warn-bg: #FDF0E1; --warn-fg: #8A4B0F;
  --info-bg: #E5EDF8; --info-fg: #1F4E8A;
  --bad-bg: #FBE9E7;  --bad-fg: #9A2A1C;
  --late: #B42318;  --mid: #8A5A00;  --fresh: #2F5E17;
  --logo-bg: #F7F7F7;
  --focus: #1F4E8A;
  --overlay: rgba(27, 31, 30, .45);
  --radius: 14px;
  --font-title: "Montserrat", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Modo oscuro solo si se elige en el panel (por defecto, claro). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121614;
  --bg-soft: #121614;
  --surface: #1B1F1E;
  --surface-2: #242A28;
  --border: #2F3633;
  --border-strong: #3A423F;
  --text: #EDEFEE;
  --text-2: #C9CDCB;
  --text-3: #B4B9B7;
  --primary: #68993D;
  --primary-strong: #9CCB72;
  --on-primary: #0F1410;
  --primary-soft: #22351A;
  --primary-line: #3F5A2B;
  --ok-bg: #22351A;   --ok-fg: #B5DB92;
  --neu-bg: #2A302E;  --neu-fg: #C9CDCB;
  --warn-bg: #3A2A16; --warn-fg: #F2C08A;
  --info-bg: #1C2A3D; --info-fg: #A9C7EE;
  --bad-bg: #3A1E1B;  --bad-fg: #FF9A8F;
  --late: #FF9A8F;  --mid: #F2C063;  --fresh: #9CCB72;
  --focus: #A9C7EE;
  --overlay: rgba(0, 0, 0, .6);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
}

h1, h2, h3 { font-family: var(--font-title); line-height: 1.25; margin: 0; }

a { color: var(--primary-strong); }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

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

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.logo-chip { background: var(--logo-bg); border-radius: 12px; display: inline-flex; padding: 4px 8px; }
.logo-chip img { display: block; height: 36px; width: auto; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 700; font-size: 16px; text-decoration: none; line-height: 1.2;
  background: var(--surface); color: var(--text);
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-outline { background: var(--surface); color: var(--primary-strong); border-color: var(--primary); }
.btn-soft { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn-link { background: none; border: 0; color: var(--primary-strong); text-decoration: underline; padding: 0 4px; min-height: 44px; }
.btn-danger { background: none; border: 0; color: var(--bad-fg); text-decoration: underline; padding: 0 4px; min-height: 44px; }
.btn-sm { min-height: 40px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn-big { min-height: 58px; font-size: 19px; border-radius: 14px; width: 100%; }
.btn svg { flex: none; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  border-radius: 99px; padding: 4px 10px; white-space: nowrap; line-height: 1.3;
}
.chip-ok { background: var(--ok-bg); color: var(--ok-fg); }
.chip-neu { background: var(--neu-bg); color: var(--neu-fg); }
.chip-warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip-info { background: var(--info-bg); color: var(--info-fg); }
.chip-bad { background: var(--bad-bg); color: var(--bad-fg); }

/* Campos */
.campo { display: flex; flex-direction: column; gap: 6px; }
.etiqueta { font-size: 15px; font-weight: 600; color: var(--text-2); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 16px;
}
.textarea { padding: 10px 12px; resize: vertical; line-height: 1.45; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }

.aviso { border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.aviso-error { background: var(--bad-bg); color: var(--bad-fg); font-weight: 600; }
.aviso-info { background: var(--surface-2); color: var(--text); }
.aviso-ok { background: var(--ok-bg); color: var(--ok-fg); font-weight: 600; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 12px;
  font-weight: 600; box-shadow: 0 6px 24px rgba(0, 0, 0, .2); max-width: calc(100% - 32px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}