/* ERP Plans Snippet Styles - Scoped to avoid conflicts */

.s_erp_plans_snippet {
  --erp-header-start:#082b55;
  --erp-header-end:#1f73a8;
  --erp-radius:22px;
  --erp-muted:#64748b;
  --erp-text:#0b1320;
  --erp-divider:#eef2f6;
  --erp-surface:#ffffff;
  --erp-accent:#1361B2;
  --erp-check:#0BBF60;
}

/* Reset vrp-hero inside this snippet to avoid conflicts */
.s_erp_plans_snippet .vrp-hero {
  position: static;
  padding: 60px 20px;
  background: transparent;
}

/* Layout container */
.s_erp_plans_snippet .vrp-fees-grid{ display:grid; place-items:center; padding-inline:clamp(12px,3vw,56px); max-width:1260px; margin:12px auto }
.s_erp_plans_snippet .vrp-fees-card{ width:100%; max-width:1200px }

/* Card shell with refined radius and softer shadow */
.s_erp_plans_snippet .vrp-card{ border-radius:var(--erp-radius); overflow:hidden; background:transparent; box-shadow:0 18px 40px rgba(2,6,23,.08); text-transform:none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size:clamp(15px,1.9vw,20px); line-height:1.45; position:relative; margin-bottom:18px }

/* Header: larger, tight, rounded with a gold bottom strip (reference style) */
.s_erp_plans_snippet .vrp-card__header{ position:relative; background:linear-gradient(135deg,var(--erp-header-start),var(--erp-header-end)); padding:2rem 1.75rem; text-align:center; border-top-left-radius:var(--erp-radius); border-top-right-radius:var(--erp-radius); border-bottom:6px solid #FFD700; display:flex; align-items:center; justify-content:center; min-height:80px }
.s_erp_plans_snippet .vrp-card__header h2{ color:#fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size:clamp(1.45rem,4.2vw,3.2rem); font-weight:900; margin:0; letter-spacing:0.6px; text-shadow:0 1px 0 rgba(0,0,0,0.08); text-transform:uppercase }

/* Body: white surface, inner radius and subtle top border */
.s_erp_plans_snippet .vrp-card__body{ background:var(--erp-surface); padding:1.8rem 2rem; border-bottom-left-radius:calc(var(--erp-radius) - 4px); border-bottom-right-radius:calc(var(--erp-radius) - 4px) }

/* Table base - DESKTOP FIRST (721px and up) */
.s_erp_plans_snippet .vrp-fees-table__table{ width:100%; border-collapse:collapse; color:var(--erp-text); font-family:inherit }
.s_erp_plans_snippet .vrp-fees-table__table thead th{ text-align:left; padding:1rem 1rem; font-weight:800; font-size:clamp(.9rem,1.1vw,1.02rem); color:var(--erp-muted); border-bottom:1px solid var(--erp-divider); letter-spacing:0.2px }

/* Force table layout on DESKTOP only (721px and above) */
@media (min-width:721px){
  .s_erp_plans_snippet .vrp-fees-table__table{ display:table !important }
  .s_erp_plans_snippet .vrp-fees-table__table tbody{ display:table-row-group !important }
  .s_erp_plans_snippet .vrp-fees-table__table tbody tr{ display:table-row !important; border-top:1px solid rgba(15,45,78,0.10); position:relative }
  .s_erp_plans_snippet .vrp-fees-table__table tbody td{ display:table-cell !important; padding:1.5rem 1rem; border-bottom:1px solid rgba(15,45,78,0.22); vertical-align:middle; font-size:clamp(1rem,1.6vw,1.12rem); color:var(--erp-text); text-transform:none; cursor:default }
  .s_erp_plans_snippet .vrp-fees-table__table tbody tr:last-child td{ border-bottom:none }
  .s_erp_plans_snippet .vrp-fees-table__table tbody tr:first-child{ border-top:none }
}

/* DESKTOP zebra striping and borders (721px and up) */
@media (min-width:721px){
  .s_erp_plans_snippet .vrp-fees-table__table tbody tr:nth-child(even) td{ background:rgba(15,45,78,0.06) }
  .s_erp_plans_snippet .vrp-fees-table__table tbody td{ border-left:1px solid rgba(15,45,78,0.10); border-right:1px solid rgba(15,45,78,0.10) }
  .s_erp_plans_snippet .vrp-fees-table__table tbody td:first-child{ border-left:none }
  .s_erp_plans_snippet .vrp-fees-table__table tbody td:last-child{ border-right:none }
  .s_erp_plans_snippet .vrp-fees-table__table tbody tr{ box-shadow:inset 0 -1px 0 rgba(255,255,255,0.03) }
  .s_erp_plans_snippet .vrp-fees-table__table tbody tr:hover td{ border-left-color:rgba(15,45,78,0.16); border-right-color:rgba(15,45,78,0.16) }
}

/* Price styling: bold and accent-colored, slightly larger */
.s_erp_plans_snippet .vrp-price{ display:flex; flex-direction:column; align-items:flex-start; gap:6px }
.s_erp_plans_snippet .vrp-price__label{ font-size:clamp(.85rem,1.2vw,1rem); font-weight:800; color:var(--erp-accent); letter-spacing:0.06em }
.s_erp_plans_snippet .vrp-price__value{ display:inline-block; font-size:clamp(1.05rem,1.8vw,1.2rem); font-weight:900; color:var(--erp-accent); background:rgba(19,97,178,0.06); padding:.32rem .7rem; border-radius:8px }

/* DESKTOP column widths and styling (721px and up) */
@media (min-width:721px){
  .s_erp_plans_snippet .vrp-fees-table__table tbody td[data-label="Implementación"]{ text-align:left }
  .s_erp_plans_snippet .vrp-fees-table__table td[data-label="Plan"]{ width:18%; font-size:clamp(1.1rem,2.4vw,1.35rem); font-weight:900; color:var(--erp-text); position:relative; padding-left:1.5rem }
  .s_erp_plans_snippet .vrp-fees-table__table td[data-label="Ideal para"]{ width:30%; color:#475569; line-height:1.6 }
  .s_erp_plans_snippet .vrp-fees-table__table td[data-label="Alcance operativo"]{ width:35%; color:#475569; line-height:1.6 }
}

/* Rounded white surface appearance with inner padding */
.s_erp_plans_snippet .table-responsive{ border-radius:12px; overflow:hidden; border:1px solid rgba(15,45,78,0.06); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6); background:linear-gradient(180deg,#ffffff,#fbfdff) }

/* Accessibility helper */
.s_erp_plans_snippet .vrp-visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px }

/* Mobile: reduce typographic scale progressively so words don't wrap alone */
@media (max-width:720px){
  .s_erp_plans_snippet .vrp-card{ font-size:clamp(13px,2.2vw,15px) }
  .s_erp_plans_snippet .vrp-card__body{ padding:1rem 0.9rem }
  .s_erp_plans_snippet .vrp-fees-grid{ padding-inline:clamp(8px,6vw,20px); max-width:92vw }
  .s_erp_plans_snippet .vrp-fees-card{ max-width:92vw; margin-inline:auto }
  .s_erp_plans_snippet .table-responsive{ padding:0 6px; border-radius:10px }
  .s_erp_plans_snippet .vrp-fees-table__table{ table-layout:auto; width:100%; box-sizing:border-box }
  .s_erp_plans_snippet .vrp-fees-table__table tbody td{ font-size:clamp(0.82rem,1.9vw,0.95rem); padding:.9rem .5rem; word-break:normal; overflow-wrap:break-word }
  .s_erp_plans_snippet .vrp-price{ flex-direction:column; align-items:center; gap:4px }
  .s_erp_plans_snippet .vrp-price__label{ font-size:clamp(0.6rem,1.2vw,0.76rem); font-weight:700; color:var(--erp-accent); letter-spacing:0.06em; opacity:.95; text-transform:uppercase }
  .s_erp_plans_snippet .vrp-price__value{ font-size:clamp(0.86rem,1.6vw,1.02rem); font-weight:900; padding:.14rem .4rem; white-space:nowrap }
  
  .s_erp_plans_snippet .vrp-fees-table__table tbody tr{ display:flex !important; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem }
  .s_erp_plans_snippet .vrp-fees-table__table tbody td{ display:block !important; border:none; padding:.6rem .5rem }
  .s_erp_plans_snippet .vrp-fees-table__table td[data-label="Plan"]{ order:1; flex:0 0 100%; padding:.6rem; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center; white-space:normal; font-size:clamp(0.86rem,1.9vw,1.0rem) }
  .s_erp_plans_snippet .vrp-fees-table__table td[data-label="Implementación"]{ order:2; flex:0 0 100%; text-align:center; padding:.6rem; display:flex; align-items:center; justify-content:center; white-space:nowrap }
  .s_erp_plans_snippet .vrp-fees-table__table td[data-label="Ideal para"]{ order:3; flex:1 1 100%; width:100%; padding-top:.6rem; border-top:none; white-space:normal; font-size:clamp(0.75rem,1.8vw,0.9rem) }
  .s_erp_plans_snippet .vrp-fees-table__table td[data-label="Alcance operativo"]{ order:4; flex:1 1 100%; width:100%; padding-top:.3rem; border-top:none; white-space:normal; font-size:clamp(0.75rem,1.8vw,0.9rem) }
  
  .s_erp_plans_snippet .vrp-fees-table__table{ border-collapse:separate; border-spacing:0 }
  .s_erp_plans_snippet .vrp-fees-table__table tbody td{ background:transparent !important; border:none !important; box-shadow:none !important }
  .s_erp_plans_snippet .vrp-fees-table__table tbody tr{ background:transparent; border-top:none; border-radius:10px; background-clip:padding-box }
  .s_erp_plans_snippet .vrp-fees-table__table tbody tr:nth-child(even){ background:rgba(15,45,78,0.06) }
  .s_erp_plans_snippet .vrp-fees-table__table tbody tr + tr{ margin-top:6px }
  .s_erp_plans_snippet .vrp-hero{ max-width:100vw; overflow-x:hidden }
}

@media (max-width:420px){
  .s_erp_plans_snippet .vrp-card{ font-size:13px }
  .s_erp_plans_snippet .vrp-card__body{ padding:.8rem .6rem }
  .s_erp_plans_snippet .vrp-fees-table__table tbody td{ font-size:clamp(0.74rem,2.4vw,0.86rem); padding:.7rem .45rem }
  .s_erp_plans_snippet .vrp-price__value{ font-size:clamp(0.72rem,2.2vw,0.82rem); padding:.1rem .32rem }
  .s_erp_plans_snippet .vrp-fees-card{ max-width:95vw }
}