/* ========================================================================== VictoriaEDU — Design System Extraído de Claude Design (victoriaedu-design-system-d74331cd) a CSS plano. Los tokens :root son idénticos a los del _ds_bundle.css original. ========================================================================== */ /* --- Tipografías -------------------------------------------------------- */ /* Creato Display se auto-hospeda (no está en ningún CDN público). Inter y JetBrains Mono se cargan desde Google Fonts en el . */ @font-face { font-family: "Creato Display"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/CreatoDisplay-Regular.otf") format("opentype"); } @font-face { font-family: "Creato Display"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/CreatoDisplay-Medium.otf") format("opentype"); } @font-face { font-family: "Creato Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/CreatoDisplay-Bold.otf") format("opentype"); } @font-face { font-family: "Creato Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/CreatoDisplay-ExtraBold.otf") format("opentype"); } /* --- Tokens ------------------------------------------------------------- */ :root { --vic-azul: #2C4D9D; --vic-azul-rgb: 44, 77, 157; --vic-azul-profundo: #223A74; --vic-burdeos: #310E17; --vic-noche: #210A0F; --vic-blanco: #FFFFFF; --vic-gris-claro: #E2E1E2; --vic-gris-plata: #D6D6D6; --vic-gris-medio: #9F9F9E; --vic-gris-tecnico: #81817F; --vic-primary: var(--vic-azul); --vic-primary-dark: var(--vic-azul-profundo); --vic-primary-light: #6C8AC7; --vic-primary-softer: #E6ECF8; --vic-bg-main: var(--vic-blanco); --vic-bg-canvas: #F7F7F7; --vic-bg-subtle: var(--vic-gris-claro); --vic-text-strong: var(--vic-azul-profundo); --vic-text-body: #1B1D22; /* El gris de marca (#81817F) da 3.9:1 sobre blanco: no alcanza AA para texto pequeño. Este es su equivalente legible; --vic-gris-tecnico se conserva tal cual para bordes y elementos decorativos. */ --vic-text-muted: #5F5F5D; --vic-text-inverse: var(--vic-blanco); --vic-border: var(--vic-gris-plata); --vic-border-subtle: #ECECEC; --vic-success: #197A52; --vic-success-soft: #DDEFE6; --vic-success-text: #0F5A3B; --vic-warning: #B56B00; --vic-warning-soft: #FBECD6; --vic-warning-text: #7A4700; --vic-danger: #B3261E; --vic-danger-soft: #F5DAD8; --vic-danger-text: #7A1A14; --vic-info: var(--vic-azul); --vic-info-soft: #E6ECF8; --vic-info-text: var(--vic-azul-profundo); --vic-font-display: "Creato Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --vic-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --vic-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --vic-radius-sm: 8px; --vic-radius-lg: 16px; --vic-radius-xl: 24px; --vic-radius-pill: 999px; --vic-shadow-md: 0 2px 8px rgba(34, 58, 116, .08); --vic-shadow-lg: 0 6px 20px rgba(34, 58, 116, .10); --vic-shadow-xl: 0 12px 32px rgba(34, 58, 116, .14); --vic-shadow-focus: 0 0 0 3px rgba(var(--vic-azul-rgb), .22); --vic-transition-base: .18s cubic-bezier(.4, 0, .2, 1); --vic-container-max: 1200px; /* Fondos compuestos reutilizados del diseño original */ --vic-bg-impacto: radial-gradient(820px 520px at 20% 6%, rgba(44,77,157,.5), transparent 62%), radial-gradient(1100px 700px at 80% 104%, rgba(49,14,23,.9), transparent 60%), var(--vic-noche); --vic-bg-luz: radial-gradient(900px 500px at 100% 0%, rgba(44,77,157,.06), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(49,14,23,.05), transparent 60%), var(--vic-blanco); } /* --- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--vic-bg-main); font-family: var(--vic-font-body); color: var(--vic-text-body); -webkit-font-smoothing: antialiased; } a { color: var(--vic-azul); text-decoration: none; transition: color var(--vic-transition-base); } a:hover { color: var(--vic-azul-profundo); } p { text-wrap: pretty; } h1, h2, h3, h4 { font-family: var(--vic-font-display); font-weight: 700; color: var(--vic-azul-profundo); letter-spacing: -.01em; text-wrap: balance; margin: 0; } img { max-width: 100%; } :focus-visible { outline: none; box-shadow: var(--vic-shadow-focus); border-radius: 4px; } @keyframes vicPulse { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:.45; transform:scale(.82) } } @keyframes vicSheen { 0% { transform:translateX(-120%) } 100% { transform:translateX(220%) } } /* --- Layout ------------------------------------------------------------- */ .vic-container { max-width: var(--vic-container-max); margin: 0 auto; padding: 0 32px; } .vic-container--narrow { max-width: 880px; } .vic-section { padding: 104px 0; } .vic-section--tight { padding: 72px 0; } .vic-section--luz { background: var(--vic-bg-luz); } .vic-section--gris { background: var(--vic-gris-claro); } .vic-section--blanco { background: var(--vic-blanco); } /* Secciones oscuras "impacto" — invierten la jerarquía tipográfica */ .vic-section--impacto { background: var(--vic-bg-impacto); color: var(--vic-blanco); } .vic-section--impacto h1, .vic-section--impacto h2, .vic-section--impacto h3 { color: var(--vic-blanco); } .vic-section--impacto p { color: rgba(255,255,255,.75); } /* Un panel claro dentro de una sección oscura debe recuperar la jerarquía normal de texto; si no, hereda el blanco y queda invisible sobre sí mismo. */ .vic-section--impacto .vic-panel-claro h1, .vic-section--impacto .vic-panel-claro h2, .vic-section--impacto .vic-panel-claro h3, .vic-section--impacto .vic-panel-claro h4 { color: var(--vic-azul-profundo); } .vic-section--impacto .vic-panel-claro, .vic-section--impacto .vic-panel-claro p, .vic-section--impacto .vic-panel-claro li { color: var(--vic-text-body); } .vic-section--impacto .vic-panel-claro .vic-hint, .vic-section--impacto .vic-panel-claro .vic-muted { color: var(--vic-text-muted); } .vic-eyebrow { font-family: var(--vic-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--vic-text-muted); margin-bottom: 16px; } .vic-section--impacto .vic-eyebrow { color: rgba(255,255,255,.5); } .vic-h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; } .vic-lead { font-size: 18px; line-height: 1.6; } /* --- Botones ------------------------------------------------------------ */ .vic-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--vic-font-body); font-weight: 600; line-height: 1; border: 1px solid transparent; border-radius: var(--vic-radius-sm); cursor: pointer; text-align: center; white-space: nowrap; transition: background var(--vic-transition-base), border-color var(--vic-transition-base), color var(--vic-transition-base), transform var(--vic-transition-base), box-shadow var(--vic-transition-base); } .vic-btn:hover { transform: translateY(-1px); } .vic-btn:active { transform: translateY(0); } .vic-btn--primary { background: var(--vic-azul); color: #fff; border-color: var(--vic-azul); } .vic-btn--primary:hover { background: var(--vic-azul-profundo); border-color: var(--vic-azul-profundo); color: #fff; } .vic-btn--secondary { background: transparent; color: var(--vic-azul); border-color: var(--vic-azul); } .vic-btn--secondary:hover { background: var(--vic-primary-softer); color: var(--vic-azul-profundo); } .vic-btn--ghost { background: transparent; color: var(--vic-azul); border-color: transparent; } .vic-btn--ghost:hover { background: var(--vic-primary-softer); } /* WhatsApp: el verde de la plataforma es lo que hace que se reconozca de un vistazo. Texto en --vic-noche, no blanco — ver la nota de .vic-fab-wa. */ .vic-btn--wa { background: #25D366; border-color: #25D366; color: var(--vic-noche); } .vic-btn--wa:hover { background: #1FBA59; border-color: #1FBA59; color: var(--vic-noche); } .vic-section--impacto .vic-btn--wa:hover { color: var(--vic-noche); } /* Variantes sobre fondo oscuro */ .vic-section--impacto .vic-btn--secondary, .vic-navbar .vic-btn--secondary { color: #fff; border-color: rgba(255,255,255,.42); } .vic-section--impacto .vic-btn--secondary:hover, .vic-navbar .vic-btn--secondary:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.7); } /* El ghost hereda el azul de marca, que sobre el fondo noche baja de 3:1. Los "Conoce más" viven en secciones claras y oscuras, así que necesita par. */ .vic-section--impacto .vic-btn--ghost { color: #fff; } .vic-section--impacto .vic-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; } .vic-btn--sm { height: 36px; padding: 0 14px; font-size: 14px; } .vic-btn--md { height: 44px; padding: 0 20px; font-size: 15px; } .vic-btn--lg { height: 52px; padding: 0 26px; font-size: 16px; } .vic-btn--xl { height: 60px; padding: 0 32px; font-size: 17px; } .vic-btn--block { display: flex; width: 100%; } .vic-btn[disabled], .vic-btn--disabled { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none; } /* --- Tarjetas ----------------------------------------------------------- */ .vic-card { background: var(--vic-blanco); border: 1px solid var(--vic-border); border-radius: var(--vic-radius-lg); padding: 28px; } .vic-card--hoverable { transition: box-shadow var(--vic-transition-base), transform var(--vic-transition-base); } .vic-card--hoverable:hover { box-shadow: var(--vic-shadow-xl); transform: translateY(-3px); } .vic-card--accent { border-top: 3px solid var(--vic-azul); } .vic-card--flush { padding: 0; overflow: hidden; } /* Tarjeta de vidrio para secciones oscuras */ .vic-glass { border-radius: var(--vic-radius-xl); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); backdrop-filter: blur(14px); padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.35); } /* --- Badges ------------------------------------------------------------- */ .vic-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--vic-radius-pill); font-size: 12px; font-weight: 700; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; } .vic-badge--success { background: var(--vic-success-soft); color: var(--vic-success-text); border-color: rgba(25,122,82,.25); } .vic-badge--warning { background: var(--vic-warning-soft); color: var(--vic-warning-text); border-color: rgba(181,107,0,.25); } .vic-badge--danger { background: var(--vic-danger-soft); color: var(--vic-danger-text); border-color: rgba(179,38,30,.25); } .vic-badge--info { background: var(--vic-info-soft); color: var(--vic-info-text); border-color: rgba(44,77,157,.25); } .vic-badge--neutral { background: var(--vic-bg-subtle); color: var(--vic-azul-profundo); border-color: var(--vic-border); } .vic-badge--solid { background: var(--vic-success); color: #fff; border-color: transparent; } .vic-pill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--vic-radius-pill); padding: 7px 14px; font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.72); } .vic-dot { width: 7px; height: 7px; border-radius: 50%; background: #7FE3B6; animation: vicPulse 1.8s ease-in-out infinite; } .vic-tag { background: var(--vic-bg-subtle); color: var(--vic-azul-profundo); border: 1px solid var(--vic-border); padding: 6px 11px; border-radius: var(--vic-radius-pill); font-size: 12px; font-weight: 600; } /* --- Formularios -------------------------------------------------------- */ .vic-field { display: grid; gap: 8px; } .vic-label { font-size: 14px; font-weight: 600; color: var(--vic-text-strong); } .vic-hint { font-size: 13px; line-height: 1.5; color: var(--vic-text-muted); } .vic-input, .vic-select, .vic-textarea { width: 100%; padding: 0 14px; height: 48px; border: 1px solid var(--vic-border); border-radius: var(--vic-radius-sm); font-family: var(--vic-font-body); font-size: 16px; color: var(--vic-text-strong); background: var(--vic-blanco); transition: border-color var(--vic-transition-base), box-shadow var(--vic-transition-base); } .vic-textarea { height: auto; padding: 12px 14px; min-height: 96px; resize: vertical; line-height: 1.5; } .vic-input:focus, .vic-select:focus, .vic-textarea:focus { outline: none; border-color: var(--vic-azul); box-shadow: var(--vic-shadow-focus); } .vic-input[aria-invalid="true"] { border-color: var(--vic-danger); } .vic-error { font-size: 13px; color: var(--vic-danger-text); font-weight: 500; } .vic-req { color: var(--vic-danger); } /* Opciones de pago tipo radio-card */ .vic-radio-card { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--vic-border); border-radius: var(--vic-radius-lg); padding: 20px 22px; cursor: pointer; background: var(--vic-blanco); transition: border-color var(--vic-transition-base), box-shadow var(--vic-transition-base), background var(--vic-transition-base); } .vic-radio-card:hover { border-color: var(--vic-primary-light); } .vic-radio-card input { margin-top: 3px; accent-color: var(--vic-azul); width: 18px; height: 18px; flex: none; } .vic-radio-card:has(input:checked) { border-color: var(--vic-azul); background: var(--vic-primary-softer); box-shadow: var(--vic-shadow-md); } .vic-radio-card--disabled { opacity: .55; cursor: not-allowed; background: var(--vic-bg-canvas); } .vic-radio-card--disabled:hover { border-color: var(--vic-border); } /* --- Utilidades --------------------------------------------------------- */ .vic-grid { display: grid; gap: 20px; } .vic-grid--2 { grid-template-columns: repeat(2, 1fr); } .vic-grid--3 { grid-template-columns: repeat(3, 1fr); } .vic-grid--4 { grid-template-columns: repeat(4, 1fr); } .vic-stack { display: grid; gap: 16px; } .vic-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .vic-spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .vic-mono { font-family: var(--vic-font-mono); } .vic-muted { color: var(--vic-text-muted); } .vic-center { text-align: center; } .vic-hidden { display: none !important; } .vic-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .vic-divider { height: 1px; background: var(--vic-border); border: 0; margin: 0; } .vic-section--impacto .vic-divider { background: rgba(255,255,255,.14); } /* --- Navbar ------------------------------------------------------------- */ .vic-navbar { position: sticky; top: 0; z-index: 100; background: rgba(33,10,15,.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.12); } .vic-navbar__inner { max-width: var(--vic-container-max); margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 32px; } .vic-navbar__logo img { height: 46px; width: auto; display: block; } .vic-navbar__links { display: flex; align-items: center; gap: 26px; font-size: 15px; } /* Solo los enlaces de primer nivel van en blanco. Sin el `>`, esta regla se colaba dentro de los paneles desplegables —que son claros— y dejaba sus enlaces blancos sobre blanco. */ .vic-navbar__links > a { color: rgba(255,255,255,.78); } .vic-navbar__links > a:hover { color: #fff; } .vic-navbar__links > a[aria-current="page"] { color: #fff; font-weight: 600; } /* El CTA se pinta dos veces: fuera del menú (escritorio) y dentro (móvil). Cada breakpoint muestra exactamente uno. */ .vic-navbar__links .vic-navbar__cta { display: none; } .vic-navbar__toggle { display: none; background: none; border: 1px solid rgba(255,255,255,.3); border-radius: var(--vic-radius-sm); color: #fff; width: 42px; height: 42px; cursor: pointer; font-size: 18px; line-height: 1; } /* --- Menú desplegable ----------------------------------------------------- */ .vic-nav-item { position: relative; display: flex; align-items: center; } /* El mega panel se ancla a la barra entera, no al rótulo: por eso static. */ .vic-nav-item--mega { position: static; } .vic-nav-item__label { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.78); cursor: pointer; } .vic-nav-item__label:hover, .vic-nav-item.is-open > .vic-nav-item__label { color: #fff; } .vic-nav-item__label[aria-current="true"] { color: #fff; font-weight: 600; } .vic-nav-item__chev { transition: transform var(--vic-transition-base); flex: none; } .vic-nav-item.is-open > .vic-nav-item__label .vic-nav-item__chev { transform: rotate(180deg); } .vic-nav-panel { position: absolute; top: 100%; z-index: 120; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--vic-transition-base), transform var(--vic-transition-base), visibility var(--vic-transition-base); } .vic-nav-item.is-open > .vic-nav-panel { opacity: 1; visibility: visible; transform: none; } /* Lista simple del menú. OJO: no llamarla .vic-drop — ese nombre ya lo usa la zona de subir comprobante, y sus estilos (borde punteado, texto centrado, fondo azul al pasar) se colaban en el desplegable. */ .vic-nav-lista { min-width: 320px; background: var(--vic-blanco); border-radius: var(--vic-radius-lg); box-shadow: var(--vic-shadow-xl); border: 1px solid var(--vic-border); padding: 10px; margin-top: 10px; display: grid; gap: 2px; } .vic-nav-item:not(.vic-nav-item--mega) > .vic-nav-panel { left: 0; } .vic-nav-lista a { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--vic-radius-sm); color: var(--vic-text-strong); } .vic-nav-lista a:hover, .vic-nav-lista a:focus-visible { background: var(--vic-primary-softer); } .vic-nav-lista a[aria-current="page"] { background: var(--vic-primary-softer); } .vic-nav-lista__tit { font-size: 15px; font-weight: 600; color: var(--vic-azul-profundo); } .vic-nav-lista__desc { font-size: 13px; line-height: 1.45; color: var(--vic-text-muted); } /* Mega panel de programas */ .vic-nav-item--mega > .vic-nav-panel { left: 0; right: 0; } .vic-mega { max-width: var(--vic-container-max); margin: 10px auto 0; background: var(--vic-blanco); border-radius: var(--vic-radius-lg); box-shadow: var(--vic-shadow-xl); border: 1px solid var(--vic-border); padding: 22px; } .vic-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .vic-mega__item { display: grid; gap: 0; border: 1px solid var(--vic-border); border-radius: var(--vic-radius-lg); overflow: hidden; color: inherit; transition: border-color var(--vic-transition-base), box-shadow var(--vic-transition-base), transform var(--vic-transition-base); } .vic-mega__item:hover, .vic-mega__item:focus-visible { border-color: var(--vic-azul); box-shadow: var(--vic-shadow-lg); transform: translateY(-2px); } .vic-mega__img { display: block; aspect-ratio: 16/9; background: var(--vic-primary-softer); overflow: hidden; } .vic-mega__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .vic-mega__cuerpo { display: grid; gap: 6px; padding: 14px 16px 16px; } .vic-mega__tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 700; color: var(--vic-azul-profundo); line-height: 1.3; } .vic-mega__desc { font-size: 13px; line-height: 1.45; color: var(--vic-text-muted); } .vic-mega__precio { font-size: 14px; font-weight: 700; color: var(--vic-azul); } .vic-mega__pie { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vic-border); font-size: 13px; color: var(--vic-text-muted); } .vic-mega__pie a { font-weight: 600; color: var(--vic-azul); } .vic-mega__pie a:hover { color: var(--vic-azul-profundo); } /* --- Footer ------------------------------------------------------------- */ .vic-footer { background: radial-gradient(760px 420px at 4% 0%, rgba(44,77,157,.4), transparent 62%), radial-gradient(1100px 700px at 65% 120%, rgba(49,14,23,.9), transparent 60%), var(--vic-noche); color: rgba(255,255,255,.72); padding: 72px 0 40px; } .vic-footer a { color: rgba(255,255,255,.8); } .vic-footer a:hover { color: #fff; } .vic-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.14); } .vic-footer__title { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 16px; } .vic-footer__links { display: grid; gap: 10px; font-size: 15px; } .vic-footer__bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; font-size: 13px; color: rgba(255,255,255,.45); flex-wrap: wrap; } /* --- Barras de progreso (reportes) -------------------------------------- */ .vic-bar { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: 10px; font-size: 12px; } .vic-bar__track { height: 8px; border-radius: 9px; background: rgba(255,255,255,.14); overflow: hidden; } .vic-bar__fill { display: block; height: 100%; width: 0; border-radius: 9px; background: linear-gradient(90deg, var(--vic-azul), #5C86D8); transition: width 1.1s cubic-bezier(.22,.61,.36,1); } .vic-bar__fill--alert { background: linear-gradient(90deg, #B3261E, #E2818F); } /* --- Checkout: stepper -------------------------------------------------- */ .vic-steps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .vic-step { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--vic-text-muted); } .vic-step__num { width: 28px; height: 28px; border-radius: var(--vic-radius-pill); flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--vic-bg-subtle); color: var(--vic-text-muted); border: 1px solid var(--vic-border); } .vic-step--active { color: var(--vic-azul-profundo); font-weight: 600; } .vic-step--active .vic-step__num { background: var(--vic-azul); color: #fff; border-color: var(--vic-azul); } .vic-step--done .vic-step__num { background: var(--vic-success); color: #fff; border-color: var(--vic-success); } .vic-step__sep { width: 28px; height: 1px; background: var(--vic-border); } /* --- Checkout: resumen -------------------------------------------------- */ .vic-summary { position: sticky; top: 96px; } .vic-summary__line { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 6px 0; } .vic-summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--vic-border); } .vic-summary__total strong { font-family: var(--vic-font-display); font-size: 30px; color: var(--vic-azul-profundo); } /* --- Rejilla del checkout ------------------------------------------------ */ .vic-checkout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 56px; align-items: start; } .vic-confirm { display: grid; grid-template-columns: 1.35fr .65fr; gap: 56px; align-items: start; } /* --- Datos bancarios ---------------------------------------------------- */ .vic-bank { display: grid; gap: 2px; } .vic-bank__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--vic-border); background: var(--vic-blanco); } .vic-bank__row:first-child { border-radius: var(--vic-radius-sm) var(--vic-radius-sm) 0 0; } .vic-bank__row:last-child { border-radius: 0 0 var(--vic-radius-sm) var(--vic-radius-sm); } .vic-bank__row + .vic-bank__row { border-top: 0; } .vic-bank__key { font-size: 13px; color: var(--vic-text-muted); } .vic-bank__val { font-family: var(--vic-font-mono); font-size: 15px; font-weight: 500; color: var(--vic-text-strong); word-break: break-all; } .vic-copy { border: 1px solid var(--vic-border); background: var(--vic-blanco); cursor: pointer; border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--vic-azul); flex: none; transition: all var(--vic-transition-base); } .vic-copy:hover { background: var(--vic-primary-softer); border-color: var(--vic-azul); } .vic-copy--ok { background: var(--vic-success-soft); color: var(--vic-success-text); border-color: var(--vic-success); } /* --- Folio -------------------------------------------------------------- */ .vic-folio { font-family: var(--vic-font-mono); font-size: 28px; font-weight: 700; letter-spacing: .08em; color: var(--vic-azul-profundo); background: var(--vic-primary-softer); border: 1px dashed var(--vic-azul); border-radius: var(--vic-radius-sm); padding: 14px 20px; display: inline-block; } /* --- Aviso / callout ---------------------------------------------------- */ .vic-note { border-radius: var(--vic-radius-lg); padding: 20px 22px; font-size: 15px; line-height: 1.6; border: 1px solid; } .vic-note--info { background: var(--vic-info-soft); border-color: rgba(44,77,157,.3); color: var(--vic-info-text); } .vic-note--warning { background: var(--vic-warning-soft); border-color: rgba(181,107,0,.3); color: var(--vic-warning-text); } .vic-note--success { background: var(--vic-success-soft); border-color: rgba(25,122,82,.3); color: var(--vic-success-text); } .vic-note--dashed { background: var(--vic-blanco); border: 1px dashed var(--vic-border); color: var(--vic-text-muted); } .vic-note strong { color: inherit; } /* --- Dropzone comprobante ----------------------------------------------- */ .vic-drop { /* Es un