/* ===========================================================
   Matriz Técnica — Simulacro 10° Colegio de Talauta
   Sistema visual: "libro de campo" — ledger de escuela rural
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --paper: #F1EDE2;
  --paper-dim: #E7E0CC;
  --paper-line: #D8CFB2;
  --ink: #21281F;
  --ink-soft: #55604F;
  --coffee: #5C3A21;
  --coffee-deep: #3E2716;
  --gold: #B8862B;
  --gold-soft: #D9AE5C;
  --stamp: #8B3A2B;
  --card: #FBF9F2;

  --mat: #2E5266;
  --lc:  #6B4E71;
  --soc: #7A6A2E;
  --nat: #2F6B4F;
  --ing: #A85C32;

  --radius: 3px;
  --shadow: 0 1px 2px rgba(33,22,10,.08), 0 6px 18px rgba(33,22,10,.06);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1200px 500px at 90% -10%, rgba(184,134,43,.10), transparent 60%),
    var(--paper);
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

::selection{ background:var(--gold-soft); color:var(--coffee-deep); }

a{ color:var(--coffee); }

/* ---------- layout shell ---------- */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px 80px;
}

/* ---------- header / "acta" banner ---------- */
.masthead{
  position:relative;
  padding:52px 24px 34px;
  margin-bottom:8px;
  border-bottom:3px double var(--coffee);
  background:
    repeating-linear-gradient(180deg, transparent, transparent 27px, rgba(92,58,33,.05) 28px);
}

.masthead-inner{
  max-width:1200px;
  margin:0 auto;
  position:relative;
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--coffee);
  display:inline-block;
}

.title{
  font-family:'Zilla Slab', serif;
  font-weight:700;
  font-size:clamp(32px, 5vw, 52px);
  line-height:1.04;
  margin:0 0 10px;
  color:var(--coffee-deep);
  max-width:820px;
}

.subtitle{
  font-size:16px;
  color:var(--ink-soft);
  max-width:640px;
  margin:0;
}

.stamp{
  position:absolute;
  top:6px;
  right:0;
  width:128px;
  height:128px;
  border:2px solid var(--stamp);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(9deg);
  color:var(--stamp);
  opacity:.85;
}
.stamp svg{ position:absolute; inset:0; }
.stamp-text{
  font-family:'JetBrains Mono', monospace;
  font-size:9.5px;
  text-align:center;
  letter-spacing:.03em;
  line-height:1.35;
  padding:0 14px;
}
.stamp-text b{ display:block; font-size:15px; letter-spacing:.02em; margin-bottom:2px; }

@media (max-width:720px){
  .stamp{ display:none; }
}

/* ---------- summary strip ---------- */
.summary{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:18px 0 24px;
}
.summary-chip{
  background:var(--card);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  padding:10px 16px;
  font-size:13px;
  color:var(--ink-soft);
  display:flex;
  align-items:baseline;
  gap:8px;
  box-shadow:var(--shadow);
}
.summary-chip strong{
  font-family:'JetBrains Mono', monospace;
  font-size:18px;
  color:var(--ink);
}
.summary-chip.total{ border-color:var(--coffee); }
.summary-chip .dot{
  width:9px; height:9px; border-radius:50%;
  display:inline-block;
}

/* ---------- controls ---------- */
.controls{
  background:var(--paper);
  padding:14px 0;
  border-bottom:1px solid var(--paper-line);
  margin-bottom:20px;
}
.controls-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.search-box{
  position:relative;
  flex:1 1 260px;
  min-width:220px;
}
.search-box input{
  width:100%;
  padding:11px 14px 11px 38px;
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  background:var(--card);
  font-family:'Inter', sans-serif;
  font-size:14px;
  color:var(--ink);
}
.search-box input:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
}
.search-box::before{
  content:"";
  position:absolute;
  left:13px; top:50%;
  width:14px; height:14px;
  transform:translateY(-50%);
  background:var(--ink-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 20.3l-5.4-5.4a7.5 7.5 0 1 0-1.4 1.4l5.4 5.4zM4.5 10a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 20.3l-5.4-5.4a7.5 7.5 0 1 0-1.4 1.4l5.4 5.4zM4.5 10a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tab{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  letter-spacing:.02em;
  padding:9px 14px;
  border-radius:100px;
  border:1px solid var(--paper-line);
  background:var(--card);
  color:var(--ink-soft);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.tab:hover{ border-color:var(--coffee); color:var(--ink); }
.tab .dot{ width:8px; height:8px; border-radius:50%; }
.tab.active{
  background:var(--coffee);
  border-color:var(--coffee);
  color:#fff;
}
.tab.active .dot{ background:#fff !important; }

.select-wrap{
  display:flex;
  gap:8px;
}
.select-wrap select{
  font-family:'Inter',sans-serif;
  font-size:13px;
  padding:9px 10px;
  border-radius:var(--radius);
  border:1px solid var(--paper-line);
  background:var(--card);
  color:var(--ink);
}

/* ---------- table ---------- */
.table-scroll{
  overflow-x:auto;
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
}

table{
  border-collapse:collapse;
  width:100%;
  min-width:1080px;
}

thead th{
  background:var(--coffee-deep);
  color:var(--paper);
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:left;
  padding:12px 14px;
  white-space:nowrap;
  border-right:1px solid rgba(241,237,226,.12);
}
thead th:last-child{ border-right:none; }

tbody tr{
  border-bottom:1px solid var(--paper-dim);
  border-left:4px solid transparent;
}
tbody tr:nth-child(even){ background:rgba(216,207,178,.22); }
tbody tr:hover{ background:rgba(184,134,43,.10); }

tbody td{
  padding:12px 14px;
  font-size:13.3px;
  vertical-align:top;
  color:var(--ink);
}

td.n-cell{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  color:var(--ink-soft);
  white-space:nowrap;
}
td.tema-cell{ min-width:210px; font-weight:600; }
td.comp-cell{ min-width:170px; color:var(--ink-soft); font-size:12.6px; }
td.nivel-cell, td.dif-cell{ white-space:nowrap; font-size:12.4px; color:var(--ink-soft); }
td.clave-cell{ text-align:center; }
td.text-cell{ min-width:230px; color:var(--ink-soft); }
td.rec-cell{ min-width:200px; color:var(--ink-soft); }

.clave-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border-radius:50%;
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:13px;
  background:var(--gold);
  color:#2A1C08;
  border:1px solid rgba(0,0,0,.08);
}
.clave-badge.sd{
  background:transparent;
  border:1px dashed var(--stamp);
  color:var(--stamp);
  width:auto;
  border-radius:100px;
  padding:0 8px;
  font-size:10.5px;
}

.subj-flag{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  font-weight:700;
  padding:2px 7px;
  border-radius:3px;
  color:#fff;
  letter-spacing:.03em;
  margin-bottom:4px;
}

.dif-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:100px;
  font-size:11px;
  border:1px solid var(--paper-line);
}
.dif-Baja{ color:#3B6B3E; border-color:#3B6B3E44; background:#3B6B3E10; }
.dif-Media{ color:#8A6A17; border-color:#8A6A1744; background:#8A6A1710; }
.dif-Alta{ color:var(--stamp); border-color:#8B3A2B44; background:#8B3A2B10; }

.empty-state{
  padding:60px 20px;
  text-align:center;
  color:var(--ink-soft);
  font-size:14px;
}
.empty-state strong{ display:block; font-family:'Zilla Slab',serif; font-size:19px; color:var(--ink); margin-bottom:6px; }

/* ---------- footer ---------- */
.foot{
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid var(--paper-line);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  color:var(--ink-soft);
}
.foot .leaf{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* results count */
.results-count{
  font-size:12.5px;
  color:var(--ink-soft);
  margin:2px 0 12px;
  font-family:'JetBrains Mono',monospace;
}

@media (max-width:640px){
  .masthead{ padding:38px 18px 26px; }
  .wrap{ padding:0 14px 60px; }
}