/* ══════════════════════════════════════════════════════════════
VISUAL BOOST v4.1 PREMIUM — Opotrinchera
Incluir DESPUÉS de main-principal.css
NOTA: añade en del HTML base para las fuentes:
══════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────────
1. FONDO — Atmósfera premium
────────────────────────────────────────────────────────────── */
body {
background:
radial-gradient(ellipse 90% 70% at 0% 0%, rgba(8,112,33,0.09) 0%, transparent 55%),
radial-gradient(ellipse 80% 60% at 100% 100%, rgba(6,182,212,0.06) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 50% 80%, rgba(8,112,33,0.04) 0%, transparent 60%),
linear-gradient(160deg, #f0fdf4 0%, #f0f9ff 60%, #f8fafc 100%) !important;
background-attachment: fixed !important;
}
/* Dot grid — pointer-events: none CRÍTICO para no bloquear clics */
body::after {
content: '';
position: fixed;
inset: 0;
background-image: radial-gradient(circle, rgba(8,112,33,0.045) 1px, transparent 1px);
background-size: 30px 30px;
pointer-events: none !important;
z-index: 0;
}
/* body::after (dot grid) ya tiene pointer-events:none — .modern-container
NO necesita z-index. Ponerlo crea un stacking context que atrapa el modal
de Bootstrap y rompe el backdrop (Aceptar queda tapado e inaccessible). */
.universal-navbar {
position: relative;
z-index: 1;
}
/* ──────────────────────────────────────────────────────────────
2. MAIN-HEADER
────────────────────────────────────────────────────────────── */
.main-header {
background: linear-gradient(135deg, #040a12 0%, #081a0e 45%, #060b1a 100%) !important;
box-shadow:
0 20px 70px rgba(0,0,0,0.5),
0 0 0 1px rgba(34,197,94,0.14),
0 0 80px rgba(8,112,33,0.08),
inset 0 1px 0 rgba(255,255,255,0.07) !important;
border-radius: 24px !important;
padding: 3.2rem 3rem !important;
position: relative;
overflow: hidden;
}
.main-header::after {
background: radial-gradient(ellipse, rgba(8,112,33,0.38) 0%, rgba(34,197,94,0.1) 40%, transparent 70%) !important;
width: 750px !important;
height: 340px !important;
animation: header-pulse 5s ease-in-out infinite;
pointer-events: none !important;
}
@keyframes header-pulse {
0%, 100% { opacity: 0.65; transform: translate(-50%,-50%) scale(1); }
50% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
}
.main-header::before {
background-image: radial-gradient(circle, rgba(34,197,94,0.1) 1px, transparent 1px) !important;
background-size: 26px 26px !important;
animation: grid-drift 25s linear infinite;
pointer-events: none !important;
}
@keyframes grid-drift {
0% { background-position: 0 0; }
100% { background-position: 26px 26px; }
}
.main-header h1 {
font-size: 2.7rem !important;
font-weight: 800 !important;
letter-spacing: -1px !important;
text-shadow: 0 0 50px rgba(34,197,94,0.4), 0 2px 24px rgba(0,0,0,0.5) !important;
line-height: 1.15 !important;
}
.main-header h1 i {
filter: drop-shadow(0 0 18px rgba(74,222,128,0.9)) !important;
}
.main-header p {
color: rgba(255,255,255,0.6) !important;
font-size: 1.05rem !important;
line-height: 1.6;
}
/* ──────────────────────────────────────────────────────────────
3. MODERN-CARD
────────────────────────────────────────────────────────────── */
.modern-card {
background: #ffffff !important;
border-radius: 20px !important;
box-shadow:
0 2px 4px rgba(0,0,0,0.03),
0 8px 28px rgba(8,112,33,0.09),
0 0 0 1px rgba(8,112,33,0.07) !important;
transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s cubic-bezier(.4,0,.2,1) !important;
overflow: hidden !important;
}
.modern-card:hover {
transform: translateY(-6px) !important;
box-shadow:
0 4px 8px rgba(0,0,0,0.05),
0 20px 50px rgba(8,112,33,0.15),
0 0 0 1px rgba(8,112,33,0.1) !important;
}
.modern-card::before {
height: 3.5px !important;
background: linear-gradient(90deg, #065318 0%, #22c55e 50%, #4ade80 100%) !important;
pointer-events: none !important;
}
/* ──────────────────────────────────────────────────────────────
4. CARD HEADERS
────────────────────────────────────────────────────────────── */
.card-header-modern {
background: linear-gradient(135deg, #0a1c10 0%, #0d2a18 55%, #091623 100%) !important;
border-bottom: none !important;
padding: 1rem 1.4rem !important;
position: relative;
overflow: hidden;
}
.card-header-modern::after {
content: '';
position: absolute;
top: -20px; right: -20px;
width: 90px; height: 90px;
background: radial-gradient(circle, rgba(34,197,94,0.2) 0%, transparent 70%);
pointer-events: none !important;
}
.card-header-modern h4 {
font-size: 0.86rem !important;
font-weight: 700 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
margin: 0 !important;
}
.card-header-modern h4 i {
color: #4ade80 !important;
font-size: 1rem !important;
filter: drop-shadow(0 0 5px rgba(74,222,128,0.6));
}
/* ──────────────────────────────────────────────────────────────
5. CARD BODY
────────────────────────────────────────────────────────────── */
.card-body-modern {
padding: 1.4rem 1.3rem !important;
}
.modern-card .text-muted {
color: #4b5563 !important;
font-size: 0.85rem !important;
line-height: 1.55 !important;
}
.form-label {
color: #1f2937 !important;
font-weight: 600 !important;
font-size: 0.84rem !important;
}
/* ──────────────────────────────────────────────────────────────
6. FEATURED-CARD (Personalizar Cuestionario)
────────────────────────────────────────────────────────────── */
.featured-card {
background: linear-gradient(145deg, #110a03 0%, #1d0f07 35%, #130f00 70%, #0d0c02 100%) !important;
box-shadow:
0 4px 10px rgba(0,0,0,0.25),
0 20px 55px rgba(0,0,0,0.4),
0 0 0 1px rgba(251,191,36,0.22),
inset 0 1px 0 rgba(251,191,36,0.09) !important;
}
.featured-card::before {
height: 3.5px !important;
background: linear-gradient(90deg, #92400e, #d97706, #fbbf24, #fde68a, #fbbf24, #d97706, #92400e) !important;
background-size: 200% 100% !important;
animation: gold-shift 3s linear infinite;
box-shadow: 0 2px 12px rgba(251,191,36,0.55) !important;
pointer-events: none !important;
}
@keyframes gold-shift {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.featured-card .card-header-modern {
background: linear-gradient(135deg, #180c02 0%, #221202 100%) !important;
border-bottom: 1px solid rgba(251,191,36,0.14) !important;
}
.featured-card .card-header-modern h4 {
background: linear-gradient(90deg, #fde68a, #fbbf24, #f59e0b, #d97706) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.featured-card .card-header-modern h4 i {
color: #fbbf24 !important;
-webkit-text-fill-color: #fbbf24 !important;
filter: drop-shadow(0 0 6px rgba(251,191,36,0.7)) !important;
}
/* ──────────────────────────────────────────────────────────────
7. HEADERS DE COLOR
────────────────────────────────────────────────────────────── */
.card-header-modern.text-bg-danger {
background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%) !important;
}
.card-header-modern.text-bg-danger h4,
.card-header-modern.text-bg-danger h4 i {
color: #fff !important; -webkit-text-fill-color: #fff !important; filter: none !important;
}
.card-header-modern.text-bg-warning {
background: linear-gradient(135deg, #b45309 0%, #78350f 100%) !important;
}
.card-header-modern.text-bg-warning h4,
.card-header-modern.text-bg-warning h4 i {
color: #fff !important; -webkit-text-fill-color: #fff !important; filter: none !important;
}
.card-header-modern.text-bg-success {
background: linear-gradient(135deg, #065f46 0%, #064e3b 100%) !important;
}
.card-header-modern.text-bg-success h4,
.card-header-modern.text-bg-success h4 i {
color: #fff !important; -webkit-text-fill-color: #fff !important; filter: none !important;
}
.card-header-modern.admin-tools.text-bg-info {
background: linear-gradient(135deg, #075985 0%, #0c4a6e 100%) !important;
}
.card-header-modern.admin-tools.text-bg-info h4,
.card-header-modern.admin-tools.text-bg-info h4 i {
color: #fff !important; -webkit-text-fill-color: #fff !important; filter: none !important;
}
.card-header-modern.text-bg-danger::after,
.card-header-modern.text-bg-warning::after,
.card-header-modern.text-bg-success::after,
.card-header-modern.admin-tools.text-bg-info::after { display: none !important; }
/* ──────────────────────────────────────────────────────────────
8. CARD PROPUESTAS
────────────────────────────────────────────────────────────── */
.card-propuestas {
background: #fff !important;
border: 1px solid rgba(124,58,237,0.1) !important;
box-shadow: 0 2px 16px rgba(124,58,237,0.08), 0 0 0 1px rgba(124,58,237,0.07) !important;
}
.card-propuestas::before {
background: linear-gradient(90deg, #5b21b6, #7c3aed, #a855f7, #7c3aed, #5b21b6) !important;
pointer-events: none !important;
}
.card-propuestas:hover {
box-shadow: 0 14px 44px rgba(124,58,237,0.18), 0 0 0 1px rgba(124,58,237,0.14) !important;
}
.card-header-translucent {
background: linear-gradient(135deg, #1a0e30 0%, #140a24 100%) !important;
border-bottom: 1px solid rgba(124,58,237,0.18) !important;
}
.card-header-translucent::after { display: none !important; }
.text-gradient-purple {
background: linear-gradient(135deg, #ddd6fe, #c4b5fd, #a78bfa) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
font-weight: 700 !important;
}
.icon-purple {
color: #a78bfa !important;
filter: drop-shadow(0 0 5px rgba(167,139,250,0.6)) !important;
}
/* ══════════════════════════════════════════════════════════════
████████████████████████████████████████████████████████████
██ B O T O N E S P R E M I U M ██
██ REGLA DE ORO: todos los ::before/::after llevan ██
██ pointer-events: none !important ██
████████████████████████████████████████████████████████████
══════════════════════════════════════════════════════════════ */
/* ── BASE ────────────────────────────────────────────────────── */
.btn-modern {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.45rem !important;
border: none !important;
border-radius: 12px !important;
font-size: 0.84rem !important;
font-weight: 700 !important;
letter-spacing: 0.2px !important;
padding: 0.72rem 1.1rem !important;
cursor: pointer !important;
text-decoration: none !important;
color: #ffffff !important;
overflow: hidden !important;
white-space: normal !important;
word-break: break-word !important;
line-height: 1.3 !important;
min-height: 42px !important;
transition:
transform 0.22s cubic-bezier(.4,0,.2,1),
box-shadow 0.22s cubic-bezier(.4,0,.2,1),
filter 0.22s ease !important;
-webkit-font-smoothing: antialiased;
}
/* Shimmer */
.btn-modern::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: -120% !important;
width: 60% !important; height: 100% !important;
background: linear-gradient(
105deg,
transparent 20%,
rgba(255,255,255,0.26) 50%,
transparent 80%
) !important;
transform: skewX(-18deg) !important;
transition: left 0.5s ease !important;
pointer-events: none !important;
z-index: 1 !important;
}
.btn-modern:hover::before { left: 160% !important; }
/* Highlight top line */
.btn-modern::after {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 8% !important;
width: 84% !important; height: 1px !important;
background: rgba(255,255,255,0.32) !important;
border-radius: 0 0 2px 2px !important;
pointer-events: none !important;
z-index: 1 !important;
}
.btn-modern:hover {
transform: translateY(-3px) !important;
text-decoration: none !important;
color: #fff !important;
filter: brightness(1.06) !important;
}
.btn-modern:active {
transform: translateY(-1px) !important;
filter: brightness(0.97) !important;
}
.btn-modern i {
font-size: 1rem !important;
flex-shrink: 0 !important;
}
/* ── VERDE PRIMARIO ───────────────────────────────────────────── */
.btn-primary-modern {
background: linear-gradient(160deg, #0d9e35 0%, #087021 50%, #055a1b 100%) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.18) inset,
0 -1px 0 rgba(0,0,0,0.2) inset,
0 5px 18px rgba(8,112,33,0.42),
0 1px 4px rgba(8,112,33,0.28) !important;
}
.btn-primary-modern:hover {
box-shadow:
0 1px 0 rgba(255,255,255,0.18) inset,
0 -1px 0 rgba(0,0,0,0.2) inset,
0 10px 30px rgba(8,112,33,0.56),
0 2px 8px rgba(8,112,33,0.38),
0 0 0 3px rgba(8,112,33,0.14) !important;
}
/* ── VERDE ÉXITO ──────────────────────────────────────────────── */
.btn-success-modern {
background: linear-gradient(160deg, #10b981 0%, #059669 50%, #047857 100%) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.18) inset,
0 -1px 0 rgba(0,0,0,0.2) inset,
0 5px 18px rgba(5,150,105,0.42),
0 1px 4px rgba(5,150,105,0.28) !important;
}
.btn-success-modern:hover {
box-shadow:
0 1px 0 rgba(255,255,255,0.18) inset,
0 -1px 0 rgba(0,0,0,0.2) inset,
0 10px 30px rgba(5,150,105,0.55),
0 2px 8px rgba(5,150,105,0.36),
0 0 0 3px rgba(5,150,105,0.14) !important;
}
/* ── ÁMBAR / WARNING ──────────────────────────────────────────── */
.btn-warning-modern {
background: linear-gradient(160deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.22) inset,
0 -1px 0 rgba(0,0,0,0.18) inset,
0 5px 18px rgba(217,119,6,0.42),
0 1px 4px rgba(217,119,6,0.28) !important;
}
.btn-warning-modern:hover {
box-shadow:
0 1px 0 rgba(255,255,255,0.22) inset,
0 -1px 0 rgba(0,0,0,0.18) inset,
0 10px 30px rgba(217,119,6,0.56),
0 2px 8px rgba(217,119,6,0.38),
0 0 0 3px rgba(217,119,6,0.18) !important;
}
/* ── MORADO ───────────────────────────────────────────────────── */
.btn-purple-modern {
background: linear-gradient(160deg, #8b5cf6 0%, #7c3aed 50%, #5b21b6 100%) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.18) inset,
0 -1px 0 rgba(0,0,0,0.2) inset,
0 5px 18px rgba(124,58,237,0.42),
0 1px 4px rgba(124,58,237,0.28) !important;
}
.btn-purple-modern:hover {
box-shadow:
0 1px 0 rgba(255,255,255,0.18) inset,
0 -1px 0 rgba(0,0,0,0.2) inset,
0 10px 30px rgba(124,58,237,0.56),
0 2px 8px rgba(124,58,237,0.38),
0 0 0 3px rgba(124,58,237,0.18) !important;
}
/* ── OUTLINE ──────────────────────────────────────────────────── */
.btn-outline-modern {
background: transparent !important;
border: 1.5px solid rgba(8,112,33,0.35) !important;
color: #065318 !important;
box-shadow: 0 2px 8px rgba(8,112,33,0.08) !important;
}
.btn-outline-modern:hover {
background: rgba(8,112,33,0.07) !important;
border-color: rgba(8,112,33,0.6) !important;
color: #065318 !important;
box-shadow: 0 4px 14px rgba(8,112,33,0.16) !important;
}
.btn-outline-modern::before,
.btn-outline-modern::after { display: none !important; }
/* ──────────────────────────────────────────────────────────────
BOTÓN ADMIN OPOTRINCHERA
────────────────────────────────────────────────────────────── */
.btn-admin-opotrinchera {
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 0.6rem !important;
width: 100% !important;
padding: 0.85rem 1.1rem !important;
border: none !important;
border-radius: 13px !important;
font-size: 0.82rem !important;
font-weight: 800 !important;
letter-spacing: 0.4px !important;
text-transform: uppercase !important;
color: #ffffff !important;
text-decoration: none !important;
cursor: pointer !important;
overflow: hidden !important;
white-space: normal !important;
word-break: break-word !important;
line-height: 1.3 !important;
background: linear-gradient(135deg, #0a0f1e 0%, #0d2010 30%, #0a1628 60%, #070f08 100%) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.12) inset,
0 -1px 0 rgba(0,0,0,0.3) inset,
0 6px 24px rgba(0,0,0,0.45),
0 0 0 1px rgba(34,197,94,0.25) !important;
transition: all 0.3s cubic-bezier(.4,0,.2,1) !important;
}
.btn-admin-opotrinchera::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: -120% !important;
width: 60% !important; height: 100% !important;
background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.14) 50%, transparent 80%) !important;
transform: skewX(-18deg) !important;
transition: left 0.55s ease !important;
pointer-events: none !important;
z-index: 1 !important;
}
.btn-admin-opotrinchera:hover::before { left: 160% !important; }
.btn-admin-opotrinchera::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important; left: 0 !important;
width: 0 !important; height: 2px !important;
background: linear-gradient(90deg, #22c55e, #4ade80) !important;
transition: width 0.3s ease !important;
pointer-events: none !important;
z-index: 1 !important;
}
.btn-admin-opotrinchera:hover::after { width: 100% !important; }
.btn-admin-opotrinchera:hover {
transform: translateY(-3px) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.12) inset,
0 -1px 0 rgba(0,0,0,0.3) inset,
0 14px 40px rgba(0,0,0,0.55),
0 0 0 1px rgba(34,197,94,0.45) !important;
color: #fff !important;
text-decoration: none !important;
}
.adm-staff-badge {
margin-left: auto !important;
background: rgba(34,197,94,0.2) !important;
border: 1px solid rgba(34,197,94,0.4) !important;
color: #4ade80 !important;
padding: 0.15rem 0.5rem !important;
border-radius: 6px !important;
font-size: 0.62rem !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* ──────────────────────────────────────────────────────────────
BOTONES UNIVERSAL NAVBAR
────────────────────────────────────────────────────────────── */
.universal-btn {
position: relative !important;
overflow: hidden !important;
border-radius: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
transition: all 0.22s cubic-bezier(.4,0,.2,1) !important;
white-space: nowrap !important;
}
.universal-btn::before {
content: '' !important;
position: absolute !important;
top: 0; left: -110% !important;
width: 55%; height: 100% !important;
background: linear-gradient(105deg, transparent, rgba(255,255,255,0.18), transparent) !important;
transform: skewX(-18deg) !important;
transition: left 0.45s ease !important;
pointer-events: none !important;
}
.universal-btn:hover::before { left: 160% !important; }
.universal-btn-outline {
border: 1.5px solid rgba(255,255,255,0.65) !important;
background: transparent !important;
}
.universal-btn-outline:hover {
background: rgba(255,255,255,0.12) !important;
border-color: rgba(255,255,255,0.9) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
}
/* ──────────────────────────────────────────────────────────────
BOTONES DE REPASO
────────────────────────────────────────────────────────────── */
.btn-repaso {
position: relative !important;
overflow: hidden !important;
border-radius: 12px !important;
font-weight: 700 !important;
font-size: 0.82rem !important;
transition: all 0.22s cubic-bezier(.4,0,.2,1) !important;
letter-spacing: 0.2px !important;
white-space: normal !important;
word-break: break-word !important;
line-height: 1.3 !important;
}
.btn-repaso::before {
content: '' !important;
position: absolute !important;
top: 0; left: -110% !important;
width: 55%; height: 100% !important;
background: linear-gradient(105deg, transparent, rgba(255,255,255,0.22), transparent) !important;
transform: skewX(-18deg) !important;
transition: left 0.45s ease !important;
pointer-events: none !important;
}
.btn-repaso:hover::before { left: 160% !important; }
.btn-repaso:hover { transform: translateY(-3px) !important; }
.btn-repaso-warning {
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 5px 16px rgba(217,119,6,0.38) !important;
}
.btn-repaso-warning:hover {
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 10px 28px rgba(217,119,6,0.55) !important;
}
.btn-repaso-danger {
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 5px 16px rgba(220,38,38,0.36) !important;
}
.btn-repaso-danger:hover {
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 10px 28px rgba(220,38,38,0.52) !important;
}
/* ──────────────────────────────────────────────────────────────
QUICK ACCESS
────────────────────────────────────────────────────────────── */
.quick-access {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.6rem !important;
}
.quick-btn {
position: relative !important;
overflow: hidden !important;
border-radius: 13px !important;
padding: 0.85rem 0.5rem !important;
font-size: 0.66rem !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.3rem !important;
transition: all 0.25s cubic-bezier(.4,0,.2,1) !important;
text-decoration: none !important;
text-transform: uppercase !important;
word-break: break-word !important;
line-height: 1.2 !important;
}
.quick-btn::before {
content: '' !important;
position: absolute !important;
top: 0; left: -120% !important;
width: 60%; height: 100% !important;
background: linear-gradient(105deg, transparent, rgba(255,255,255,0.25), transparent) !important;
transform: skewX(-18deg) !important;
transition: left 0.5s ease !important;
pointer-events: none !important;
}
.quick-btn:hover::before { left: 160% !important; }
.quick-btn i { font-size: 1.35rem !important; }
.quick-btn:hover {
transform: translateY(-5px) scale(1.04) !important;
text-decoration: none !important;
}
.quick-btn-oficial {
background: linear-gradient(145deg, #0d9e35 0%, #087021 60%, #055a1b 100%) !important;
color: #fff !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 5px 18px rgba(8,112,33,0.45) !important;
}
.quick-btn-oficial:hover { color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 10px 28px rgba(8,112,33,0.6) !important; }
.quick-btn-mono {
background: linear-gradient(145deg, #22d3ee 0%, #0891b2 60%, #0e7490 100%) !important;
color: #fff !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 5px 18px rgba(8,145,178,0.45) !important;
}
.quick-btn-mono:hover { color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 10px 28px rgba(8,145,178,0.6) !important; }
.quick-btn-leg {
background: linear-gradient(145deg, #a78bfa 0%, #7c3aed 60%, #5b21b6 100%) !important;
color: #fff !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 5px 18px rgba(124,58,237,0.45) !important;
grid-column: 1 / -1 !important;
}
.quick-btn-leg:hover { color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 10px 28px rgba(124,58,237,0.6) !important; }
/* ──────────────────────────────────────────────────────────────
FORM CONTROLS
────────────────────────────────────────────────────────────── */
.form-control-modern {
border: 1.5px solid rgba(8,112,33,0.22) !important;
border-radius: 11px !important;
background: #f8fdf9 !important;
color: #111827 !important;
font-size: 0.9rem !important;
transition: all 0.22s ease !important;
box-shadow: 0 1px 4px rgba(8,112,33,0.06) inset !important;
}
.form-control-modern:focus {
border-color: #087021 !important;
box-shadow: 0 0 0 3px rgba(8,112,33,0.14) !important;
background: #fff !important;
outline: none !important;
}
/* ──────────────────────────────────────────────────────────────
CONTADORES DE REPASO
────────────────────────────────────────────────────────────── */
.counter-item {
padding: 1rem 0.75rem !important;
border-radius: 15px !important;
text-align: center;
position: relative;
overflow: hidden;
transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.counter-item:hover { transform: translateY(-3px) !important; }
.counter-item::after {
content: '';
position: absolute;
top: -20px; right: -20px;
width: 65px; height: 65px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
pointer-events: none !important;
}
.counter-danger {
background: linear-gradient(145deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 5px 20px rgba(220,38,38,0.42) !important;
border: none !important;
}
.counter-danger .counter-number, .counter-danger .counter-label { color: #fff !important; }
.counter-warning {
background: linear-gradient(145deg, #fbbf24 0%, #d97706 50%, #92400e 100%) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 5px 20px rgba(217,119,6,0.42) !important;
border: none !important;
}
.counter-warning .counter-number, .counter-warning .counter-label { color: #fff !important; }
.counter-success {
background: linear-gradient(145deg, #34d399 0%, #059669 50%, #065f46 100%) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 5px 20px rgba(5,150,105,0.42) !important;
border: none !important;
}
.counter-success .counter-number, .counter-success .counter-label { color: #fff !important; }
.counter-number {
font-size: 2.2rem !important;
font-weight: 800 !important;
line-height: 1.1 !important;
display: block;
}
.counter-label {
font-size: 0.68rem !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.8px;
opacity: 0.9;
display: block;
margin-top: 0.1rem;
}
/* ──────────────────────────────────────────────────────────────
STATS BADGES
────────────────────────────────────────────────────────────── */
.stats-badge {
border-radius: 16px !important;
padding: 1.3rem 1rem !important;
margin-bottom: 0.9rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.3rem;
background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%) !important;
border: 1px solid rgba(8,112,33,0.1) !important;
box-shadow: 0 2px 14px rgba(8,112,33,0.08), 0 1px 0 rgba(255,255,255,0.9) inset !important;
transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.stats-badge:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 24px rgba(8,112,33,0.14), 0 1px 0 rgba(255,255,255,0.9) inset !important;
}
.stats-badge-success {
background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%) !important;
border-color: rgba(5,150,105,0.12) !important;
}
.stats-number {
font-size: 2.6rem !important;
font-weight: 800 !important;
background: linear-gradient(145deg, #065318, #087021, #22c55e) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
line-height: 1 !important;
}
.stats-label {
font-size: 0.7rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
color: #6b7280 !important;
}
/* ──────────────────────────────────────────────────────────────
LOADING SPINNER
────────────────────────────────────────────────────────────── */
.loading-spinner {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 1rem;
}
.spinner {
width: 34px !important;
height: 34px !important;
border: 3px solid rgba(8,112,33,0.1) !important;
border-top-color: #22c55e !important;
border-right-color: rgba(8,112,33,0.4) !important;
border-radius: 50% !important;
animation: spinner-turn 0.7s cubic-bezier(.4,0,.2,1) infinite !important;
}
@keyframes spinner-turn { to { transform: rotate(360deg); } }
/* ──────────────────────────────────────────────────────────────
ANIMACIONES DE ENTRADA
────────────────────────────────────────────────────────────── */
@keyframes card-fade-up {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modern-grid > div:nth-child(1) .modern-card { animation: card-fade-up 0.45s cubic-bezier(.4,0,.2,1) both; }
.modern-grid > div:nth-child(1) .modern-card:nth-child(2) { animation-delay: 0.08s; }
.modern-grid > div:nth-child(1) .modern-card:nth-child(3) { animation-delay: 0.16s; }
.modern-grid > div:nth-child(1) .modern-card:nth-child(4) { animation-delay: 0.24s; }
.modern-grid > div:nth-child(2) .modern-card { animation: card-fade-up 0.45s cubic-bezier(.4,0,.2,1) both; animation-delay: 0.12s; }
.modern-grid > div:nth-child(2) .modern-card:nth-child(2) { animation-delay: 0.20s; }
.modern-grid > div:nth-child(2) .modern-card:nth-child(3) { animation-delay: 0.28s; }
.modern-grid > div:nth-child(3) .modern-card { animation: card-fade-up 0.45s cubic-bezier(.4,0,.2,1) both; animation-delay: 0.20s; }
.modern-grid > div:nth-child(3) .modern-card:nth-child(2) { animation-delay: 0.28s; }
.modern-grid > div:nth-child(3) .modern-card:nth-child(3) { animation-delay: 0.36s; }
@keyframes hero-fade {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
.main-header { animation: hero-fade 0.55s cubic-bezier(.4,0,.2,1) both; }
/* ──────────────────────────────────────────────────────────────
MODAL COOKIES
────────────────────────────────────────────────────────────── */
.modal-content-premium {
border: none !important;
border-radius: 22px !important;
overflow: hidden !important;
box-shadow: 0 28px 70px rgba(0,0,0,0.25) !important;
}
.modal-header-warning-bg {
background: linear-gradient(135deg, #d97706 0%, #92400e 100%) !important;
padding: 1.3rem 1.6rem !important;
}
.modal-header-warning-bg .modal-title { color: #fff !important; }
.modal-body-padded { padding: 1.6rem !important; }
.modal-footer-styled {
padding: 1.1rem 1.6rem !important;
border-top: 1px solid rgba(0,0,0,0.06) !important;
background: #f8fafc !important;
}
/* ──────────────────────────────────────────────────────────────
BOTÓN REABRIR / CERRAR HEADER
────────────────────────────────────────────────────────────── */
.main-header-reopen {
background: linear-gradient(135deg, #06101e 0%, #081a0d 50%, #070e1b 100%) !important;
border: 1.5px solid rgba(34,197,94,0.28) !important;
border-radius: 15px !important;
color: rgba(255,255,255,0.75) !important;
box-shadow: 0 5px 28px rgba(0,0,0,0.32) !important;
transition: all 0.25s ease !important;
position: relative !important;
overflow: hidden !important;
}
.main-header-reopen::before {
content: '' !important;
position: absolute !important;
top: 0; left: -110% !important;
width: 55%; height: 100% !important;
background: linear-gradient(105deg, transparent, rgba(255,255,255,0.1), transparent) !important;
transform: skewX(-18deg) !important;
transition: left 0.5s ease !important;
pointer-events: none !important;
}
.main-header-reopen:hover::before { left: 160% !important; }
.main-header-reopen:hover {
border-color: rgba(34,197,94,0.58) !important;
color: #fff !important;
box-shadow: 0 8px 32px rgba(8,112,33,0.28) !important;
transform: translateY(-2px) !important;
}
.main-header-close {
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 10px !important;
color: rgba(255,255,255,0.7) !important;
transition: all 0.22s ease !important;
}
.main-header-close:hover {
background: rgba(255,255,255,0.18) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.3) !important;
}
/* ──────────────────────────────────────────────────────────────
SCROLLBAR
────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(8,112,33,0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(8,112,33,0.5); }
/* ══════════════════════════════════════════════════════════════
RESPONSIVE COMPLETO
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
.main-header { padding: 2.5rem 2rem !important; }
.main-header h1 { font-size: 2.2rem !important; }
.btn-modern { font-size: 0.82rem !important; padding: 0.68rem 0.95rem !important; }
}
@media (max-width: 768px) {
.main-header { padding: 2rem 1.5rem !important; border-radius: 18px !important; }
.main-header h1 { font-size: 1.85rem !important; letter-spacing: -0.5px !important; }
.modern-card { border-radius: 16px !important; }
.quick-access { grid-template-columns: 1fr 1fr !important; }
.quick-btn-leg { grid-column: 1 / -1 !important; }
body::after { background-size: 24px 24px; }
.btn-modern { font-size: 0.80rem !important; padding: 0.65rem 0.85rem !important; min-height: 40px !important; }
.btn-admin-opotrinchera { font-size: 0.78rem !important; padding: 0.75rem 0.9rem !important; }
}
@media (max-width: 480px) {
.main-header { padding: 1.6rem 1.2rem !important; border-radius: 16px !important; }
.main-header h1 { font-size: 1.5rem !important; letter-spacing: -0.3px !important; }
.main-header p { font-size: 0.9rem !important; }
.stats-number { font-size: 2rem !important; }
.counter-number { font-size: 1.8rem !important; }
.btn-modern { font-size: 0.78rem !important; padding: 0.62rem 0.8rem !important; min-height: 38px !important; gap: 0.35rem !important; }
.btn-modern i { font-size: 0.92rem !important; }
.btn-admin-opotrinchera { font-size: 0.74rem !important; letter-spacing: 0.2px !important; }
.universal-btn { padding: 5px 10px !important; font-size: 12px !important; }
}
@media (max-width: 360px) {
.main-header h1 { font-size: 1.3rem !important; }
.quick-access { grid-template-columns: 1fr !important; }
.quick-btn-leg { grid-column: 1 !important; }
.btn-modern { font-size: 0.74rem !important; }
}