/* * Virtud Cloud — tema daisyUI "virtud" y piezas compartidas de las páginas * de flujo (crear-institucion, unete). * * Requiere daisyUI 5 cargado antes y . * * admin.virtud.cloud es otra aplicación y no carga este archivo: tiene una * copia de los tokens del tema en app/Views/Shield/layout_daisy.php. Si cambia * la marca, cambia aquí y allá. */ /* ========================= Tema ========================= */ [data-theme="virtud"] { color-scheme: light; --color-base-100: #ffffff; --color-base-200: #f5f7fb; --color-base-300: #e5e9f2; --color-base-content: #111827; --color-primary: #0133cc; --color-primary-content: #ffffff; --color-secondary: #3d73ff; --color-secondary-content: #ffffff; --color-accent: #00b8a9; --color-accent-content: #ffffff; --color-neutral: #0f172a; --color-neutral-content: #f1f5f9; --color-info: #0ea5e9; --color-info-content: #ffffff; --color-success: #16a34a; --color-success-content: #ffffff; --color-warning: #f59e0b; --color-warning-content: #111827; --color-error: #dc2626; --color-error-content: #ffffff; --radius-selector: .375rem; --radius-field: .5rem; --radius-box: 1rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 0; --noise: 0; /* Tonos derivados */ --muted: color-mix(in oklab, var(--color-base-content) 60%, transparent); --soft: color-mix(in oklab, var(--color-primary) 8%, #fff); } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; min-height: 100vh; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; color: var(--color-base-content); background: var(--color-base-200); } /* ========================= Estructura ========================= */ .layout { display: grid; grid-template-columns: 400px 1fr; min-height: 100vh; } /* Panel de marca */ .side { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 40px 36px; color: #fff; background: radial-gradient(circle at 85% 15%, rgba(61, 115, 255, .55), transparent 45%), radial-gradient(circle at 10% 90%, rgba(0, 184, 169, .25), transparent 40%), linear-gradient(160deg, #0133cc 0%, #0a1f6b 70%, #071338 100%); } .side::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); pointer-events: none; } .side > * { position: relative; } .brand { display: inline-flex; } .brand img { height: 34px; width: auto; filter: brightness(0) invert(1); } .side h1 { font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin: 48px 0 12px; } .side .lead { margin: 0 0 36px; color: rgba(255, 255, 255, .78); line-height: 1.55; } .side .foot { margin-top: auto; padding-top: 32px; font-size: 13px; color: rgba(255, 255, 255, .7); } .side .foot a { color: #fff; text-decoration: underline; } /* Columna de contenido */ .main { display: flex; flex-direction: column; padding: 40px 48px; background: var(--color-base-100); } .topbar { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 14px; } .topbar a { font-weight: 600; } .wizard-progress { height: 4px; background: var(--color-base-300); border-radius: 4px; margin: 18px 0 0; overflow: hidden; } .wizard-progress i { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width .35s ease; } .content { width: 100%; max-width: 560px; margin: auto; padding: 40px 0; } /* Pasos del asistente */ .wizard-step { display: none; } .wizard-step.active { display: block; animation: rise .3s ease; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .eyebrow { color: var(--color-primary); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; } .wizard-step h2 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; } .wizard-step .sub { margin: 0 0 28px; color: var(--muted); line-height: 1.55; } /* ========================= Campos ========================= */ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; } .full { grid-column: 1 / -1; } .field-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; } .field-label .opt { color: var(--muted); font-weight: 400; } .field .hint { font-size: 13px; color: var(--muted); margin-top: 6px; } .field .err { font-size: 13px; color: var(--color-error); margin-top: 6px; display: none; } .field.invalid .err { display: block; } .content .input, .content .select, .content .textarea { width: 100%; } .field.invalid .input, .field.invalid .select, .field.invalid .join, .field.invalid .checkbox { border-color: var(--color-error); } .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; } .check .checkbox { margin-top: 2px; flex: none; } /* Opciones como tarjetas (radio real por dentro, para teclado y lectores de pantalla) */ .choices { display: grid; gap: 10px; } .choices.two { grid-template-columns: 1fr 1fr; } .choices.four { grid-template-columns: repeat(4, 1fr); } .choice { position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid var(--color-base-300); border-radius: var(--radius-field); padding: 11px 14px; cursor: pointer; font-size: 14px; font-weight: 600; background: var(--color-base-100); transition: border-color .15s, background .15s; } .choice input { position: absolute; opacity: 0; pointer-events: none; } .choice:hover { border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-base-300)); } .choice:has(input:checked) { border-color: var(--color-primary); background: var(--soft); color: var(--color-primary); } .choice:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; } .choices.four .choice { justify-content: center; text-align: center; padding: 11px 8px; } .field.invalid .choice { border-color: var(--color-error); } /* Tarjeta grande con ícono, título y descripción */ .interest { align-items: flex-start; padding: 16px; } .interest .ti { width: 40px; height: 40px; border-radius: 10px; background: var(--soft); color: var(--color-primary); display: grid; place-items: center; flex: none; } .interest strong { display: block; font-size: 15px; color: var(--color-base-content); } .interest small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; line-height: 1.45; color: var(--muted); } .interest:has(input:checked) .ti { background: var(--color-primary); color: #fff; } /* Captcha de Cloudflare: se reserva su alto para que el formulario no brinque al aparecer */ #captcha { min-height: 65px; } /* ========================= Acciones y cierre ========================= */ .actions { display: flex; align-items: center; gap: 12px; margin-top: 32px; } .actions .spacer { flex: 1; } .form-error { margin-top: 20px; } /* Pantalla de "enviado" */ .done { text-align: center; } .done .sub { max-width: 440px; margin-left: auto; margin-right: auto; } /* Ícono grande de "listo" al terminar un flujo */ .ready-badge { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 22px; background: var(--color-primary); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px rgba(1, 51, 204, .3); } /* ========================= Responsivo ========================= */ @media (max-width: 960px) { .layout { grid-template-columns: 1fr; } .side { padding: 22px 20px; } .side::before, .side h1, .side .lead, .side .foot { display: none; } .brand img { height: 28px; } .main { padding: 24px 20px; } .content { padding: 28px 0; } } @media (max-width: 560px) { .grid, .choices.two { grid-template-columns: 1fr; } .choices.four { grid-template-columns: 1fr 1fr; } .wizard-step h2 { font-size: 22px; } }