/* Doceo Oposiciones — shared tokens & base styles for blog + admin
   (kept separate from index.html's inline styles on purpose: the landing
   page is tested/approved as a standalone file and is not touched here) */

:root{
  --cream:#F9F4EE;
  --cream-2:#F1EEE2;
  --paper:#FFFFFF;
  --olive:#5C6B47;
  --olive-dark:#3D4A2C;
  --olive-light:#7C8A63;
  --sage:#C9CDAE;
  --sage-light:#E9E9DA;
  --ink:#1D1B17;
  --ink-soft:#5B5850;
  --line: rgba(29,27,23,0.12);
  --gold: #C9962C;
  --gold-text: #8F6A1F;
  --terracotta: #C1652F;
  --terracotta-text: #AC5A2A;
  --teal: #2F6F73;
  --radius-lg: 28px;
  --radius-md: 18px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
button{font:inherit;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--olive-dark);
  outline-offset:3px;
  border-radius:6px;
}

.wrap{max-width:720px; margin:0 auto; padding:0 24px;}

/* ---------- top bar (shared) ---------- */
.site-bar{
  position:sticky; top:0; z-index:20;
  background:rgba(249,244,238,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-bar-inner{
  max-width:720px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.site-logo{display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.02em; text-decoration:none; color:var(--ink);}
.site-logo svg{width:26px; height:26px; color:var(--olive-dark);}
.site-bar nav{display:flex; gap:18px; align-items:center;}
.site-bar nav a{text-decoration:none; font-size:14px; font-weight:700; color:var(--ink-soft);}
.site-bar nav a:hover, .site-bar nav a.active{color:var(--olive-dark);}

/* ---------- typography ---------- */
h1,h2,h3{font-family:'Fraunces',serif; line-height:1.15; text-wrap:balance;}
h1{font-size:clamp(30px,6vw,44px); font-weight:600;}
h2{font-size:clamp(22px,4vw,28px); font-weight:600;}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--olive-dark);}
.lede{color:var(--ink-soft); font-size:17px; max-width:65ch;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px; border-radius:100px; border:none; cursor:pointer;
  font-weight:700; font-size:14.5px; letter-spacing:.01em;
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--olive-dark); color:var(--cream);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(61,74,44,.6);}
.btn-ghost{background:var(--paper); color:var(--ink); border:1.5px solid var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--cream);}
.btn-danger{background:#fff; color:#B23A2E; border:1.5px solid #B23A2E;}
.btn-danger:hover{background:#B23A2E; color:#fff;}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none !important;}

/* ---------- cards ---------- */
.card{
  background:var(--paper); border-radius:var(--radius-md);
  box-shadow:0 16px 30px -20px rgba(29,27,23,.25);
  padding:24px;
}

/* ---------- footer ---------- */
.site-footer{padding:48px 24px 80px; text-align:center; color:var(--ink-soft); font-size:13px;}
.site-footer a{color:var(--olive-dark); font-weight:700; text-decoration:none;}

/* ---------- forms ---------- */
label{display:block; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:6px;}
input[type=text], input[type=email], input[type=password], input[type=date], textarea, select{
  width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--paper); font:inherit; color:var(--ink); margin-bottom:16px;
}
textarea{min-height:260px; resize:vertical; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px; line-height:1.6;}
input:focus, textarea:focus, select:focus{outline:2px solid var(--olive-light); outline-offset:1px;}

.field-hint{font-size:12.5px; color:var(--ink-soft); margin-top:-10px; margin-bottom:16px;}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.001ms !important; animation-duration:0.001ms !important;}
}