/* ===== calendario-tributario ===== */
/* ==========================================================================
   Calendario Tributario SUNAT 2026 por RUC.
   Prefijo de clases: cal-  ·  Usa tokens de css/tokens.css.
   Grises de apoyo (Tailwind gray-*) que NO viven en el set de tokens de marca
   → declarados como variables locales scopeadas a .cal, igual que hace
   css/page-convertir-dolares-soles.css con su paleta bespoke.
   Breakpoints: mobile <768 (base) · tablet 768–1279 · desktop ≥1280.
   ========================================================================== */
.cal{
  --cal-page-bg:var(--sx-gris-fondo);
  --cal-card-blue:var(--sx-fondo-card-azul);
  --cal-blue-100:var(--sx-azul-fondo);
  --cal-blue-200:#BFDBFE;
  --cal-amber-bg:#FEF3C7;
  --cal-amber-fg:#92400E;
  --cal-green-bg:#D1FAE5;
  --cal-green-fg:#065F46;
  --cal-red:var(--sx-rojo);
  --cal-gray-400:var(--sx-gris-sobre);
  --cal-gray-500:var(--sx-text-muted);
  --cal-gray-700:#374151;
  --cal-border:var(--sx-input-border);
  --cal-line:var(--sx-gris-linea);
  --cal-line-soft:#F1F3F7;
  --cal-row-alt:#FBFCFD;

  display:block;
  background:var(--cal-page-bg);
  color:var(--sx-text);
  min-height:100vh;
  padding-top:72px;   /* aire bajo la navbar fija */
}

/* ── HEADER ─────────────────────────────────────────────────────────────── */
.cal-header{
  background:var(--sx-white);
  border-bottom:1px solid var(--cal-line);
  padding:40px 0 40px;
}
@media (min-width:768px){ .cal-header{ padding:clamp(48px,7vw,72px) 0 clamp(40px,5vw,56px); } }
.cal-header-inner{ max-width:1200px; margin-inline:auto; padding-inline:clamp(20px,4vw,24px); }

.cal-breadcrumb{ margin-bottom:18px; }
.cal-breadcrumb ol{
  display:flex; flex-wrap:wrap; gap:6px;
  list-style:none; padding:0; margin:0;
  font-family:var(--sx-font-body); font-size:13px; color:var(--cal-gray-500);
}
.cal-breadcrumb a{ color:var(--sx-blue-texto); }
.cal-breadcrumb a:hover{ text-decoration:underline; }
.cal-breadcrumb li[aria-current]{ color:var(--sx-text); }

.cal-h1{
  font-family:var(--sx-font-title); font-weight:800;
  color:var(--sx-text); line-height:1.05; letter-spacing:-.01em;
  margin:0 0 18px; font-size:clamp(2.1rem,4.2vw,3.4rem);
}
.cal-h1-accent{ color:var(--sx-blue); }

.cal-sub{
  font-family:var(--sx-font-body);
  color:#4B5563; line-height:1.55; max-width:62ch;
  margin:0 0 16px; font-size:clamp(15px,1.6vw,18px);
}
.cal-sub strong{ font-weight:500; color:var(--sx-text); }

.cal-source{
  font-family:var(--sx-font-body); font-size:13px; color:var(--sx-text-muted);
  margin:0;
}
.cal-source a{ color:var(--sx-blue-texto); }
.cal-source a:hover{ text-decoration:underline; }

/* ── HERRAMIENTA ────────────────────────────────────────────────────────── */
.cal-tool{ padding:36px 0 0; }
@media (min-width:768px){ .cal-tool{ padding:clamp(48px,6vw,64px) 0 0; } }
.cal-tool-inner{ max-width:1200px; margin-inline:auto; padding-inline:clamp(20px,4vw,24px); }

.cal-panel{
  background:var(--sx-white);
  border:1.5px solid var(--cal-border);
  border-radius:24px;
  padding:28px 24px 32px;
  box-shadow:0 4px 24px rgba(0,0,0,0.06);
  max-width:600px;
}
@media (min-width:768px){ .cal-panel{ padding:36px 36px 40px; } }

.cal-label{
  display:block; font-family:var(--sx-font-title); font-size:14px; font-weight:600;
  color:var(--sx-text); margin-bottom:8px;
}
.cal-label + .cal-label{ margin-top:0; }
#cal-regimen-label{ margin-bottom:10px; }

.cal-input{
  width:100%; box-sizing:border-box;
  padding:13px 14px; border-radius:14px; border:1.5px solid var(--cal-border);
  font-family:var(--sx-font-title); font-size:16px; color:var(--sx-text);
  background:var(--sx-white); outline:none;
  letter-spacing:0.04em; font-variant-numeric:tabular-nums;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cal-input:focus{ border-color:var(--sx-blue); box-shadow:0 0 0 3px rgba(var(--sx-blue-rgb),.12); }
.cal-hint{
  font-family:var(--sx-font-body); font-size:12px; color:var(--sx-text-muted);
  margin:6px 0 22px;
}

.cal-regimen{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.cal-regimen-btn{
  font-family:var(--sx-font-body); font-size:13px; font-weight:600;
  padding:10px 16px; border-radius:999px;
  border:1.5px solid var(--cal-border); background:var(--sx-white); color:var(--cal-gray-500);
  cursor:pointer; letter-spacing:0.02em; transition:all .2s ease;
}
.cal-regimen-btn.is-active{ border:2px solid var(--sx-blue); background:var(--cal-card-blue); color:var(--sx-blue-texto); }

.cal-error{
  font-family:var(--sx-font-title); color:var(--cal-red); font-size:14px; margin:0 0 16px;
}
.cal-generate{ width:100%; }
@media (min-width:520px){ .cal-generate{ width:auto; } }

/* ── RESULTADOS ─────────────────────────────────────────────────────────── */
.cal-results{
  margin-top:32px;
  background:var(--sx-white);
  border:1.5px solid var(--cal-border);
  border-radius:24px;
  padding:24px 20px 28px;
  box-shadow:0 4px 24px rgba(0,0,0,0.06);
}
@media (min-width:768px){ .cal-results{ padding:36px 36px 40px; } }
.cal-results[hidden]{ display:none; }

.cal-results-head{ margin-bottom:20px; }
.cal-results-eyebrow{
  font-family:var(--sx-font-body); font-size:12px; font-weight:700; color:var(--sx-blue-texto);
  letter-spacing:0.08em; text-transform:uppercase; margin:0 0 6px;
}
.cal-results-title{
  font-family:var(--sx-font-title); font-weight:700; color:var(--sx-text);
  margin:0; letter-spacing:-0.02em; font-size:24px;
  font-variant-numeric:tabular-nums;
}
@media (min-width:768px){ .cal-results-title{ font-size:30px; } }
.cal-results-meta{
  font-family:var(--sx-font-body); font-size:13px; color:var(--cal-gray-500); margin:4px 0 0;
}
.cal-results-meta strong{ color:var(--sx-text); }

.cal-list{ border-top:1px solid var(--cal-line); }
.cal-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 0; border-bottom:1px solid var(--cal-line-soft);
}
@media (max-width:560px){ .cal-item{ flex-direction:column; align-items:flex-start; gap:4px; } }
.cal-item-left{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.cal-item-tag{
  font-family:var(--sx-font-body); font-size:10px; font-weight:700;
  padding:4px 8px; border-radius:6px;
  letter-spacing:0.06em; text-transform:uppercase; flex-shrink:0;
  background:var(--cal-card-blue); color:var(--sx-blue-texto);
}
.cal-item-tag.is-anual{ background:var(--cal-amber-bg); color:var(--cal-amber-fg); }
.cal-item-title{
  font-family:var(--sx-font-title); font-size:14px; color:var(--sx-text);
  font-weight:500; line-height:1.4;
}
@media (min-width:768px){ .cal-item-title{ font-size:15px; } }
.cal-item-date{
  font-family:var(--sx-font-title); font-size:14px; font-weight:700; color:var(--sx-blue-texto);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
@media (min-width:768px){ .cal-item-date{ font-size:15px; } }

.cal-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.cal-note{
  font-family:var(--sx-font-body); font-size:12px; color:var(--sx-text-muted);
  margin:18px 0 0; line-height:1.6;
}

/* ── CTA gradiente ──────────────────────────────────────────────────────── */
.cal-cta{
  margin-top:24px;
  background:var(--sx-grad-securex);
  border-radius:24px;
  padding:28px 24px;
  display:flex; align-items:center; gap:20px;
  flex-direction:column; justify-content:space-between;
}
.cal-cta[hidden]{ display:none; }
@media (min-width:768px){ .cal-cta{ flex-direction:row; padding:36px 40px; } }
.cal-cta-copy{ flex:1; }
.cal-cta-title{
  font-family:var(--sx-font-title); font-weight:700; color:var(--sx-white);
  margin:0 0 8px; line-height:1.2; font-size:20px;
}
@media (min-width:768px){ .cal-cta-title{ font-size:24px; } }
.cal-cta-text{
  font-family:var(--sx-font-title); font-weight:300; color:#fff;
  margin:0; line-height:1.55; font-size:14px;
}
@media (min-width:768px){ .cal-cta-text{ font-size:16px; } }
.cal-cta-btn{ flex-shrink:0; }

/* ── TABLAS (cronograma mensual + renta) ────────────────────────────────── */
.cal-sched{ padding:56px 0 40px; }
@media (min-width:768px){ .cal-sched{ padding:clamp(72px,8vw,96px) 0 clamp(40px,5vw,56px); } }
.cal-sched-inner{ max-width:1200px; margin-inline:auto; padding-inline:clamp(20px,4vw,24px); }

.cal-sched-title{
  font-family:var(--sx-font-title); font-weight:700; color:var(--sx-text);
  line-height:1.1; letter-spacing:-0.02em; margin:0 0 12px;
  font-size:clamp(1.8rem,7vw,2.4rem);
}
@media (min-width:768px){ .cal-sched-title{ font-size:clamp(2rem,3.5vw,40px); } }
.cal-sched-sub{
  font-family:var(--sx-font-title); font-weight:300; color:var(--cal-gray-500);
  line-height:1.65; margin:0 0 24px; max-width:760px; font-size:15px;
}
@media (min-width:768px){ .cal-sched-sub{ font-size:17px; } }

.cal-table-wrap{
  overflow-x:auto;
  border:1px solid var(--cal-line);
  border-radius:18px;
  background:var(--sx-white);
  box-shadow:0 4px 20px rgba(0,0,0,0.04);
}
.cal-table{
  width:100%; min-width:820px;
  border-collapse:collapse; font-variant-numeric:tabular-nums;
}
.cal-caption{
  font-family:var(--sx-font-body); font-size:12px; color:var(--sx-text-muted);
  padding:12px 16px; text-align:left; caption-side:bottom;
}
.cal-t-head{
  font-family:var(--sx-font-title); font-weight:700; font-size:12px;
  color:var(--cal-gray-500); text-align:left; padding:14px;
  border-bottom:1px solid var(--cal-line);
  letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap;
  background:var(--cal-page-bg);
}
.cal-table tbody tr:nth-child(even){ background:var(--cal-row-alt); }
.cal-t-period{
  font-family:var(--sx-font-title); font-weight:600; font-size:14px;
  color:var(--sx-text); padding:14px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--cal-line-soft);
  background:var(--cal-page-bg);
}
.cal-t-cell{
  font-family:var(--sx-font-body); font-size:14px; color:var(--sx-text);
  padding:14px; white-space:nowrap; border-bottom:1px solid var(--cal-line-soft);
}
.cal-t-bc{ font-weight:600; color:var(--sx-blue-texto); }
/* Columna resaltada al generar un RUC válido */
.cal-t-head.is-hi, .cal-t-cell.is-hi{
  background:var(--cal-card-blue); color:var(--sx-blue-texto); font-weight:700;
}
.cal-t-head.is-hi{ box-shadow:inset 0 -2px 0 0 var(--sx-blue); }

/* ── RENTA ANUAL ────────────────────────────────────────────────────────── */
.cal-renta{ padding:16px 0 40px; }
@media (min-width:768px){ .cal-renta{ padding:0 0 clamp(40px,5vw,56px); } }
.cal-renta-inner{ max-width:1200px; margin-inline:auto; padding-inline:clamp(20px,4vw,24px); }
.cal-renta-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:768px){ .cal-renta-grid{ grid-template-columns:1fr 1fr; } }

.cal-renta-card{
  border:1px solid var(--cal-line);
  border-radius:18px; background:var(--sx-white);
  /* overflow:hidden recortaba "Fecha de vencimiento" y las fechas a 280-320px,
     que es el dato que el usuario vino a buscar, y sin forma de alcanzarlas.
     clip permite el scroll horizontal del contenido y sigue recortando el
     radio de la tarjeta. El patron ya estaba en .cal-table-wrap de esta hoja. */
  overflow-x:auto; overflow-y:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.04);
}
.cal-renta-card-head{
  padding:18px 20px 14px; border-bottom:1px solid var(--cal-line); background:var(--cal-page-bg);
}
.cal-renta-card-title{
  font-family:var(--sx-font-title); font-weight:700; font-size:17px;
  color:var(--sx-text); margin:0; letter-spacing:-0.01em;
}
.cal-renta-card-sub{
  font-family:var(--sx-font-body); font-size:12px; color:var(--cal-gray-500); margin:4px 0 0;
}
.cal-renta-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.cal-r-head{
  font-family:var(--sx-font-title); font-weight:700; font-size:12px;
  color:var(--cal-gray-500); text-align:left; padding:10px 20px;
  border-bottom:1px solid var(--cal-line);
  letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap;
}
.cal-r-head--right{ text-align:right; }
.cal-r-digit{
  font-family:var(--sx-font-body); font-size:14px; font-weight:600; color:var(--sx-text);
  padding:10px 20px; text-align:left; border-bottom:1px solid var(--cal-line-soft);
}
.cal-r-date{
  font-family:var(--sx-font-body); font-size:14px; color:var(--sx-text);
  padding:10px 20px; text-align:right; border-bottom:1px solid var(--cal-line-soft);
}
.cal-r-bcrow{ background:var(--cal-card-blue); }
.cal-r-digit--bc, .cal-r-date--bc{ font-weight:700; color:var(--sx-blue-texto); }
/* Fila resaltada al generar un RUC válido */
.cal-renta-table tr.is-hi{ background:var(--cal-card-blue); }
.cal-renta-table tr.is-hi .cal-r-digit,
.cal-renta-table tr.is-hi .cal-r-date{ color:var(--sx-blue-texto); font-weight:700; }

/* ── INFO / SEO ─────────────────────────────────────────────────────────── */
.cal-info{ padding:16px 0 40px; }
@media (min-width:768px){ .cal-info{ padding:0 0 clamp(40px,5vw,56px); } }
.cal-info-inner{ max-width:1200px; margin-inline:auto; padding-inline:clamp(20px,4vw,24px); display:grid; gap:40px; }
.cal-article{ max-width:820px; }
.cal-info-h2{
  font-family:var(--sx-font-title); font-weight:700; color:var(--sx-text);
  line-height:1.2; letter-spacing:-0.02em; margin:0 0 14px;
  font-size:clamp(1.4rem,5.5vw,1.75rem);
}
@media (min-width:768px){ .cal-info-h2{ font-size:clamp(1.5rem,2.4vw,28px); } }
.cal-info-p{
  font-family:var(--sx-font-title); font-weight:300; color:var(--sx-text);
  line-height:1.7; margin:0 0 14px; font-size:15px;
}
@media (min-width:768px){ .cal-info-p{ font-size:17px; } }
.cal-info-ul{
  font-family:var(--sx-font-title); font-weight:300; color:var(--sx-text);
  line-height:1.75; margin:0 0 14px; padding-left:22px; list-style:disc; font-size:15px;
}
@media (min-width:768px){ .cal-info-ul{ font-size:17px; } }
.cal-info-ul li{ margin-bottom:6px; }
.cal-info-ul strong{ font-weight:500; }
.cal-info a{ color:var(--sx-blue-texto); }
.cal-info a:hover{ text-decoration:underline; }

/* ── FAQ (misma línea gráfica que css/page-convertir-dolares-soles.css) ─────── */
.cal-faq{ padding:60px 0 80px; }
@media (min-width:768px){ .cal-faq{ padding:80px 0 100px; } }
@media (min-width:1280px){ .cal-faq{ padding:100px 0 120px; } }
.cal-faq-inner{ width:100%; max-width:1200px; margin:0 auto; padding-inline:clamp(20px,4vw,24px); }

.cal-faq-title{
  font-family:var(--sx-font-title); font-weight:700; color:var(--sx-text);
  line-height:.95; letter-spacing:-0.03em; margin:0 0 36px;
  font-size:clamp(2.2rem,10vw,3.5rem);
}
@media (min-width:768px){ .cal-faq-title{ font-size:clamp(2.8rem,6vw,4.5rem); margin:0 0 48px; } }
@media (min-width:1280px){ .cal-faq-title{ font-size:clamp(2.6rem,4.5vw,64px); margin:0 0 64px; } }

.cal-faq-list{ display:flex; flex-direction:column; gap:12px; }
.cal-faq-item{
  background:linear-gradient(135deg,#D1D5DB,#D1D5DB);
  padding:3px; border-radius:24px;
}
.cal-faq-item.is-open{ background:var(--sx-grad-securex); }
.cal-faq-item-inner{ background:var(--sx-white); border-radius:21px; overflow:hidden; }

.cal-faq-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  text-align:left; background:none; border:none; cursor:pointer;
  gap:16px; padding:20px 16px 10px 20px;
}
@media (min-width:768px){ .cal-faq-trigger{ gap:20px; padding:24px 24px 12px 28px; } }
@media (min-width:1280px){ .cal-faq-trigger{ gap:32px; padding:28px 28px 12px 36px; } }

.cal-faq-q{
  font-family:var(--sx-font-title); font-weight:500; color:var(--sx-text);
  line-height:1.35; font-size:16px;
}
@media (min-width:768px){ .cal-faq-q{ font-size:19px; } }
@media (min-width:1280px){ .cal-faq-q{ font-size:22px; } }

.cal-faq-icon{
  flex-shrink:0; width:52px; height:52px; border-radius:50%;
  border:2px solid #D1D5DB;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; transition:border-color .3s ease;
}
.cal-faq-trigger:hover .cal-faq-icon,
.cal-faq-item.is-open .cal-faq-icon{ border:none; }
.cal-faq-icon-fill{
  position:absolute; inset:0; border-radius:50%; background:var(--sx-blue);
  transform:scale(.2); opacity:0;
  transition:transform .4s var(--sx-ease-smooth), opacity .4s var(--sx-ease-smooth);
}
.cal-faq-trigger:hover .cal-faq-icon-fill,
.cal-faq-item.is-open .cal-faq-icon-fill{ transform:scale(1); opacity:1; }
.cal-faq-icon svg{ position:relative; z-index:1; transition:transform .35s var(--sx-ease-smooth); }
.cal-faq-item.is-open .cal-faq-icon svg{ transform:rotate(45deg); }
.cal-faq-icon svg line{ stroke:var(--cal-gray-500); transition:stroke .3s ease; }
.cal-faq-trigger:hover .cal-faq-icon svg line,
.cal-faq-item.is-open .cal-faq-icon svg line{ stroke:var(--sx-white); }

.cal-faq-a{
  font-family:var(--sx-font-title); font-weight:300; color:var(--sx-text);
  line-height:1.65; max-width:720px; margin:0;
  font-size:15px; padding:0 20px 24px 20px;
}
@media (min-width:768px){ .cal-faq-a{ font-size:17px; padding:0 28px 28px 28px; } }
@media (min-width:1280px){ .cal-faq-a{ font-size:18px; padding:0 36px 32px 36px; } }

/* ── PRINT ──────────────────────────────────────────────────────────────── */
@media print{
  .cal .no-print{ display:none !important; }
  .cal{ background:#fff; padding-top:0; }
  .cal-results{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
  .cal-table-wrap, .cal-renta-card{ box-shadow:none; }
}

@media (prefers-reduced-motion:reduce){
  .cal-faq-icon-fill, .cal-faq-icon svg, .cal-faq-panel{ transition-duration:.001ms; animation:none; }
}