/* ========================================================================== Tema (claro / oscuro) — tokens de color Material-3-ish reutilizados por includes/tailwind_config.php. Cambiar de tema solo alterna la clase `dark` en ; todas las utilidades bg-, text- y border- ya definidas en el resto del sistema responden automáticamente porque apuntan a estas variables. Paleta neutra unificada en Slate (antes claro usaba Gray y oscuro Slate, lo que generaba una discontinuidad sutil al cambiar de tema). Los acentos de marca (índigo/esmeralda/violeta/ámbar/cian/rosa) se mantienen para no romper las clases badge-, avatar- y panel-tint- usadas en toda la app. ========================================================================== */ :root { --tk-surface-container-highest: #e2e8f0; /* Slate 200 */ --tk-primary: #4f46e5; /* Indigo 600 */ --tk-on-primary: #ffffff; --tk-surface-variant: #e2e8f0; /* Slate 200 */ --tk-surface: #ffffff; --tk-inverse-on-surface: #f8fafc; /* Slate 50 */ --tk-surface-tint: #6366f1; /* Indigo 500 */ --tk-primary-container: #4338ca; /* Indigo 700 (hover) */ --tk-primary-fixed: #eef2ff; /* Indigo 50 */ --tk-on-primary-container: #ffffff; --tk-on-secondary-fixed: #0f172a; --tk-secondary-fixed: #e2e8f0; --tk-on-tertiary-fixed: #022c22; --tk-inverse-primary: #a5b4fc; /* Indigo 300 */ --tk-secondary: #64748b; /* Slate 500 */ --tk-inverse-surface: #1e293b; /* Slate 800 */ --tk-on-primary-fixed-variant: #312e81; /* Indigo 900 */ --tk-on-surface: #0f172a; /* Slate 900 */ --tk-tertiary-fixed-dim: #6ee7b7; /* Emerald 300 */ --tk-error: #dc2626; /* Red 600 */ --tk-on-tertiary: #ffffff; --tk-on-secondary-container: #475569; /* Slate 600 */ --tk-surface-dim: #e2e8f0; --tk-on-error: #ffffff; --tk-tertiary-container: #10b981; /* Emerald 500 */ --tk-surface-container-high: #e2e8f0; /* Slate 200 */ --tk-surface-container: #f1f5f9; /* Slate 100 */ --tk-secondary-fixed-dim: #94a3b8; /* Slate 400 */ --tk-on-background: #0f172a; --tk-surface-container-low: #f8fafc; /* Slate 50 */ --tk-tertiary: #059669; /* Emerald 600 */ --tk-on-primary-fixed: #1e1b4b; /* Indigo 950 */ --tk-on-surface-variant: #475569; /* Slate 600 — contraste AA sobre superficies claras */ --tk-outline-variant: #e2e8f0; /* Slate 200 */ --tk-background: #f8fafc; /* Slate 50 — antes blanco puro, ahora con leve profundidad */ --tk-on-secondary: #ffffff; --tk-tertiary-fixed: #a7f3d0; /* Emerald 200 */ --tk-outline: #94a3b8; /* Slate 400 */ --tk-surface-bright: #ffffff; --tk-error-container: #fee2e2; --tk-on-error-container: #7f1d1d; --tk-on-secondary-fixed-variant: #334155; --tk-primary-fixed-dim: #a5b4fc; /* Indigo 300 */ --tk-on-tertiary-container: #ecfdf5; /* Emerald 50 */ --tk-surface-container-lowest: #ffffff; --tk-on-tertiary-fixed-variant: #047857; /* Emerald 700 */ --tk-secondary-container: #e2e8f0; --tk-page-bg: #f8fafc; /* Slate 50 */ --tk-badge-cerrado-bg: rgba(15, 23, 42, 0.08); --tk-badge-cerrado-fg: #0f172a; --tk-comment-internal-bg: #fffbeb; /* Amber 50 */ --tk-comment-public-bg: #eef2ff; /* Indigo 50 */ --tk-card-border: #e2e8f0; /* Slate 200 */ /* Acentos adicionales para dar variedad de matices a iconos, avatares y tarjetas (más allá de primary/tertiary) sin perder legibilidad. */ --tk-accent-violet: #9333ea; /* Purple 600, más vivo */ --tk-accent-amber: #f59e0b; /* Amber 500, más vivo */ --tk-accent-cyan: #06b6d4; /* Cyan 500, más vivo */ --tk-accent-rose: #e11d48; --tk-gradient-brand: linear-gradient(135deg, #4f46e5 0%, #9333ea 55%, #ec4899 100%); --tk-gradient-hero: linear-gradient(120deg, #4338ca 0%, #6d28d9 55%, #7e22ce 100%); --tk-shadow-color: 222deg 47% 25%; } html.dark { --tk-primary: #6366f1; /* Indigo 500 */ --tk-on-primary: #ffffff; --tk-primary-container: #818cf8; /* Indigo 400 (hover, más claro sobre fondo oscuro) */ --tk-on-primary-container: #1e1b4b; /* Indigo 950 */ --tk-surface: #0f172a; /* Slate 900 */ --tk-background: #0b1120; --tk-on-background: #f1f5f9; --tk-on-surface: #f1f5f9; /* Slate 100 */ --tk-on-surface-variant: #94a3b8; /* Slate 400 */ --tk-surface-variant: #334155; /* Slate 700 */ --tk-surface-dim: #0b1120; --tk-surface-bright: #334155; --tk-surface-container-lowest: #141e33; /* leve elevación sobre el fondo, evita el look "plano" */ --tk-surface-container-low: #172033; --tk-surface-container: #1c2740; --tk-surface-container-high: #24304d; --tk-surface-container-highest: #334155; --tk-inverse-surface: #f1f5f9; --tk-inverse-on-surface: #1e293b; --tk-inverse-primary: #4f46e5; --tk-outline: #64748b; /* Slate 500 */ --tk-outline-variant: #1e293b; /* Slate 800 */ --tk-error: #f87171; /* Red 400 */ --tk-on-error: #450a0a; --tk-error-container: #7f1d1d; --tk-on-error-container: #fee2e2; --tk-secondary: #94a3b8; --tk-on-secondary: #1e293b; --tk-secondary-container: #334155; --tk-on-secondary-container: #e2e8f0; --tk-tertiary: #34d399; /* Emerald 400 */ --tk-on-tertiary: #022c22; --tk-tertiary-container: #065f46; /* Emerald 800 */ --tk-on-tertiary-container: #d1fae5; /* Emerald 100 */ --tk-page-bg: #0b1120; --tk-badge-cerrado-bg: rgba(241, 245, 249, 0.1); --tk-badge-cerrado-fg: #f1f5f9; --tk-comment-internal-bg: rgba(217, 119, 6, 0.12); --tk-comment-public-bg: rgba(99, 102, 241, 0.14); --tk-card-border: #1e293b; /* Slate 800 */ --tk-accent-violet: #c084fc; /* Purple 400 */ --tk-accent-amber: #fbbf24; --tk-accent-cyan: #22d3ee; --tk-accent-rose: #fb7185; --tk-gradient-brand: linear-gradient(135deg, #6366f1 0%, #a855f7 55%, #f472b6 100%); --tk-gradient-hero: linear-gradient(120deg, #3730a3 0%, #5b21b6 55%, #6b21a8 100%); --tk-shadow-color: 222deg 60% 3%; } html.dark, html.dark body { color-scheme: dark; } * { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } html { overflow-x: hidden; } body { background-color: var(--tk-page-bg); overflow-x: hidden; max-width: 100vw; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; } /* Foco visible consistente en toda la app (accesibilidad) — reemplaza el outline por defecto del navegador por uno alineado a la marca. */ a:focus-visible, button:focus-visible, .field:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--tk-primary); outline-offset: 2px; border-radius: 4px; } /* ========================================================================== Utilidades compartidas ========================================================================== */ .ambient-shadow { box-shadow: 0 20px 40px -12px hsl(var(--tk-shadow-color) / 0.16), 0 8px 16px -8px hsl(var(--tk-shadow-color) / 0.08); } html.dark .ambient-shadow { box-shadow: 0 20px 40px -12px hsl(var(--tk-shadow-color) / 0.55), 0 8px 16px -8px hsl(var(--tk-shadow-color) / 0.4); } .urgent-shadow { box-shadow: 0 8px 24px rgba(220, 38, 38, 0.16); } html.dark .urgent-shadow { box-shadow: 0 8px 24px rgba(248, 113, 113, 0.22); } .card-border { border: 1px solid var(--tk-card-border); } .scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; } .scrollbar-thin::-webkit-scrollbar-thumb { background-color: var(--tk-outline-variant); border-radius: 8px; } /* Marca — cuadrado redondeado con degradado de marca, reemplaza los `bg-primary` planos usados antes en el logo del header público y en login/registro. */ .brand-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 30%; background: var(--tk-gradient-brand); color: #ffffff; box-shadow: 0 6px 16px -4px rgba(79, 70, 229, 0.45); } /* ========================================================================== Hero a todo lo ancho con degradado de marca — para landing/secciones de alto impacto. El resto de la app sigue usando fondos neutros; esto es deliberadamente la sección "punch" de la página pública. ========================================================================== */ .hero-band { background: var(--tk-gradient-hero); position: relative; overflow: hidden; color: #ffffff; } .hero-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 20%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 65% 55% at 50% 20%, #000 40%, transparent 100%); pointer-events: none; } .badge-glass { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 9999px; font-size: 13px; font-weight: 600; color: #ffffff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(4px); } .btn-hero-primary { background: #ffffff; color: var(--tk-primary-container); box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.35); } .btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -6px rgba(15, 23, 42, 0.4); } .btn-hero-outline { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); color: #ffffff; } .btn-hero-outline:hover { background: rgba(255,255,255,0.2); } /* Cabecera "glass": fondo semitransparente + blur, más contemporáneo que un sólido plano, y sigue leyendo el color de superficie del tema activo. */ .app-header { background-color: color-mix(in srgb, var(--tk-surface-container-lowest) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Patrón de puntos sutil para secciones de landing (hero, CTA), aporta textura sin competir con el contenido. */ .dot-grid-bg { background-image: radial-gradient(var(--tk-outline-variant) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%); } /* ========================================================================== Badges de estado / prioridad / SLA ========================================================================== */ .badge-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid rgba(0, 0, 0, 0.06); } html.dark .badge-pill { border-color: rgba(255, 255, 255, 0.1); } .badge-nuevo, .badge-secondary { background-color: rgba(100,116,139,0.16); color: var(--tk-secondary); } .badge-asignado, .badge-info { background-color: rgba(79,70,229,0.18); color: var(--tk-primary); } .badge-en_progreso, .badge-primary { background-color: rgba(147,51,234,0.18); color: var(--tk-accent-violet); } .badge-en_espera, .badge-warning { background-color: rgba(245,158,11,0.2); color: var(--tk-accent-amber); } .badge-resuelto, .badge-success { background-color: rgba(5,150,105,0.2); color: var(--tk-tertiary); } .badge-cerrado, .badge-dark { background-color: var(--tk-badge-cerrado-bg); color: var(--tk-badge-cerrado-fg); } .badge-danger { background-color: rgba(220,38,38,0.16); color: var(--tk-error); } .badge-violet { background-color: rgba(147,51,234,0.18); color: var(--tk-accent-violet); } .badge-cyan { background-color: rgba(6,182,212,0.18); color: var(--tk-accent-cyan); } /* ========================================================================== Avatares de iniciales — paleta variada asignada por hash del nombre (ver avatar_color() en includes/functions.php) para que las listas de usuarios/comentarios no se vean monocromáticas. ========================================================================== */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; font-weight: 700; flex-shrink: 0; } .avatar-blue { background-color: rgba(79,70,229,0.16); color: var(--tk-primary); } .avatar-teal { background-color: rgba(5,150,105,0.16); color: var(--tk-tertiary); } .avatar-violet { background-color: rgba(147,51,234,0.16); color: var(--tk-accent-violet); } .avatar-amber { background-color: rgba(245,158,11,0.16); color: var(--tk-accent-amber); } .avatar-cyan { background-color: rgba(6,182,212,0.16); color: var(--tk-accent-cyan); } .avatar-rose { background-color: rgba(225,29,72,0.16); color: var(--tk-accent-rose); } /* ========================================================================== Bloques con fondo tenue a juego con su acento (tarjetas KPI, features, etc.) — mismo mapa de color que .avatar-*, para que el ícono y el fondo del bloque se sientan como una sola familia de color en vez de un ícono de color sobre una tarjeta blanca plana. ========================================================================== */ .panel-tint-blue, .panel-tint-teal, .panel-tint-violet, .panel-tint-amber, .panel-tint-cyan, .panel-tint-rose { border-top-width: 3px; } .panel-tint-blue { background-color: rgba(79,70,229,0.09); border-color: rgba(79,70,229,0.22); border-top-color: var(--tk-primary); } .panel-tint-teal { background-color: rgba(5,150,105,0.09); border-color: rgba(5,150,105,0.22); border-top-color: var(--tk-tertiary); } .panel-tint-violet { background-color: rgba(147,51,234,0.09); border-color: rgba(147,51,234,0.22); border-top-color: var(--tk-accent-violet); } .panel-tint-amber { background-color: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.24); border-top-color: var(--tk-accent-amber); } .panel-tint-cyan { background-color: rgba(6,182,212,0.09); border-color: rgba(6,182,212,0.22); border-top-color: var(--tk-accent-cyan); } .panel-tint-rose { background-color: rgba(225,29,72,0.09); border-color: rgba(225,29,72,0.22); border-top-color: var(--tk-accent-rose); } html.dark .panel-tint-blue { background-color: rgba(99,102,241,0.14); border-color: rgba(99,102,241,0.3); } html.dark .panel-tint-teal { background-color: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.3); } html.dark .panel-tint-violet { background-color: rgba(192,132,252,0.14); border-color: rgba(192,132,252,0.3); } html.dark .panel-tint-amber { background-color: rgba(251,191,36,0.14); border-color: rgba(251,191,36,0.3); } html.dark .panel-tint-cyan { background-color: rgba(34,211,238,0.14); border-color: rgba(34,211,238,0.3); } html.dark .panel-tint-rose { background-color: rgba(251,113,133,0.14); border-color: rgba(251,113,133,0.3); } /* Ícono sólido para usar dentro de un bloque ya teñido (.panel-tint-*), evita el efecto "tinte sobre tinte" y da más contraste al ícono. */ .avatar-solid-blue { background-color: var(--tk-primary); color: var(--tk-on-primary); } .avatar-solid-teal { background-color: var(--tk-tertiary); color: var(--tk-on-tertiary); } .avatar-solid-violet { background-color: var(--tk-accent-violet); color: #ffffff; } html.dark .avatar-solid-violet { color: #211347; } .avatar-solid-amber { background-color: var(--tk-accent-amber); color: #ffffff; } html.dark .avatar-solid-amber { color: #2b1c00; } .avatar-solid-cyan { background-color: var(--tk-accent-cyan); color: #ffffff; } html.dark .avatar-solid-cyan { color: #00272c; } .avatar-solid-rose { background-color: var(--tk-accent-rose); color: #ffffff; } html.dark .avatar-solid-rose { color: #390019; } /* ========================================================================== Comentarios internos / públicos ========================================================================== */ .comment-internal { background-color: var(--tk-comment-internal-bg); border-left: 4px solid #f1c21b; border-radius: 0.5rem; } .comment-public { background-color: var(--tk-comment-public-bg); border-left: 4px solid var(--tk-primary); border-radius: 0.5rem; } .subtask-done { text-decoration: line-through; color: var(--tk-outline); } /* ========================================================================== Navegación ========================================================================== */ .nav-link-active { color: #ffffff; font-weight: 700; background-color: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); position: relative; } .nav-link-active::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 4px; height: 60%; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #a5b4fc, #f0abfc); } /* Sidebar "chrome" fijo (independiente del tema claro/oscuro de la app): un degradado índigo profundo con leve variación tonal para dar profundidad sin caer en un arcoíris multicolor, más un filo interior sutil. */ .sidebar-gradient { background: linear-gradient(165deg, #211c5e 0%, #1e1b4b 45%, #171442 100%); box-shadow: inset -1px 0 0 rgba(255,255,255,0.06); } /* Manchas de color difuminadas para fondos de sección (landing, etc.) */ .color-blob { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: 0.35; pointer-events: none; } html.dark .color-blob { opacity: 0.25; } /* Resplandor sutil en la esquina del hero + degradado vertical muy suave de blanco a gris extremadamente claro hacia abajo (look plano/minimal). */ .hero-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(79, 70, 229, 0.12), transparent 55%), radial-gradient(circle at 100% 20%, rgba(236, 72, 153, 0.08), transparent 50%), linear-gradient(to bottom, #ffffff 0%, #ffffff 55%, #f8fafc 100%); pointer-events: none; } html.dark .hero-glow { background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.22), transparent 55%), radial-gradient(circle at 100% 20%, rgba(244, 114, 182, 0.12), transparent 50%), linear-gradient(to bottom, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.03) 100%); } /* ========================================================================== Componentes reutilizables (botones, inputs, cards) — clases planas para mantener consistencia sin repetir cadenas largas de utilidades en cada página. ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0.75rem 1.5rem; border-radius: 0.625rem; font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: all 0.2s ease-in-out; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-sm { padding: 5px 12px; font-size: 13px; } .btn-block { width: 100%; } .btn-primary { background: linear-gradient(135deg, var(--tk-primary), var(--tk-primary-container)); color: var(--tk-on-primary); box-shadow: 0 4px 10px -2px rgba(79, 70, 229, 0.35), 0 2px 4px -1px rgba(79, 70, 229, 0.12); } .btn-primary:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 12px 20px -6px rgba(79, 70, 229, 0.4), 0 4px 8px -2px rgba(79, 70, 229, 0.2); } .btn-outline { background-color: transparent; border-color: var(--tk-outline-variant); color: var(--tk-on-surface); } .btn-outline:hover { background-color: var(--tk-surface-container-low); border-color: var(--tk-outline); } .btn-outline-primary { background-color: transparent; border-color: var(--tk-primary); color: var(--tk-primary); } .btn-outline-primary:hover { background-color: rgba(79, 70, 229, 0.08); } .btn-outline-danger { background-color: transparent; border-color: var(--tk-error); color: var(--tk-error); } .btn-outline-danger:hover { background-color: rgba(220, 38, 38, 0.08); } .btn-outline-success { background-color: transparent; border-color: var(--tk-tertiary); color: var(--tk-tertiary); } .btn-outline-success:hover { background-color: rgba(5, 150, 105, 0.08); } .btn-success { background-color: var(--tk-tertiary); color: var(--tk-on-tertiary); } .btn-success:hover { opacity: 0.9; } .btn-ghost { background-color: transparent; color: var(--tk-on-surface-variant); } .btn-ghost:hover { background-color: var(--tk-surface-container-low); } .field { width: 100%; padding: 9px 12px; border-radius: 0.625rem; border: 1px solid var(--tk-outline-variant); background-color: var(--tk-surface-container-lowest); color: var(--tk-on-surface); font-family: Inter, sans-serif; font-size: 14px; line-height: 20px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field::placeholder { color: var(--tk-outline); } .field:focus { border-color: var(--tk-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); } .field-sm { padding: 6px 8px; font-size: 13px; } .field:disabled { background-color: var(--tk-surface-container-low); color: var(--tk-outline); } .label { display: block; margin-bottom: 4px; font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; color: var(--tk-on-surface-variant); } .panel { background-color: var(--tk-surface-container-lowest); border: 1px solid var(--tk-outline-variant); border-radius: 1rem; box-shadow: 0 1px 2px 0 hsl(var(--tk-shadow-color) / 0.04); transition: all 0.25s ease; } .panel:hover { box-shadow: 0 20px 30px -8px hsl(var(--tk-shadow-color) / 0.12), 0 8px 12px -6px hsl(var(--tk-shadow-color) / 0.06); transform: translateY(-3px); border-color: var(--tk-outline); } html.dark .panel:hover { box-shadow: 0 20px 30px -8px hsl(var(--tk-shadow-color) / 0.6); } .alert { padding: 12px 14px; border-radius: 0.625rem; font-size: 13px; border: 1px solid transparent; } .alert-success { background-color: rgba(5, 150, 105, 0.1); border-color: rgba(5, 150, 105, 0.3); color: var(--tk-tertiary); } .alert-error { background-color: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.3); color: var(--tk-error); } .alert-info { background-color: rgba(79, 70, 229, 0.08); border-color: rgba(79, 70, 229, 0.25); color: var(--tk-primary); } .table-shell { background-color: var(--tk-surface-container-lowest); border-radius: 1rem; border: 1px solid var(--tk-outline-variant); box-shadow: 0 1px 3px 0 hsl(var(--tk-shadow-color) / 0.06); overflow: hidden; } .table-shell table thead tr { background-color: var(--tk-surface-container-low); border-bottom: 1px solid var(--tk-outline-variant); } .table-shell tbody tr { border-bottom: 1px solid var(--tk-outline-variant); } .table-shell tbody tr:last-child { border-bottom: none; } .table-shell tbody tr:hover { background-color: var(--tk-surface-container-low); } /* Listados que se transforman en tarjetas apiladas en mobile: cada debe llevar `data-label="..."` con el nombre de su columna. Se activa agregando la clase `table-responsive-cards` al `.table-shell`. */ @media (max-width: 767px) { .table-responsive-cards table, .table-responsive-cards tbody, .table-responsive-cards tr, .table-responsive-cards td { display: block; width: 100%; } .table-responsive-cards thead { display: none; } .table-responsive-cards tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--tk-outline-variant); } .table-responsive-cards td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 !important; text-align: right; } .table-responsive-cards td[data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tk-on-surface-variant); text-align: left; margin-right: auto; flex-shrink: 0; } .table-responsive-cards td:empty { display: none; } .table-responsive-cards td[colspan] { display: block; text-align: left; } .table-responsive-cards td[colspan]::before { content: none; } } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 16px; color: var(--tk-outline); text-align: center; } .empty-state .material-symbols-outlined { font-size: 32px; color: var(--tk-outline-variant); } input[type="checkbox"], input[type="radio"] { accent-color: var(--tk-primary); } /* Toggle de tema (sol/luna) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; color: var(--tk-on-surface-variant); background: transparent; border: none; cursor: pointer; transition: background-color 0.15s ease; } .theme-toggle:hover { background-color: var(--tk-surface-container-low); } .theme-toggle .icon-dark { display: none; } html.dark .theme-toggle .icon-light { display: none; } html.dark .theme-toggle .icon-dark { display: inline; } /* En el sidebar oscuro el toggle usa los tonos de texto claro del propio sidebar */ .theme-toggle-sidebar { color: inherit; } .theme-toggle-sidebar:hover { background-color: rgba(255,255,255,0.08); }