/* ───────────────────────────────────────────────────────────────────────────── Claude Sala — estilos base + 5 pieles (skin-v1 … skin-v5 en ) Las pieles solo redefinen tokens --v-* y algunos detalles; la estructura es una. ───────────────────────────────────────────────────────────────────────────── */ :root { --gap: 14px; --font-fallback: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--v-bg); color: var(--v-text); font-family: var(--v-body), var(--font-fallback); font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; transition: background .35s ease, color .35s ease; } button, select { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--v-accent); outline-offset: 2px; } [hidden] { display: none !important; } /* ── Barra superior: píldoras con las ventanas abiertas + controles ── */ .topbar { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--v-edge); background: color-mix(in srgb, var(--v-bg) 88%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; } .pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; } .pills::-webkit-scrollbar { display: none; } .pill { flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--v-display), var(--font-fallback); font-weight: 600; font-size: 13px; letter-spacing: .05em; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--v-edge); color: var(--v-muted); background: transparent; transition: border-color .2s, color .2s; } .pill:hover { color: var(--v-text); border-color: var(--v-accent); } .pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--v-muted); flex: none; } .pill.hablando i { background: var(--v-accent); box-shadow: 0 0 8px var(--v-accent); } .pill.atencion { color: var(--v-alert); border-color: var(--v-alert); } .pill.atencion i { background: var(--v-alert); box-shadow: 0 0 8px var(--v-alert); animation: blink 1.2s ease-in-out infinite; } .pill.permiso { color: var(--v-warn); border-color: var(--v-warn); } .pill.permiso i { background: var(--v-warn); box-shadow: 0 0 8px var(--v-warn); } .pill.desconocido { opacity: .55; } .pill .n { font-family: var(--v-mono), monospace; font-size: 11px; opacity: .7; } .pills-empty { font-family: var(--v-mono), monospace; font-size: 12px; color: var(--v-muted); letter-spacing: .04em; padding: 7px 0; } .spacer { flex: 1; } .banner { font-family: var(--v-mono), monospace; font-size: 12px; color: var(--v-alert); border: 1px solid var(--v-alert); padding: 3px 8px; animation: blink 1.4s ease-in-out infinite; } .controls { display: flex; gap: 6px; align-items: center; flex: none; } .ctl { background: var(--v-bg); border: 1px solid var(--v-edge); color: var(--v-muted); padding: 5px 8px; font-size: 13px; font-family: var(--v-mono), monospace; letter-spacing: .02em; } .ctl:hover { border-color: var(--v-accent); color: var(--v-text); } .ctl[aria-pressed="false"] { opacity: .45; text-decoration: line-through; } select.ctl { appearance: none; -webkit-appearance: none; padding-right: 22px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } /* ── Banda de demo pública (solo con body.demo) ── */ .demo-strip { display: none; border-bottom: 1px solid var(--v-edge); background: color-mix(in srgb, var(--v-accent) 7%, var(--v-bg)); } body.demo .demo-strip { display: block; } .demo-in { max-width: 1520px; margin: 0 auto; padding: 12px 24px; display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; } .demo-tag { flex: none; font-family: var(--v-mono), monospace; font-size: 11px; letter-spacing: .22em; color: var(--v-accent); border: 1px solid var(--v-accent); padding: 3px 8px; } .demo-in p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--v-muted); max-width: 110ch; } .demo-in b { color: var(--v-text); font-weight: 600; } .demo-in .d-alert { color: var(--v-alert); font-weight: 600; } .demo-in .d-warn { color: var(--v-warn); font-weight: 600; } /* ── Layout: panel lateral + sala (mismas proporciones que el lookbook) ── */ .layout { flex: 1; width: 100%; max-width: 1520px; margin: 0 auto; padding: 22px 24px 40px; display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 32px; align-items: start; } @media (max-width: 960px) { .layout { grid-template-columns: 1fr; gap: 18px; padding: 14px 12px 24px; } .side { order: 2; } } /* ── Panel lateral ── */ .side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 64px; } .side-head { display: flex; align-items: baseline; justify-content: space-between; } .side-title { font-family: var(--v-mono), monospace; font-size: 11px; letter-spacing: .3em; color: var(--v-muted); } .side-count { font-family: var(--v-mono), monospace; font-size: 11px; color: var(--v-muted); } .side-list { display: flex; flex-direction: column; gap: 8px; } .card { display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer; width: 100%; padding: 10px 12px; background: var(--v-surface); border: 1px solid var(--v-edge); border-left: 3px solid var(--v-muted); color: var(--v-text); transition: border-color .2s, transform .18s; } .card:hover { transform: translateX(2px); border-color: var(--v-accent); } .card.hablando { border-left-color: var(--v-accent); } .card.atencion { border-left-color: var(--v-alert); } .card.permiso { border-left-color: var(--v-warn); } .card.desconocido { opacity: .6; } .card .c-top { display: flex; align-items: center; gap: 8px; min-width: 0; } .card .c-name { font-family: var(--v-display), var(--font-fallback); font-weight: 600; font-size: 14px; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card .via { font-family: var(--v-mono), monospace; font-size: 9px; letter-spacing: .14em; padding: 1px 5px; border: 1px solid var(--v-muted); color: var(--v-muted); flex: none; } .card .c-state { margin-left: auto; flex: none; font-family: var(--v-mono), monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-muted); } .card.hablando .c-state { color: var(--v-accent); } .card.atencion .c-state { color: var(--v-alert); } .card.permiso .c-state { color: var(--v-warn); } .card .c-label { font-family: var(--v-mono), monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--v-muted); margin-top: 2px; } .card .c-prompt { font-size: 13.5px; line-height: 1.35; color: var(--v-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card .c-prompt.vacio { color: var(--v-muted); font-style: italic; } .card .c-msg { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card.atencion .c-msg { color: var(--v-alert); } .card.permiso .c-msg { color: var(--v-warn); font-family: var(--v-mono), monospace; font-size: 12px; } .card .c-foot { display: flex; justify-content: space-between; gap: 8px; font-family: var(--v-mono), monospace; font-size: 11px; color: var(--v-muted); margin-top: 2px; } .card .c-foot .act { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card .c-foot .wait { flex: none; font-variant-numeric: tabular-nums; } .card.atencion .c-foot .wait { color: var(--v-alert); } .card.permiso .c-foot .wait { color: var(--v-warn); } .legend { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--v-edge); font-size: 12.5px; color: var(--v-muted); } .legend span { display: inline-flex; align-items: center; gap: 7px; } .legend em, .bugdlg em { font-style: normal; } .legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } .legend .l-speak { background: var(--v-accent); } .legend .l-hand { background: var(--v-alert); } .legend .l-perm { background: var(--v-warn); } .legend .l-unk { background: var(--v-muted); opacity: .5; } .legend .hint { font-family: var(--v-mono), monospace; font-size: 11px; letter-spacing: .04em; margin-top: 4px; } /* ── Sala: barra de la sala + grilla ── */ .room { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .mbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--v-edge); background: var(--v-surface); font-family: var(--v-display), var(--font-fallback); font-size: 14px; letter-spacing: .06em; } .mb-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; } .mb-brand i { width: 8px; height: 8px; border-radius: 50%; background: var(--v-accent); box-shadow: 0 0 10px var(--v-accent); } .chips { display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--v-mono), monospace; font-size: 12px; letter-spacing: .04em; } .chips span { padding: 3px 8px; border: 1px solid var(--v-edge); color: var(--v-muted); } .chips .c-hand { color: var(--v-alert); border-color: var(--v-alert); } .chips .c-perm { color: var(--v-warn); border-color: var(--v-warn); } .chips .c-speak { color: var(--v-accent); } .mb-clock { margin-left: auto; font-family: var(--v-mono), monospace; font-size: 13px; color: var(--v-muted); font-variant-numeric: tabular-nums; display: inline-flex; gap: 10px; align-items: baseline; } .mb-clock #place { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; } .grid { --cols: 2; --gap: 14px; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: var(--gap); } @media (max-width: 560px) { .grid { --cols: 1 !important; } } .empty { margin: 40px auto; text-align: center; color: var(--v-muted); padding: 40px 20px; } .empty-title { font-family: var(--v-display), var(--font-fallback); font-size: 22px; letter-spacing: .08em; color: var(--v-text); margin-bottom: 8px; } .empty-sub { font-size: 15px; } /* ── Cuadro (participante) ── */ .tile { position: relative; aspect-ratio: 16 / 10; overflow: hidden; padding: 0; text-align: left; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); max-width: 580px; transform-origin: 0 0; background: var(--v-surface); border: 1px solid var(--v-edge); color: var(--v-text); transition: border-color .25s ease, box-shadow .25s ease, opacity .3s ease; } .tile:hover { border-color: var(--v-accent); } .tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .tile .over { position: absolute; inset: 0; pointer-events: none; } .tile.leaving { position: absolute; pointer-events: none; z-index: 1; } .tile.joining { z-index: 1; } .tile.joining, .tile.leaving { transform-origin: 50% 50%; } .tile.focusing { filter: brightness(1.5); } .tile .badge { position: absolute; top: 10px; right: 10px; z-index: 2; font-family: var(--v-mono), monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--v-edge); color: var(--v-muted); background: color-mix(in srgb, var(--v-bg) 72%, transparent); display: inline-flex; gap: 6px; align-items: center; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile .badge .live { width: 6px; height: 6px; background: currentColor; border-radius: 50%; flex: none; } .tile.hablando .badge { color: var(--v-accent); border-color: color-mix(in srgb, var(--v-accent) 45%, transparent); } .tile.hablando .badge .live { animation: blink 1.2s ease-in-out infinite; } .tile.atencion .badge { color: var(--v-alert); border-color: var(--v-alert); } .tile.permiso .badge { color: var(--v-warn); border-color: var(--v-warn); } .tile.conectando .badge, .tile.desconocido .badge { color: var(--v-muted); } .tile.conectando .badge .live { animation: blink .6s ease-in-out infinite; } .tile .timer { position: absolute; top: 10px; left: 10px; z-index: 2; display: none; font-family: var(--v-mono), monospace; font-size: 11px; letter-spacing: .08em; padding: 4px 8px; border: 1px solid var(--v-edge); background: color-mix(in srgb, var(--v-bg) 72%, transparent); font-variant-numeric: tabular-nums; } .tile.atencion .timer { display: block; color: var(--v-alert); border-color: var(--v-alert); } .tile.permiso .timer { display: block; color: var(--v-warn); border-color: var(--v-warn); } .tile.urgente .timer { background: var(--v-alert); color: var(--v-bg); font-weight: 700; } .tile .plate { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } .tile .name { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 10px; background: color-mix(in srgb, var(--v-bg) 74%, transparent); border: 1px solid var(--v-edge); max-width: 70%; } .tile .proj { font-family: var(--v-display), var(--font-fallback); font-weight: 600; font-size: 14px; letter-spacing: .05em; display: flex; align-items: center; gap: 8px; min-width: 0; } .tile .proj .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile .via { font-family: var(--v-mono), monospace; font-size: 9px; letter-spacing: .14em; padding: 1px 5px; border: 1px solid var(--v-muted); color: var(--v-muted); flex: none; } .tile .sub { font-size: 12px; color: var(--v-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile .msg { font-size: 12.5px; color: var(--v-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .tile.atencion .msg { color: var(--v-alert); } .tile.permiso .msg { color: var(--v-warn); font-family: var(--v-mono), monospace; font-size: 11.5px; } .tile .act { font-family: var(--v-mono), monospace; font-size: 11px; color: var(--v-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30%; padding-bottom: 6px; } .tile.atencion .act { color: var(--v-alert); } .tile.permiso .act { color: var(--v-warn); } .tile .goto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 6px); z-index: 3; padding: 6px 12px; background: color-mix(in srgb, var(--v-bg) 85%, transparent); border: 1px solid var(--v-accent); font-family: var(--v-mono), monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-text); opacity: 0; transition: opacity .18s ease, transform .18s ease; pointer-events: none; white-space: nowrap; } .tile:hover .goto { opacity: 1; transform: translate(-50%, 0); } .tile.atencion { border-color: var(--v-alert); animation: pulseA 1.6s ease-in-out infinite; } .tile.permiso { border-color: var(--v-warn); animation: pulseW 1.6s ease-in-out infinite; } .tile.urgente { animation-duration: .8s; } .tile.desconocido { opacity: .55; } .tile.desconocido:hover { opacity: .9; } @keyframes pulseA { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--v-alert) 22%, transparent), 0 0 24px color-mix(in srgb, var(--v-alert) 30%, transparent); } } @keyframes pulseW { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--v-warn) 22%, transparent), 0 0 24px color-mix(in srgb, var(--v-warn) 30%, transparent); } } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } } /* ── Diálogo de reporte (Argos) ── */ .bugdlg { background: var(--v-surface); color: var(--v-text); border: 1px solid var(--v-edge); padding: 0; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(0,0,0,.5); } .bugdlg::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(3px); } .bugdlg form { display: flex; flex-direction: column; gap: 10px; padding: 18px; } .bugdlg h3 { margin: 0; font-family: var(--v-display), var(--font-fallback); font-size: 15px; letter-spacing: .06em; } .bugdlg p { margin: 0; color: var(--v-muted); font-size: 13.5px; } .bugdlg textarea { background: var(--v-bg); color: var(--v-text); border: 1px solid var(--v-edge); padding: 8px 10px; font: inherit; font-size: 14px; resize: vertical; } .bugdlg .chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--v-muted); } .bugdlg .acts { display: flex; justify-content: flex-end; gap: 8px; } .bugdlg .acts button { padding: 7px 14px; border: 1px solid var(--v-edge); background: var(--v-bg); font-family: var(--v-mono), monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .bugdlg .acts button[type="submit"] { border-color: var(--v-accent); color: var(--v-accent); } .bugdlg .acts button[disabled] { opacity: .5; cursor: wait; } /* ── Toast ── */ .toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 12px); background: var(--v-text); color: var(--v-bg); padding: 9px 14px; font-size: 13px; font-weight: 600; letter-spacing: .02em; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 30; font-family: var(--v-display), var(--font-fallback); } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.error { background: var(--v-alert); color: #fff; } /* ── Entradas / salidas (por piel) ── */ .skin-v1 .tile.joining { animation: v1in .8s cubic-bezier(.2,.8,.2,1) both !important; } .skin-v1 .tile.leaving { animation: v1out .55s ease-in both !important; } @keyframes v1in { 0% { opacity: 0; clip-path: inset(49.5% 20% 49.5% 20%); } 25% { opacity: 1; clip-path: inset(49.5% 0 49.5% 0); } 32% { opacity: .35; } 38% { opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes v1out { 0% { clip-path: inset(0); opacity: 1; } 55% { clip-path: inset(49.5% 0 49.5% 0); opacity: 1; } 100% { clip-path: inset(49.5% 45% 49.5% 45%); opacity: 0; } } .skin-v2 .tile.joining { animation: v2in .75s cubic-bezier(.2,.9,.2,1) both !important; } .skin-v2 .tile.leaving { animation: v2out .5s ease-in both !important; } @keyframes v2in { 0% { opacity: 0; transform: scale(.6); filter: brightness(2.6) saturate(1.5); } 55% { opacity: 1; transform: scale(1.04); filter: brightness(1.7); } 100% { transform: scale(1); filter: none; } } @keyframes v2out { 0% { filter: brightness(1.8); } 100% { opacity: 0; transform: scale(.78); filter: brightness(.2); } } .skin-v3 .tile.joining { animation: v3in .9s ease-out both !important; } .skin-v3 .tile.leaving { animation: v3out .6s ease-in both !important; } @keyframes v3in { 0% { opacity: 0; filter: blur(10px); transform: translateY(16px) scaleY(1.06); } 18% { opacity: .55; } 24% { opacity: .15; } 34% { opacity: .8; } 42% { opacity: .35; } 55% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; filter: blur(0); transform: none; } } @keyframes v3out { 0% { opacity: 1; } 20% { opacity: .3; } 30% { opacity: .9; } 45% { opacity: .2; } 100% { opacity: 0; filter: blur(10px); transform: translateY(-12px) scaleY(.94); } } .skin-v4 .tile.joining { animation: v4in .4s cubic-bezier(.2,.8,.2,1) both !important; } .skin-v4 .tile.leaving { animation: v4out .3s ease-in both !important; } @keyframes v4in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } @keyframes v4out { to { opacity: 0; transform: scale(.97); } } .skin-v5 .tile.joining { animation: v5in .7s steps(1) both !important; } .skin-v5 .tile.leaving { animation: v5out .5s steps(1) both !important; } @keyframes v5in { 0% { opacity: 0; clip-path: inset(0 0 100% 0); } 10% { opacity: 1; clip-path: inset(0 0 70% 0); transform: translateX(-8px) skewX(-6deg); filter: hue-rotate(90deg); } 20% { clip-path: inset(30% 0 40% 0); transform: translateX(8px); filter: none; } 30% { clip-path: inset(10% 0 10% 0); transform: translateX(-4px) skewX(4deg); filter: hue-rotate(-60deg); } 45% { clip-path: inset(0 0 25% 0); transform: none; } 60% { clip-path: inset(0); transform: translateX(3px); filter: none; } 75% { transform: none; } 100% { clip-path: inset(0); transform: none; filter: none; } } @keyframes v5out { 0% { clip-path: inset(0); } 20% { clip-path: inset(20% 0 30% 0); transform: translateX(6px) skewX(-5deg); filter: hue-rotate(120deg); } 40% { clip-path: inset(0 0 60% 0); transform: translateX(-6px); } 60% { clip-path: inset(45% 0 45% 0); transform: translateX(4px); } 80% { clip-path: inset(48% 20% 48% 20%); opacity: .8; } 100% { clip-path: inset(50% 50% 50% 50%); opacity: 0; } } /* ═══════════════ PIEL 01 — JARVIS ═══════════════ */ .skin-v1 { color-scheme: dark; --v-bg: #050b12; --v-surface: #08131e; --v-edge: rgba(52,225,255,.28); --v-text: #d6f4ff; --v-muted: #6fa9bd; --v-accent: #34e1ff; --v-warn: #ffab2e; --v-alert: #ff3d3d; --v-display: "Orbitron"; --v-mono: "Share Tech Mono"; --v-body: "Rajdhani"; background-image: linear-gradient(rgba(52,225,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(52,225,255,.045) 1px, transparent 1px); background-size: 40px 40px; } .skin-v1 .tile { border-radius: 2px; } .skin-v1 .tile .over { background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; } .skin-v1 .tile::before, .skin-v1 .tile::after, .skin-v1 .tile .over::before, .skin-v1 .tile .over::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--v-accent); z-index: 3; } .skin-v1 .tile::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; } .skin-v1 .tile::after { top: 4px; right: 4px; border-left: 0; border-bottom: 0; } .skin-v1 .tile .over::before { bottom: 4px; left: 4px; border-right: 0; border-top: 0; } .skin-v1 .tile .over::after { bottom: 4px; right: 4px; border-left: 0; border-top: 0; } .skin-v1 .tile.atencion::before, .skin-v1 .tile.atencion::after, .skin-v1 .tile.atencion .over::before, .skin-v1 .tile.atencion .over::after { border-color: var(--v-alert); } .skin-v1 .tile.permiso::before, .skin-v1 .tile.permiso::after, .skin-v1 .tile.permiso .over::before, .skin-v1 .tile.permiso .over::after { border-color: var(--v-warn); } .skin-v1 .tile.desconocido::before, .skin-v1 .tile.desconocido::after, .skin-v1 .tile.desconocido .over::before, .skin-v1 .tile.desconocido .over::after { border-color: var(--v-muted); } .skin-v1 .mbar { border-left: 3px solid var(--v-accent); } .skin-v1 .tile.atencion .badge { animation: blink 1s steps(2) infinite; } /* ═══════════════ PIEL 02 — STARK ═══════════════ */ .skin-v2 { color-scheme: dark; --v-bg: #0b0805; --v-surface: #15100a; --v-edge: rgba(255,176,32,.28); --v-text: #ffe9c4; --v-muted: #b08a55; --v-accent: #ffb020; --v-warn: #ffd97a; --v-alert: #ff4a2e; --v-display: "Michroma"; --v-mono: "Space Mono"; --v-body: "Oxanium"; background-image: radial-gradient(ellipse at 50% 0%, rgba(255,176,32,.08), transparent 60%); } .skin-v2 .tile { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); background-color: var(--v-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0L56 16v32L28 64 0 48V16z M28 32L56 48v32L28 96 0 80V48z' fill='none' stroke='rgba(255,176,32,0.09)' stroke-width='1'/%3E%3C/svg%3E"); background-size: 56px 97px; border: 0; box-shadow: inset 0 0 0 1px var(--v-edge); } .skin-v2 .tile.atencion, .skin-v2 .tile.permiso { animation: none; } .skin-v2 .tile.atencion { box-shadow: inset 0 0 0 1px var(--v-alert); } .skin-v2 .tile.permiso { box-shadow: inset 0 0 0 1px var(--v-warn); } .skin-v2 .tile.atencion .over { animation: pulseInner 1.6s ease-in-out infinite; } .skin-v2 .tile.urgente .over { animation-duration: .8s; } @keyframes pulseInner { 0%,100% { box-shadow: inset 0 0 0 0 transparent; } 50% { box-shadow: inset 0 0 40px rgba(255,74,46,.25); } } .skin-v2 .tile .name { border: 0; border-left: 2px solid var(--v-accent); } .skin-v2 .tile.atencion .name { border-left-color: var(--v-alert); } .skin-v2 .tile.permiso .name { border-left-color: var(--v-warn); } .skin-v2 .tile .badge, .skin-v2 .tile .timer { border-radius: 999px; } .skin-v2 .mbar { border-top: 2px solid var(--v-accent); text-transform: uppercase; font-size: 12px; } /* ═══════════════ PIEL 03 — HOLOGRAMA ═══════════════ */ .skin-v3 { color-scheme: dark; --v-bg: #030816; --v-surface: rgba(24,66,140,.16); --v-edge: rgba(124,196,255,.34); --v-text: #dbe9ff; --v-muted: #7fa4d6; --v-accent: #5cb2ff; --v-warn: #ffc857; --v-alert: #ff5c8a; --v-display: "Exo 2"; --v-mono: "Share Tech Mono"; --v-body: "Exo 2"; background-image: radial-gradient(ellipse at 30% 20%, rgba(60,120,255,.14), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(60,160,255,.10), transparent 50%); } .skin-v3 .tile { border-radius: 12px; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(90,150,255,.16), rgba(20,50,120,.10)); box-shadow: inset 0 1px 0 rgba(200,230,255,.35), 0 10px 40px rgba(20,60,160,.25); } .skin-v3 .tile .over { background: linear-gradient(180deg, transparent 0%, rgba(120,190,255,.10) 50%, transparent 100%); background-size: 100% 200%; animation: shimmer 6s linear infinite; mix-blend-mode: screen; } @keyframes shimmer { from { background-position: 0 -100%; } to { background-position: 0 100%; } } .skin-v3 .tile .proj { text-shadow: 1px 0 rgba(255,80,120,.45), -1px 0 rgba(80,200,255,.45); } .skin-v3 .tile .name, .skin-v3 .tile .badge, .skin-v3 .tile .timer { border-radius: 8px; background: rgba(6,16,40,.55); } .skin-v3 .tile.atencion .over { animation: shimmer 6s linear infinite, flick 2.4s steps(1) infinite; } @keyframes flick { 0%,7%,9%,100% { opacity: 1; } 8% { opacity: .35; } 52% { opacity: 1; } 53% { opacity: .5; } 54% { opacity: 1; } } .skin-v3 .mbar { border-radius: 10px; backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(200,230,255,.3); } .skin-v3 .card, .skin-v3 .pill { border-radius: 10px; } /* ═══════════════ PIEL 04 — OBLIVION (clara) ═══════════════ */ .skin-v4 { color-scheme: light; --v-bg: #eef1f4; --v-surface: #ffffff; --v-edge: #cfd8e1; --v-text: #17212b; --v-muted: #6f7f8f; --v-accent: #00a9c9; --v-warn: #ff7a1a; --v-alert: #f0451f; --v-display: "Titillium Web"; --v-mono: "Space Mono"; --v-body: "Titillium Web"; background-image: linear-gradient(#e3e8ee 1px, transparent 1px), linear-gradient(90deg, #e3e8ee 1px, transparent 1px); background-size: 48px 48px; } .skin-v4 .tile { border-radius: 0; } .skin-v4 .tile .over::before, .skin-v4 .tile .over::after { content: ""; position: absolute; width: 10px; height: 10px; z-index: 3; opacity: .6; background: linear-gradient(var(--v-muted), var(--v-muted)) center/1px 100% no-repeat, linear-gradient(var(--v-muted), var(--v-muted)) center/100% 1px no-repeat; } .skin-v4 .tile .over::before { top: 6px; left: 6px; } .skin-v4 .tile .over::after { bottom: 6px; right: 6px; } .skin-v4 .tile .name, .skin-v4 .tile .badge, .skin-v4 .tile .timer { background: rgba(255,255,255,.88); } .skin-v4 .tile.atencion, .skin-v4 .tile.permiso { animation: none; } .skin-v4 .tile.atencion { box-shadow: inset 0 0 0 1px var(--v-alert); } .skin-v4 .tile.permiso { box-shadow: inset 0 0 0 1px var(--v-warn); } .skin-v4 .tile.atencion .badge { animation: blink 1.4s ease-in-out infinite; } .skin-v4 .tile.urgente { box-shadow: inset 0 0 0 2px var(--v-alert); } .skin-v4 .toast { color: #fff; } .skin-v4 .card, .skin-v4 .pill { border-radius: 0; } /* ═══════════════ PIEL 05 — NEÓN ═══════════════ */ .skin-v5 { color-scheme: dark; --v-bg: #0a0614; --v-surface: #140b24; --v-edge: rgba(255,43,214,.35); --v-text: #f3e9ff; --v-muted: #9a83b8; --v-accent: #ff2bd6; --v-warn: #ffe600; --v-alert: #ff3355; --v-cyan: #19f0ff; --v-display: "Chakra Petch"; --v-mono: "Space Mono"; --v-body: "Chakra Petch"; background-image: radial-gradient(ellipse at 100% 0%, rgba(25,240,255,.10), transparent 50%), radial-gradient(ellipse at 0% 100%, rgba(255,43,214,.12), transparent 50%); } .skin-v5 .tile { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); border: 0; box-shadow: inset 0 0 0 1px var(--v-edge), inset 0 0 30px rgba(255,43,214,.06); } .skin-v5 .tile.hablando:hover { box-shadow: inset 0 0 0 1px var(--v-accent), inset 0 0 30px rgba(255,43,214,.15); } .skin-v5 .tile.atencion, .skin-v5 .tile.permiso { animation: none; } .skin-v5 .tile.atencion { box-shadow: inset 0 0 0 1px var(--v-alert), inset 0 0 40px rgba(255,51,85,.18); } .skin-v5 .tile.permiso { box-shadow: inset 0 0 0 1px var(--v-warn), inset 0 0 40px rgba(255,230,0,.12); } .skin-v5 .tile.atencion .over { background: repeating-linear-gradient(-45deg, rgba(255,51,85,.35) 0 8px, transparent 8px 16px); background-size: 100% 6px; background-repeat: no-repeat; } .skin-v5 .tile.permiso .over { background: repeating-linear-gradient(-45deg, rgba(255,230,0,.45) 0 8px, transparent 8px 16px); background-size: 100% 6px; background-repeat: no-repeat; } .skin-v5 .tile .name { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); } .skin-v5 .tile.atencion .badge { animation: glitch 2.2s steps(1) infinite; } @keyframes glitch { 0%,92%,100% { transform: none; } 93% { transform: translate(-2px, 1px) skewX(6deg); } 95% { transform: translate(2px,-1px); } 97% { transform: translate(-1px, 0) skewX(-4deg); } } .skin-v5 .mbar { border-left: 3px solid var(--v-cyan); text-transform: uppercase; } .skin-v5 .mb-brand i { background: var(--v-cyan); box-shadow: 0 0 10px var(--v-cyan); } @media (prefers-reduced-motion: reduce) { .tile, .tile.atencion, .tile.permiso, .tile .over, .tile .badge, .banner { animation: none !important; } }