/* ========================================================================== AMPARO — Design System Base CSS ========================================================================== CSS centralizado para TODOS los HTMLs de Amparo. Cada HTML debe incluir los Google Fonts por su cuenta: ========================================================================== */ /* ========================================================================== 1. VARIABLES (:root) ========================================================================== */ :root { /* Backgrounds — bordo oscuro */ --bg-deep: #1e0f0e; --bg-mid: #2a1615; --bg-surface: #3a1817; /* Colors — paleta bordo/dorado */ --teal: #f1c77d; /* dorado medio (accent principal) */ --blue: #d4a85c; /* dorado oscuro */ --green: #2ecc71; --amber: #e6a23c; --red: #e74c3c; --violet: #a78bfa; /* Colores de marca */ --primary: #5e2726; --primary-light: #823635; --primary-dark: #3a1817; --accent: #f1c77d; --accent-light: #f6dbab; --accent-cream: #fbefd9; /* Glows (rgba 0.15 opacity) */ --teal-glow: rgba(241, 199, 125, 0.15); --blue-glow: rgba(212, 168, 92, 0.15); --green-glow: rgba(46, 204, 113, 0.15); --amber-glow: rgba(230, 162, 60, 0.15); --red-glow: rgba(231, 76, 60, 0.15); --violet-glow: rgba(167, 139, 250, 0.15); /* Text */ --text-primary: #f6dbab; --text-secondary: #c4a078; --text-dim: rgba(196, 160, 120, 0.5); /* Surfaces — para cards, bordes, overlays (cambian con dark/light) */ --surface-card: rgba(255, 255, 255, 0.03); --surface-card-hover: rgba(255, 255, 255, 0.06); --surface-border: rgba(255, 255, 255, 0.06); --surface-border-hover: rgba(255, 255, 255, 0.12); --surface-input: rgba(255, 255, 255, 0.04); --surface-input-border: rgba(255, 255, 255, 0.1); --surface-overlay: rgba(30, 15, 14, 0.85); --surface-separator: rgba(255, 255, 255, 0.06); /* Fonts */ --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Font sizes — escala unica, se cambia aca y aplica a todo */ --font-xs: 16px; /* tags, badges uppercase, labels decorativos */ --font-sm: 18px; /* metadata, subtitulos, texto secundario */ --font-base: 20px; /* body, texto principal */ --font-md: 24px; /* section titles, subtitulos importantes */ --font-lg: 28px; /* h3, titulos de seccion */ --font-xl: 32px; /* h2, valores de signos vitales */ --font-2xl: 40px; /* h1, numeros grandes */ --font-3xl: 48px; /* hero titles */ --font-4xl: 56px; /* titulos de impacto */ } /* Light theme — activar con data-theme="light" en */ [data-theme="light"] { --bg-deep: #fdf8f0; --bg-mid: #ffffff; --bg-surface: #f6ede0; --teal: #b8862e; /* dorado oscuro para light */ --blue: #8a6422; /* dorado mas oscuro */ --green: #1ea85a; --amber: #c4891e; --red: #c0392b; --violet: #7c5cbf; --primary: #5e2726; --primary-light: #823635; --primary-dark: #3a1817; --accent: #b8862e; --accent-light: #d4a85c; --accent-cream: #f6dbab; --teal-glow: rgba(184, 134, 46, 0.12); --blue-glow: rgba(138, 100, 34, 0.12); --green-glow: rgba(30, 168, 90, 0.12); --amber-glow: rgba(196, 137, 30, 0.12); --red-glow: rgba(192, 57, 43, 0.12); --violet-glow: rgba(124, 92, 191, 0.12); --text-primary: #3a1817; --text-secondary: #6b4a3a; --text-dim: rgba(107, 74, 58, 0.5); /* Surfaces light */ --surface-card: rgba(0, 0, 0, 0.02); --surface-card-hover: rgba(0, 0, 0, 0.04); --surface-border: rgba(0, 0, 0, 0.08); --surface-border-hover: rgba(0, 0, 0, 0.12); --surface-input: #ffffff; --surface-input-border: rgba(0, 0, 0, 0.12); --surface-overlay: rgba(253, 248, 240, 0.9); --surface-separator: rgba(0, 0, 0, 0.06); } /* Light: grain texture mas sutil */ [data-theme="light"] body::before { opacity: 0.015; } /* Theme toggle button */ .theme-toggle { background: none; border: 1.5px solid rgba(255,255,255,0.15); border-radius: 20px; width: 48px; height: 26px; cursor: pointer; position: relative; transition: border-color 0.3s; flex-shrink: 0; padding: 0; min-height: auto; } [data-theme="light"] .theme-toggle { border-color: rgba(0,0,0,0.15); } .theme-toggle .toggle-dot { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } [data-theme="light"] .theme-toggle .toggle-dot { transform: translateX(22px); } /* Light: cards con sombra sutil en vez de bordes */ [data-theme="light"] .card, [data-theme="light"] .vital-card, [data-theme="light"] .field-card { background: var(--bg-mid); border-color: rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.06); } [data-theme="light"] .card:hover, [data-theme="light"] .vital-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); } /* Light: inputs */ [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background: var(--bg-mid); border-color: rgba(0,0,0,0.12); } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { border-color: rgba(184, 134, 46, 0.5); box-shadow: 0 0 0 3px rgba(184, 134, 46, 0.1); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: rgba(107, 74, 58, 0.4); } /* Light: alert banners */ [data-theme="light"] .alert-banner.critical { background: linear-gradient(165deg, rgba(192,57,43,0.08), rgba(192,57,43,0.03)); border-color: rgba(192,57,43,0.2); } [data-theme="light"] .alert-banner.warning { background: linear-gradient(165deg, rgba(196,137,30,0.08), rgba(196,137,30,0.03)); border-color: rgba(196,137,30,0.2); } [data-theme="light"] .alert-banner.success { background: linear-gradient(165deg, rgba(30,168,90,0.08), rgba(30,168,90,0.03)); border-color: rgba(30,168,90,0.2); } /* Light: buttons */ [data-theme="light"] .btn.primary { background: linear-gradient(135deg, rgba(94,39,38,0.1), rgba(184,134,46,0.08)); border-color: rgba(94,39,38,0.25); } [data-theme="light"] .btn.secondary { background: var(--bg-mid); border-color: rgba(0,0,0,0.1); } /* Light: nav tabs */ [data-theme="light"] .nav-tab:hover { background: rgba(0,0,0,0.04); } [data-theme="light"] .nav-tab.active { background: var(--teal-glow); border-color: rgba(184,134,46,0.2); } /* Light: tags */ [data-theme="light"] .tag, [data-theme="light"] .badge { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); } /* Light: toast */ [data-theme="light"] .toast { background: var(--bg-mid); box-shadow: 0 8px 32px rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.1); } /* ========================================================================== 2. RESET Y BASE ========================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--bg-deep); color: var(--text-primary); font-size: 18px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } /* Grain texture overlay */ body::before { content: ''; position: fixed; inset: 0; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px; pointer-events: none; z-index: 9999; } a { color: inherit; } img, svg { display: block; max-width: 100%; } /* ========================================================================== 3. TIPOGRAFIA — MINIMOS GRANDES ========================================================================== REGLA: body 18px minimo. Nada de texto legible en 10-13px. .text-xs (13px) SOLO para badges/tags uppercase decorativos. ========================================================================== */ body { font-size: 18px; } h1 { font-family: var(--font-mono); font-size: clamp(28px, 4vw, 40px); font-weight: 400; line-height: 1.2; } h2 { font-family: var(--font-mono); font-size: 24px; font-weight: 400; line-height: 1.3; } h3 { font-family: var(--font-mono); font-size: 20px; font-weight: 400; line-height: 1.4; } p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; } /* Texto chico — 15px es el minimo para texto legible (metadata, subtitulos) */ .text-sm { font-size: 15px; } /* Texto extra chico — 13px SOLO para badges/tags uppercase, NUNCA para texto legible */ .text-xs { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; } /* Labels decorativos uppercase */ .label-upper { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } /* ========================================================================== 4. LAYOUT ========================================================================== */ .page { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; } .container { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; } /* Grid utilities */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* ========================================================================== 5. CARD ========================================================================== */ .card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 20px; transition: all 0.3s; } .card:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .card.highlight { border-color: rgba(241, 199, 125, 0.25); background: linear-gradient(165deg, rgba(241, 199, 125, 0.06), rgba(255, 255, 255, 0.02)); } .card.no-hover:hover { transform: none; } /* ========================================================================== 6. TAGS / BADGES ========================================================================== */ .tag, .badge { display: inline-block; font-size: 13px; padding: 4px 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; white-space: nowrap; } .tag.risk { background: var(--red-glow); border-color: rgba(231, 76, 60, 0.2); color: var(--red); } .tag.warn { background: var(--amber-glow); border-color: rgba(230, 162, 60, 0.2); color: var(--amber); } .tag.good { background: var(--green-glow); border-color: rgba(46, 204, 113, 0.2); color: var(--green); } .tag.info { background: var(--blue-glow); border-color: rgba(58, 155, 244, 0.2); color: var(--blue); } .tag.violet { background: var(--violet-glow); border-color: rgba(167, 139, 250, 0.2); color: var(--violet); } /* ========================================================================== 7. BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; font-family: var(--font-body); font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; border: 1px solid; text-decoration: none; line-height: 1.2; } .btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; } .btn.primary { background: linear-gradient(135deg, rgba(241, 199, 125, 0.2), rgba(212, 168, 92, 0.15)); border-color: rgba(241, 199, 125, 0.3); color: var(--teal); } .btn.primary:hover { background: linear-gradient(135deg, rgba(241, 199, 125, 0.3), rgba(212, 168, 92, 0.2)); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(241, 199, 125, 0.15); } .btn.secondary { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: var(--text-secondary); } .btn.secondary:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); } .btn.danger { background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(231, 76, 60, 0.1)); border-color: rgba(231, 76, 60, 0.3); color: var(--red); } .btn.danger:hover { background: linear-gradient(135deg, rgba(231, 76, 60, 0.3), rgba(231, 76, 60, 0.15)); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(231, 76, 60, 0.15); } /* ========================================================================== 8. BACK LINK / NAVIGATION ========================================================================== */ .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); text-decoration: none; font-size: 15px; transition: color 0.2s; } .back-link:hover { color: var(--teal); } .back-link svg { width: 16px; height: 16px; } /* ========================================================================== 9. SECTION TITLE ========================================================================== */ .section-title { font-family: var(--font-mono); font-size: 20px; font-weight: 400; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; color: var(--text-primary); } .section-title svg { width: 20px; height: 20px; stroke: var(--teal); fill: none; stroke-width: 1.5; } .section-title .count { font-size: 13px; padding: 2px 8px; border-radius: 100px; background: rgba(255, 255, 255, 0.06); color: var(--text-dim); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.04em; } /* ========================================================================== 10. VITAL CARDS + SPARKLINES ========================================================================== */ .vitals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 32px; } .vital-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 20px 16px; transition: all 0.3s; } .vital-card:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .vital-card.highlight { border-color: rgba(241, 199, 125, 0.25); background: linear-gradient(165deg, rgba(241, 199, 125, 0.06), rgba(255, 255, 255, 0.02)); } .vital-label { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; } .vital-value { font-size: 28px; font-weight: 700; margin-bottom: 2px; line-height: 1.1; } .vital-unit { font-size: 15px; color: var(--text-secondary); font-weight: 400; margin-bottom: 8px; } .vital-trend { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 4px; } .vital-trend.good { color: var(--green); } .vital-trend.warn { color: var(--amber); } .vital-trend.danger { color: var(--red); } .vital-trend.normal { color: var(--text-secondary); } /* Sparklines */ .sparkline { height: 32px; margin-top: 8px; overflow: visible; } .sparkline-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sparkline-area { opacity: 0.1; } .sparkline-dot { r: 3; stroke-width: 2; } /* ========================================================================== 11. ALERT BANNER ========================================================================== */ .alert-banner { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 14px; margin-bottom: 24px; font-size: 16px; } .alert-banner svg { width: 20px; height: 20px; flex-shrink: 0; } .alert-banner .alert-text { flex: 1; font-size: 16px; } .alert-banner .alert-time { font-size: 13px; color: var(--text-dim); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; } .alert-banner.critical { background: linear-gradient(165deg, rgba(231, 76, 60, 0.12), rgba(231, 76, 60, 0.04)); border: 1px solid rgba(231, 76, 60, 0.25); } .alert-banner.critical .alert-text strong { color: var(--red); } .alert-banner.warning { background: linear-gradient(165deg, rgba(230, 162, 60, 0.12), rgba(230, 162, 60, 0.04)); border: 1px solid rgba(230, 162, 60, 0.25); } .alert-banner.warning .alert-text strong { color: var(--amber); } .alert-banner.success { background: linear-gradient(165deg, rgba(46, 204, 113, 0.12), rgba(46, 204, 113, 0.04)); border: 1px solid rgba(46, 204, 113, 0.25); } .alert-banner.success .alert-text strong { color: var(--green); } /* ========================================================================== 12. ANIMATIONS ========================================================================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { opacity: 0; transform: translateY(20px); animation: fadeIn 0.8s forwards; } .fade-in.d1 { animation-delay: 0.1s; } .fade-in.d2 { animation-delay: 0.2s; } .fade-in.d3 { animation-delay: 0.3s; } .fade-in.d4 { animation-delay: 0.4s; } .fade-in.d5 { animation-delay: 0.5s; } /* ========================================================================== 13. NAV TABS ========================================================================== */ .nav-tabs { display: flex; gap: 4px; } .nav-tab { padding: 10px 18px; border-radius: 100px; font-size: 15px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.2s; font-family: var(--font-body); text-decoration: none; white-space: nowrap; } .nav-tab:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); } .nav-tab.active { color: var(--teal); background: var(--teal-glow); border-color: rgba(241, 199, 125, 0.2); } /* ========================================================================== 14. TOAST NOTIFICATIONS ========================================================================== */ .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(100px); padding: 14px 28px; background: var(--bg-surface); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; font-size: 16px; color: var(--text-primary); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); z-index: 10000; opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: all; } .toast.success { border-color: rgba(46, 204, 113, 0.3); } .toast.error { border-color: rgba(231, 76, 60, 0.3); } /* ========================================================================== 15. FORMS — TABLET-FRIENDLY ========================================================================== Touch targets minimo 44px. Input text minimo 28px. ========================================================================== */ input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select { font-family: var(--font-body); font-size: 18px; color: var(--text-primary); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 14px 16px; min-height: 48px; width: 100%; transition: all 0.2s; -webkit-appearance: none; appearance: none; } input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(241, 199, 125, 0.4); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 3px rgba(241, 199, 125, 0.1); } input::placeholder, textarea::placeholder { color: var(--text-dim); } /* Inputs grandes para signos vitales u otros numericos importantes */ input.input-big { font-size: 28px; font-weight: 700; text-align: center; padding: 16px; min-height: 56px; } textarea { min-height: 100px; resize: vertical; line-height: 1.5; } select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b8aa0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } /* Field card — campo con label dentro de una card */ .field-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 16px 20px; } .field-card label, .field-label { display: block; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; font-weight: 500; } .field-card input, .field-card textarea, .field-card select { border: none; background: transparent; padding: 4px 0; min-height: auto; border-radius: 0; } .field-card input:focus, .field-card textarea:focus, .field-card select:focus { box-shadow: none; } /* Touch targets — minimo 44px para cualquier elemento interactivo */ button, [role="button"], .btn, .nav-tab, .action-btn { min-height: 44px; } /* ========================================================================== 16. PDF OVERLAY (compartido entre HTMLs que generan preview) ========================================================================== */ .pdf-overlay { position: fixed; inset: 0; background: rgba(30, 15, 14, 0.9); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; pointer-events: none; transition: opacity 0.4s; backdrop-filter: blur(8px); } .pdf-overlay.show { opacity: 1; pointer-events: all; } .pdf-preview { width: 640px; max-width: 100%; max-height: 85vh; background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); transform: translateY(20px) scale(0.95); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; } .pdf-overlay.show .pdf-preview { transform: translateY(0) scale(1); } .pdf-close { position: fixed; top: 24px; right: 24px; z-index: 1001; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .pdf-close:hover { background: rgba(255, 255, 255, 0.2); } /* PDF content (white background, print-friendly) */ .pdf-content { padding: 36px; color: #1a1a2e; font-family: var(--font-body); font-size: 14px; } .pdf-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid #f1c77d; } .pdf-logo { font-size: 20px; font-weight: 700; color: #0a1628; } .pdf-date { font-size: 12px; color: #666; text-align: right; } .pdf-patient-name { font-size: 18px; font-weight: 700; color: #0a1628; margin-bottom: 3px; } .pdf-patient-detail { font-size: 12px; color: #666; } .pdf-section-title { font-size: 14px; font-weight: 700; color: #0a1628; margin: 18px 0 8px; padding-bottom: 5px; border-bottom: 1px solid #eee; } .pdf-vitals-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .pdf-vital { padding: 8px 10px; background: #f5f7fa; border-radius: 8px; flex: 1; min-width: 80px; } .pdf-vital-label { font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: 0.05em; } .pdf-vital-value { font-size: 16px; font-weight: 700; color: #0a1628; } .pdf-list { list-style: none; } .pdf-list li { padding: 5px 0; font-size: 13px; color: #333; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; } .pdf-list li:last-child { border-bottom: none; } .pdf-footer { margin-top: 20px; padding-top: 10px; border-top: 1px solid #eee; font-size: 10px; color: #999; text-align: center; } /* ========================================================================== 17. UTILITY CLASSES ========================================================================== */ .text-teal { color: var(--teal); } .text-blue { color: var(--blue); } .text-green { color: var(--green); } .text-amber { color: var(--amber); } .text-red { color: var(--red); } .text-violet { color: var(--violet); } .text-secondary { color: var(--text-secondary); } .text-dim { color: var(--text-dim); } .text-center { text-align: center; } .text-right { text-align: right; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; } /* ========================================================================== 18. RESPONSIVE — 900px ========================================================================== */ @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .vitals-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== 19. RESPONSIVE — 700px ========================================================================== */ @media (max-width: 700px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .two-col { grid-template-columns: 1fr; } .vitals-grid { grid-template-columns: repeat(2, 1fr); } .nav-tabs { display: none; } .page, .container { padding: 24px 16px 60px; } h1 { font-size: clamp(24px, 5vw, 32px); } } /* ========================================================================== 20. RESPONSIVE — 480px (movil) ========================================================================== */ @media (max-width: 480px) { .grid-4, .grid-3, .grid-2, .two-col, .vitals-grid, .info-grid { grid-template-columns: 1fr; } .page, .container { padding: 20px 12px 60px; } .btn { width: 100%; justify-content: center; } .pdf-content { padding: 24px; } .pdf-preview { max-height: 90vh; } /* Forzar 1 columna en celular para cualquier grid */ [class*="-grid"], [class*="_grid"], .cards, .solutions-grid, .demos-grid, .tools-grid, .features-grid, .problems-grid, .solution-grid, .modos-grid, .ronda-grid, .pricing-grid, .funnel-row, .comparison, .cam-container, .residentes-grid, .drawer-fields, .fields-grid { grid-template-columns: 1fr !important; } /* Stacks flexbox tambien */ .stats-row, .actions-bar, .ronda-banner, .cta-actions, .cta-next { flex-direction: column; } } /* ========================================================================== PANEL NAV — Barra superior para páginas privadas ========================================================================== */ .panel-nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 24px; background: var(--bg-deep); border-bottom: 1px solid var(--surface-border); position: sticky; top: 0; z-index: 1000; font-size: var(--font-xs); } .panel-nav-left { display: flex; align-items: center; gap: 12px; } .panel-nav-brand { font-family: var(--font-mono); font-weight: 700; font-size: var(--font-sm); color: var(--accent); text-decoration: none; } .panel-nav-sep { color: var(--surface-border-hover); } .panel-nav-link { color: var(--text-secondary); text-decoration: none; transition: color 0.2s; } .panel-nav-link:hover { color: var(--text-primary); } .panel-nav-right { display: flex; align-items: center; gap: 14px; } .panel-nav-user { color: var(--text-dim); font-size: var(--font-xs); } .panel-nav-logout { background: none; border: 1px solid var(--surface-border-hover); color: var(--text-secondary); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-size: var(--font-xs); transition: all 0.2s; } .panel-nav-logout:hover { border-color: var(--red); color: var(--red); }