/* ========================================== DISEÑO CORPORATIVO PREMIUM 2025 Tendencias: Glassmorphism, Fintech, Neo-corporate ========================================== */ :root{ /* Paleta inspirada en Coopatria (verde corporativo) */ --primary:#0B5E3B; /* verde principal oscuro */ --primary-light:#2EA26A; /* verde claro / gradiente */ --primary-dark:#073E29; /* verde aún más oscuro */ --accent:#9BD59A; /* acento suave */ --accent-light:#CFF3D0; /* acento muy claro */ /* Extended neutrals & accents for professional theme */ --neutral-50:#F8FAF9; --neutral-100:#F1F4F3; --neutral-200:#E2E7E5; --neutral-300:#CBD3D0; --neutral-400:#A4B0AC; --neutral-500:#7E8C87; --neutral-600:#5C6662; --neutral-700:#444C49; --neutral-800:#2E3432; --neutral-900:#1D211F; --accent-emerald:#10B981; --accent-blue:#1D4ED8; --accent-gold:#E2B534; --danger:#DC2626; --success:#059669; --warning:#F59E0B; --info:#0EA5E9; /* Elevation scale */ --elevate-1:0 1px 2px -1px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.06); --elevate-2:0 3px 6px -2px rgba(0,0,0,0.10),0 4px 8px rgba(0,0,0,0.08); --elevate-3:0 8px 16px -4px rgba(0,0,0,0.12),0 12px 20px rgba(0,0,0,0.10); --elevate-4:0 16px 28px -6px rgba(0,0,0,0.16),0 24px 40px rgba(0,0,0,0.12); /* Animation timings */ --ease-snap:cubic-bezier(0.36,0.66,0.04,1); --ease-out:cubic-bezier(0.22,0.61,0.36,1); --ease-in:cubic-bezier(0.55,0.06,0.68,0.19); --bg-light:#F6FBF6; --bg-lighter:#F1F9F2; --text-dark:#08251a; --text-muted:#476c57; --text-light:#7f9b84; --white:#FFFFFF; --border-color:#E6F2EA; /* Tipografía Premium */ --font-headline:'Poppins','Sofia Sans','Inter',sans-serif; --font-body:'Inter','Manrope',sans-serif; /* Radios modernos */ --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; /* Sombras Corporativas Elevadas */ --shadow-sm:0 2px 6px rgba(3,46,27,0.04); --shadow-md:0 4px 12px rgba(3,46,27,0.08); --shadow-lg:0 12px 32px rgba(3,46,27,0.12); --shadow-xl:0 20px 48px rgba(3,46,27,0.16); --shadow-glow:0 0 20px rgba(14,160,90,0.12); /* Transiciones suaves */ --transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast:all 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* Header lead color (hero subtitle) */ --hero-lead-color: #222; } /* High-contrast heading color: used across h1..h6 and major section titles */ :root{ --heading-color: #062a18; /* default dark green for headings */ } /* Valores por defecto para elementos que usan el tema */ :root{ --card-bg: rgba(255,255,255,1); --card-bg-soft: rgba(255,255,255,0.95); --input-bg: rgba(255,255,255,0.98); --text-primary: var(--text-dark); --bg-body: var(--bg-light); } /* Placeholder and prefix/bg tokens that are theme-aware */ :root{ --input-border: rgba(11,94,59,0.10); --input-focus-ring: rgba(14,160,90,0.12); --prefix-bg: rgba(11,94,59,0.05); --placeholder-color: rgba(71,108,87,0.45); } /* Temas: clase .theme-light y .theme-dark aplicadas a */ /* Por defecto el diseño es claro. El tema oscuro puede forzarse con .theme-dark */ .theme-light { --bg-light: #FFFFFF; --bg-lighter: #FFFFFF; --bg-body: #FFFFFF; --card-bg: rgba(255,255,255,1); --card-bg-soft: rgba(255,255,255,0.95); --text-dark: #0F172A; --text-muted: #64748B; --input-bg: #ffffff; --input-border: rgba(15,23,42,0.06); --input-focus-ring: rgba(14,160,90,0.12); --prefix-bg: rgba(14,93,230,0.04); --placeholder-color: rgba(100,116,139,0.45); --text-primary: #0F172A; --heading-color: #062a18; /* dark green heading on light theme */ --hero-lead-color: #000000; /* pure black in light theme */ } .theme-dark { --bg-light: #0F172A; --bg-lighter: #111827; --bg-body: #0F172A; --card-bg: rgba(17,24,39,0.86); --card-bg-soft: rgba(17,24,39,0.78); --text-dark: #E6EEF8; --text-muted: #94A3B8; --input-bg: rgba(15,23,42,0.55); --input-border: rgba(255,255,255,0.06); --input-focus-ring: rgba(14,160,90,0.25); --prefix-bg: rgba(255,255,255,0.03); --placeholder-color: rgba(230,238,248,0.35); --text-primary: var(--text-dark); --heading-color: #E6F7EE; /* lightened heading for dark theme */ --hero-lead-color: #fff; /* pure white in dark theme */ } *** End Patch *{box-sizing:border-box;margin:0;padding:0} html,body{ height:100%; font-family:var(--font-body); background:linear-gradient(135deg, var(--bg-lighter) 0%, var(--bg-light) 100%); color:var(--text-dark); line-height:1.6; letter-spacing:0.3px; } /* ========== LAYOUT Y CONTENEDORES ========== */ .container{max-width:1200px;margin:32px auto;padding:24px} /* Encabezado Glassmorphism Premium */ .hero{ display:flex; gap:20px; align-items:center; margin-bottom:36px; padding:28px; background:rgba(255,255,255,0.7); backdrop-filter:blur(12px); border:1px solid rgba(14,93,230,0.1); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); animation:slideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .hero.small{ margin-bottom:28px; padding:20px 24px; } .logo{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); border-radius:20px; box-shadow:0 8px 20px rgba(14,93,230,0.25), var(--shadow-glow); flex-shrink:0; } .logo img{ width:90%; height:90%; object-fit:contain; border-radius:16px; } .hero h1{ margin:0; font-family:var(--font-headline); font-size:28px; font-weight:700; background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:-0.5px; } .hero .lead{ margin:6px 0 0; color:var(--hero-lead-color); font-size:18px; font-weight:900; opacity:1; text-shadow:0 2px 6px rgba(0,0,0,0.18); letter-spacing:0.2px; } /* Tarjetas Premium Flotantes */ .card{ background:linear-gradient(145deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.86) 60%, rgba(255,255,255,0.80) 100%); backdrop-filter:blur(14px); border:1px solid var(--neutral-200); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--elevate-2); transition:var(--transition); position:relative; } .card:hover{ box-shadow:var(--elevate-3); border-color:var(--neutral-300); transform:translateY(-4px); } .form-card{padding:36px} .admin-card{padding:28px} .filter-bar{ display:flex; flex-wrap:wrap; gap:16px; margin:20px 0 24px; } .filter-group{ display:flex; flex-direction:column; gap:6px; min-width:180px; } .filter-group label{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-muted); } .filter-group input[type="text"], .filter-group input[type="date"], .filter-group select{ padding:12px 14px; border-radius:var(--radius-md); border:1px solid var(--input-border); background:var(--input-bg); color:var(--text-dark); transition:var(--transition); } .filter-group input[type="text"]:focus, .filter-group input[type="date"]:focus, .filter-group select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(14,93,230,0.15); } .card-item.empty{ display:flex; justify-content:center; align-items:center; text-align:center; color:var(--text-muted); font-style:italic; } .filter-group select{ appearance:none; background-image:url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNjY3IiB2aWV3Qm94PSIwIDAgMTIgOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMSAxLjVoMTBsLTUgNUwxIDEuNXoiLz48L3N2Zz4='); background-repeat:no-repeat; background-position:right 12px center; background-size:12px; padding-right:34px; } .list-columns{ display:flex; gap:20px; align-items:flex-start; width:100%; flex-wrap:wrap; } .list-column{ flex:1 1 320px; display:flex; flex-direction:column; gap:16px; } .list-column h3{ font-size:15px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; } .list-column .card-item{ margin:0; } .list-column.empty{ opacity:0.65; } .processed-column h3{color:#0b63d6;} .pending-column h3{color:var(--text-dark);} /* ========== BARRA DE PROGRESO ========== */ .progress-wrapper{ margin-bottom:32px; } .progress-bar{ width:100%; height:4px; background:rgba(14,93,230,0.08); border-radius:999px; overflow:hidden; margin-bottom:20px; } .progress-fill{ height:100%; background:linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%); transition:width 0.6s ease; border-radius:999px; } .steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; } .step{ display:flex; align-items:center; gap:12px; padding:12px; background:rgba(14,93,230,0.03); border:1.5px solid rgba(14,93,230,0.06); border-radius:var(--radius-md); transition:var(--transition); opacity:0.6; } .step.active{ background:linear-gradient(135deg, rgba(14,93,230,0.12) 0%, rgba(34,193,195,0.08) 100%); border-color:var(--primary); opacity:1; } .step-circle{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; min-width:36px; background:rgba(14,93,230,0.1); border-radius:50%; color:var(--text-muted); transition:var(--transition); } .step.active .step-circle{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color:var(--white); box-shadow:0 4px 12px rgba(14,93,230,0.25); } .step-label{ flex:1; min-width:0; } .step-number{ font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px; } .step.active .step-number{color:var(--primary)} .step-name{ font-size:13px; font-weight:600; color:var(--heading-color); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media(max-width:768px){ .steps{grid-template-columns:repeat(2, 1fr);gap:12px} .step{padding:10px} .step-label{display:none} .step-circle{width:32px;height:32px} } @media(max-width:480px){ .steps{grid-template-columns:1fr;gap:10px} .step{padding:8px} .step-circle{width:28px;height:28px} } /* ========== BOTONES PREMIUM ========== */ /* ========== ENCABEZADOS DE SECCIÓN CORPORATIVO ========== */ .section-header{ display:flex; gap:16px; align-items:flex-start; margin-bottom:28px; padding-bottom:20px; border-bottom:2px solid rgba(14,93,230,0.08); } .section-icon{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; min-width:48px; background:linear-gradient(135deg, rgba(14,93,230,0.1) 0%, rgba(34,193,195,0.08) 100%); border-radius:var(--radius-md); color:var(--primary); transition:var(--transition); } .section-header:hover .section-icon{ background:linear-gradient(135deg, rgba(14,93,230,0.15) 0%, rgba(34,193,195,0.12) 100%); transform:scale(1.05); } .section-header h2{ margin:0 0 6px; font-family:var(--font-headline); font-size:20px; font-weight:700; color:var(--heading-color); letter-spacing:-0.3px; } .section-subtitle{ margin:0; font-size:13px; color:var(--text-muted); font-weight:400; } .section-subtitle-small{ display:block; font-size:13px; color:var(--text-muted); margin-top:8px; margin-bottom:16px; } .divider{ height:1px; background:linear-gradient(90deg, transparent, rgba(14,93,230,0.1), transparent); margin:28px 0; } /* ========== GRID DE FORMULARIO MEJORADO ========== */ .form-grid{ display:grid; gap:18px; margin-bottom:20px; } .form-grid.grid-2{grid-template-columns:1fr 1fr} .form-grid.grid-3{grid-template-columns:1fr 1fr 1fr} @media(max-width:768px){ .form-grid.grid-2{grid-template-columns:1fr} .form-grid.grid-3{grid-template-columns:1fr 1fr} } @media(max-width:480px){ .form-grid.grid-2{grid-template-columns:1fr} .form-grid.grid-3{grid-template-columns:1fr} } /* ========== INPUTS CON PREFIJO ========== */ .input-prefix-wrapper{ display:flex; align-items:stretch; border:1.5px solid var(--input-border); border-radius:12px; overflow:hidden; background:var(--input-bg); transition:var(--transition); } .input-prefix-wrapper:focus-within{ border-color:var(--primary); box-shadow:inset 0 2px 4px rgba(15,23,42,0.02), 0 0 0 3px rgba(14,93,230,0.1); } .input-prefix{ display:flex; align-items:center; padding:0 14px; background:var(--prefix-bg); color:var(--text-muted); font-family:var(--font-body); font-size:13px; font-weight:600; white-space:nowrap; border-right:1px solid var(--input-border); user-select:none; } .dial-select{ appearance:none; border:none; background:var(--prefix-bg); color:var(--text-muted); font-family:var(--font-body); font-size:13px; font-weight:600; padding:0 18px 0 12px; border-right:1px solid var(--input-border); min-width:88px; } .phone-field{ gap:0; } .input-prefix-wrapper input{ flex:1; padding:12px 14px; border:none; background:transparent; font-size:14px; color:var(--text-primary); caret-color:var(--text-primary); -webkit-text-fill-color:var(--text-primary); } .input-prefix-wrapper input:focus{ outline:none; background:transparent; } .input-prefix-wrapper input::placeholder{ color:var(--placeholder-color); } .phone-field .input-prefix::after, .dial-select::after{ content:''; } @media(max-width:640px){ .phone-field{ flex-direction:column; } .phone-field .dial-select{ width:100%; border-right:none; border-bottom:1px solid var(--input-border); padding:12px 14px; } .card{ padding:24px; } .form-card{ padding:24px; } } /* Evitar que navegadores cambien el color del texto cuando autocompletan */ .input-prefix-wrapper input:-webkit-autofill, .form-group input:-webkit-autofill, .form-group select:-webkit-autofill, .form-group textarea:-webkit-autofill{ -webkit-box-shadow:0 0 0px 1000px var(--input-bg) inset; -webkit-text-fill-color:var(--text-primary); caret-color:var(--text-primary); transition:background-color 9999s ease-out; } /* also ensure generic form controls use theme-aware variables */ .form-group input, .form-group select, .form-group textarea{ background:var(--input-bg); border:1px solid var(--input-border); color:var(--text-primary); padding:10px 12px; border-radius:10px; } .form-group input.error, .form-group select.error, .form-group textarea.error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(220,38,38,0.15)} .form-group input.success, .form-group select.success, .form-group textarea.success{border-color:var(--success);box-shadow:0 0 0 3px rgba(5,150,105,0.18)} .helper-text{font-size:11px;margin-top:4px;color:var(--text-muted)} .helper-text.error{color:var(--danger);font-weight:600} .helper-text.success{color:var(--success);font-weight:600} .form-group input::placeholder, .form-group textarea::placeholder{ color:var(--placeholder-color); } .summary-card{ border:1px solid var(--input-border); border-radius:18px; padding:20px; background:var(--card-bg-soft); box-shadow:var(--shadow-sm); margin-bottom:24px; } .summary-card__header h3{ margin:0; font-size:18px; font-weight:700; color:var(--heading-color); } .summary-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; } .summary-section{ border:1px solid var(--border-color); border-radius:14px; padding:12px; background:var(--card-bg); } .summary-section h4{ margin:0 0 10px; font-size:14px; color:var(--text-muted); text-transform:uppercase; } .summary-section ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; } .summary-section li{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-primary); gap:10px; } .summary-section li span{ color:var(--text-muted); } .summary-section li strong{ font-weight:600; color:var(--text-primary); } .actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:24px; animation:fadeInUp 0.4s ease-out 0.2s backwards; } .btn{ padding:12px 20px; border-radius:999px; border:none; font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer; transition:var(--transition); background:rgba(14,93,230,0.08); color:var(--primary); box-shadow:0 2px 8px rgba(14,93,230,0.08); text-transform:uppercase; letter-spacing:0.4px; } .btn:focus-visible{ outline:3px solid rgba(29,78,216,0.35); outline-offset:2px; } .btn-secondary{ background:linear-gradient(135deg, var(--neutral-100), var(--neutral-200)); color:var(--neutral-800); box-shadow:var(--elevate-1); } .btn-secondary:hover{box-shadow:var(--elevate-2);transform:translateY(-3px)} .btn-secondary:active{transform:translateY(0);box-shadow:var(--elevate-1)} .btn-outline{ background:transparent; border:2px solid var(--primary); color:var(--primary); box-shadow:none; } .btn-outline:hover{background:var(--primary);color:#fff} .btn-outline:active{opacity:0.85} .btn-success{background:linear-gradient(135deg, var(--success) 0%, #34d399 100%);color:#fff;box-shadow:0 4px 12px rgba(5,150,105,0.35)} .btn-success:hover{box-shadow:0 6px 16px rgba(5,150,105,0.45);transform:translateY(-2px)} .btn-danger{background:linear-gradient(135deg, #ef4444, var(--danger));color:#fff;box-shadow:0 4px 12px rgba(220,38,38,0.35)} .btn-danger:hover{box-shadow:0 6px 16px rgba(220,38,38,0.45);transform:translateY(-2px)} .btn:hover{ background:rgba(14,93,230,0.15); box-shadow:0 6px 16px rgba(14,93,230,0.2); transform:translateY(-1px); } .btn:active{ transform:translateY(0); box-shadow:0 2px 4px rgba(14,93,230,0.15); } .btn.big{ padding:14px 28px; font-size:15px; } .btn-primary{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color:var(--white); box-shadow:0 8px 20px rgba(14,93,230,0.25), var(--shadow-glow); } .btn-primary:hover{ box-shadow:0 12px 28px rgba(14,93,230,0.3); transform:translateY(-2px); } .btn.primary:focus{ outline:2px solid rgba(14,93,230,0.3); outline-offset:2px; } .btn.danger{ background:#FEE2E2; color:#DC2626; } .btn.danger:hover{ background:#FECACA; box-shadow:0 6px 16px rgba(220,38,38,0.2); } .hidden{display:none} .panel{ border:0; padding:0; animation:fadeIn 0.4s ease-out; } .panel h2{ margin:0 0 12px; font-family:var(--font-headline); font-size:20px; font-weight:700; color:var(--heading-color); letter-spacing:-0.3px; } .lead{ color:var(--text-muted); font-size:14px; line-height:1.5; } /* ========== ÁREAS DE FIRMA ========== */ .sign-grid{ display:flex; gap:20px; flex-wrap:wrap; margin-top:20px; } .signature-box{ flex:1; min-width:240px; } .sig-frame{ height:140px; border:2px dashed rgba(14,93,230,0.2); border-radius:var(--radius-md); background:linear-gradient(135deg, rgba(248,250,252,0.5) 0%, rgba(226,232,240,0.3) 100%); transition:var(--transition); position:relative; } .sig-frame:hover{ border-color:rgba(14,93,230,0.4); background:linear-gradient(135deg, rgba(248,250,252,0.8) 0%, rgba(226,232,240,0.5) 100%); } .sig-label{ margin-top:10px; font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.3px; } .footer{ text-align:center; margin-top:20px; padding-top:20px; border-top:1px solid rgba(14,93,230,0.08); color:var(--text-light); font-size:12px; } /* ========== LISTA Y TARJETAS ADMIN ========== */ .list-container{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; margin-top:20px; animation:fadeInUp 0.5s ease-out; } .card-item{ padding:20px; border-radius:var(--radius-lg); background:var(--card-bg-soft); backdrop-filter:blur(8px); border:1.5px solid rgba(14,93,230,0.08); box-shadow:var(--shadow-md); transition:var(--transition); cursor:pointer; position:relative; overflow:hidden; } .card-item::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%); opacity:0; transition:opacity 0.3s ease; } .card-item:hover{ box-shadow:var(--shadow-lg); border-color:rgba(14,93,230,0.15); transform:translateY(-4px); } .card-item:hover::before{opacity:1} /* Micro interaction utilities */ .hover-lift{transition:var(--transition)} .hover-lift:hover{transform:translateY(-3px);box-shadow:var(--elevate-2)} .focus-ring:focus-visible{outline:3px solid rgba(29,78,216,0.35);outline-offset:2px} .card-item h3{ margin:0 0 8px; font-family:var(--font-headline); font-size:16px; font-weight:700; color:var(--heading-color); } .meta{ color:var(--text-muted); font-size:12px; margin-top:6px; display:flex; gap:12px; flex-wrap:wrap; } .meta span{ display:flex; align-items:center; gap:4px; } /* Badges */ .badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;letter-spacing:0.4px;background:var(--neutral-200);color:var(--neutral-700);} .badge-success{background:var(--success);color:#fff} .badge-danger{background:var(--danger);color:#fff} .badge-warning{background:var(--warning);color:#fff} .badge-info{background:var(--info);color:#fff} /* Spacing utilities */ .mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px} .mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px} .pt-8{padding-top:8px}.pt-16{padding-top:16px}.pt-24{padding-top:24px} .pb-8{padding-bottom:8px}.pb-16{padding-bottom:16px}.pb-24{padding-bottom:24px} /* Scrollbar styling (Webkit) */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--neutral-100);border-radius:6px} ::-webkit-scrollbar-thumb{background:var(--neutral-300);border-radius:6px;border:2px solid var(--neutral-100)} ::-webkit-scrollbar-thumb:hover{background:var(--neutral-400)} .item-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; } .item-actions .btn{ flex:1; min-width:80px; padding:8px 12px; font-size:12px; } .admin-actions{ display:flex; gap:12px; justify-content:space-between; align-items:center; margin-bottom:20px; padding:16px; background:rgba(14,93,230,0.03); border-radius:var(--radius-lg); border:1px solid rgba(14,93,230,0.06); } /* ========== MODAL GLASSMORPHISM ========== */ .modal{ position:fixed; inset:0; background:rgba(15,23,42,0.5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:16px; z-index:1000; animation:fadeIn 0.3s ease-out; } .modal-content{ background:var(--card-bg); backdrop-filter:blur(12px); padding:32px; border-radius:var(--radius-xl); max-width:820px; width:100%; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 25px 60px rgba(15,23,42,0.25); border:1px solid rgba(14,93,230,0.1); animation:slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .modal-close{ position:absolute; right:16px; top:16px; border:none; background:rgba(14,93,230,0.08); color:var(--text-muted); width:40px; height:40px; border-radius:50%; font-size:20px; cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; } .modal-close:hover{ background:rgba(14,93,230,0.15); color:var(--primary); transform:rotate(90deg) scale(1.1); } .modal[aria-hidden="true"], .modal.hidden{ display:none !important; } .modal[aria-hidden="false"]{ display:flex !important; } /* ========== DETALLES MODAL ========== */ .detail-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; } .detail-col{ flex:1; min-width:200px; } .detail-label{ font-family:var(--font-label); font-weight:600; color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:0.3px; margin-bottom:6px; display:block; } .detail-value{ font-size:14px; color:var(--text-dark); font-weight:500; } .detail-card{ padding:16px; background:linear-gradient(135deg, rgba(248,250,252,0.8) 0%, rgba(226,232,240,0.4) 100%); border-radius:var(--radius-md); border:1px solid rgba(14,93,230,0.08); margin-bottom:16px; } /* ========== SECCIÓN DE PRIVACIDAD Y AUTORIZACIÓN ========== */ .privacy-section{ margin-top:28px; } .privacy-card{ background:linear-gradient(135deg, rgba(16,185,129,0.05) 0%, rgba(34,193,195,0.03) 100%); border:1.5px solid rgba(16,185,129,0.15); border-radius:var(--radius-lg); padding:24px; margin-bottom:20px; animation:fadeInUp 0.5s ease-out; } .privacy-icon{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:rgba(16,185,129,0.1); border-radius:50%; color:#10B981; margin-bottom:12px; } .privacy-card h3{ margin:0 0 12px; font-family:var(--font-headline); font-size:16px; font-weight:700; color:var(--heading-color); } .privacy-text{ margin:0 0 12px; font-size:13px; color:var(--text-muted); line-height:1.6; } .privacy-list{ margin:12px 0 16px; padding-left:20px; list-style:none; } .privacy-list li{ font-size:13px; color:var(--text-muted); margin-bottom:8px; padding-left:20px; position:relative; line-height:1.5; } .privacy-list li::before{ content:'✓'; position:absolute; left:0; color:#10B981; font-weight:bold; } .privacy-text-small{ font-size:12px; color:var(--text-light); font-style:italic; margin:0; } .checkbox-group{ display:flex; align-items:flex-start; gap:12px; padding:16px; background:rgba(14,93,230,0.02); border-radius:var(--radius-md); border:1px solid rgba(14,93,230,0.06); } #privacy_accept{ appearance:none; -webkit-appearance:none; width:24px; height:24px; border:2px solid var(--primary); border-radius:6px; background-color:#fff; cursor:pointer; position:relative; margin-top:2px; flex-shrink:0; transition:all 0.2s ease; } #privacy_accept:checked{ background-color:var(--primary); border-color:var(--primary); box-shadow:0 2px 4px rgba(11,94,59,0.2); } #privacy_accept:checked::after{ content:''; position:absolute; left:8px; top:4px; width:6px; height:12px; border:solid white; border-width:0 2px 2px 0; transform:rotate(45deg); } #privacy_accept:hover{ border-color:var(--primary-light); box-shadow:0 0 0 4px rgba(11,94,59,0.1); } .checkbox-label{ margin:0; font-size:13px; color:var(--text-dark); font-weight:500; cursor:pointer; line-height:1.5; text-transform:none; letter-spacing:normal; } /* ========== SECCIÓN DE FIRMA ========== */ .signature-section{ margin-bottom:28px; } .signature-section h3{ margin:0 0 8px; font-family:var(--font-headline); font-size:16px; font-weight:700; color:var(--heading-color); } .form-footer{ display:block; text-align:center; font-size:12px; color:var(--text-light); margin-top:12px; } .submit-btn{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; } .btn-icon{ font-size:18px; font-weight:bold; } /* ========== ANIMACIONES MODERNAS 2025 ========== */ @keyframes slideDown{ from{ opacity:0; transform:translateY(-20px); } to{ opacity:1; transform:translateY(0); } } @keyframes slideUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } } @keyframes fadeIn{ from{opacity:0} to{opacity:1} } @keyframes fadeInUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } } @keyframes pulse{ 0%, 100%{opacity:1} 50%{opacity:0.5} } @keyframes shimmer{ 0%{ background-position:-1000px 0; } 100%{ background-position:1000px 0; } } /* ========== RESPONSIVE DESIGN ========== */ @media(max-width:1024px){ .container{max-width:95%;margin:24px auto;padding:18px} .hero{padding:20px;gap:16px} .hero h1{font-size:24px} .card{padding:24px} .form-card{padding:24px} .list-container{grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));gap:16px} } @media(max-width:768px){ .container{margin:16px auto;padding:14px} .hero{flex-direction:column;text-align:center;padding:18px} .logo{width:56px;height:56px} .hero h1{font-size:22px} .form-grid{grid-template-columns:1fr} .form-grid.thirds{grid-template-columns:1fr} .card{padding:20px} .form-card{padding:20px} .actions{flex-direction:column-reverse;gap:10px} .btn{width:100%;padding:12px 16px} .sign-grid{flex-direction:column} .signature-box{width:100%} .list-container{grid-template-columns:1fr} .modal-content{padding:20px;margin:10px} .detail-row{flex-direction:column} .detail-col{min-width:100%;width:100%} .admin-actions{flex-wrap:wrap;gap:8px} } @media(max-width:640px){ .container{padding:12px;margin:12px auto} .hero{gap:12px;padding:14px} .logo{width:48px;height:48px} .hero h1{font-size:18px} .hero .lead{font-size:13px} .card{padding:16px} .form-card{padding:16px} .form-group{margin-bottom:16px} .form-group label{margin-bottom:6px;font-size:12px} .form-group input, .form-group select, .form-group textarea{padding:10px 14px;font-size:13px} .steps{gap:8px;margin-bottom:20px} .step{padding:10px 12px;font-size:10px;min-width:70px} .btn{ padding:11px 14px; font-size:12px; min-height:40px; } .btn.big{ padding:12px 16px; font-size:13px; } .list-container{gap:12px} .card-item{padding:16px} .card-item h3{font-size:15px} .meta{font-size:11px} .modal-content{ padding:16px; border-radius:var(--radius-lg); max-height:95vh; } .modal-close{width:36px;height:36px;font-size:18px} .detail-label{font-size:10px} .detail-value{font-size:13px} .admin-actions{ flex-direction:column; align-items:stretch; } .admin-actions .btn{width:100%} .sig-frame{height:100px} .panel h2{font-size:18px} } @media(max-width:480px){ .container{padding:10px;margin:8px auto} .hero{padding:12px} .logo{width:40px;height:40px} .hero h1{font-size:16px} .hero .lead{font-size:12px} .card{padding:14px} .form-card{padding:14px} .steps{gap:6px;margin-bottom:16px} .step{padding:8px 10px;font-size:9px;min-width:60px} .form-group{margin-bottom:14px} .form-group label{margin-bottom:5px;font-size:11px} .form-group input, .form-group select, .form-group textarea{padding:9px 12px;font-size:12px} .btn{ padding:10px 12px; font-size:11px; min-height:36px; } .actions{gap:8px;margin-top:16px} .list-container{gap:10px} .card-item{padding:12px} .card-item h3{font-size:14px} .meta{font-size:10px;gap:8px} .item-actions .btn{padding:6px 10px;font-size:10px} .modal{padding:12px} .modal-content{padding:14px} .panel h2{font-size:16px;margin-bottom:10px} } /* Reduce motion preference */ @media(prefers-reduced-motion:reduce){ *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important} } /* Dark mode support (opcional) */ @media(prefers-color-scheme:dark){ html,body{ background:linear-gradient(135deg, #0F172A 0%, #1E293B 100%); color:var(--white); } .card, .modal-content{ background:rgba(30,41,59,0.85); border-color:rgba(14,93,230,0.2); } .form-group input, .form-group select, .form-group textarea{ background:rgba(15,23,42,0.6); border-color:rgba(14,93,230,0.2); color:var(--white); } .detail-card{ background:rgba(15,23,42,0.6); border-color:rgba(14,93,230,0.15); } } /* Print styles */ @media print { body, html { background:#fff !important; color:#000 !important; } .hero, .actions, .admin-actions, .progress-wrapper { display:none !important; } .card, .panel { box-shadow:none !important; background:#fff !important; border:1px solid #ccc !important; } .section-header { border-bottom:1px solid #999 !important; } .step, .modal, .modal-content { display:none !important; } a:link, a:visited { text-decoration:none; color:#000; } }