:root { /* Paleta banca digital 2026-07 */ --ac-primary: #21933e; --ac-primary-dark: #115222; --ac-primary-soft: #e9f7ed; --ac-secondary: #b68b2f; --ac-secondary-soft: #f7efdb; --ac-ink: #17211a; --ac-muted: #667268; --ac-surface: #ffffff; --ac-surface-alt: #f5f7f4; --ac-border: #e3e9e1; --ac-warning: #d98c16; --ac-warning-soft: #fbf1de; --ac-error: #c94747; --ac-error-soft: #fbeaea; --ac-shadow: 0 12px 32px rgba(23, 33, 26, 0.08); --ac-shadow-sm: 0 2px 10px rgba(23, 33, 26, 0.06); --ac-radius-lg: 16px; --ac-radius-md: 14px; --ac-radius-sm: 12px; } /* El toggle claro/oscuro ya existente (.mode en el header + script.js) alterna la clase .dark-only en ; nos enganchamos ahí en vez de crear un mecanismo de tema nuevo. */ body.dark-only.temucoop-app { --ac-ink: #eef2ec; --ac-muted: #a7b3a9; --ac-surface: #1b2420; --ac-surface-alt: #131a16; --ac-border: rgba(238, 246, 229, 0.12); --ac-primary-soft: rgba(33, 147, 62, 0.18); --ac-warning-soft: rgba(217, 140, 22, 0.18); --ac-error-soft: rgba(201, 71, 71, 0.18); --ac-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); --ac-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25); } /* Iconos Lucide inline (assets/icons/lucide/, via ac_icon() en PHP) */ .ac-icon { display: inline-block; vertical-align: middle; width: 18px; height: 18px; flex-shrink: 0; } .customizer-links, .customizer-contain { display: none !important; } body.temucoop-auth { min-height: 100vh; background: radial-gradient(circle at top left, rgba(182, 139, 47, 0.16), transparent 32%), radial-gradient(circle at bottom right, rgba(33, 147, 62, 0.2), transparent 26%), linear-gradient(135deg, #eef4e4 0%, #f8f5ea 100%); } .temucoop-auth .auth-visual { position: relative; min-height: 100vh; overflow: hidden; } .temucoop-auth .auth-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(17, 33, 5, 0.78), rgba(70, 107, 0, 0.5)); } .temucoop-auth .auth-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95); } .temucoop-auth .auth-copy { position: absolute; inset: auto auto 48px 48px; z-index: 1; max-width: 520px; color: #fff; } .temucoop-auth .auth-copy .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; } .temucoop-auth .auth-copy h1 { margin: 18px 0 14px; font-size: clamp(2.2rem, 4vw, 4.2rem); line-height: 1.02; color: #fff; } .temucoop-auth .auth-copy p { max-width: 460px; margin: 0; font-size: 1.02rem; line-height: 1.7; color: rgba(255, 255, 255, 0.9); } .temucoop-auth .auth-highlights { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .temucoop-auth .auth-highlights span { padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 500; } .temucoop-auth .auth-visual-recovery::after { background: linear-gradient(140deg, rgba(31, 53, 8, 0.8), rgba(70, 107, 0, 0.56)); } .temucoop-auth .auth-visual-activation::after { background: linear-gradient(140deg, rgba(22, 41, 8, 0.8), rgba(89, 126, 14, 0.58)); } .temucoop-auth .auth-panel { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 28px; } .temucoop-auth .auth-panel::before { content: ""; position: absolute; inset: 24px; border-radius: 32px; background: transparent; box-shadow: none; } .temucoop-auth .login-card { position: relative; z-index: 1; width: min(100%, 520px); margin: 0 auto; background: transparent; } .temucoop-auth .login-main { padding: 34px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 30px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px); box-shadow: 0 18px 45px rgba(42, 60, 17, 0.14); } .temucoop-auth .logo { display: inline-flex; margin-bottom: 22px; } .temucoop-auth .login-main h4 { margin-bottom: 8px; font-size: 2rem; color: var(--ac-ink); } .temucoop-auth .login-main p { margin-bottom: 24px; color: var(--ac-muted); line-height: 1.6; } .temucoop-auth .login-main-recovery { padding-top: 30px; } .temucoop-auth .login-main-activation { padding-top: 30px; } .temucoop-auth .auth-kicker { display: inline-flex; align-items: center; padding: 8px 14px; margin-bottom: 16px; border-radius: 999px; background: linear-gradient(135deg, #eef6dd, #f7f2e3); color: var(--ac-primary-dark); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .temucoop-auth .theme-form label { color: var(--ac-ink); font-weight: 600; } .temucoop-auth .theme-form .form-control { min-height: 54px; border: 1px solid rgba(33, 147, 62, 0.18); border-radius: 16px; background: #fff; } .temucoop-auth .theme-form .form-control:focus { border-color: rgba(33, 147, 62, 0.48); box-shadow: 0 0 0 4px rgba(33, 147, 62, 0.12); } .temucoop-auth .theme-form .link { color: var(--ac-primary-dark); font-weight: 600; } .temucoop-auth .theme-form .form-input { position: relative; } .temucoop-auth .theme-form .form-input .form-control { padding-right: 92px; } .temucoop-auth .theme-form .show-hide.ac-password-toggle { position: absolute; top: 50%; right: 16px; display: inline-flex; align-items: center; justify-content: center; min-width: 62px; height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(33, 147, 62, 0.12); color: var(--ac-primary-dark); transform: translateY(-50%); cursor: pointer; z-index: 2; } .temucoop-auth .theme-form .show-hide.ac-password-toggle span { font-size: 0.82rem; font-weight: 700; line-height: 1; } .temucoop-auth .theme-form .show-hide.ac-password-toggle span.show::before { content: "Mostrar"; } .temucoop-auth .theme-form .show-hide.ac-password-toggle span::before { content: "Ocultar"; } .temucoop-auth .auth-actions { display: flex; justify-content: flex-end; margin-top: 14px; margin-bottom: 8px; } .temucoop-auth .auth-actions .link { position: static !important; display: inline-flex; align-items: center; min-height: 24px; } .temucoop-auth .auth-actions-center { justify-content: center; margin-top: 14px; margin-bottom: 0; } .temucoop-auth .auth-actions-between { justify-content: flex-start; margin-top: 8px; } .temucoop-auth .auth-inline-feedback { margin-top: 14px; padding: 12px 14px; border-radius: 14px; font-size: 0.95rem; line-height: 1.5; } .temucoop-auth .auth-inline-feedback-info { background: #f4f7ee; border: 1px solid rgba(33, 147, 62, 0.14); color: var(--ac-primary-dark); } .temucoop-auth .auth-inline-feedback-success { background: #edf6db; border: 1px solid rgba(33, 147, 62, 0.22); color: #335300; } .temucoop-auth .auth-inline-feedback-error { background: #fff1ef; border: 1px solid rgba(181, 59, 48, 0.16); color: #8c2c24; } .temucoop-auth .auth-helper-copy { margin: 0 0 20px; color: var(--ac-muted); font-size: 0.92rem; line-height: 1.55; } .temucoop-auth .theme-form .checkbox label { color: var(--ac-muted); } .temucoop-auth .btn-primary, .temucoop-app .btn-primary { border-color: var(--ac-primary); background: linear-gradient(135deg, var(--ac-primary), var(--ac-primary-dark)); box-shadow: 0 12px 24px rgba(33, 147, 62, 0.24); } .temucoop-auth .btn-primary:hover, .temucoop-app .btn-primary:hover { border-color: var(--ac-primary-dark); background: linear-gradient(135deg, var(--ac-primary-dark), var(--ac-primary)); } .temucoop-auth .auth-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 16px 18px; border-radius: 18px; background: var(--ac-primary-soft); color: var(--ac-ink); } @media (max-width: 1199px) { .temucoop-auth .auth-visual { min-height: 360px; } .temucoop-auth .auth-copy { inset: auto 28px 28px 28px; max-width: none; } } @media (max-width: 767px) { .temucoop-auth .auth-panel { min-height: auto; padding: 24px 14px 32px; } .temucoop-auth .auth-panel::before { inset: 8px; border-radius: 24px; } .temucoop-auth .login-card { width: 100%; } .temucoop-auth .login-main, .temucoop-auth .login-main-recovery, .temucoop-auth .login-main-activation { padding: 24px 20px; border-radius: 24px; } .temucoop-auth .auth-copy h1 { font-size: clamp(1.9rem, 9vw, 2.7rem); } .temucoop-auth .auth-copy p { font-size: 0.96rem; line-height: 1.55; } .temucoop-auth .auth-highlights { gap: 10px; } .temucoop-auth .auth-highlights span { width: 100%; justify-content: center; text-align: center; } } body.temucoop-app { background: radial-gradient(circle at top right, rgba(182, 139, 47, 0.08), transparent 18%), linear-gradient(180deg, #f5f8ee 0%, #f2f4ef 100%); color: var(--ac-ink); } .temucoop-app .page-header { backdrop-filter: blur(14px); background: rgba(255, 255, 255, 0.9); box-shadow: 0 12px 30px rgba(34, 55, 12, 0.08); } .temucoop-app .header-wrapper { border-bottom: 1px solid rgba(33, 147, 62, 0.1); } .temucoop-app .page-wrapper.compact-wrapper .page-body-wrapper .page-body { min-height: calc(100vh - 120px); } /* Sidebar claro tipo banca digital (reemplaza el degradado verde oscuro anterior) */ .temucoop-app .sidebar-wrapper { background: var(--ac-surface); border-right: 1px solid var(--ac-border); box-shadow: none; } .temucoop-app .sidebar-wrapper .logo-wrapper, .temucoop-app .sidebar-wrapper .logo-icon-wrapper { background: transparent; border-bottom: 1px solid var(--ac-border); } .temucoop-app .ac-brand-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ac-radius-sm); background: var(--ac-primary-soft); color: var(--ac-primary-dark); } .temucoop-app .ac-brand-badge .ac-icon { width: 20px; height: 20px; } .temucoop-app .ac-brand-badge-mobile { width: 38px; height: 38px; } .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-link, .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-submenu li a { border-radius: var(--ac-radius-sm); transition: background-color .15s ease, color .15s ease; } .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-link:hover, .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-submenu li a:hover { background: var(--ac-surface-alt); } .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-link.active { background: var(--ac-primary-soft) !important; } .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-link.active span, .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-link.active .ac-icon { color: var(--ac-primary-dark) !important; stroke: var(--ac-primary-dark) !important; } /* Etiquetas de sección: texto simple, sin bloques beige ni cajas */ .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main-title { display: block !important; margin: 22px 16px 8px !important; } .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main-title > div { display: block !important; padding: 0 4px !important; background: none !important; border: none !important; } .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main-title h6 { display: block !important; margin: 0 !important; color: var(--ac-muted) !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; line-height: 1.2 !important; text-transform: uppercase !important; opacity: 1 !important; visibility: visible !important; } .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-link span, .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-submenu li a { color: var(--ac-ink) !important; font-weight: 600 !important; font-size: 0.92rem !important; } .temucoop-app .page-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-link .ac-icon { color: var(--ac-muted) !important; stroke: var(--ac-muted) !important; width: 19px; height: 19px; } /* Items sin funcionalidad todavía (Documentos / Ayuda) */ .temucoop-app .ac-sidebar-soon .sidebar-link { cursor: default; opacity: 0.72; } .temucoop-app .ac-sidebar-soon .sidebar-link:hover { background: transparent; } .temucoop-app .ac-soon-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--ac-surface-alt); border: 1px solid var(--ac-border); color: var(--ac-muted); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; } /* Widget de ayuda al pie del sidebar */ .temucoop-app .ac-sidebar-help { margin: 18px 16px 20px; padding: 16px; border-radius: var(--ac-radius-md); background: var(--ac-surface-alt); border: 1px solid var(--ac-border); } .temucoop-app .ac-sidebar-help-title { margin: 0 0 2px; font-size: 0.85rem; font-weight: 700; color: var(--ac-ink); } .temucoop-app .ac-sidebar-help-text { margin: 0 0 12px; font-size: 0.78rem; color: var(--ac-muted); } .temucoop-app .ac-sidebar-help-btn { display: block; width: 100%; padding: 8px 12px; border-radius: var(--ac-radius-sm); background: var(--ac-primary); color: #fff !important; font-size: 0.82rem; font-weight: 700; text-align: center; text-decoration: none; } .temucoop-app .ac-sidebar-help-btn:hover { background: var(--ac-primary-dark); } @media (max-width: 991px) { .temucoop-app .ac-sidebar-help { display: none; } } .temucoop-app .page-title h3 { color: var(--ac-ink); font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.05; } .temucoop-app .page-title p { margin: 12px 0 0; color: var(--ac-muted); font-size: 1rem; max-width: 720px; } .temucoop-app .ac-bank-banner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.72fr); gap: 22px; align-items: stretch; margin-bottom: 26px; } .temucoop-app .ac-bank-banner-copy, .temucoop-app .ac-bank-banner-amount { border: 1px solid rgba(33, 147, 62, 0.12); border-radius: 30px; box-shadow: var(--ac-shadow); } .temucoop-app .ac-bank-banner-copy { padding: 30px 32px; background: radial-gradient(circle at top right, rgba(182, 139, 47, 0.08), transparent 22%), linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,249,241,0.96)); } .temucoop-app .ac-bank-banner-copy h3 { margin: 8px 0 10px; font-size: clamp(2rem, 4vw, 3rem); line-height: 0.98; letter-spacing: -0.04em; } .temucoop-app .ac-bank-banner-copy p { margin: 0; max-width: 42rem; font-size: 1.05rem; line-height: 1.7; color: var(--ac-muted); } .temucoop-app .ac-bank-banner-date { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid rgba(33, 147, 62, 0.12); color: var(--ac-primary-dark); font-weight: 700; } .temucoop-app .ac-bank-banner-amount { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 28px; background: radial-gradient(circle at top right, rgba(255,255,255,0.16), transparent 24%), linear-gradient(145deg, #115222 0%, #1b7d34 42%, #21933e 100%); color: #fff; } .temucoop-app .ac-bank-banner-amount::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent); } .temucoop-app .ac-bank-banner-amount > * { position: relative; z-index: 1; } .temucoop-app .ac-bank-banner-amount small { display: block; margin-bottom: 10px; color: rgba(255,255,255,0.76); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; } .temucoop-app .ac-bank-banner-amount strong { display: block; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 0.95; letter-spacing: -0.05em; } .temucoop-app .ac-bank-banner-amount span { display: block; margin-top: 12px; color: rgba(255,255,255,0.82); font-weight: 600; } .temucoop-app .ac-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 8px 14px; border-radius: 999px; background: var(--ac-primary-soft); color: var(--ac-primary-dark); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .temucoop-app .ac-summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; } .temucoop-app .ac-mini-tile { padding: 18px 20px; border: 1px solid rgba(33, 147, 62, 0.12); border-radius: 22px; background: rgba(255,255,255,0.92); box-shadow: var(--ac-shadow); } .temucoop-app .ac-mini-label { display: block; margin-bottom: 10px; color: var(--ac-muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .temucoop-app .ac-mini-tile strong { display: block; color: var(--ac-ink); font-size: 1.4rem; line-height: 1.1; } .temucoop-app .ac-panel-card, .temucoop-app .ac-promo-card, .temucoop-app .modal-content { border: 1px solid var(--ac-border); border-radius: 26px; background: rgba(255, 255, 255, 0.92); box-shadow: var(--ac-shadow); } .temucoop-app .ac-promo-card { overflow: hidden; } .temucoop-app .ac-secondary-band { margin-top: 22px; } .temucoop-app .ac-panel-primary { overflow: hidden; } .temucoop-app .ac-table-card { margin-bottom: 0; } .temucoop-app .ac-panel-primary::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(182, 139, 47, 0.08), transparent 20%), linear-gradient(180deg, rgba(33, 147, 62, 0.02), transparent 42%); pointer-events: none; } .temucoop-app .ac-promo-card img { width: 100%; height: 100%; border-radius: 22px; object-fit: cover; } .temucoop-app .ac-promo-content { display: flex; flex-direction: column; justify-content: center; padding: 26px 28px; } .temucoop-app .ac-mobile-banner { position: relative; overflow: hidden; padding: 24px 28px; border: 1px solid rgba(33, 147, 62, 0.12); border-radius: 28px; background: radial-gradient(circle at top right, rgba(182, 139, 47, 0.12), transparent 20%), linear-gradient(180deg, rgba(255,255,255,0.95), rgba(247,250,242,0.95)); box-shadow: var(--ac-shadow); } .temucoop-app .ac-mobile-banner h5 { margin: 0 0 8px; color: var(--ac-ink); font-size: 1.5rem; } .temucoop-app .ac-mobile-banner p { margin: 0; max-width: 58rem; color: var(--ac-muted); } .temucoop-app .ac-mobile-banner-glow { position: absolute; top: -40px; right: -20px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(129, 207, 55, 0.18), transparent 68%); pointer-events: none; } .temucoop-app .ac-mobile-cards { display: grid; gap: 12px; margin-top: 18px; } .temucoop-app .ac-info-card { padding: 18px 20px; border-radius: 22px; color: #fff; box-shadow: 0 18px 34px rgba(25, 40, 5, 0.14); } .temucoop-app .ac-info-card h6 { margin: 8px 0 0; font-size: 1.4rem; } .temucoop-app .ac-info-capital { background: linear-gradient(135deg, #3f5f00 0%, #21933e 55%, #89b02e 100%); } .temucoop-app .ac-info-progress { background: linear-gradient(135deg, #7d5f12 0%, #b68b2f 55%, #d0ad57 100%); } .temucoop-app .ac-promo-content h5, .temucoop-app .ac-panel-heading h5 { margin-bottom: 8px; color: var(--ac-ink); font-size: 1.35rem; } .temucoop-app .ac-panel-heading { align-items: center; gap: 16px; } .temucoop-app .ac-panel-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #eef6dd 0%, #dbe9b5 100%); border: 1px solid rgba(33, 147, 62, 0.16); color: var(--ac-primary-dark); box-shadow: 0 12px 22px rgba(38, 58, 13, 0.1); } .temucoop-app .ac-panel-mark i { font-size: 1.2rem; } .temucoop-app .ac-promo-content p, .temucoop-app .ac-panel-heading p { margin: 0; color: var(--ac-muted); line-height: 1.6; } .temucoop-app .ac-summary-stamp { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 999px; background: var(--ac-primary-soft); color: var(--ac-primary-dark); font-weight: 700; } .temucoop-app .ac-table-shell { margin-top: 26px; padding: 18px; border-radius: 22px; background: linear-gradient(180deg, #ffffff, #f7f9f2); border: 1px solid rgba(33, 147, 62, 0.08); } .temucoop-app table.dataTable thead th { border-bottom: none !important; color: var(--ac-primary-dark); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .temucoop-app table.dataTable tbody tr { transition: transform 0.2s ease, box-shadow 0.2s ease; } .temucoop-app table.dataTable tbody tr:hover { transform: translateY(-1px); } .temucoop-app table.dataTable tbody td { padding-top: 16px !important; padding-bottom: 16px !important; border-top: 1px solid rgba(33, 147, 62, 0.08) !important; color: var(--ac-ink); vertical-align: middle; } .temucoop-app .btn-detail { width: 42px; height: 42px; padding: 0; border: 1px solid rgba(33, 147, 62, 0.18); border-radius: 14px; background: #fff; color: var(--ac-primary-dark); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .temucoop-app .btn-detail:hover { transform: translateY(-2px); border-color: rgba(33, 147, 62, 0.44); box-shadow: 0 12px 24px rgba(33, 147, 62, 0.14); color: var(--ac-primary-dark); } .temucoop-app .modal-header { border-bottom: none; background: linear-gradient(135deg, var(--ac-primary-dark), var(--ac-primary)); color: #fff; } .temucoop-app .modal-footer { border-top: 1px solid rgba(33, 147, 62, 0.08); } .temucoop-app .detail-row { padding: 14px 0; border-bottom: 1px solid rgba(33, 147, 62, 0.08); } .temucoop-app .detail-row:hover { background: rgba(237, 246, 219, 0.55); } .temucoop-app .detail-label { color: var(--ac-ink); font-weight: 700; } .temucoop-app .detail-value { color: var(--ac-ink); font-weight: 600; text-align: right; } .temucoop-app .modal-concepto { padding: 18px; border-left: 4px solid var(--ac-secondary); border-radius: 16px; background: var(--ac-secondary-soft); } .temucoop-app .modal-concepto h6 { color: #7b601d; } .temucoop-app .total-row { margin-top: 18px; padding: 18px 0; border-radius: 18px; background: linear-gradient(135deg, var(--ac-primary-dark), #7da61f); color: #fff; box-shadow: 0 18px 28px rgba(33, 147, 62, 0.24); } .temucoop-app .tipo-participacion, .temucoop-app .tipo-credito, .temucoop-app .cantidad-cuotas { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-weight: 700; } .temucoop-app .tipo-participacion { background: var(--ac-primary-soft); color: var(--ac-primary-dark); } .temucoop-app .tipo-credito { background: var(--ac-secondary-soft); color: #7b601d; } .temucoop-app .cantidad-cuotas { background: rgba(11, 79, 69, 0.12); color: #0b4f45; } .temucoop-app .badge-vencido { background: #dc3545; color: #fff; } .temucoop-app .badge-proximo { background: #f4c74a; color: #3d3408; } .temucoop-app .badge-vigente { background: #2c8b5d; color: #fff; } .temucoop-app .footer { background: transparent; } .temucoop-app .footer .footer-copyright p { color: var(--ac-muted); } @media (max-width: 1199px) { .temucoop-auth .auth-visual { min-height: 360px; } .temucoop-auth .auth-copy { inset: auto 24px 24px 24px; } } @media (max-width: 991px) { .temucoop-auth .auth-panel::before { inset: 16px; } .temucoop-auth .login-main { padding: 28px 22px; } .temucoop-app .ac-bank-banner, .temucoop-app .ac-summary-strip { grid-template-columns: 1fr; } } @media (max-width: 767px) { .temucoop-auth .auth-copy h1 { font-size: 2rem; } .temucoop-app .page-title h3 { font-size: 1.9rem; } .temucoop-app .ac-table-shell { padding: 12px; } .temucoop-app .ac-bank-banner-copy, .temucoop-app .ac-bank-banner-amount, .temucoop-app .ac-mobile-banner { padding: 22px 20px; border-radius: 24px; } .temucoop-app .detail-value { text-align: left; margin-top: 8px; } } /* ============================================================ Encabezado superior — rediseño 2026-07 ============================================================ */ .temucoop-app .ac-header-wrapper { align-items: center; flex-wrap: nowrap; gap: 16px; padding: 10px 4px; } .temucoop-app .ac-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .temucoop-app .ac-mobile-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--ac-border); border-radius: var(--ac-radius-sm); background: var(--ac-surface); color: var(--ac-ink); cursor: pointer; } .temucoop-app .ac-greeting { min-width: 0; } .temucoop-app .ac-greeting-title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--ac-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .temucoop-app .ac-greeting-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 0.8rem; color: var(--ac-muted); white-space: nowrap; } .temucoop-app .ac-greeting-meta .ac-dot { opacity: 0.6; } .temucoop-app .ac-header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .temucoop-app .ac-cta-pagar { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--ac-radius-sm); background: var(--ac-primary); color: #fff; font-weight: 700; font-size: 0.88rem; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; } .temucoop-app .ac-cta-pagar:hover { background: var(--ac-primary-dark); color: #fff; } .temucoop-app .ac-cta-pagar .ac-icon { width: 16px; height: 16px; color: #fff; stroke: #fff; } .temucoop-app .ac-header-icons { display: flex; align-items: center; gap: 4px; } .temucoop-app .ac-icon-btn { position: relative; } .temucoop-app .ac-icon-btn-trigger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; border-radius: var(--ac-radius-sm); background: transparent; color: var(--ac-muted); cursor: pointer; text-decoration: none; } .temucoop-app .ac-icon-btn-trigger:hover, .temucoop-app .ac-icon-btn-trigger:focus-visible { background: var(--ac-surface-alt); color: var(--ac-ink); } .temucoop-app .ac-icon-btn-trigger .ac-icon { width: 19px; height: 19px; } /* Toggle claro/oscuro: solo un icono visible según el tema activo */ .temucoop-app .ac-icon-btn-trigger.mode .ac-icon-sun { display: none; } body.dark-only.temucoop-app .ac-icon-btn-trigger.mode .ac-icon-sun { display: inline-block; } body.dark-only.temucoop-app .ac-icon-btn-trigger.mode .ac-icon-moon { display: none; } .temucoop-app .ac-dropdown-panel { min-width: 260px; padding: 14px; border-radius: var(--ac-radius-md); background: var(--ac-surface); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow); } .temucoop-app .ac-dropdown-title { margin: 0 0 6px; font-weight: 700; font-size: 0.9rem; color: var(--ac-ink); } .temucoop-app .ac-dropdown-empty { margin: 0; font-size: 0.82rem; color: var(--ac-muted); } .temucoop-app .ac-profile-nav { position: relative; } .temucoop-app .ac-profile-trigger { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: var(--ac-radius-sm); cursor: pointer; } .temucoop-app .ac-profile-trigger:hover { background: var(--ac-surface-alt); } .temucoop-app .ac-avatar { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--ac-primary-soft); color: var(--ac-primary-dark); font-weight: 800; font-size: 0.85rem; } .temucoop-app .ac-profile-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .temucoop-app .ac-profile-name { font-size: 0.86rem; font-weight: 700; color: var(--ac-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .temucoop-app .ac-profile-sub { font-size: 0.74rem; color: var(--ac-muted); } .temucoop-app .ac-profile-caret { width: 14px; height: 14px; color: var(--ac-muted); flex-shrink: 0; } .temucoop-app .ac-profile-panel { right: 0; left: auto; min-width: 200px; padding: 6px; } .temucoop-app .ac-profile-panel li a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--ac-radius-sm); color: var(--ac-ink); font-size: 0.86rem; font-weight: 600; text-decoration: none; } .temucoop-app .ac-profile-panel li a:hover { background: var(--ac-surface-alt); } .temucoop-app .ac-profile-panel .ac-icon { width: 17px; height: 17px; color: var(--ac-muted); } @media (max-width: 1199px) { .temucoop-app .ac-mobile-toggle { display: inline-flex; } } @media (max-width: 767px) { .temucoop-app .ac-header-wrapper { flex-wrap: wrap; } .temucoop-app .ac-greeting-title { font-size: 1rem; } .temucoop-app .ac-cta-pagar span { display: none; } .temucoop-app .ac-cta-pagar { padding: 9px 12px; } .temucoop-app .ac-profile-text { display: none; } .temucoop-app .ac-profile-caret { display: none; } } /* Botón avatar móvil (oculto en desktop) */ .temucoop-app .ac-mobile-user-trigger { display: none; } /* ============================================================ Tarjeta de situación financiera ============================================================ */ .temucoop-app .ac-health-card { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--ac-radius-lg); background: var(--ac-surface); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); } .temucoop-app .ac-health-header { display: flex; align-items: center; justify-content: space-between; } .temucoop-app .ac-health-title { font-weight: 700; font-size: 0.95rem; color: var(--ac-ink); } .temucoop-app .ac-health-info { color: var(--ac-muted); cursor: help; } .temucoop-app .ac-health-body { display: flex; align-items: center; gap: 14px; } .temucoop-app .ac-health-badge { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; } .temucoop-app .ac-health-badge .ac-icon { width: 26px; height: 26px; } .temucoop-app .ac-health-badge.ac-health-excelente, .temucoop-app .ac-health-badge.ac-health-al-dia { background: var(--ac-primary-soft); color: var(--ac-primary-dark); } .temucoop-app .ac-health-badge.ac-health-atencion { background: var(--ac-warning-soft); color: var(--ac-warning); } .temucoop-app .ac-health-badge.ac-health-moroso { background: var(--ac-error-soft); color: var(--ac-error); } .temucoop-app .ac-health-status { display: flex; flex-direction: column; } .temucoop-app .ac-health-label { font-size: 0.78rem; color: var(--ac-muted); } .temucoop-app .ac-health-status strong { font-size: 1.15rem; color: var(--ac-ink); } .temucoop-app .ac-health-stats { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ac-border); } .temucoop-app .ac-health-stat { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; } .temucoop-app .ac-health-stat-label { color: var(--ac-muted); } .temucoop-app .ac-health-stat strong { color: var(--ac-ink); } /* ============================================================ Tarjetas de producto (capital social / crédito / ahorro) ============================================================ */ .temucoop-app .ac-product-card { display: flex; align-items: center; gap: 14px; height: 100%; padding: 18px; border-radius: var(--ac-radius-lg); background: var(--ac-surface); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); text-decoration: none; transition: box-shadow .15s ease, border-color .15s ease; } .temucoop-app .ac-product-card:hover, .temucoop-app .ac-product-card:focus-visible { border-color: var(--ac-primary); box-shadow: var(--ac-shadow); text-decoration: none; } .temucoop-app .ac-product-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--ac-radius-sm); background: var(--ac-primary-soft); color: var(--ac-primary-dark); } .temucoop-app .ac-product-icon .ac-icon { width: 22px; height: 22px; } .temucoop-app .ac-product-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .temucoop-app .ac-product-label { font-size: 0.78rem; color: var(--ac-muted); } .temucoop-app .ac-product-amount { font-size: 1.2rem; font-weight: 800; color: var(--ac-ink); margin: 2px 0; } .temucoop-app .ac-product-meta { font-size: 0.76rem; color: var(--ac-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .temucoop-app .ac-product-arrow { flex-shrink: 0; color: var(--ac-muted); } .temucoop-app .ac-product-arrow .ac-icon { width: 18px; height: 18px; } /* ============================================================ Listas: Próximos pagos / Movimientos recientes ============================================================ */ .temucoop-app .ac-scroll-anchor { scroll-margin-top: 110px; } .temucoop-app .ac-list-card { height: 100%; padding: 20px; border-radius: var(--ac-radius-lg); background: var(--ac-surface); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); display: flex; flex-direction: column; } .temucoop-app .ac-list-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .temucoop-app .ac-list-card-header h5 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 700; color: var(--ac-ink); } .temucoop-app .ac-list-card-icon { width: 18px; height: 18px; color: var(--ac-primary); } .temucoop-app .ac-list-card-link { font-size: 0.82rem; font-weight: 700; color: var(--ac-primary); text-decoration: none; } .temucoop-app .ac-list-card-link:hover { color: var(--ac-primary-dark); text-decoration: underline; } .temucoop-app .ac-payment-list, .temucoop-app .ac-transaction-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; } .temucoop-app .ac-payment-row, .temucoop-app .ac-transaction-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: var(--ac-radius-sm); border-bottom: 1px solid var(--ac-border); } .temucoop-app .ac-payment-row:last-child, .temucoop-app .ac-transaction-row:last-child { border-bottom: none; } .temucoop-app .ac-payment-row:hover, .temucoop-app .ac-transaction-row:hover { background: var(--ac-surface-alt); } .temucoop-app .ac-payment-check { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; } .temucoop-app .ac-payment-checkbox { width: 17px; height: 17px; accent-color: var(--ac-primary); cursor: pointer; } .temucoop-app .ac-payment-icon, .temucoop-app .ac-transaction-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--ac-primary-soft); color: var(--ac-primary-dark); } .temucoop-app .ac-transaction-icon-in { background: var(--ac-primary-soft); color: var(--ac-primary-dark); } .temucoop-app .ac-transaction-icon-out { background: var(--ac-surface-alt); color: var(--ac-muted); } .temucoop-app .ac-payment-icon .ac-icon, .temucoop-app .ac-transaction-icon .ac-icon { width: 17px; height: 17px; } .temucoop-app .ac-payment-info, .temucoop-app .ac-transaction-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .temucoop-app .ac-payment-title, .temucoop-app .ac-transaction-title { font-size: 0.86rem; font-weight: 700; color: var(--ac-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .temucoop-app .ac-payment-sub, .temucoop-app .ac-transaction-sub { font-size: 0.75rem; color: var(--ac-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .temucoop-app .ac-payment-amount { font-size: 0.88rem; font-weight: 800; color: var(--ac-ink); white-space: nowrap; flex-shrink: 0; } .temucoop-app .ac-transaction-amount { font-size: 0.88rem; font-weight: 800; white-space: nowrap; flex-shrink: 0; } .temucoop-app .ac-transaction-amount-in { color: var(--ac-primary-dark); } .temucoop-app .ac-transaction-amount-out { color: var(--ac-ink); } .temucoop-app .ac-payment-detail-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border: none; border-radius: var(--ac-radius-sm); background: transparent; color: var(--ac-muted); cursor: pointer; } .temucoop-app .ac-payment-detail-btn:hover, .temucoop-app .ac-payment-detail-btn:focus-visible { background: var(--ac-surface-alt); color: var(--ac-primary-dark); } .temucoop-app .ac-payment-detail-btn .ac-icon { width: 16px; height: 16px; } .temucoop-app .ac-payment-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ac-border); font-size: 0.85rem; } .temucoop-app .ac-payment-total { color: var(--ac-muted); } .temucoop-app .ac-payment-total strong { color: var(--ac-ink); } .temucoop-app .ac-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; color: var(--ac-muted); text-align: center; } .temucoop-app .ac-empty-state .ac-icon { width: 32px; height: 32px; opacity: 0.5; } .temucoop-app .ac-empty-state p { margin: 0; font-size: 0.86rem; } @media (max-width: 767px) { .temucoop-app .ac-health-card { margin-top: 4px; } .temucoop-app .ac-payment-footer { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ============================================================ Modal Cambiar contraseña ============================================================ */ .temucoop-app .ac-password-field { position: relative; display: flex; align-items: center; } .temucoop-app .ac-password-field .form-control { padding-right: 42px; } .temucoop-app .ac-password-toggle-btn { position: absolute; right: 8px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--ac-radius-sm); background: transparent; color: var(--ac-muted); cursor: pointer; } .temucoop-app .ac-password-toggle-btn:hover, .temucoop-app .ac-password-toggle-btn:focus-visible { background: var(--ac-surface-alt); color: var(--ac-ink); } .temucoop-app .ac-password-toggle-btn .ac-icon { width: 17px; height: 17px; } .temucoop-app .ac-inline-feedback { margin-bottom: 14px; padding: 10px 14px; border-radius: var(--ac-radius-sm); font-size: 0.85rem; font-weight: 600; } .temucoop-app .ac-inline-feedback.ac-feedback-ok { background: var(--ac-primary-soft); color: var(--ac-primary-dark); } .temucoop-app .ac-inline-feedback.ac-feedback-error { background: var(--ac-error-soft); color: var(--ac-error); } /* ============================================================ Tarjetas seleccionables (ej. modalidad de remanente) ============================================================ */ .ac-choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .ac-choice-card { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: var(--ac-radius-lg, 16px); background: var(--ac-surface, #fff); border: 2px solid var(--ac-border, #e3e9e1); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; margin: 0; } .ac-choice-card:hover { border-color: var(--ac-primary, #21933e); box-shadow: var(--ac-shadow-sm, 0 2px 10px rgba(23,33,26,.06)); } .ac-choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .ac-choice-input:focus-visible ~ .ac-choice-check, .ac-choice-card:focus-within { outline: 2px solid var(--ac-primary, #21933e); outline-offset: 2px; } .ac-choice-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--ac-radius-sm, 12px); background: var(--ac-primary-soft, #e9f7ed); color: var(--ac-primary-dark, #115222); } .ac-choice-icon .ac-icon { width: 22px; height: 22px; } .ac-choice-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 24px; } .ac-choice-title { font-weight: 700; font-size: 0.98rem; color: var(--ac-ink, #17211a); } .ac-choice-desc { font-size: 0.82rem; line-height: 1.4; color: var(--ac-muted, #667268); } .ac-choice-check { position: absolute; top: 16px; right: 16px; display: flex; color: var(--ac-border, #e3e9e1); opacity: 0.5; } .ac-choice-check .ac-icon { width: 20px; height: 20px; } .ac-choice-input:checked ~ .ac-choice-check { color: var(--ac-primary, #21933e); opacity: 1; } .ac-choice-input:checked ~ .ac-choice-icon { background: var(--ac-primary, #21933e); color: #fff; } .ac-choice-card:has(.ac-choice-input:checked), .ac-choice-card.is-selected { border-color: var(--ac-primary, #21933e); background: var(--ac-primary-soft, #e9f7ed); box-shadow: var(--ac-shadow-sm, 0 2px 10px rgba(23,33,26,.06)); } /* ============================================================ Modal de Éxito Corporativo (reemplaza alert-success) ============================================================ */ .ac-success-modal .modal-dialog { max-width: 440px; } .ac-success-modal .modal-content { border: none; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 60px rgba(23, 33, 26, 0.18); } .ac-success-modal .ac-success-header { position: relative; display: flex; flex-direction: column; align-items: center; padding: 36px 28px 28px; background: linear-gradient(145deg, var(--ac-primary-dark) 0%, var(--ac-primary) 60%, #7da61f 100%); color: #fff; text-align: center; overflow: hidden; } .ac-success-modal .ac-success-header::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12), transparent 50%), radial-gradient(circle at 80% 70%, rgba(182, 139, 47, 0.15), transparent 40%); pointer-events: none; } .ac-success-modal .ac-success-header > * { position: relative; z-index: 1; } .ac-success-modal .ac-success-check-ring { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin-bottom: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); animation: ac-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .ac-success-modal .ac-success-check-ring svg { width: 42px; height: 42px; } .ac-success-modal .ac-success-check-ring .ac-check-path { stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 50; stroke-dashoffset: 50; animation: ac-check-draw 0.6s 0.3s ease forwards; } @keyframes ac-success-pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes ac-check-draw { to { stroke-dashoffset: 0; } } .ac-success-modal .ac-success-title { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; } .ac-success-modal .ac-success-subtitle { margin: 6px 0 0; font-size: 0.88rem; color: rgba(255, 255, 255, 0.82); font-weight: 500; } .ac-success-modal .ac-success-body { padding: 24px 28px 20px; text-align: center; } .ac-success-modal .ac-success-msg { margin: 0 0 8px; font-size: 0.95rem; line-height: 1.65; color: var(--ac-ink); } .ac-success-modal .ac-success-msg strong { color: var(--ac-primary-dark); } .ac-success-modal .ac-success-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ac-primary-soft); color: var(--ac-primary-dark); font-size: 0.8rem; font-weight: 700; } .ac-success-modal .ac-success-hint .ac-icon { width: 15px; height: 15px; } .ac-success-modal .ac-success-footer { padding: 0 28px 28px; text-align: center; border-top: none; } .ac-success-modal .ac-success-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 180px; padding: 13px 28px; border: none; border-radius: var(--ac-radius-sm); background: linear-gradient(135deg, var(--ac-primary), var(--ac-primary-dark)); color: #fff; font-size: 0.95rem; font-weight: 700; cursor: pointer; box-shadow: 0 12px 24px rgba(33, 147, 62, 0.24); transition: transform 0.15s ease, box-shadow 0.15s ease; } .ac-success-modal .ac-success-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(33, 147, 62, 0.3); } .ac-success-modal .ac-success-btn .ac-icon { width: 17px; height: 17px; } /* Confetti decorative dots */ .ac-success-modal .ac-success-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .ac-success-modal .ac-success-confetti span { position: absolute; width: 6px; height: 6px; border-radius: 50%; opacity: 0; animation: ac-confetti-float 1.5s ease forwards; } .ac-success-modal .ac-success-confetti span:nth-child(1) { left: 15%; top: 20%; background: rgba(255,255,255,0.5); animation-delay: 0.2s; } .ac-success-modal .ac-success-confetti span:nth-child(2) { left: 80%; top: 15%; background: rgba(182,139,47,0.5); animation-delay: 0.35s; } .ac-success-modal .ac-success-confetti span:nth-child(3) { left: 25%; top: 75%; background: rgba(255,255,255,0.4); animation-delay: 0.5s; width: 4px; height: 4px; } .ac-success-modal .ac-success-confetti span:nth-child(4) { left: 70%; top: 65%; background: rgba(255,255,255,0.35); animation-delay: 0.65s; } .ac-success-modal .ac-success-confetti span:nth-child(5) { left: 50%; top: 10%; background: rgba(182,139,47,0.4); animation-delay: 0.4s; width: 5px; height: 5px; } @keyframes ac-confetti-float { 0% { opacity: 0; transform: translateY(10px) scale(0); } 40% { opacity: 1; transform: translateY(-8px) scale(1.2); } 100% { opacity: 0; transform: translateY(-30px) scale(0.6); } } /* ============================================================ Menú Móvil Off-Canvas (usuario) ============================================================ */ .ac-mobile-user-menu { display: none; } @media (max-width: 767px) { /* Ocultar iconos sueltos del header y perfil en móvil */ .temucoop-app .ac-header-icons { display: none !important; } .temucoop-app .ac-profile-nav .ac-profile-trigger .ac-profile-text, .temucoop-app .ac-profile-nav .ac-profile-trigger .ac-profile-caret { display: none; } /* Botón avatar que abre el menú móvil */ .temucoop-app .ac-mobile-user-trigger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%; background: var(--ac-primary-soft); color: var(--ac-primary-dark); font-weight: 800; font-size: 0.85rem; cursor: pointer; flex-shrink: 0; } /* Panel off-canvas */ .ac-mobile-user-menu { display: block; position: fixed; top: 0; right: -100%; width: min(320px, 85vw); height: 100vh; height: 100dvh; z-index: 9999; background: var(--ac-surface); box-shadow: -8px 0 40px rgba(23, 33, 26, 0.18); transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; } .ac-mobile-user-menu.is-open { right: 0; } .ac-mobile-user-backdrop { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(23, 33, 26, 0.4); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease; } .ac-mobile-user-backdrop.is-visible { display: block; opacity: 1; } .ac-mobile-menu-header { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--ac-border); } .ac-mobile-menu-avatar { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--ac-primary), var(--ac-primary-dark)); color: #fff; font-weight: 800; font-size: 1rem; } .ac-mobile-menu-user { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ac-mobile-menu-name { font-size: 1rem; font-weight: 800; color: var(--ac-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-mobile-menu-sub { font-size: 0.8rem; color: var(--ac-muted); } .ac-mobile-menu-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--ac-border); border-radius: 50%; background: var(--ac-surface); color: var(--ac-muted); cursor: pointer; margin-left: auto; } .ac-mobile-menu-close:hover { background: var(--ac-surface-alt); color: var(--ac-ink); } .ac-mobile-menu-close .ac-icon { width: 18px; height: 18px; } .ac-mobile-menu-section { padding: 12px 16px 4px; } .ac-mobile-menu-section-title { display: block; margin-bottom: 8px; font-size: 0.72rem; font-weight: 700; color: var(--ac-muted); letter-spacing: 0.06em; text-transform: uppercase; } .ac-mobile-menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: var(--ac-radius-sm); color: var(--ac-ink); font-size: 0.92rem; font-weight: 600; text-decoration: none; cursor: pointer; border: none; background: none; width: 100%; text-align: left; } .ac-mobile-menu-item:hover, .ac-mobile-menu-item:focus-visible { background: var(--ac-surface-alt); text-decoration: none; color: var(--ac-ink); } .ac-mobile-menu-item .ac-icon { width: 20px; height: 20px; color: var(--ac-muted); flex-shrink: 0; } .ac-mobile-menu-item-label { flex: 1; } .ac-mobile-menu-item-meta { font-size: 0.76rem; color: var(--ac-muted); font-weight: 500; } .ac-mobile-menu-divider { margin: 8px 16px; border: none; border-top: 1px solid var(--ac-border); } .ac-mobile-menu-item-danger { color: var(--ac-error); } .ac-mobile-menu-item-danger .ac-icon { color: var(--ac-error); } /* Ocultar perfil desktop dropdown en móvil */ .temucoop-app .ac-profile-nav { display: none !important; } }