/* ============================================================ * styles.css — RetroTasks v2 (Retro Moderno) * * Sistema de diseño basado en tokens CSS (variables). * Cambiar de tema = cambiar una clase en . * Soporta 5 temas: fogata (default), helada, bosque, amatista, rubi. * ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Outfit:wght@400;600;700;800&display=swap'); /* ============================================================ * TOKENS — Tema Fogata (default, oscuro cálido) * ============================================================ */ :root { --bg-deep: #1A1208; --bg-surface: #2D2010; --bg-elevated: #3D2E18; --accent: #FFD24A; --accent-dim: #C49A20; --accent-glow: rgba(255, 210, 74, 0.22); --green: #7BB661; --green-glow: rgba(123, 182, 97, 0.22); --red: #D94343; --red-glow: rgba(217, 67, 67, 0.22); --amber: #E0A02E; --amber-glow: rgba(224, 160, 46, 0.22); --blue: #5B93C7; --blue-glow: rgba(91, 147, 199, 0.22); --text-primary: #F5EDD4; --text-muted: #8A7A62; --border: #4A3520; --stripe-w: 4px; --radius: 4px; --shadow: 0 4px 24px rgba(0,0,0,0.5); } /* ── Tema Helada (oscuro frío) ─────────────────────────────── */ body.theme-helada { --bg-deep: #0A1628; --bg-surface: #0F2040; --bg-elevated: #1A2E50; --accent: #4FC3F7; --accent-dim: #2596BE; --accent-glow: rgba(79, 195, 247, 0.22); --green: #4DB6AC; --green-glow: rgba(77, 182, 172, 0.22); --red: #EF5350; --red-glow: rgba(239, 83, 80, 0.22); --amber: #FFA726; --amber-glow: rgba(255, 167, 38, 0.22); --blue: #7986CB; --blue-glow: rgba(121, 134, 203, 0.22); --text-primary: #E8F4FD; --text-muted: #6A8FA8; --border: #1E3A5F; } /* ── Tema Bosque ───────────────────────────────────────────── */ body.theme-bosque { --bg-deep: #0D1A0D; --bg-surface: #162316; --bg-elevated: #1F301F; --accent: #A8E063; --accent-dim: #7AB840; --accent-glow: rgba(168, 224, 99, 0.22); --green: #69D171; --green-glow: rgba(105, 209, 113, 0.22); --red: #EF5350; --red-glow: rgba(239, 83, 80, 0.22); --amber: #FFD54F; --amber-glow: rgba(255, 213, 79, 0.22); --blue: #4FC3F7; --blue-glow: rgba(79, 195, 247, 0.22); --text-primary: #E8F5E0; --text-muted: #6A8A62; --border: #1F3A1F; } /* ── Tema Amatista ─────────────────────────────────────────── */ body.theme-amatista { --bg-deep: #150D1E; --bg-surface: #231530; --bg-elevated: #301E42; --accent: #C77DFF; --accent-dim: #9C4DCC; --accent-glow: rgba(199, 125, 255, 0.22); --green: #A8E063; --green-glow: rgba(168, 224, 99, 0.22); --red: #FF6B9D; --red-glow: rgba(255, 107, 157, 0.22); --amber: #FFD24A; --amber-glow: rgba(255, 210, 74, 0.22); --blue: #7986CB; --blue-glow: rgba(121, 134, 203, 0.22); --text-primary: #F0E8FF; --text-muted: #8A70A8; --border: #3A2050; } /* ── Tema Rubí ─────────────────────────────────────────────── */ body.theme-rubi { --bg-deep: #1E0808; --bg-surface: #2D1010; --bg-elevated: #3D1818; --accent: #FF6B6B; --accent-dim: #CC3A3A; --accent-glow: rgba(255, 107, 107, 0.22); --green: #A8E063; --green-glow: rgba(168, 224, 99, 0.22); --red: #FF8A65; --red-glow: rgba(255, 138, 101, 0.22); --amber: #FFD24A; --amber-glow: rgba(255, 210, 74, 0.22); --blue: #4FC3F7; --blue-glow: rgba(79, 195, 247, 0.22); --text-primary: #FFE8E8; --text-muted: #A87070; --border: #5A2020; } /* ============================================================ * RESET Y BASE * ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-deep); color: var(--text-primary); min-height: 100%; overscroll-behavior: none; transition: background 0.4s ease, color 0.4s ease; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea { font-family: inherit; } .pt-pixel { font-family: 'Press Start 2P', monospace; line-height: 1.6; } /* ============================================================ * LAYOUT PRINCIPAL * ============================================================ */ .pt-app { width: 100%; max-width: 440px; min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; position: relative; background: var(--bg-deep); } /* ============================================================ * AUTH SCREEN * ============================================================ */ .pt-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; gap: 0; } .pt-auth-hero { width: 160px; height: 160px; margin-bottom: 16px; image-rendering: pixelated; /* El arte tiene esquinas redondeadas: recortarlas evita que se asomen los píxeles claros del borde original de la imagen. */ border-radius: 14%; } .pt-auth-logo { font-size: 14px; color: var(--accent); text-shadow: 0 0 20px var(--accent-glow), 2px 2px 0 var(--accent-dim); margin-bottom: 6px; text-align: center; } .pt-auth-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 32px; text-align: center; } .pt-auth-divider { display: flex; align-items: center; gap: 10px; width: 100%; margin: 16px 0; color: var(--text-muted); font-size: 12px; } .pt-auth-divider::before, .pt-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .pt-auth-form { width: 100%; display: flex; flex-direction: column; gap: 12px; } .pt-auth-input-wrap { position: relative; } .pt-auth-input-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; } .pt-auth-input { width: 100%; background: var(--bg-surface); border: 2px solid var(--border); color: var(--text-primary); font-size: 15px; padding: 14px 14px 14px 42px; border-radius: var(--radius); transition: border-color 0.2s, box-shadow 0.2s; outline: none; } .pt-auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .pt-auth-input::placeholder { color: var(--text-muted); } .pt-btn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; background: #fff; color: #3c4043; font-size: 15px; font-weight: 700; padding: 14px; border-radius: var(--radius); border: 2px solid var(--border); box-shadow: 0 2px 0 var(--border), 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.12s, box-shadow 0.12s; } .pt-btn-google:active { transform: translateY(2px); box-shadow: 0 0 0 var(--border); } .pt-btn-google svg { width: 20px; height: 20px; flex-shrink: 0; } .pt-btn-primary { width: 100%; background: var(--accent); color: var(--bg-deep); font-size: 14px; font-weight: 800; padding: 15px; border-radius: var(--radius); border: 2px solid var(--accent-dim); box-shadow: 0 4px 0 var(--accent-dim), 0 6px 20px var(--accent-glow); transition: transform 0.12s, box-shadow 0.12s; letter-spacing: 0.5px; } .pt-btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-dim); } .pt-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .pt-auth-toggle { text-align: center; margin-top: 12px; font-size: 13px; color: var(--text-muted); } .pt-auth-toggle button { color: var(--accent); font-weight: 700; font-size: 13px; text-decoration: underline; cursor: pointer; } .pt-auth-error { font-size: 12px; color: var(--red); text-align: center; min-height: 16px; animation: pt-shake 0.3s ease-in-out; } /* ============================================================ * HEADER * ============================================================ */ .pt-header { position: sticky; top: 0; z-index: 10; padding: calc(12px + env(safe-area-inset-top)) 16px 10px; background: var(--bg-surface); border-bottom: 3px solid var(--border); box-shadow: 0 4px 0 var(--border); } .pt-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pt-logo { font-size: 11px; color: var(--accent); text-shadow: 0 0 16px var(--accent-glow), 2px 2px 0 var(--accent-dim); letter-spacing: 1px; } .pt-logo b { color: #fff; text-shadow: none; } .pt-topbtns { display: flex; gap: 8px; } .pt-icon-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 2px solid var(--border); border-radius: var(--radius); font-size: 18px; color: var(--text-primary); transition: border-color 0.15s, background 0.15s, transform 0.1s; box-shadow: 0 2px 0 var(--border); } .pt-icon-btn:active { transform: translateY(2px); box-shadow: none; } .pt-icon-btn.active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } /* XP Bar */ .pt-xpwrap { margin-top: 10px; } .pt-xptrack { height: 8px; background: var(--bg-deep); border: 2px solid var(--border); border-radius: 2px; overflow: hidden; position: relative; } .pt-xpfill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--green), var(--accent)); box-shadow: 0 0 8px var(--green-glow); transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; } .pt-xpfill::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, rgba(255,255,255,0.08) 0 6px, transparent 6px 12px ); } .pt-xpline { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; } .pt-xpline .pt-pixel { font-size: 7px; color: var(--accent); } .pt-xpline span:last-child { font-size: 11px; font-weight: 700; color: var(--text-muted); } /* ============================================================ * FILTROS Y BÚSQUEDA * ============================================================ */ .pt-filters { padding: 12px 14px 4px; } .pt-searchwrap { position: relative; margin-bottom: 10px; } .pt-search { width: 100%; background: var(--bg-surface); border: 2px solid var(--border); color: var(--text-primary); font-size: 14px; font-family: inherit; padding: 10px 36px 10px 14px; border-radius: var(--radius); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .pt-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .pt-search::placeholder { color: var(--text-muted); } .pt-searchclear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 50%; font-size: 13px; color: var(--text-muted); cursor: pointer; } .pt-scoperow { display: flex; align-items: center; gap: 8px; } .pt-scope { display: flex; gap: 6px; overflow-x: auto; flex: 1; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pt-scope::-webkit-scrollbar { display: none; } .pt-scopechip { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 7px 14px; background: var(--bg-surface); color: var(--text-muted); border: 2px solid var(--border); border-radius: 20px; cursor: pointer; transition: all 0.18s ease; white-space: nowrap; } .pt-scopechip[aria-pressed="true"] { background: var(--accent); color: var(--bg-deep); border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); font-weight: 800; } .pt-filterbtn { flex: 0 0 auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); font-size: 16px; cursor: pointer; color: var(--text-muted); transition: all 0.15s; box-shadow: 0 2px 0 var(--border); } .pt-filterbtn.active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } .pt-filterbtn:active { transform: translateY(2px); box-shadow: none; } /* ============================================================ * LISTA DE CARDS * ============================================================ */ .pt-list { flex: 1; padding: 12px 14px 130px; display: flex; flex-direction: column; gap: 10px; } .pt-card-wrapper { position: relative; overflow: hidden; border-radius: var(--radius); margin-bottom: 2px; } .pt-card-swipe-bg { position: absolute; top: 0; bottom: 0; width: 100%; display: flex; align-items: center; font-weight: 800; font-size: 13px; color: #fff; padding: 0 20px; z-index: 1; border-radius: var(--radius); user-select: none; pointer-events: none; /* Ocultos salvo cuando se arrastra en su dirección. Evita que se vean detrás de tarjetas hechas (semitransparentes) o que ambos fondos se solapen mostrando siempre el mismo texto. */ opacity: 0; } .pt-card-swipe-bg.show { opacity: 1; } /* Fondo revelado al deslizar a la DERECHA → Eliminar (rojo) */ .pt-swipe-left { background: var(--red); justify-content: flex-start; } /* Fondo revelado al deslizar a la IZQUIERDA → Archivar (azul) */ .pt-swipe-right { background: var(--blue); justify-content: flex-end; } .pt-card { display: flex; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: 3px 3px 0 var(--border); overflow: hidden; animation: pt-card-in 0.3s ease-out both; transition: transform 0.12s ease, box-shadow 0.12s ease; position: relative; z-index: 2; } .pt-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border); } .pt-card.pt-done { opacity: 0.55; } .pt-card.justdone { animation: pt-card-complete 0.5s ease-out both; } .pt-stripe { width: var(--stripe-w); flex: 0 0 var(--stripe-w); border-radius: var(--radius) 0 0 var(--radius); } .pt-cbody { flex: 1; padding: 11px 12px; min-width: 0; } /* Badges */ .pt-badges { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 6px; } .pt-tag, .pt-type, .pt-prio, .pt-due, .pt-repeat, .pt-owner { font-size: 9px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; border: 1px solid transparent; } .pt-tag { color: #fff; border-color: rgba(255,255,255,0.15); } .pt-type { background: var(--bg-elevated); color: var(--text-muted); border-color: var(--border); } .pt-prio { color: #fff; border-color: rgba(255,255,255,0.2); } .pt-repeat { background: var(--blue); color: #fff; opacity: 0.9; } .pt-due { color: #fff; margin-left: auto; border-color: rgba(255,255,255,0.2); } .pt-owner { background: var(--bg-elevated); color: var(--blue); border-color: var(--blue); } .pt-title { font-size: 15px; font-weight: 700; color: var(--text-primary); word-break: break-word; line-height: 1.4; } .pt-done .pt-title { text-decoration: line-through; color: var(--text-muted); } .pt-detail { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; white-space: pre-wrap; word-break: break-word; line-height: 1.5; } /* Acciones de la card */ .pt-actions { display: flex; gap: 6px; margin-top: 10px; } .pt-act { font-size: 11px; font-weight: 700; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; } .pt-act:active { transform: scale(0.96); } .pt-act.on { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 0 8px var(--green-glow); } .pt-act.del { color: var(--red); border-color: var(--red); } .pt-act.del:hover { background: var(--red-glow); } /* Estado vacío */ .pt-empty { text-align: center; padding: 56px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .pt-empty .pt-pixel { font-size: 11px; color: var(--accent); text-shadow: 0 0 16px var(--accent-glow); } .pt-empty p { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; } /* ============================================================ * BOTTOM NAVIGATION BAR * ============================================================ */ .pt-bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 440px; background: var(--bg-surface); border-top: 2px solid var(--border); display: flex; align-items: stretch; z-index: 20; box-shadow: 0 -4px 20px rgba(0,0,0,0.5); padding-bottom: env(safe-area-inset-bottom); } .pt-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 4px 8px; cursor: pointer; position: relative; transition: all 0.15s ease; color: var(--text-muted); font-size: 10px; font-weight: 700; border: none; background: none; -webkit-tap-highlight-color: transparent; } .pt-nav-item svg { width: 22px; height: 22px; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s; } .pt-nav-item span { font-size: 9px; letter-spacing: 0.3px; transition: color 0.15s; } .pt-nav-item.active { color: var(--accent); } .pt-nav-item.active svg { transform: scale(1.2); filter: drop-shadow(0 0 6px var(--accent-glow)); } .pt-nav-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--accent); border-radius: 2px 2px 0 0; box-shadow: 0 0 8px var(--accent-glow); } /* Badge de notificaciones */ .pt-nav-badge { position: absolute; top: 6px; right: calc(50% - 16px); background: var(--red); color: #fff; font-size: 9px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--bg-surface); } /* ============================================================ * FAB (botón flotante) * ============================================================ */ .pt-fab { position: fixed; bottom: calc(68px + env(safe-area-inset-bottom)); right: 18px; z-index: 15; } .pt-fab button { width: 56px; height: 56px; border-radius: 14px; background: var(--accent); color: var(--bg-deep); font-size: 26px; font-weight: 700; border: 2px solid var(--accent-dim); box-shadow: 0 4px 0 var(--accent-dim), 0 6px 20px var(--accent-glow); display: flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s ease, rotate 0.25s ease; animation: pt-fab-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .pt-fab button:active { transform: scale(0.92); box-shadow: 0 2px 0 var(--accent-dim); } .pt-fab button.open { rotate: 45deg; } /* ============================================================ * BOTTOM SHEET (crear/editar) * ============================================================ */ .pt-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); z-index: 30; display: flex; align-items: flex-end; justify-content: center; animation: pt-overlay-in 0.2s ease both; } .pt-sheet { width: 100%; max-width: 440px; background: var(--bg-surface); border-top: 3px solid var(--accent); border-left: 2px solid var(--border); border-right: 2px solid var(--border); border-radius: 16px 16px 0 0; max-height: 92vh; overflow-y: auto; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); animation: pt-sheet-in 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .pt-sheet h2 { font-size: 11px; color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); margin-bottom: 18px; letter-spacing: 1px; } /* Drag handle */ .pt-sheet-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 16px; } .pt-field { margin-bottom: 16px; } .pt-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 8px; } .pt-input, .pt-textarea, .pt-date { width: 100%; background: var(--bg-deep); border: 2px solid var(--border); color: var(--text-primary); font-size: 15px; font-family: inherit; padding: 12px 14px; border-radius: var(--radius); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .pt-input:focus, .pt-textarea:focus, .pt-date:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .pt-input::placeholder, .pt-textarea::placeholder { color: var(--text-muted); } .pt-textarea { min-height: 80px; resize: vertical; } /* Pills selector */ .pt-pills { display: flex; gap: 8px; flex-wrap: wrap; } .pt-pill { min-height: 36px; padding: 7px 14px; font-size: 12px; font-weight: 700; background: var(--bg-deep); color: var(--text-muted); border: 2px solid var(--border); border-radius: 20px; cursor: pointer; transition: all 0.15s ease; } .pt-pill[aria-pressed="true"] { background: var(--accent); color: var(--bg-deep); border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); transform: scale(1.05); } .pt-pill.tinted[aria-pressed="true"] { color: #fff; box-shadow: 0 0 10px var(--accent-glow); } .pt-pill.tinted[aria-pressed="false"] { opacity: 0.45; } .pt-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; } .pt-sheetacts { display: flex; gap: 10px; margin-top: 12px; } .pt-save { flex: 1; min-height: 50px; background: var(--accent); color: var(--bg-deep); font-size: 14px; font-weight: 800; border: 2px solid var(--accent-dim); border-radius: var(--radius); box-shadow: 0 4px 0 var(--accent-dim); transition: transform 0.12s, box-shadow 0.12s; letter-spacing: 0.3px; } .pt-save:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-dim); } .pt-save:disabled { opacity: 0.4; cursor: not-allowed; } .pt-cancel { min-height: 50px; padding: 0 20px; background: var(--bg-elevated); color: var(--text-muted); border: 2px solid var(--border); border-radius: var(--radius); font-size: 14px; font-weight: 700; transition: transform 0.12s; } .pt-cancel:active { transform: scale(0.96); } .pt-err { font-size: 12px; color: var(--red); margin-top: 6px; font-weight: 700; display: none; } /* ============================================================ * DRAWER DE FILTROS * ============================================================ */ .pt-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(3px); z-index: 25; display: flex; justify-content: flex-end; } .pt-drawer { width: 82%; max-width: 320px; height: 100%; background: var(--bg-surface); border-left: 2px solid var(--border); padding: 20px 18px; overflow-y: auto; display: flex; flex-direction: column; animation: pt-drawer-in 0.25s cubic-bezier(0.34, 1.1, 0.64, 1) both; } .pt-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .pt-drawer-head h2 { font-size: 11px; color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); } .pt-drawer-x { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 2px solid var(--border); border-radius: var(--radius); font-size: 16px; color: var(--text-muted); cursor: pointer; transition: all 0.15s; } .pt-drawer-x:hover { border-color: var(--red); color: var(--red); } .pt-drawer-sec { margin-bottom: 22px; } .pt-drawer-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 10px; } .pt-drawer-acts { display: flex; gap: 10px; margin-top: auto; padding-top: 14px; } /* ============================================================ * NOTIFICACIONES TOAST * ============================================================ */ .pt-toast-container { position: fixed; /* Bajar los avisos por debajo de la barra de estado de Android: safe-area cubre los dispositivos con notch y los 24px extra dejan aire respecto a la barra en el resto. */ top: calc(env(safe-area-inset-top, 0px) + 36px); left: 50%; transform: translateX(-50%); width: calc(100% - 28px); max-width: 416px; z-index: 100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .pt-toast { background: var(--bg-elevated); border: 2px solid var(--accent); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 12px var(--accent-glow); padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-primary); pointer-events: auto; animation: pt-toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both, pt-toast-out 0.25s ease-in 3.5s forwards; } /* ============================================================ * PERFIL / SETTINGS * ============================================================ */ .pt-profile { padding: 20px 16px 130px; display: flex; flex-direction: column; gap: 20px; } .pt-profile-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); } .pt-avatar { width: 72px; height: 72px; border-radius: var(--radius); border: 3px solid var(--accent); box-shadow: 0 0 16px var(--accent-glow); object-fit: cover; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 28px; } .pt-avatar-option { aspect-ratio: 1; border-radius: var(--radius); border: 2px solid var(--border); cursor: pointer; background: var(--bg-deep); padding: 2px; transition: transform 0.15s, border-color 0.15s; } .pt-avatar-option img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; border-radius: calc(var(--radius) - 2px); } .pt-avatar-option:active { transform: scale(0.9); } .pt-avatar-option.active { border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); transform: scale(1.1); } .pt-profile-name { font-size: 16px; font-weight: 800; color: var(--text-primary); } .pt-profile-email { font-size: 12px; color: var(--text-muted); } .pt-stats-row { display: flex; gap: 8px; } .pt-stat-card { flex: 1; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; } .pt-stat-value { font-size: 18px; font-weight: 800; color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); } .pt-stat-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .pt-settings-list { display: flex; flex-direction: column; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; } .pt-settings-item { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; font-size: 14px; font-weight: 600; color: var(--text-primary); } .pt-settings-item:last-child { border-bottom: none; } .pt-settings-item:active { background: var(--bg-elevated); } .pt-settings-item .pt-settings-icon { width: 34px; height: 34px; border-radius: var(--radius); background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .pt-settings-item.danger { color: var(--red); } .pt-settings-item.danger .pt-settings-icon { background: var(--red-glow); } .pt-settings-chevron { margin-left: auto; color: var(--text-muted); font-size: 16px; } /* Selector de temas */ .pt-theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .pt-theme-dot { aspect-ratio: 1; border-radius: var(--radius); border: 3px solid transparent; cursor: pointer; transition: transform 0.15s, border-color 0.15s; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font-size: 14px; } .pt-theme-dot.active { border-color: var(--text-primary); transform: scale(1.08); /* Doble anillo: contrasta sobre fondos claros y oscuros por igual */ box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 5px var(--accent); } /* Marca de selección en la esquina */ .pt-theme-dot { position: relative; } .pt-theme-dot.active::after { content: "✓"; position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--bg-deep); border-radius: 50%; font-size: 12px; font-weight: 900; border: 2px solid var(--bg-deep); } .pt-theme-dot:active { transform: scale(0.9); } /* ============================================================ * ANIMACIONES * ============================================================ */ @keyframes pt-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pt-card-complete { 0% { transform: scale(1); } 30% { transform: scale(1.03); } 100% { transform: scale(1); } } @keyframes pt-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes pt-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes pt-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes pt-toast-in { from { opacity: 0; transform: translateY(-16px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pt-toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } } @keyframes pt-fab-in { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } @keyframes pt-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* Partículas XP */ @keyframes pt-particle { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } } /* ============================================================ * RESPONSIVO — Tablet (>= 768px) * ============================================================ */ @media (min-width: 768px) { .pt-app { max-width: 100%; } #app { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "header header" "sidebar content"; min-height: 100vh; } .pt-header { grid-area: header; } .pt-filters { grid-area: sidebar; padding: 20px 18px; background: var(--bg-surface); border-right: 2px solid var(--border); height: 100%; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 80px); overflow-y: auto; } .pt-scoperow { flex-direction: column; align-items: stretch; } .pt-scope { flex-direction: column; overflow-x: unset; } .pt-scopechip { text-align: center; } .pt-filterbtn { width: 100%; } .pt-list { grid-area: content; padding: 16px 20px 100px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-content: start; } .pt-empty { grid-column: 1 / -1; } .pt-fab { right: 24px; bottom: 24px; } .pt-overlay { align-items: center; padding: 24px; } .pt-sheet { max-width: 560px; border: 2px solid var(--border); border-top: 3px solid var(--accent); border-radius: 12px; animation: pt-modal-in 0.25s cubic-bezier(0.34, 1.2, 0.64, 1) both; } .pt-bottom-nav { display: none; } } @media (min-width: 1100px) { #app { grid-template-columns: 300px 1fr; } .pt-list { grid-template-columns: repeat(3, 1fr); padding: 20px 28px 100px; gap: 18px; } } @keyframes pt-modal-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ============================================================ * ACCESIBILIDAD * ============================================================ */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ * PESTAÑA AGENDA — Calendario mensual * ============================================================ */ .pt-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .pt-cal-title { font-size: 11px; color: var(--accent); text-align: center; flex: 1; } .pt-cal-nav { width: 38px; height: 38px; font-size: 14px; cursor: pointer; background: var(--bg-elevated); color: var(--accent); border: 2px solid var(--border); border-radius: var(--radius); } .pt-cal-nav:active { transform: translateY(2px); } .pt-cal-today { display: block; margin: 0 auto 12px; padding: 5px 14px; font-size: 12px; font-weight: 800; cursor: pointer; background: var(--bg-elevated); color: var(--text-muted); border: 2px solid var(--border); border-radius: var(--radius); } .pt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 16px; } .pt-cal-dow { font-size: 8px; color: var(--text-muted); text-align: center; padding: 4px 0 6px; } .pt-cal-day { position: relative; aspect-ratio: 1; min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--bg-surface); color: var(--text-primary); border: 2px solid var(--border); border-radius: var(--radius); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; } .pt-cal-day.other { background: transparent; border-color: transparent; cursor: default; } .pt-cal-day.today { border-color: var(--accent); color: var(--accent); } .pt-cal-day.selected { background: var(--accent); border-color: var(--accent-dim); color: var(--bg-deep); } .pt-cal-day.selected .pt-cal-num { color: var(--bg-deep); } .pt-cal-day.alldone .pt-cal-num { text-decoration: line-through; opacity: .55; } .pt-cal-dots { display: flex; gap: 2px; align-items: center; min-height: 6px; } .pt-cal-dot { width: 6px; height: 6px; border-radius: 1px; box-shadow: 0 0 3px rgba(0,0,0,.4); } .pt-cal-more { font-size: 9px; font-weight: 900; color: currentColor; line-height: 1; } .pt-cal-dayhead { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; } .pt-cal-dayhead h3 { font-size: 10px; color: var(--accent); margin: 0; } .pt-cal-add { padding: 7px 12px; font-size: 12px; font-weight: 800; cursor: pointer; background: var(--accent); color: var(--bg-deep); border: 2px solid var(--accent-dim); border-radius: var(--radius); box-shadow: 0 3px 0 var(--accent-dim); } .pt-cal-add:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-dim); } .pt-cal-daylist { display: flex; flex-direction: column; gap: 12px; } /* Botón de acción dentro de un toast (p. ej. "Deshacer") */ .pt-toast-action { flex: 0 0 auto; padding: 6px 12px; font-family: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; background: var(--accent); color: var(--bg-deep); border: 2px solid var(--accent-dim); border-radius: var(--radius); } .pt-toast-action:active { transform: translateY(1px); } /* ============================================================ * SELECTOR DE ESPACIO DE TRABAJO (personal / tableros) * ============================================================ */ .pt-ws-chip { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 12px; background: var(--bg-elevated); border: 2px solid var(--border); border-radius: 999px; color: var(--text-primary); font-size: 13px; font-weight: 700; max-width: 100%; } .pt-ws-chip.shared { border-color: var(--accent); color: var(--accent); } .pt-ws-chip-icon { font-size: 14px; line-height: 1; } .pt-ws-chip-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-ws-chip-caret { font-size: 10px; opacity: .7; } .pt-ws-chip:active { transform: translateY(1px); } .pt-ws-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .pt-ws-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text-primary); } .pt-ws-option.active { border-color: var(--accent); background: var(--bg-elevated); } .pt-ws-option-icon { font-size: 20px; } .pt-ws-option-text { display: flex; flex-direction: column; flex: 1; min-width: 0; } .pt-ws-option-name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-ws-option-hint { font-size: 11px; color: var(--text-muted); } .pt-ws-option-check { color: var(--accent); font-weight: 900; font-size: 16px; } /* Estado actual en la pestaña Tableros */ .pt-ws-current { background: var(--bg-surface); border: 2px solid var(--accent); border-radius: var(--radius); padding: 14px; margin-bottom: 18px; text-align: center; } .pt-ws-current-label { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 6px; } .pt-ws-current-name { font-size: 18px; font-weight: 800; color: var(--accent); } .pt-ws-current-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; } /* Lista de tableros */ .pt-board-sec { margin-bottom: 22px; } .pt-board-sec .pt-stat-label { margin-bottom: 8px; display: block; } .pt-board-row { display: flex; align-items: stretch; gap: 6px; margin-bottom: 8px; } .pt-board-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-align: left; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text-primary); } .pt-board-row.active .pt-board-open { border-color: var(--accent); background: var(--bg-elevated); } .pt-board-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-board-code { font-size: 11px; color: var(--text-muted); letter-spacing: .5px; } .pt-board-share, .pt-board-leave { flex: 0 0 42px; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: 15px; font-weight: 800; } .pt-board-leave { color: var(--red); border-color: var(--red); } .pt-board-share:active, .pt-board-leave:active { transform: translateY(2px); } .pt-board-limits { margin-top: 6px; padding: 12px 14px; background: var(--bg-surface); border: 2px dashed var(--border); border-radius: var(--radius); } .pt-limit-list { margin: 8px 0 0; padding-left: 18px; } .pt-limit-list li { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; line-height: 1.5; } /* Opción destructiva dentro de una hoja de opciones */ .pt-ws-option.danger { border-color: var(--red); } .pt-ws-option.danger .pt-ws-option-name { color: var(--red); } /* ============================================================ * RECUPERAR CONTRASEÑA * ============================================================ */ .pt-auth-forgot { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: underline; background: none; padding: 6px; } /* ============================================================ * CHECKLIST (objetivos de una misión) * ============================================================ */ /* --- Editor dentro del formulario --- */ .pt-chk-editor { display: flex; flex-direction: column; gap: 8px; } .pt-chk-row { display: flex; align-items: center; gap: 8px; } .pt-chk-text { flex: 1; min-width: 0; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-size: 14px; padding: 9px 10px; outline: none; } .pt-chk-text:focus { border-color: var(--accent); } .pt-chk-text.done { color: var(--text-muted); text-decoration: line-through; } .pt-chk-del { flex: 0 0 36px; height: 36px; color: var(--red); border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); font-weight: 800; } .pt-chk-add { align-self: flex-start; padding: 8px 14px; font-size: 13px; font-weight: 800; color: var(--accent); background: var(--bg-surface); border: 2px dashed var(--border); border-radius: var(--radius); } /* --- Casilla (compartida entre editor y tarjeta) --- */ .pt-chk-box { flex: 0 0 22px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); border: 2px solid var(--border); border-radius: 3px; color: var(--bg-deep); font-size: 13px; font-weight: 900; line-height: 1; } .pt-chk-box.on { background: var(--green); border-color: var(--green); } /* --- Vista dentro de la tarjeta --- */ .pt-chk-view { margin-top: 10px; } .pt-chk-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pt-chk-bar { flex: 1; height: 6px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; } .pt-chk-bar-fill { height: 100%; background: var(--green); transition: width .25s steps(6); } .pt-chk-count { font-size: 11px; font-weight: 800; color: var(--text-muted); font-family: 'Press Start 2P', monospace; } .pt-chk-items { display: flex; flex-direction: column; gap: 6px; } .pt-chk-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 4px 0; background: none; color: var(--text-primary); } .pt-chk-label { font-size: 13.5px; line-height: 1.4; } .pt-chk-item.done .pt-chk-label { color: var(--text-muted); text-decoration: line-through; } /* Ventana de recuperación de contraseña */ .pt-reset-icon { font-size: 42px; text-align: center; margin-bottom: 6px; } .pt-reset-text { font-size: 14.5px; line-height: 1.6; color: var(--text-primary); margin-bottom: 16px; } .pt-reset-text b { color: var(--accent); word-break: break-all; } .pt-reset-steps { margin: 0 0 14px; padding-left: 22px; } .pt-reset-steps li { font-size: 14px; line-height: 1.5; color: var(--text-primary); margin-bottom: 8px; } .pt-reset-hint { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin-bottom: 14px; word-break: break-word; } /* ============================================================ * TEMA SOBRIO — claro, neutro, sin estética arcade * Cambia paleta + tipografía + suaviza bordes y sombras. * ============================================================ */ body.theme-sobrio { --bg-deep: #F4F5F7; --bg-surface: #FFFFFF; --bg-elevated: #FFFFFF; --accent: #2F6FD0; --accent-dim: #24589F; --accent-glow: rgba(47, 111, 208, 0.18); --green: #2E7D46; --green-glow: rgba(46, 125, 70, 0.16); --red: #C0392B; --red-glow: rgba(192, 57, 43, 0.16); --amber: #B07A0B; --amber-glow: rgba(176, 122, 11, 0.16); --blue: #2F6FD0; --blue-glow: rgba(47, 111, 208, 0.16); --text-primary: #1C1E21; --text-muted: #6B7280; --border: #D5D8DE; --radius: 8px; --shadow: 0 6px 20px rgba(15, 23, 42, 0.10); /* Repetir el color explícitamente: al transicionar "background", algunos navegadores no recalculan el fondo del cuando solo cambia la variable. Esto asegura el fondo claro completo. */ background-color: #F4F5F7; } /* Sin fuente pixel: los títulos usan la tipografía normal. Se usa !important porque varios títulos fijan su tamaño en línea. */ body.theme-sobrio .pt-pixel { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0; font-weight: 800; line-height: 1.35; } body.theme-sobrio .pt-logo { font-size: 19px !important; text-shadow: none; } body.theme-sobrio .pt-auth-logo { font-size: 27px !important; text-shadow: none; } body.theme-sobrio .pt-auth-sub { font-size: 14px !important; } body.theme-sobrio .pt-sheet h2 { font-size: 18px !important; } body.theme-sobrio .pt-drawer-head h2 { font-size: 17px !important; } body.theme-sobrio .pt-empty .pt-pixel { font-size: 17px !important; } body.theme-sobrio .pt-cal-title { font-size: 16px !important; } body.theme-sobrio .pt-xpline .pt-pixel, body.theme-sobrio .pt-chk-count { font-size: 12px !important; font-family: 'Outfit', sans-serif; } body.theme-sobrio h2.pt-pixel { font-size: 16px !important; } body.theme-sobrio .pt-cal-dow { font-size: 11px !important; } /* Bordes finos y sombras suaves en lugar de bloques sólidos */ body.theme-sobrio .pt-card, body.theme-sobrio .pt-input, body.theme-sobrio .pt-textarea, body.theme-sobrio .pt-date, body.theme-sobrio .pt-auth-input, body.theme-sobrio .pt-pill, body.theme-sobrio .pt-chip, body.theme-sobrio .pt-act, body.theme-sobrio .pt-icon-btn, body.theme-sobrio .pt-ws-option, body.theme-sobrio .pt-board-open, body.theme-sobrio .pt-cal-day, body.theme-sobrio .pt-toast { border-width: 1px; box-shadow: none; } body.theme-sobrio .pt-card { box-shadow: 0 1px 3px rgba(15,23,42,.08); } body.theme-sobrio .pt-btn-primary, body.theme-sobrio .pt-save, body.theme-sobrio .pt-cancel, body.theme-sobrio .pt-fab button { border-width: 1px; box-shadow: 0 2px 6px rgba(15,23,42,.16); } body.theme-sobrio .pt-btn-primary:active, body.theme-sobrio .pt-save:active, body.theme-sobrio .pt-fab button:active { transform: translateY(1px); } body.theme-sobrio .pt-header { border-bottom: 1px solid var(--border); } body.theme-sobrio .pt-bottom-nav { border-top: 1px solid var(--border); } /* El fondo claro necesita texto oscuro en el estado vacío */ body.theme-sobrio .pt-empty p { color: var(--text-muted); text-shadow: none; } /* ============================================================ * ACCESIBILIDAD — tamaño de texto * ============================================================ */ body.font-sm .pt-title { font-size: 14px; } body.font-sm .pt-detail, body.font-sm .pt-chk-label { font-size: 12.5px; } body.font-lg .pt-title { font-size: 18px; } body.font-lg .pt-detail, body.font-lg .pt-chk-label { font-size: 15.5px; } body.font-lg .pt-input, body.font-lg .pt-textarea, body.font-lg .pt-date, body.font-lg .pt-auth-input { font-size: 17px; } body.font-lg .pt-act, body.font-lg .pt-pill, body.font-lg .pt-chip { font-size: 15px; } body.font-lg .pt-nav-item span:last-child { font-size: 12px; } body.font-lg .pt-board-name, body.font-lg .pt-ws-option-name { font-size: 16px; } body.font-lg .pt-reset-text, body.font-lg .pt-reset-steps li { font-size: 16px; } body.font-xl .pt-title { font-size: 21px; } body.font-xl .pt-detail, body.font-xl .pt-chk-label { font-size: 17.5px; } body.font-xl .pt-input, body.font-xl .pt-textarea, body.font-xl .pt-date, body.font-xl .pt-auth-input { font-size: 19px; } body.font-xl .pt-act, body.font-xl .pt-pill, body.font-xl .pt-chip { font-size: 16.5px; min-height: 46px; } body.font-xl .pt-nav-item span:last-child { font-size: 13px; } body.font-xl .pt-board-name, body.font-xl .pt-ws-option-name { font-size: 18px; } body.font-xl .pt-reset-text, body.font-xl .pt-reset-steps li { font-size: 18px; } body.font-xl .pt-badges span { font-size: 11.5px; } /* ============================================================ * ACCESIBILIDAD — alto contraste * ============================================================ */ body.high-contrast { --text-muted: var(--text-primary); --border: var(--text-primary); } body.high-contrast .pt-detail, body.high-contrast .pt-hint, body.high-contrast .pt-board-code, body.high-contrast .pt-ws-option-hint, body.high-contrast .pt-stat-label { color: var(--text-primary); } body.high-contrast .pt-card, body.high-contrast .pt-input, body.high-contrast .pt-textarea, body.high-contrast .pt-auth-input, body.high-contrast .pt-act, body.high-contrast .pt-pill { border-width: 3px; } body.high-contrast .pt-done { opacity: .85; } body.high-contrast :focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; } /* ============================================================ * VENTANA DE CONFIGURACIÓN * ============================================================ */ .pt-set-section { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--border); } .pt-set-section:first-of-type { margin-top: 10px; } .pt-set-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 0; background: none; color: var(--text-primary); } .pt-set-row.col { flex-direction: column; align-items: stretch; gap: 8px; } .pt-set-texts { flex: 1; min-width: 0; } .pt-set-label { font-size: 15px; font-weight: 700; } .pt-set-hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin-top: 3px; } /* Interruptor */ .pt-switch { flex: 0 0 50px; width: 50px; height: 28px; background: var(--bg-deep); border: 2px solid var(--border); border-radius: 999px; position: relative; transition: background .18s, border-color .18s; } .pt-switch.on { background: var(--green); border-color: var(--green); } .pt-switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--text-primary); border-radius: 50%; transition: transform .18s steps(4); } .pt-switch.on .pt-switch-knob { transform: translateX(22px); background: #fff; } .pt-set-about { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); padding: 4px 0 8px; } .pt-set-about a { color: var(--accent); } /* ============================================================ * GUÍA DE USO * ============================================================ */ .pt-guide-intro { font-size: 14px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.5; } .pt-guide-sec { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 2px solid var(--border); } .pt-guide-sec:last-of-type { border-bottom: none; } .pt-guide-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--accent); margin-bottom: 10px; } .pt-guide-icon { font-size: 20px; } .pt-guide-text { font-size: 14.5px; line-height: 1.6; color: var(--text-primary); margin-bottom: 10px; } .pt-guide-steps { margin: 0 0 10px; padding-left: 22px; } .pt-guide-steps li { font-size: 14.5px; line-height: 1.55; color: var(--text-primary); margin-bottom: 7px; } .pt-guide-list { margin: 0 0 10px; padding-left: 20px; list-style: square; } .pt-guide-list li { font-size: 14.5px; line-height: 1.55; color: var(--text-primary); margin-bottom: 7px; } .pt-guide-list b { color: var(--accent); } .pt-guide-tip { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-elevated); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 11px 13px; font-size: 13.5px; line-height: 1.55; color: var(--text-primary); } .pt-guide-tip-icon { flex: 0 0 auto; } /* Cabecera de bienvenida en la guía (primer inicio) */ .pt-guide-welcome { text-align: center; margin-bottom: 18px; } .pt-guide-welcome-icon { font-size: 40px; margin-bottom: 8px; } .pt-guide-welcome h2 { margin-bottom: 10px; } /* ============================================================ * SELECCIÓN MÚLTIPLE Y ARCHIVO * ============================================================ */ /* Barra de acciones de selección */ .pt-selbar { display: flex; align-items: center; gap: 10px; background: var(--bg-elevated); border: 2px solid var(--accent); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 12px; position: sticky; top: 4px; z-index: 4; } .pt-selbar-x { flex: 0 0 34px; height: 34px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); color: var(--text-primary); font-weight: 900; } .pt-selbar-count { flex: 1; font-size: 14px; font-weight: 700; } .pt-selbar-acts { display: flex; gap: 6px; } .pt-selbar-btn { flex: 0 0 40px; height: 40px; font-size: 17px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); } .pt-selbar-btn.del { border-color: var(--red); } .pt-selbar-btn:active { transform: translateY(2px); } /* Tarjeta seleccionada */ .pt-card.pt-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); } .pt-sel-check { flex: 0 0 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border-right: 2px solid var(--border); color: var(--bg-deep); font-weight: 900; font-size: 16px; } .pt-sel-check.on { background: var(--accent); } /* Banner de vista de archivadas */ .pt-archive-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-elevated); border: 2px solid var(--border); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: var(--text-muted); } .pt-archive-back { padding: 6px 12px; font-size: 12px; font-weight: 800; background: var(--accent); color: var(--bg-deep); border-radius: var(--radius); } /* Toggle de notificación tipo alarma (formulario) */ .pt-alarm-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text-primary); } .pt-alarm-toggle.on { border-color: var(--accent); } .pt-alarm-toggle-icon { font-size: 20px; } .pt-alarm-toggle-text { flex: 1; text-align: left; font-size: 14px; font-weight: 700; } /* Distintivo de alarma en la tarjeta */ .pt-alarm-badge { font-size: 11px; padding: 2px 6px; background: var(--accent); color: var(--bg-deep); border-radius: 3px; font-weight: 800; } /* ============================================================ * IDENTIDAD VISUAL POR TABLERO * ============================================================ */ /* Franja de color bajo la cabecera del tablero activo */ .pt-ws-stripe { height: 4px; width: 100%; flex: 0 0 4px; } /* Ícono del espacio en el selector, con su color de fondo */ .pt-ws-option-icon { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--bg-elevated); font-size: 17px; } /* Selector de color */ .pt-style-label { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 8px; } .pt-color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .pt-color-dot { aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 15px; text-shadow: 0 1px 2px rgba(0,0,0,.5); } .pt-color-dot.active { border-color: var(--text-primary); transform: scale(1.06); } /* Selector de ícono */ .pt-icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .pt-icon-pick { aspect-ratio: 1; font-size: 19px; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; } .pt-icon-pick.active { border-width: 3px; background: var(--bg-elevated); } /* Vista previa al personalizar */ .pt-style-preview { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 4px; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); } .pt-style-preview-icon { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); font-size: 20px; } .pt-style-preview-name { font-size: 16px; font-weight: 800; } /* Destino de la misión en el formulario */ .pt-sheet-target { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 16px; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius); } .pt-sheet-target-icon { width: 32px; height: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--bg-elevated); font-size: 16px; } .pt-sheet-target-text { display: flex; flex-direction: column; flex: 1; min-width: 0; } .pt-sheet-target-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .pt-sheet-target-name { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-sheet-target-badge { font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 3px 7px; border-radius: 3px; background: var(--accent); color: var(--bg-deep); } /* ============================================================ * ÍCONOS VECTORIALES (js/ui/icons.js) * Heredan color con currentColor: siguen al tema y al acento * del tablero activo sin ninguna regla extra. * ============================================================ */ .rt-icon { display: block; flex: 0 0 auto; } .rt-icon-wrap { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } /* Botones de acción de tarjeta: ícono + texto alineados */ .pt-act { display: inline-flex; align-items: center; gap: 6px; } .pt-badge-ico { display: inline-flex; align-items: center; gap: 4px; } .pt-alarm-badge { display: inline-flex; align-items: center; padding: 3px 5px; } /* Fondos de swipe con ícono */ .pt-card-swipe-bg { gap: 8px; } /* Selección múltiple y filtros */ .pt-selbar-x, .pt-selbar-btn { display: inline-flex; align-items: center; justify-content: center; } .pt-filterbtn { display: inline-flex; align-items: center; gap: 5px; } .pt-searchclear { display: inline-flex; align-items: center; justify-content: center; } /* Guía y temas */ .pt-guide-icon { display: inline-flex; color: var(--accent); } .pt-guide-tip-icon { display: inline-flex; color: var(--accent); } .pt-guide-welcome-icon { display: flex; justify-content: center; color: var(--accent); } .pt-theme-dot { display: flex; align-items: center; justify-content: center; } .pt-reset-icon { display: flex; justify-content: center; color: var(--accent); } /* Íconos de tablero: centrados dentro de su chip de color */ .pt-icon-pick { color: var(--text-primary); } .pt-icon-pick.active { color: var(--accent); } .pt-ws-chip-icon, .pt-sheet-target-icon, .pt-style-preview-icon, .pt-ws-option-icon, .pt-ws-current-name .rt-icon-wrap { display: inline-flex; align-items: center; justify-content: center; } .pt-ws-current-name { display: flex; align-items: center; justify-content: center; gap: 8px; } .pt-board-name { display: flex; align-items: center; gap: 7px; }