/* ============================================================
   BLOQUE 1 — REEMPLAZO COMPLETO
   ARCHIVO: C:\grajedatrejo_site\css\gt_unico.css
   ============================================================ */

/* ============================================================
   1. Inicio — Variables base
   ============================================================ */
:root{
  --gt-black:#000000;
  --gt-white:#ffffff;
  --gt-red:#d61f1f;
  --gt-gray-light:#f4f4f5;
  --gt-gray-border:#e5e5e7;
  --gt-gray-soft:#fafafa;
  --gt-text:#111111;
}
/* == Fin 1 ============================ */


/* ============================================================
   2. Inicio — Contenedores
   ============================================================ */
.gt-container{
  background:var(--gt-gray-light);
  border:1px solid var(--gt-gray-border);
  border-radius:14px;
  padding:20px;
  margin:20px 0;
}

.gt-container-soft{
  background:var(--gt-gray-soft);
  border:1px solid var(--gt-gray-border);
  border-radius:12px;
  padding:16px;
  margin:16px 0;
}
/* == Fin 2 ============================ */


/* ============================================================
   3. Inicio — Botones base
   ============================================================ */
.gt-btn{
  padding:8px 14px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  border:none;
  transition:transform .06s ease, opacity .12s ease;
}

.gt-btn:active{ transform:translateY(1px); }
.gt-btn:disabled{ opacity:.6; cursor:not-allowed; }
/* == Fin 3 ============================ */


/* ============================================================
   4. Inicio — Variantes botón
   ============================================================ */
.gt-btn-black{ background:var(--gt-black); color:var(--gt-white); }
.gt-btn-red{ background:var(--gt-red); color:var(--gt-white); }
.gt-btn-light{
  background:var(--gt-gray-light);
  color:var(--gt-text);
  border:1px solid var(--gt-gray-border);
}
/* == Fin 4 ============================ */


/* ============================================================
   5. Inicio — Utilidades mínimas
   ============================================================ */
.gt-text-center{ text-align:center; }
.gt-mt-1{ margin-top:8px; }
.gt-mt-2{ margin-top:16px; }
.gt-mt-3{ margin-top:24px; }

.gt-flex{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
/* == Fin 5 ============================ */


/* ============================================================
   6. Inicio — Topbar / Tabs / Status
   ============================================================ */
.gt-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.gt-topbar-left{ display:flex; align-items:center; gap:10px; }
.gt-topbar-mid{ display:flex; align-items:center; justify-content:center; flex:1; }
.gt-topbar-right{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.gt-check{
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
}

.gt-status{
  font-weight:900;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--gt-gray-border);
  background:var(--gt-white);
  color:var(--gt-text);
  white-space:nowrap;
}

.gt-status.gt-status-error{
  border:2px solid var(--gt-red);
  color:var(--gt-red);
}

.gt-tabs{
  display:flex;
  gap:8px;
  padding:6px;
  border-radius:999px;
  border:1px solid var(--gt-gray-border);
  background:var(--gt-white);
}

.gt-tab{
  border:none;
  cursor:pointer;
  font-weight:900;
  padding:8px 14px;
  border-radius:999px;
  background:transparent;
  color:var(--gt-text);
}

.gt-tab-active{
  background:var(--gt-black);
  color:var(--gt-white);
}

.gt-panel-hidden{ display:none; }
/* == Fin 6 ============================ */


/* ============================================================
   7. Inicio — Secciones + Grid
   ============================================================ */
.gt-sections{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.gt-section{
  background:var(--gt-gray-soft);
  border:1px solid var(--gt-gray-border);
  border-radius:14px;
  padding:14px;
}

.gt-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.gt-section-title{
  font-weight:1000;
  letter-spacing:.02em;
}

.gt-section-meta{
  font-weight:900;
  opacity:.75;
}

.gt-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

@media (max-width: 980px){
  .gt-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .gt-grid{ grid-template-columns:1fr; }
}
/* == Fin 7 ============================ */


/* ============================================================
   8. Inicio — Pastillas
   ============================================================ */
.gt-pill{
  background:var(--gt-white);
  border:1px solid var(--gt-gray-border);
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.gt-pill:hover{
  border-color:#cfcfd6;
}

.gt-pill-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.gt-pill-sym{
  font-weight:1000;
  letter-spacing:.02em;
}

.gt-pill-acc{
  font-weight:1000;
  padding:4px 10px;
  border-radius:999px;
  background:var(--gt-gray-light);
  border:1px solid var(--gt-gray-border);
}

.gt-pill-sub{
  font-weight:800;
  opacity:.9;
  line-height:1.2;
}

.gt-pill-interesting{
  border:2px solid var(--gt-red);
}

.gt-pill-interesting .gt-pill-acc{
  background:var(--gt-red);
  color:var(--gt-white);
  border-color:var(--gt-red);
}
/* == Fin 8 ============================ */


/* ============================================================
   FIN ARCHIVO
   ============================================================ */