:root{
  --grad-a:#93278f; --grad-b:#9a529a; --grad-c:#00a1de;
  --bg:#f7f8fb; --card:#ffffff; --text:#212529; --muted:#6b7280;
  --primary:#7d1f66; --primary-600:#6f1b5b; --primary-700:#611751;
  --ring:rgba(0,0,0,.08); --ok:#15803d;
}

.hero{color:#fff;background:linear-gradient(135deg,var(--grad-a),var(--grad-b),var(--grad-c));padding:48px 20px}
.wrap{max-width:1100px;margin:0 auto}
.hero h1{margin:0 0 6px;font-size:clamp(24px,4vw,36px);font-weight:800}
.hero p{margin:0;color:#f3f4f6}

.years{background:var(--card);margin-top:-28px;border-radius:18px;box-shadow:0 10px 30px var(--ring);padding:20px}
.years h3{margin:0 0 8px;font-size:18px;color:var(--muted);font-weight:600}
.chip-row{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;background:var(--primary);color:#fff;font-weight:700;border:2px solid transparent;cursor:pointer;transition:.2s}
.chip:hover{background:var(--primary-600)}
.chip.is-outlined{background:#fff;color:var(--primary);border-color:var(--primary)}
.chip.is-outlined:hover{border-color:var(--primary-700);color:var(--primary-700)}

.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px auto 6px}
.tab{background:#fff;border:1px solid #e5e7eb;color:#334155;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700;transition:.2s}
.tab:hover{box-shadow:0 6px 18px var(--ring)}
.tab[aria-selected="true"]{color:#fff;background:var(--primary);border-color:var(--primary)}

.card{background:var(--card);border-radius:18px;box-shadow:0 10px 30px var(--ring);overflow:hidden;margin:16px 0 24px}
.card h2{margin:0;padding:16px 18px;font-size:18px;font-weight:800;color:#fff;background:linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c))}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:14px 16px;border-bottom:1px solid #eef2f7;vertical-align:middle}
.table thead th{text-align:left;font-size:14px;color:#475569;background:#fafafa}
.doc-name{font-weight:700}
.muted{color:var(--muted);font-size:12px}

.grid-pdfs{display:grid;grid-template-columns:repeat(5,minmax(84px,1fr));gap:8px;align-items:center}
.pdf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;color:#111827;font-weight:700;text-decoration:none;transition:.2s}
.pdf-btn:is(:hover,:focus-visible){box-shadow:0 6px 18px var(--ring)}
.pdf-btn.is-ok{border-color:rgba(21,128,61,.25);background:rgba(21,128,61,.06);color:var(--ok)}
.pdf-btn.is-off{pointer-events:none;color:#9ca3af;border-color:#eef2f7;background:#f8fafc}

.extra{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 26px}
.extra .chip{background:#fff;color:var(--primary);border:2px solid var(--primary)}
.extra .chip:hover{color:var(--primary-700);border-color:var(--primary-700)}

.mini{color:var(--muted);font-size:12px;text-align:center;margin:24px 0 40px}

@media (max-width:820px){
  .grid-pdfs{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .table thead{display:none}
  .table tr{display:block;border-bottom:1px solid #eef2f7}
  .table td{display:block;border:0;border-bottom:1px dashed #eef2f7}
  .table td:last-child{border-bottom:0}
}

/* Centrar todo de forma explícita */
.hero .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Que el contenedor siempre quede centrado con padding lateral */
.wrap{
  max-width:1100px;
  margin-inline:auto;
  padding-inline:16px;
}

/* Centrar filas de chips y tabs */
.years .chip-row,
.extra,
.tabs{
  justify-content:center;        /* 👈 centra horizontalmente */
}

/* Opcional: al “colapsar” a una columna, agranda los botones para que se vean cómodos */
.grid-pdfs.only-one .pdf-btn{
  min-width:140px;
  justify-self:center;
}

/* La tarjeta no debe tener padding interno */
.wrap.card {
  padding: 0;                /* 👈 importante */
  border-radius: 18px;
  overflow: hidden;          /* para que el título herede el redondeado visual */
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* El título ocupa el 100% y toma el borde redondeado superior de la card */
.section-title{
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;                 /* sin separación */
  padding: 14px 20px;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(90deg, #93278f, #9a529a, #00a1de);
  border-top-left-radius: inherit;   /* 👈 usa el radio de la card */
  border-top-right-radius: inherit;  /* 👈 usa el radio de la card */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* El contenedor de la tabla no debe agregar padding lateral */
.wrap.card > div[style*="overflow:auto"]{
  padding: 0;
  margin: 0;
}

/* Cabecera de tabla: que arranque justo debajo del título */
.table{ width:100%; border-collapse:separate; border-spacing:0 }


.grid-anuales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  padding-top: 20px;
}

.anual-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.anual-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 8px;
}

.anual-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ===== Admin actions ===== */
.admin-grid { gap: 8px; }
.grid-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}

.act-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
  padding:0;
}
.act-btn svg{ width:18px; height:18px; fill: currentColor; }
.act-btn:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.10); }
.act-btn:active{ transform: translateY(0); box-shadow:none; }

.act-btn.is-view{ color:#1b6fbd; }
.act-btn.is-edit{ color:#6a3dbf; }
.act-btn.is-del { color:#b23333; }

.act-btn.is-disabled{
  opacity:.35;
  cursor:not-allowed;
  box-shadow:none !important;
  transform:none !important;
}

/* flash */
.flash{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
}
.flash-ok{ background: rgba(0,160,90,.10); border:1px solid rgba(0,160,90,.25); }
.flash-err{ background: rgba(200,40,40,.10); border:1px solid rgba(200,40,40,.25); }

/* ===== Modal ===== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.modal.is-open{ display:block; }
.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
}
.modal__panel{
  position:relative;
  width:min(820px, calc(100% - 24px));
  margin:60px auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 25px 70px rgba(0,0,0,.25);
  overflow:hidden;
}
.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.modal__body{ padding:16px 18px; }
.modal__foot{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:14px 18px;
  border-top:1px solid rgba(0,0,0,.08);
}
.icon-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 820px){
  .form-grid{ grid-template-columns:1fr; }
}

.lbl{ display:block; font-weight:600; margin-bottom:6px; }
.help{ margin:8px 0 0; font-size:12px; opacity:.75; }

/* botones básicos (si no existen ya en tu CSS) */
.btn{
  border-radius:12px;
  padding:10px 14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
}
.btn-primary{
  background:#111;
  color:#fff;
  border-color:#111;
}
.btn-ghost{ background:#fff; }