.qa-block, .qa-block * {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  word-break: break-word;
}
/* Reducir espacio vertical entre <p> en .qa-block */
.qa-block p {
  margin-top: 0;
  margin-bottom: 0;
}
/* Iconos y texto en botones navegación */
.btn-icono {
  display: inline-block;
  font-size: 1.2em;
  vertical-align: middle;
  margin-right: 0.4em;
}
.btn-texto {
  display: inline-block;
  vertical-align: middle;
}
@media (max-width: 700px) {
  .btn-texto {
    display: none;
  }
  .btn-icono {
    margin-right: 0;
    font-size: 1.5em;
  }
}
/* Botones navegación preguntas */
.btn-nav {
  background: #26baa5;
  color: #fff;
  border: none;
  padding: 0.5em 1.2em;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-bottom: 0.3em;
}
.btn-nav:hover, .btn-nav:focus {
  background: rgb(55,95,122);
  color: #fff;
}
@media (max-width: 700px) {
  .btn-nav {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
    font-size: 1.08em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    white-space: nowrap;
  }
  nav[style*="flex-wrap"] {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    gap: 0.2em !important;
    overflow-x: auto;
  }
  .btn-texto {
    display: none;
  }
  .btn-icono {
    margin-right: 0;
    font-size: 1.5em;
  }
}
@media (max-width: 700px) {
    .repo-summary, .qa-block {
      font-size: 0.92em;
    }
    .qa-title-big {
      font-size: 0.95em;
    }
    .qa-pregunta, .qa-respuesta, .qa-resumen {
      font-size: 0.92em;
      padding: 0.08em 0.08em;
    }
  .qa-title-big {
    font-size: 1.05em;
  }
  .qa-pregunta, .qa-respuesta, .qa-resumen {
    font-size: 0.98em;
    word-break: break-word;
    line-height: 1.35;
  }
  .qa-block {
    padding: 0.7em 0.7em 0.7em 0.7em;
  }
}
/* Evitar desbordamiento horizontal en móviles */
body, html {
  max-width: 100vw;
  overflow-x: hidden;
}

main.wrap, .repo-summary, .grid, .sidebar, section {
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (max-width: 700px) {
  .repo-summary {
    padding-left: 4vw;
    padding-right: 4vw;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .grid {
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  section {
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}
/* Títulos grandes para bloques de pregunta/respuesta/resumen */
.qa-title-big {
  font-size: 1.35em;
  font-weight: 800;
  letter-spacing: 1px;
  margin: 0.4em 0 0.08em 0;
  color: rgb(55,95,122);
  text-transform: uppercase;
  line-height: 1.1;
}
.qa-title-big + .qa-label,
.qa-title-big + .qa-pregunta,
.qa-title-big + .qa-respuesta,
.qa-title-big + .qa-resumen {
  margin-top: 0.08em;
}
/* Botón de reproducción (play) para respuestas y resúmenes */
.play-btn {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 0.5em;
  vertical-align: middle;
  padding: 4px 4px 4px 4px;
  border-radius: 50%;
  transition: background 0.2s;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.play-btn:hover, .play-btn:focus {
  background: #e3e8f7;
}
.play-btn-white {
  background: none;
}
.play-btn-white:hover, .play-btn-white:focus {
  background: #26baa533;
}
/* === Resumen Repositorio ESFM === */
.repo-summary {
  margin: 2.5em auto 2em auto;
  max-width: 900px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px #26baa51a;
  padding: 0.2em 0em;
}
.repo-summary h2 {
  text-align: center;
  color: #26baa5;
  margin-bottom: 1.5em;
}
.qa-list {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.qa-block {
  background: #f7fbfb;
  border-radius: 14px;
  box-shadow: 0 2px 8px #26baa511;
  padding: 0.2em 0em 0.2em 0em;
    .repo-summary {
      padding: 0;
      box-shadow: 0 2px 12px #26baa522;
      background: #fff;
      width: 100vw;
      max-width: 100vw;
      box-sizing: border-box;
      overflow-x: hidden;
      border-radius: 0;
    }
    .qa-block {
      padding: 0.2em 0.2em 0.2em 0.2em;
      border-radius: 0;
      box-shadow: none;
      width: 100vw;
      max-width: 100vw;
      box-sizing: border-box;
    }
  border-left: 6px solid #26baa5;
}
.qa-label {
  font-weight: bold;
  color: rgb(55,95,122);
  font-size: 1.1em;
  margin-bottom: 0.18em;
}
.qa-title {
  font-weight: bold;
  color: #26baa5;
  margin-right: 0.5em;
}
.qa-resumen .qa-title {
  color: #fff;
  text-shadow: 0 1px 4px #375f7a99;
}
.qa-pregunta, .qa-respuesta, .qa-resumen {
  margin-bottom: 0.22em;
  line-height: 1.6;
}
.qa-pregunta {
  color: rgb(55,95,122);
  background: #e3e8f7;
  border-radius: 8px;
  padding: 0.2em 0.2em;
  margin-bottom: 0.5em;
  text-align: justify;
}
.qa-respuesta {
  color: rgb(55,95,122);
  background: #e0f7fa;
  border-radius: 8px;
  padding: 0.2em 0.2em;
  margin-bottom: 0.5em;
  text-align: justify;
}
.qa-resumen {
  color: #fff;
  background: linear-gradient(90deg, #26baa5 60%, rgb(55,95,122) 100%);
  border-radius: 8px;
  padding: 0.2em 0.2em;
  font-weight: 500;
  margin-bottom: 0;
  text-align: justify;
}
/* Exámenes por gestión */
.examenes-lista {
  margin: 1.5em 0 0 0;
  padding: 1em 1.5em;
  background: #f8fafc;
  border-radius: 12px;
  box-shadow: 0 2px 8px #0001;
}
.examenes-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.examenes-ul li {
  margin-bottom: 0.3em;
}
.examen-link {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  color: #1a237e;
  background: #e3e8f7;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.examen-link:hover, .examen-link.clicked {
  background: #c5cae9;
  color: #0d133d;
  box-shadow: 0 2px 8px #1a237e22;
}
.examen-link .splash {
  position: absolute;
  border-radius: 50%;
  background: #7986cb44;
  pointer-events: none;
  animation: splash-examen 0.4s linear;
  z-index: 2;
}
@keyframes splash-examen {
  from { opacity: 0.7; transform: scale(0.5); }
  to { opacity: 0; transform: scale(2.2); }
}
.tl {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 18px;
  border-radius: 12px;
  margin-bottom: 10px;
  background: #f7fbfb;
  box-shadow: 0 2px 8px rgba(38,186,165,0.08);
  transition: background 0.3s, box-shadow 0.3s;
}
.tl .date {
  min-width: 120px;
  font-weight: bold;
  font-size: 1.08em;
  color: #26baa5;
  background: rgba(38,186,165,0.08);
  padding: 8px 18px;
  border-radius: 8px;
  letter-spacing: 1px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(38,186,165,0.07);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.tl .tlTitle {
  flex: 1;
  font-size: 1em;
  color: #375f7a;
  padding: 8px 0;
  transition: font-size 0.25s, color 0.3s;
}
.tl .date.clicked {
  background: linear-gradient(90deg, #26baa5 60%, #375f7a 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px #26baa544 !important;
}
.tl .tlTitle.clicked {
  font-size: 1.22em;
  color: #fff !important;
  text-shadow: 0 2px 8px #375f7a88;
  background: linear-gradient(90deg, #26baa5 60%, #375f7a 100%) !important;
  border-radius: 8px;
  padding: 8px 12px;
}
/* Unificar efecto de selección para todos los elementos importantes */
.important-clickable.clicked {
  background: linear-gradient(90deg, #26baa5 60%, #375f7a 100%) !important;
  box-shadow: 0 0 0 3px #26baa5 !important;
  color: #fff !important;
  z-index: 10;
  transition: font-size 0.25s cubic-bezier(0.4,0,0.2,1), background 0.2s, box-shadow 0.2s, color 0.2s;
}
.tl .tlTitle.clicked {
  font-size: 1.18em;
}
/* Efecto clic y selección para datos importantes */
.important-clickable, .important-clickable.clicked {
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  position: relative;
}
.important-clickable.clicked {
  background: linear-gradient(90deg, #26baa5 60%, #375f7a 100%) !important;
  box-shadow: 0 0 0 3px #26baa5 !important;
  color: #fff !important;
  z-index: 10;
  font-size: 1.5em;
  transition: font-size 0.25s cubic-bezier(0.4,0,0.2,1), background 0.2s, box-shadow 0.2s;
}
/* Efecto para el texto después de <b> en .li */
.li-text.clicked {
  font-size: 1.5em;
  color: #000000 !important;
  transition: font-size 0.25s cubic-bezier(0.4,0,0.2,1), color 0.2s;
}
/* --- Efecto clic y salpicadura en filas de plazas --- */
.plaza-row {
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  position: relative;
  color: #fff;  
}
.plaza-row.clicked {
  background: linear-gradient(90deg, #26baa5 60%, #375f7a 100%) !important;
  box-shadow: 0 0 0 3px #26baa5 !important;
  z-index: 10;
  color: #fff !important;
  font-size: 1.5em;
}
.splash {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  animation: micro-splash-anim 0.5s cubic-bezier(0.4,0,0.2,1);
  background: radial-gradient(circle at 60% 40%, #26baa5cc 60%, #26baa544 100%);
  z-index: 20 !important;
  opacity: 0.85;
}
@keyframes micro-splash-anim {
  0% {
    transform: scale(0);
    opacity: 0.85;
  }
  60% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
@keyframes splash-anim {
  to {
    transform: scale(3);
    opacity: 0;
  }
}
.drawerNav a.active {
          background: linear-gradient(135deg, rgba(38,186,165,.16), rgba(55,95,122,.08));
          border-color: rgba(38,186,165,.28);
          color: #fff;
        }
    :root{
      --primary: rgb(38,186,165);
      --secondary: rgb(55,95,122);

      /* Minimal Light */
      --bg: #f7fbfb;
      --card: #ffffff;
      --border: rgba(176, 179, 181, 0.12);
      --text: rgba(12, 22, 32, .92);
      --muted: rgba(12, 22, 32, .64);
      --shadow: 0 18px 55px rgba(16, 24, 40, .12);
      --ring: 0 0 0 4px rgba(38,186,165,.18);

      --radius: 18px;
      --radius2: 22px;
      --container: 1160px;
      --navW: 320px;

      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

      --grad:
        radial-gradient(1000px 650px at 12% 0%, rgba(38,186,165,.16), transparent 60%),
        radial-gradient(900px 600px at 86% 0%, rgba(55,95,122,.12), transparent 58%),
        linear-gradient(180deg, #ffffff, var(--bg));
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background: linear-gradient(120deg, var(--bg) 70%, rgba(55,95,122,0.08) 100%);
      min-height:100vh;
      overflow-x:hidden;
    }
    a{ color:inherit; text-decoration:none; }
    button, input{ font-family:inherit; }

    /* Topbar */
    .topbar{
      position:sticky;
      top:0;
      z-index:60;
      background: linear-gradient(90deg, rgba(38,186,165,0.18) 0%, rgba(255,255,255,0.85) 100%);
      border-bottom: 2px solid var(--primary);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .topbar-inner{
      max-width: var(--container);
      margin: 0 auto;
      padding: 12px 16px;
      display:flex;
      align-items:center;
      gap:12px;
      width: 100%;
      box-sizing: border-box;
    }

    @media (max-width: 700px) {
      .topbar {
        left: 0;
        right: 0;
        width: 100vw;
        min-width: 0;
        border-radius: 0;
        box-sizing: border-box;
        overflow-x: hidden;
      }
      .topbar-inner {
        max-width: 100vw;
        width: 100vw;
        margin: 0;
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
        overflow-x: hidden;
      }
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width: 270px;
    }
    .logo{
      width:42px; height:42px;
      border-radius: 14px;
      
      box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
    }
    .brand h1{
      margin:0;
      font-size: 14px;
      letter-spacing:.2px;
      line-height:1.15;
    }
    .brand .sub{
      margin:2px 0 0;
      font-size: 12px;
      color: var(--muted);
    }

    /* Search */
    .searchbar{
      flex:1;
      position:relative;
      display:flex;
      align-items:center;
    }
    .searchbar input{
      width:100%;
      padding: 12px 14px 12px 42px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.96);
      outline:none;
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
    }
    .searchbar input:focus{ box-shadow: var(--ring), inset 0 1px 0 rgba(255,255,255,.45); border-color: rgba(38,186,165,.55); }
    .search-icon{
      position:absolute; left:14px; width:18px; height:18px;
      color: rgba(12,22,32,.62);
    }
    .results{
      position:absolute;
      top: calc(100% + 10px);
      left:0;
      right:0;
      background: rgba(255,255,255,.98);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow:hidden;
      display:none;
      z-index: 80;
    }
    .results.show{ display:block; }
    .results-header{
      padding: 10px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom: 1px solid rgba(12,22,32,.08);
      font-size:12px;
      color: var(--muted);
    }
    .results-list{ max-height: 320px; overflow:auto; }
    .res-item{
      padding: 10px 12px;
      display:flex;
      gap:10px;
      cursor:pointer;
      border-bottom: 1px solid rgba(12,22,32,.06);
    }
    .res-item:hover{ background: rgba(38,186,165,.08); }
    .pill{
      font-size:11px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(12,22,32,.10);
      background: rgba(255,255,255,.96);
      color: rgba(12,22,32,.70);
      white-space:nowrap;
      height:fit-content;
    }
    .res-title{
      margin:0;
      font-size: 13px;
      font-weight: 800;
      color: rgba(12,22,32,.92);
    }
    .res-snippet{
      margin: 3px 0 0;
      font-size: 12px;
      color: var(--muted);
      line-height:1.35;
    }
    .hl{
      background: rgba(38,186,165,.20);
      border: 1px solid rgba(38,186,165,.18);
      padding: 0 4px;
      border-radius: 6px;
    }

    /* Actions */
    .actions{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .btn{
      border: 1px solid var(--border);
      background: rgba(255,255,255,.96);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 14px;
      display:inline-flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      user-select:none;
      box-shadow: 0 10px 28px rgba(16,24,40,.06);
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(16,24,40,.10); }
    .btn.primary{
      background: linear-gradient(135deg, rgba(38,186,165,.98), rgba(55,95,122,.92));
      color: #fff;
      border-color: rgba(38,186,165,.30);
      box-shadow: 0 16px 45px rgba(38,186,165,.18);
    }
    .btn svg{ width:18px; height:18px; }

    .menuBtn{ display:none; }

    /* Layout */
    .wrap{
      max-width: var(--container);
      margin: 0 auto;
      padding: 18px 16px 60px;
      display:grid;
      grid-template-columns: var(--navW) 1fr;
      gap: 16px;
      align-items:start;
    }

    /* Sidebar (desktop) */
    .sidebar{
      position:sticky;
      top: 78px;
      border: 2px solid var(--primary);
      background: linear-gradient(135deg, rgba(38,186,165,0.10) 0%, #fff 100%);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .sidebar-head{
      padding: 14px;
      border-bottom: 1px solid rgba(12,22,32,.08);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .sidebar-head h2{ margin:0; font-size: 13px; letter-spacing:.2px; }
    .nav{
      padding: 10px;
      display:flex;
      flex-direction:column;
      gap:6px;
      max-height: calc(100vh - 140px);
      overflow:auto;
    }
    .nav a{
      padding: 11px 12px;
      border-radius: 14px;
      border: 1px solid transparent;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color: rgba(12,22,32,.86);
      transition: background .12s ease, border-color .12s ease;
    }
    .nav a:hover{ background: rgba(38,186,165,.08); border-color: rgba(38,186,165,.18); }
    .nav a.active{
      background: linear-gradient(135deg, rgba(38,186,165,.16), rgba(55,95,122,.08));
      border-color: rgba(38,186,165,.28);
    }
    .nav .left{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .dot{
      width:10px; height:10px;
      border-radius: 999px;
      background: rgba(38,186,165,.95);
      box-shadow: 0 0 0 3px rgba(38,186,165,.18);
      flex: 0 0 auto;
    }
    .label{
      font-size: 13px;
      font-weight: 750;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .hint{
      font-size: 11px;
      color: var(--muted);
      border: 1px solid rgba(12,22,32,.10);
      border-radius: 999px;
      padding: 3px 8px;
      background: rgba(255,255,255,.96);
      flex: 0 0 auto;
    }

    /* Hero */
    .hero{
      border: 2px solid var(--secondary);
      border-radius: var(--radius2);
      background: linear-gradient(120deg, #fff 80%, rgba(55,95,122,0.10) 100%);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .hero-inner{
      padding: 18px 18px 14px;
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 14px;
      align-items:start;
    }
    .hero h2{ margin:0; font-size: 20px; letter-spacing:.2px; }
    .hero p{ margin: 10px 0 0; color: var(--muted); line-height:1.55; font-size: 14px; }

    .miniCard{
      border: 2px solid var(--primary);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(38,186,165,0.18) 0%, rgba(55,95,122,0.10) 100%);
      padding: 14px;
      color: var(--secondary);
    }
    .miniCard h3 {
      color: var(--primary);
      font-size: 15px;
      margin-bottom: 6px;
    }
    .miniCard .small {
      background: linear-gradient(90deg, rgba(38,186,165,0.12), rgba(55,95,122,0.10));
      border-left: 4px solid var(--primary);
      color: var(--text);
      padding-left: 12px;
      margin-top: 8px;
      border-radius: 6px;
      font-weight: bold;
    }

    /* Cards */
    .grid{
      margin-top: 16px;
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
    }
    .card{
      grid-column: span 12;
      border-radius: var(--radius2);
      border: 2px solid var(--secondary);
      background: linear-gradient(120deg, #fff 80%, rgba(38,186,165,0.08) 100%);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .card .head{
      padding: 14px 16px 12px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 10px;
      border-bottom: 1px solid rgba(12,22,32,.08);
    }
    .card .head h3{ margin:0; font-size: 15px; letter-spacing:.2px; }
    .meta{ margin-top: 4px; font-size: 12px; color: var(--muted); line-height:1.35; }
    .card .body{
      padding: 12px 16px 16px;
      color: rgba(12,22,32,.72);
      line-height:1.6;
      font-size: 14px;
    }

    .list{
      margin: 10px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap: 10px;
    }
    .li{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(12,22,32,.08);
      background: rgba(38,186,165,.05);
    }
    .li b{ color: rgba(12,22,32,.92); }
    .mono{ font-family: var(--mono); }

    /* Timeline */
    .timeline{ margin-top: 10px; display:grid; gap:10px; }
    .tl{
      display:grid;
      grid-template-columns: 150px 1fr;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(12,22,32,.08);
      background: #fff;
      align-items:center;
    }
    .date{
      font-family: var(--mono);
      font-size: 12px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(55,95,122,.08);
      border: 1px solid rgba(55,95,122,.12);
      color: rgba(12,22,32,.82);
      width: fit-content;
    }
    .tlTitle{ margin:0; font-size: 13px; font-weight: 800; color: rgba(12,22,32,.92); }

    /* Table */
    .tableTools{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-top: 10px;
    }
    .tableTools input{
      flex: 1 1 240px;
      padding: 11px 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.96);
      outline:none;
    }
    .tableTools input:focus{ box-shadow: var(--ring); border-color: rgba(38,186,165,.55); }
    .tableWrap{
      margin-top: 10px;
      border: 2px solid var(--primary);
      border-radius: 16px;
      overflow:hidden;
      background: linear-gradient(120deg, #fff 80%, rgba(38,186,165,0.08) 100%);
    }
    table{
      width:100%;
      border-collapse:collapse;
      font-size: 13px;
    }
    thead th{
      text-align:left;
      padding: 12px 12px;
      background: rgba(55,95,122,.08);
      border-bottom: 1px solid rgba(12,22,32,.10);
      color: rgba(12,22,32,.84);
      font-weight: 900;
      position: sticky;
      top: 0;
      z-index: 1;
    }
    tbody td{
      padding: 11px 12px;
      border-bottom: 1px solid rgba(12,22,32,.06);
      color: rgba(12,22,32,.82);
      vertical-align:top;
    }
    tbody tr:hover{ background: rgba(38,186,165,.06); }
    .dept{ font-weight: 900; color: rgba(55,95,122,.92); white-space:nowrap; }
    .num{ font-family: var(--mono); font-weight: 900; white-space:nowrap; }
    .tableFooter{
      padding: 10px 12px;
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      border-top: 1px solid rgba(12,22,32,.08);
      color: var(--muted);
      font-size: 12px;
      background: #fff;
    }

    /* Footer */
    footer{
      max-width: var(--container);
      margin: 34px auto 0;
      padding: 18px 16px 40px;
      color: var(--muted);
      font-size: 12px;
      background: linear-gradient(90deg, rgba(55,95,122,0.10) 0%, #fff 100%);
      border-top: 2px solid var(--secondary);
      border-radius: 0 0 18px 18px;
    }
    .foot{
      border-top: 1px solid rgba(12,22,32,.10);
      padding-top: 16px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .smalllink{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(12,22,32,.10);
      background: rgba(255,255,255,.96);
    }

    /* Mobile drawer */
    .drawerOverlay{
      position: fixed;
      inset:0;
      background: rgba(12,22,32,.28);
      opacity:0;
      pointer-events:none;
      transition: opacity .18s ease;
      z-index: 90;
    }
    .drawerOverlay.show{ opacity:1; pointer-events:auto; }
    .drawer{
      position: fixed;
      top:0; left:0;
      height:100%;
      width: min(88vw, 360px);
      background: linear-gradient(135deg, #fff 60%, rgba(38,186,165,0.10) 100%);
      border-right: 2px solid var(--primary);
      box-shadow: 0 24px 70px rgba(16,24,40,.20);
      transform: translateX(-105%);
      transition: transform .20s ease;
      z-index: 91;
      display:flex;
      flex-direction:column;
    }
    .drawer.show{ transform: translateX(0); }
    .drawerHead{
      padding: 14px;
      border-bottom: 1px solid rgba(12,22,32,.10);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .drawerHead h3{ margin:0; font-size: 13px; letter-spacing:.2px; }
    .drawerNav{ padding: 10px; overflow:auto; display:flex; flex-direction:column; gap:6px; }
    .drawerNav a{
      padding: 11px 12px;
      border-radius: 14px;
      border: 1px solid rgba(12,22,32,.10);
      background: rgba(38,186,165,.05);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-weight: 800;
      color: rgba(12,22,32,.88);
    }
    .drawerNav a:hover{ background: rgba(38,186,165,.10); }
    .chip{
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(55,95,122,.14);
      background: rgba(55,95,122,.08);
      color: rgba(12,22,32,.68);
      font-weight: 900;
    }

    /* Responsive */
    @media (max-width: 980px){
      :root{ --navW: 1fr; }
      .wrap{ grid-template-columns: 1fr; }
      .sidebar{ display:none; }
      .hero-inner{ grid-template-columns: 1fr; }
      .menuBtn{ display:inline-flex; }
      .brand{ min-width:unset; }
    }
    @media (max-width: 560px){
      .topbar-inner{ flex-wrap:wrap; }
      .actions{ width:100%; justify-content:space-between; }
      thead{ display:none; }
      table, tbody, tr, td{ display:block; width:100%; }
      tbody tr{ border-bottom: 1px solid rgba(12,22,32,.10); }
      tbody td{ border-bottom:none; padding: 10px 12px; }
      tbody td::before{
        content: attr(data-label);
        display:block;
        font-size: 11px;
        color: var(--muted);
        margin-bottom: 4px;
        font-weight: 900;
        letter-spacing: .2px;
        text-transform: uppercase;
      }
        /* Aumentar visibilidad de texto en móvil */
        body, .card .body, .hero p, .meta, .miniCard, .miniCard .small, .drawerNav a, .btn, .res-title, .res-snippet, .sidebar-head h2, .card .head h3, .drawerHead h3, .chip, .pill, .tlTitle {
          font-size: 18px !important;
        }
        h1, h2, h3, h4, h5, h6, .hero h2 {
          font-size: 2.1em !important;
          line-height: 1.15 !important;
        }
        .btn, button, input[type="button"], input[type="submit"] {
          font-size: 20px !important;
          padding: 16px 20px !important;
        }
        .brand h1 {
          font-size: 1.7em !important;
        }
        .brand .sub {
          font-size: 1.2em !important;
        }
        .drawerNav a, .sidebar-head h2, .drawerHead h3 {
          font-size: 1.3em !important;
        }
        .meta, .chip, .pill, .res-snippet {
          font-size: 1em !important;
        }
    }