/*
  HCE · Diseño cálido para alumnado
  Se carga solo en index.php, realizar.php y recibo.php.
  No modifica el panel de administración ni la lógica del examen.
*/
:root{
  --hce-ink:#2f2925;
  --hce-muted:#6f625a;
  --hce-paper:#fffdf8;
  --hce-paper-soft:#f8f3ea;
  --hce-line:#d9cfc1;
  --hce-line-strong:#bba896;
  --hce-accent:#6a2e2a;
  --hce-accent-dark:#4e211f;
  --hce-accent-soft:#f3e5df;
  --hce-ok:#276341;
  --hce-ok-soft:#edf7f0;
  --hce-warn:#82571a;
  --hce-warn-soft:#fff4de;
  --hce-danger:#952f2a;
  --hce-danger-soft:#fff0ed;
  --hce-shadow:0 12px 30px rgba(74,55,42,.08);
}

body{
  min-height:100vh;
  padding:34px 24px 46px;
  color:var(--hce-ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(208,183,154,.21), transparent 32rem),
    radial-gradient(circle at 92% 10%, rgba(143,74,62,.10), transparent 30rem),
    linear-gradient(180deg,#f4efe6 0%,#f8f5ef 43%,#f1ebe0 100%);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.55;
}

.page{max-width:980px}

header{
  position:relative;
  overflow:hidden;
  padding:25px 27px 22px;
  margin-bottom:18px;
  border:1px solid rgba(142,111,88,.32);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,253,248,.98),rgba(248,241,231,.96));
  box-shadow:var(--hce-shadow);
}
header::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:7px;
  background:linear-gradient(180deg,var(--hce-accent),#b86f58);
}
header h1{
  margin:0 0 5px;
  padding-left:4px;
  color:var(--hce-accent-dark);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.35rem,2.4vw,1.78rem);
  line-height:1.22;
  letter-spacing:-.015em;
}
header h2{
  margin:0;
  padding-left:4px;
  color:var(--hce-muted);
  font-size:.92rem;
  font-weight:600;
}

.meta{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
  margin-top:19px;
}
.field{
  min-height:58px;
  padding:10px 12px;
  border:1px solid var(--hce-line);
  border-radius:10px;
  background:rgba(255,255,255,.57);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.label{
  margin-bottom:5px;
  color:var(--hce-muted);
  font-size:.64rem;
  font-weight:750;
  letter-spacing:.085em;
}
.field input,.field select,.admin-form input,.admin-form textarea,.admin-form select{
  border:1px solid var(--hce-line-strong);
  border-radius:9px;
  padding:10px 11px;
  color:var(--hce-ink);
  background:#fffefa;
  box-shadow:inset 0 1px 2px rgba(67,45,30,.04);
}
.field input:focus,.field select:focus,.admin-form input:focus,.admin-form textarea:focus,.admin-form select:focus{
  outline:3px solid rgba(106,46,42,.17);
  outline-offset:1px;
  border-color:var(--hce-accent);
}
.admin-form{
  gap:15px;
  padding:22px;
  border:1px solid var(--hce-line);
  border-radius:15px;
  background:rgba(255,253,248,.88);
  box-shadow:var(--hce-shadow);
}
.admin-form label{color:#423731;font-size:.89rem}
.admin-form label[style]{
  padding:11px 12px;
  border-radius:9px;
  background:var(--hce-paper-soft);
}
.admin-form input[type="checkbox"]{width:auto;margin-right:8px;accent-color:var(--hce-accent)}

.instructions{
  margin:18px 0 20px;
  padding:16px 18px;
  border:1px solid #e0d2bd;
  border-left:5px solid #a86b4f;
  border-radius:11px;
  background:rgba(255,250,241,.83);
  color:#4f433a;
  box-shadow:0 5px 16px rgba(74,55,42,.04);
}
.instructions strong{color:var(--hce-accent-dark)}
.instructions .small{margin-bottom:0}

.notice{
  padding:14px 16px;
  border:1px solid var(--hce-line);
  border-radius:12px;
  background:rgba(255,253,248,.9);
  color:#4f433a;
  box-shadow:0 5px 15px rgba(74,55,42,.04);
}
.notice.ok{border-color:#b8d8c1;background:var(--hce-ok-soft);color:#245237}
.notice.warning{border-color:#e7c582;background:var(--hce-warn-soft);color:#6a491b}
.notice.error{border-color:#e6b5ad;background:var(--hce-danger-soft);color:#7d2622}

.timer{
  position:sticky;
  top:14px;
  z-index:20;
  margin:18px 0 16px;
  padding:12px 16px;
  border:1px solid #d5b9aa;
  border-radius:12px;
  background:linear-gradient(100deg,rgba(255,249,243,.98),rgba(250,238,229,.98));
  box-shadow:0 8px 20px rgba(74,55,42,.10);
  color:#5a3d31;
}
.timer span{font-size:.84rem;font-weight:700;letter-spacing:.02em}
.timer strong{
  color:var(--hce-accent-dark);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.2rem;
  letter-spacing:.06em;
}
.deadline-notice{
  top:80px;
  border:1px solid #d8b36b;
  border-left-width:5px;
  border-radius:11px;
  background:var(--hce-warn-soft);
  color:#6a4815;
  box-shadow:0 8px 20px rgba(74,55,42,.10);
}
.deadline-notice.urgent{
  border-color:#d56f60;
  background:var(--hce-danger-soft);
  color:#782821;
}

.exam{gap:18px}
.q{
  position:relative;
  padding:20px;
  border:1px solid var(--hce-line);
  border-radius:15px;
  background:rgba(255,253,248,.94);
  box-shadow:var(--hce-shadow);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.q:focus-within{
  border-color:#b57960;
  box-shadow:0 12px 28px rgba(106,46,42,.12);
}
.qhead{
  align-items:center;
  margin-bottom:12px;
}
.title{
  color:var(--hce-accent-dark);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.08rem;
}
.points{
  padding:4px 9px;
  border:1px solid #e2cdbf;
  border-radius:999px;
  color:#805241;
  background:#f9eee8;
  font-size:.72rem;
  letter-spacing:.015em;
}
.prompt{
  margin-bottom:14px;
  color:#3f3732;
  font-size:.98rem;
  line-height:1.62;
}
.answer{
  min-height:132px;
  padding:13px 14px 10px;
  border:1px solid #cbb9a9;
  border-radius:11px;
  color:#312a27;
  background-color:#fffefa;
  background-image:repeating-linear-gradient(to bottom,transparent,transparent 27px,rgba(101,69,44,.11) 28px);
  box-shadow:inset 0 1px 3px rgba(67,45,30,.05);
  line-height:28px;
}
.answer::placeholder{color:#95877d}
.answer:focus{
  outline:3px solid rgba(106,46,42,.16);
  outline-offset:1px;
  border-color:var(--hce-accent);
  background-color:#fffefa;
  box-shadow:0 0 0 4px rgba(255,253,248,.75),inset 0 1px 3px rgba(67,45,30,.05);
}
.counter{
  min-height:20px;
  margin-top:8px;
  color:var(--hce-muted);
  font-size:.76rem;
}
.counter.over{color:var(--hce-danger)}

.actions{
  position:sticky;
  bottom:0;
  z-index:15;
  margin:24px 0 15px;
  padding:13px 0 3px;
  background:linear-gradient(180deg,rgba(244,239,230,0),rgba(244,239,230,.93) 40%);
}
#saveStatus{
  padding:8px 10px;
  border-radius:8px;
  background:rgba(255,253,248,.72);
}
.button{
  padding:11px 18px;
  border:1px solid transparent;
  border-radius:10px;
  background:linear-gradient(180deg,#793831,#5e2724);
  color:#fffdf9;
  box-shadow:0 5px 12px rgba(86,37,33,.18);
  letter-spacing:.01em;
}
.button:hover{filter:none;background:linear-gradient(180deg,#8a4439,#662925);transform:translateY(-1px)}
.button:focus-visible{outline:3px solid rgba(106,46,42,.3);outline-offset:2px}
.button.secondary{background:#6c625b}.button.light{background:#f6f0e7;color:#493d35;border-color:#d6c8b8}.button.danger{background:#8a302b}
.button[disabled]{transform:none;box-shadow:none}

.footer{
  margin-top:24px;
  padding-top:12px;
  border-top:1px solid rgba(182,160,139,.55);
  color:#776a61;
}

.table-wrap{
  overflow:hidden;
  border:1px solid var(--hce-line);
  border-radius:13px;
  background:rgba(255,253,248,.91);
  box-shadow:var(--hce-shadow);
}
.table th,.table td{padding:12px 14px;border-bottom:1px solid #e8ded2}
.table th{width:35%;background:#f7f0e6;color:#5a4539;font-size:.78rem;text-transform:uppercase;letter-spacing:.045em}
.table tr:last-child th,.table tr:last-child td{border-bottom:0}

.closing-overlay{background:rgba(69,53,42,.42);backdrop-filter:blur(4px)}
.closing-card{
  padding:27px 28px;
  border:1px solid #d5b9aa;
  border-radius:16px;
  background:linear-gradient(145deg,#fffdf8,#f7ede3);
  box-shadow:0 22px 50px rgba(42,29,21,.25);
}
.closing-card strong{color:var(--hce-accent-dark);font-family:Georgia,"Times New Roman",serif;font-size:1.28rem}
.closing-card span{color:#5b4b41;line-height:1.55}

@media(max-width:700px){
  body{padding:18px 12px 32px}
  header{padding:21px 19px 18px;border-radius:13px}
  .meta{grid-template-columns:1fr}
  .q{padding:17px 15px}
  .qhead{align-items:flex-start;flex-direction:column;gap:6px}
  .timer{top:8px}
  .deadline-notice{top:70px}
  .actions{align-items:stretch;background:linear-gradient(180deg,rgba(244,239,230,0),rgba(244,239,230,.96) 34%)}
  .actions .button{width:100%}
  .table th{width:42%}
}

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

@media print{
  body{padding:0;background:#fff;color:#000}
  header,.q,.table-wrap,.admin-form,.instructions{box-shadow:none;background:#fff}
  .timer,.actions,.deadline-notice{position:static}
  .actions{background:transparent}
  .button{display:none!important}
}