/** * Máscaras visuales (temas) de Topay Comunicación. * Se activan con data-tema en . */ html[data-tema="marino"], html:not([data-tema]) { color-scheme: dark; } /* —— Claro: fondo luminoso, contraste limpio —— */ html[data-tema="claro"] { color-scheme: light; --bg: #f3f6fa; --bg-elevated: #ffffff; --bg-panel: #ffffff; --bg-panel-2: #e8eef5; --bg-hover: #e2eaf3; --border: #d0dae8; --border-strong: #b4c3d6; --text: #152033; --text-muted: #5a6b82; --accent: #0d8f7c; --accent-soft: rgba(13, 143, 124, 0.12); --accent-dark: #0a6f61; --accent-on: #ffffff; --ok: #1a9a5c; --warn: #b8860b; --danger: #c73a48; --info: #2d7bb8; --danger-soft: #b42332; --header-bg: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%); --header-accent-line: rgba(13, 143, 124, 0.18); --main-glow: rgba(13, 143, 124, 0.05); --login-glow-1: rgba(13, 143, 124, 0.1); --login-glow-2: rgba(45, 123, 184, 0.08); --shadow-card: 0 10px 32px rgba(21, 32, 51, 0.1); } html[data-tema="claro"] .app-header { box-shadow: 0 1px 0 var(--header-accent-line), 0 4px 16px rgba(21, 32, 51, 0.04); } html[data-tema="claro"] .badge.abierta, html[data-tema="claro"] .badge.error { background: rgba(199, 58, 72, 0.1); color: #a11d2c; border-color: rgba(199, 58, 72, 0.28); } html[data-tema="claro"] .badge.comunicada { background: rgba(184, 134, 11, 0.12); color: #8a6508; border-color: rgba(184, 134, 11, 0.3); } html[data-tema="claro"] .badge.cerrada, html[data-tema="claro"] .badge.enviado { background: rgba(26, 154, 92, 0.1); color: #0f6e42; border-color: rgba(26, 154, 92, 0.28); } html[data-tema="claro"] .badge.creado, html[data-tema="claro"] .badge.pendiente { background: rgba(90, 107, 130, 0.1); color: #3d4d63; border-color: rgba(90, 107, 130, 0.25); } html[data-tema="claro"] .btn.danger { color: #a11d2c; background: rgba(199, 58, 72, 0.08); } /* —— Pizarra: gris pizarra, acento verde suave —— */ html[data-tema="pizarra"] { color-scheme: dark; --bg: #1a1f26; --bg-elevated: #222830; --bg-panel: #2a313b; --bg-panel-2: #343c48; --bg-hover: #3d4654; --border: #404a58; --border-strong: #556070; --text: #e6eaef; --text-muted: #9aa5b4; --accent: #6bc4a8; --accent-soft: rgba(107, 196, 168, 0.14); --accent-dark: #4da88c; --accent-on: #0c1a16; --ok: #5dcf98; --warn: #e0b85a; --danger: #e8707a; --info: #7aafd4; --danger-soft: #ffb0b6; --header-bg: linear-gradient(180deg, #252b34 0%, var(--bg-elevated) 100%); --header-accent-line: rgba(107, 196, 168, 0.14); --main-glow: rgba(107, 196, 168, 0.05); --login-glow-1: rgba(107, 196, 168, 0.1); --login-glow-2: rgba(122, 175, 212, 0.07); --shadow-card: 0 12px 36px rgba(0, 0, 0, 0.4); } /* —— Grafito: casi negro, acento azul acero —— */ html[data-tema="grafito"] { color-scheme: dark; --bg: #0e0f12; --bg-elevated: #16181d; --bg-panel: #1c1f26; --bg-panel-2: #252930; --bg-hover: #2e333c; --border: #333842; --border-strong: #4a5160; --text: #eceef2; --text-muted: #8b929e; --accent: #6b8cce; --accent-soft: rgba(107, 140, 206, 0.16); --accent-dark: #4f6fad; --accent-on: #0a0e16; --ok: #4ecb8c; --warn: #d4a84b; --danger: #e35d6a; --info: #6b8cce; --danger-soft: #ff9aa4; --header-bg: linear-gradient(180deg, #1a1c22 0%, var(--bg-elevated) 100%); --header-accent-line: rgba(107, 140, 206, 0.16); --main-glow: rgba(107, 140, 206, 0.06); --login-glow-1: rgba(107, 140, 206, 0.12); --login-glow-2: rgba(78, 203, 140, 0.06); --shadow-card: 0 14px 40px rgba(0, 0, 0, 0.5); } /* —— Océano: azul profundo, más luminoso y nítido —— */ html[data-tema="oceano"] { color-scheme: dark; --bg: #071828; --bg-elevated: #0c2238; --bg-panel: #12304a; --bg-panel-2: #1a3d5c; --bg-hover: #234d70; --border: #2a5578; --border-strong: #3d6f96; --text: #eaf4fc; --text-muted: #8eb4d0; --accent: #3ec4e8; --accent-soft: rgba(62, 196, 232, 0.16); --accent-dark: #249dbf; --accent-on: #042029; --ok: #45d49a; --warn: #e8c45a; --danger: #ef6b78; --info: #5eb8ef; --danger-soft: #ffb0b8; --header-bg: linear-gradient(180deg, #0e2a44 0%, var(--bg-elevated) 100%); --header-accent-line: rgba(62, 196, 232, 0.18); --main-glow: rgba(62, 196, 232, 0.08); --login-glow-1: rgba(62, 196, 232, 0.14); --login-glow-2: rgba(69, 212, 154, 0.08); --shadow-card: 0 12px 40px rgba(2, 20, 36, 0.45); } html[data-tema="oceano"] .sidebar nav a.active { border-color: rgba(62, 196, 232, 0.4); } html[data-tema="claro"] .sidebar nav a.active { border-color: rgba(13, 143, 124, 0.35); } /* —— Selector de máscaras —— */ .mascara-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin: 10px 0 4px; } .mascara-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .mascara-card:hover { border-color: var(--border-strong); transform: translateY(-1px); } .mascara-card.activa { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .mascara-preview { height: 44px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.08); display: grid; grid-template-columns: 28% 1fr; overflow: hidden; } .mascara-preview .pv-side { opacity: 0.92; } .mascara-preview .pv-main { position: relative; } .mascara-preview .pv-bar { position: absolute; left: 8px; right: 8px; top: 10px; height: 6px; border-radius: 2px; opacity: 0.85; } .mascara-preview .pv-bar:nth-child(2) { top: 22px; right: 18px; opacity: 0.45; } .mascara-card .mascara-nombre { font-size: 12.5px; font-weight: 650; color: var(--text); } .mascara-card .mascara-desc { font-size: 11px; color: var(--text-muted); line-height: 1.3; } .mascara-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 4px; } .perfil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin-bottom: 12px; } .perfil-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } .usuario-link-perfil { color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted transparent; } .usuario-link-perfil:hover { color: var(--accent); text-decoration: none; border-bottom-color: var(--accent); }