/* voicemando-admin -- consola de administracion. Sin dependencias externas. Paleta copiada de client/web/static/styles.css (misma familia visual que la PWA), oscura por defecto con override claro via prefers-color-scheme. Se promociona --ok como variable de exito (antes hardcodeada #34d399). */ :root { --bg: #0b1220; --bg-card: #121b2e; --fg: #e7edf7; --fg-muted: #9aa7bd; --accent: #6ee7ff; --accent-strong: #38bdf8; --danger: #f87171; --warn: #fbbf24; --ok: #34d399; --border: #223049; --fuente-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size: 16px; } @media (prefers-color-scheme: light) { :root { --bg: #f4f6fb; --bg-card: #ffffff; --fg: #101828; --fg-muted: #4b5567; --accent: #0284c7; --accent-strong: #0369a1; --ok: #0f9d70; --border: #dbe2ee; } } /* Tema manual (boton "Tema" de la sidebar, app.js): `data-theme` en fuerza los tokens POR ENCIMA de prefers-color-scheme -- por eso estos dos bloques van despues de la media query. Sin data-theme => modo "auto". */ :root[data-theme="dark"] { --bg: #0b1220; --bg-card: #121b2e; --fg: #e7edf7; --fg-muted: #9aa7bd; --accent: #6ee7ff; --accent-strong: #38bdf8; --ok: #34d399; --border: #223049; } :root[data-theme="light"] { --bg: #f4f6fb; --bg-card: #ffffff; --fg: #101828; --fg-muted: #4b5567; --accent: #0284c7; --accent-strong: #0369a1; --ok: #0f9d70; --border: #dbe2ee; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mono { font-family: var(--fuente-mono); } .muted { color: var(--fg-muted); font-size: 0.9rem; } .error { color: var(--danger); font-weight: 600; } .eyebrow { font-family: var(--fuente-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin: 0; } /* ===== Estructura general: sidebar + vista ===== */ .layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100dvh; } .sidebar { border-right: 1px solid var(--border); background: color-mix(in srgb, var(--bg-card) 55%, var(--bg)); padding: 20px 14px 16px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 12px; padding: 0 6px; } .brand h1 { margin: 0; font-size: 1.05rem; letter-spacing: 0.01em; } /* Firma visual: el orbe del asistente, miniaturizado como marca de la consola. */ .brand-orb { flex: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 92%, white) 0%, var(--accent) 38%, var(--accent-strong) 82%); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent); animation: orbe-respira 4.6s ease-in-out infinite; } .brand-orb.grande { width: 54px; height: 54px; margin: 0 auto 6px; display: block; } @keyframes orbe-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } @media (prefers-reduced-motion: reduce) { .brand-orb { animation: none; } } #nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } #nav a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--fg-muted); text-decoration: none; font-size: 0.92rem; border-left: 2px solid transparent; } #nav a:hover { color: var(--fg); background: color-mix(in srgb, var(--border) 40%, transparent); } #nav a[aria-current="page"] { color: var(--fg); background: color-mix(in srgb, var(--accent) 12%, transparent); border-left-color: var(--accent-strong); font-weight: 600; } .sidebar-pie { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; } .sidebar-pie p { margin: 0; font-size: 0.75rem; } main#vista { padding: 26px 30px 60px; max-width: 1160px; width: 100%; } .vista-cabecera { margin-bottom: 20px; } .vista-cabecera h2 { margin: 4px 0 4px; font-size: 1.5rem; } .vista-cabecera p.muted { margin: 0; } .vista-cuerpo section { margin-bottom: 28px; } .vista-cuerpo h3 { font-size: 0.95rem; margin: 0 0 10px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--fuente-mono); font-weight: 600; } .vista-cuerpo h4 { margin: 18px 0 8px; font-size: 0.95rem; } /* ===== Tarjetas y tiles ===== */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; } .tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .tile-cab { display: flex; align-items: center; gap: 8px; } .tile-label { font-family: var(--fuente-mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-muted); } .tile-value { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .tile-detalle { font-size: 0.78rem; color: var(--fg-muted); overflow-wrap: anywhere; } .led { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--fg-muted); } .led.ok { background: var(--ok); box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 65%, transparent); } .led.warn { background: var(--warn); box-shadow: 0 0 8px color-mix(in srgb, var(--warn) 55%, transparent); } .led.danger { background: var(--danger); box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 55%, transparent); } /* ===== Badges de estado ===== */ .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; border: 1px solid var(--border); color: var(--fg-muted); white-space: nowrap; } .badge[data-tone="ok"] { color: var(--ok); border-color: var(--ok); } .badge[data-tone="warn"] { color: var(--warn); border-color: var(--warn); } .badge[data-tone="danger"] { color: var(--danger); border-color: var(--danger); } .badge[data-tone="accent"] { color: var(--accent-strong); border-color: var(--accent-strong); } /* ===== Tablas ===== */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); } table.tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; } table.tabla th { text-align: left; font-family: var(--fuente-mono); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border); } table.tabla td { padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); vertical-align: middle; } table.tabla tbody tr:last-child td { border-bottom: none; } table.tabla tbody tr:hover { background: color-mix(in srgb, var(--border) 25%, transparent); } td .acciones { display: flex; gap: 6px; flex-wrap: wrap; } code.detalle { font-family: var(--fuente-mono); font-size: 0.78rem; color: var(--fg-muted); } /* ===== Botones ===== */ .btn { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--fg); font-size: 0.9rem; } .btn:hover { border-color: var(--fg-muted); } .btn.primary { background: var(--accent); border-color: var(--accent-strong); color: #04202b; font-weight: 600; } .btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .btn.danger { border-color: var(--danger); color: var(--danger); background: transparent; } .btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } .btn.small { padding: 4px 10px; font-size: 0.8rem; border-radius: 8px; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* ===== Formularios ===== */ input, select, textarea { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--fg); min-width: 0; max-width: 100%; } textarea { resize: vertical; font-family: inherit; } select { background: var(--bg-card); } .campo { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; } .campo > span { color: var(--fg-muted); } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; } .form-grid .campo.ancho { grid-column: 1 / -1; } .form-grid button[type="submit"] { justify-self: start; } /* ===== Banners y toasts ===== */ .banner { padding: 10px 14px; border-radius: 10px; font-size: 0.9rem; margin: 0 0 14px; } .banner.info { background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--accent); } .banner.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid var(--warn); } .banner.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid var(--danger); } .banner .btn { margin-left: 8px; } #toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; max-width: min(380px, calc(100vw - 32px)); } .toast { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent-strong); border-radius: 10px; padding: 10px 14px; font-size: 0.88rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } .toast.danger { border-left-color: var(--danger); } .toast.warn { border-left-color: var(--warn); } .toast.ok { border-left-color: var(--ok); } /* ===== Dialogos ===== */ dialog.vm-dialog { border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); color: var(--fg); max-width: 560px; width: min(92vw, 560px); padding: 20px; } dialog.vm-dialog::backdrop { background: rgba(0, 0, 0, 0.55); } dialog.vm-dialog h3 { margin: 0 0 10px; font-size: 1.05rem; } .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .dialog-cuerpo { display: flex; flex-direction: column; gap: 10px; } pre.pre-json { background: color-mix(in srgb, var(--bg) 70%, var(--bg-card)); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-family: var(--fuente-mono); font-size: 0.78rem; overflow-x: auto; max-height: 45vh; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; } /* ===== Barras de uso (dataviz: marcas finas, un solo tono, extremos redondeados, etiquetas en tinta de texto) ===== */ .bars { display: flex; flex-direction: column; gap: 8px; max-width: 640px; } .bar-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr 70px; align-items: center; gap: 10px; font-size: 0.82rem; } .bar-label { color: var(--fg-muted); font-family: var(--fuente-mono); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { display: block; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--border) 45%, transparent); overflow: hidden; } .bar-fill { display: block; height: 100%; border-radius: 5px; background: var(--accent); min-width: 2px; } .bar-value { font-variant-numeric: tabular-nums; text-align: right; color: var(--fg); } /* ===== Piezas concretas ===== */ .lista-audit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; } .lista-audit li { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); } .lista-audit li:last-child { border-bottom: none; } .outbound-flag { display: flex; gap: 12px; align-items: flex-start; background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid var(--warn); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; } .outbound-flag .lock { font-size: 1.3rem; } .outbound-flag strong { font-family: var(--fuente-mono); font-size: 0.9rem; } .outbound-flag p { margin: 6px 0 0; } .kv-lista { display: flex; flex-direction: column; } .kv-fila { display: grid; grid-template-columns: minmax(160px, 320px) 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); font-size: 0.85rem; } .kv-fila:last-child { border-bottom: none; } .kv-clave { font-family: var(--fuente-mono); font-size: 0.78rem; color: var(--fg-muted); overflow-wrap: anywhere; } .kv-valor { overflow-wrap: anywhere; } .guia ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; } .guia code { font-family: var(--fuente-mono); font-size: 0.8rem; background: color-mix(in srgb, var(--border) 40%, transparent); padding: 1px 6px; border-radius: 6px; } /* ===== Pantalla de login ===== */ #login-pantalla { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--bg-card) 80%, transparent), var(--bg) 72%), var(--bg); } #login-pantalla[hidden] { display: none; } .login-card { max-width: 380px; width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: center; } .login-card h1 { margin: 0; font-size: 1.3rem; } .login-card .campo { text-align: left; } .login-card .error { min-height: 1.2em; margin: 0; font-size: 0.85rem; } /* ===== Pestaña Asistente (chat voz+texto) ===== */ .chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; } .chat-panel { display: flex; flex-direction: column; gap: 12px; } .chat-cabecera { display: flex; align-items: center; gap: 10px; } .estado-texto { font-size: 0.88rem; color: var(--fg-muted); flex: 1; } /* Orbe de estado de escucha: reutiliza la firma visual del brand-orb; el color sigue el estado (idle=accent tenue, listening=ok, thinking=warn, speaking=accent). El transform lo anima asistente.js con el nivel real del micrófono. */ .orbe-estado { flex: none; width: 26px; height: 26px; border-radius: 50%; transition: transform 0.12s ease-out, background-color 0.25s, box-shadow 0.25s; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 60%, white) 0%, color-mix(in srgb, var(--accent) 45%, var(--bg-card)) 60%, var(--bg-card) 100%); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); } .orbe-estado[data-estado="listening"] { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ok) 90%, white) 0%, var(--ok) 70%); box-shadow: 0 0 14px color-mix(in srgb, var(--ok) 60%, transparent); } .orbe-estado[data-estado="thinking"] { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--warn) 90%, white) 0%, var(--warn) 70%); box-shadow: 0 0 14px color-mix(in srgb, var(--warn) 55%, transparent); animation: orbe-respira 1.6s ease-in-out infinite; } .orbe-estado[data-estado="speaking"] { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 92%, white) 0%, var(--accent-strong) 75%); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 65%, transparent); animation: orbe-respira 1.1s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .orbe-estado { animation: none !important; } } .chip-conexion { font-family: var(--fuente-mono); font-size: 0.7rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-muted); white-space: nowrap; } .chip-conexion[data-estado="conectado"] { color: var(--ok); border-color: var(--ok); } .chip-conexion[data-estado="desconectado"] { color: var(--danger); border-color: var(--danger); } .chat-log { height: min(48vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; scroll-behavior: smooth; } .msg { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border); } .msg.user { align-self: flex-end; background: color-mix(in srgb, var(--accent) 16%, var(--bg-card)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); border-bottom-right-radius: 4px; } .msg.asistente { align-self: flex-start; background: color-mix(in srgb, var(--bg) 55%, var(--bg-card)); border-bottom-left-radius: 4px; } .msg.sistema { align-self: center; max-width: 95%; background: transparent; border-style: dashed; color: var(--fg-muted); font-size: 0.82rem; } .chat-form { display: flex; gap: 10px; align-items: flex-end; } .chat-form textarea { flex: 1; } .chat-botones { display: flex; flex-direction: column; gap: 6px; } .btn-micro.activo { background: color-mix(in srgb, var(--danger) 18%, transparent); border-color: var(--danger); color: var(--danger); font-weight: 600; } .chat-prefs { display: flex; gap: 18px; font-size: 0.82rem; color: var(--fg-muted); flex-wrap: wrap; } .chat-prefs label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .radar-panel { display: flex; flex-direction: column; gap: 18px; } .radar-panel h3 { font-size: 0.8rem; margin: 0 0 8px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--fuente-mono); } .radar-item { border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg-card); } .radar-item p { margin: 0 0 6px; } .radar-ref { font-size: 0.78rem; } .radar-needs { font-size: 0.85rem; } .radar-counts { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; } .radar-sesion { margin: 0 0 6px; font-size: 0.85rem; display: flex; gap: 8px; align-items: center; } /* ===== Responsive ===== */ @media (max-width: 860px) { .layout { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; flex-direction: column; border-right: none; border-bottom: 1px solid var(--border); } #nav { flex-direction: row; flex-wrap: wrap; } #nav a { border-left: none; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; } #nav a[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--accent-strong); } .sidebar-pie { flex-direction: row; align-items: center; justify-content: space-between; } main#vista { padding: 18px 16px 48px; } .bar-row { grid-template-columns: minmax(70px, 100px) 1fr 60px; } .chat-layout { grid-template-columns: 1fr; } .chat-log { height: min(52vh, 420px); } }