/* IberikIA — estilos compartidos NOC dashboard / admin / settings / login. * Paleta clara por defecto (data-bs-theme="light"). Fallback dark disponible * por si en el futuro queremos restaurar el modo oscuro: basta con cambiar * el atributo del . Variables CSS para que cualquier futuro toggle * sea trivial. Todos los colores cumplen contraste WCAG AA. */ :root, :root[data-bs-theme="light"] { --bg-page: #f6f8fb; --bg-card: #ffffff; --bg-card-2: #f1f5f9; --bg-code: #0f172a; --border-soft: #e5e7eb; --border-strong: #cbd5e1; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --accent: #0284c7; --accent-hover: #0369a1; --accent-soft: rgba(2, 132, 199, 0.10); --accent-on: #ffffff; --green: #059669; --green-soft: rgba(5, 150, 105, 0.10); --amber: #d97706; --amber-soft: rgba(217, 119, 6, 0.12); --red: #dc2626; --red-soft: rgba(220, 38, 38, 0.10); --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08); --audio-filter: none; --topbar-bg: #ffffff; --topbar-border: #e5e7eb; } :root[data-bs-theme="dark"] { --bg-page: #0a0f1c; --bg-card: #111827; --bg-card-2: #1e293b; --bg-code: #050810; --border-soft: #1f2937; --border-strong: #334155; --text-primary: #e2e8f0; --text-secondary: #cbd5e1; --text-muted: #64748b; --accent: #38bdf8; --accent-hover: #0ea5e9; --accent-soft: rgba(56, 189, 248, 0.12); --accent-on: #0a0f1c; --green: #10b981; --green-soft: rgba(16, 185, 129, 0.12); --amber: #f59e0b; --amber-soft: rgba(245, 158, 11, 0.12); --red: #ef4444; --red-soft: rgba(239, 68, 68, 0.12); --shadow-card: none; --shadow-hover: none; --audio-filter: invert(0.9) hue-rotate(180deg); --topbar-bg: linear-gradient(180deg, #0b1322 0%, #0a0f1c 100%); --topbar-border: #1f2937; } /* ----- base ----- */ html, body { background: var(--bg-page); font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; } .mono { font-family: 'JetBrains Mono', monospace; } /* ----- topbar ----- */ .topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; position: sticky; top: 0; z-index: 100; transition: backdrop-filter 0.15s ease; } /* backdrop-filter solo cuando hay contenido detrás (ahorra repaint cuando estás * en lo alto de la página). El JS pone .scrolled en window.scrollY > 4. */ .topbar.scrolled { backdrop-filter: blur(6px); } .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.2px; color: var(--text-primary); } .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } /* Topbar de páginas admin: la dot pasa a ámbar (sin necesidad de inline-style). */ .topbar-admin .brand .dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); } .brand small { color: var(--text-muted); font-weight: 400; margin-left: 4px; font-size: 0.78rem; } /* Pulse reservado SOLO para estados activos (llamada en curso). El brand dot * y el live-dot son decorativos: estáticos. */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Píldoras meta de la topbar (links pequeños, info, badges) */ .meta-pill { font-family: 'Inter', sans-serif; font-size: 0.78rem; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-soft); padding: 5px 11px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: all 0.15s ease; } .meta-pill:hover { color: var(--accent); border-color: var(--accent); } .meta-pill .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; } .meta-pill .live-dot-err { background: var(--red); } .pill-admin { background: var(--amber-soft); border-color: rgba(217, 119, 6, 0.35); color: var(--amber); } .pill-admin:hover { color: var(--amber); border-color: var(--amber); } /* Toggle dark/light: el icono cambia según el tema activo. */ .theme-toggle { background: var(--bg-card); border: 1px solid var(--border-soft); color: var(--text-secondary); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; padding: 0; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } :root[data-bs-theme="dark"] .theme-toggle .icon-sun { display: inline; } :root[data-bs-theme="dark"] .theme-toggle .icon-moon { display: none; } .sound-toggle.sound-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } /* ----- cards y paneles ----- */ .container-main { padding: 22px 28px 60px; } /* Stat-bar: ticker condensado horizontal (sustituye al grid de 6 stat-cards). * Dos grupos separados por divisor: actividad y coste. */ .stat-bar { display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px 28px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; box-shadow: var(--shadow-card); padding: 14px 22px; margin-bottom: 20px; } .stat-group { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; } .stat-divider { width: 1px; background: var(--border-soft); align-self: stretch; } .stat-bar .stat-mini { display: inline-flex; flex-direction: column; gap: 2px; background: transparent; border: none; padding: 0; border-radius: 0; } .stat-mini-label { text-transform: uppercase; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.06em; font-weight: 600; display: flex; align-items: center; gap: 5px; } .stat-bar strong { font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; font-weight: 600; color: var(--text-primary); line-height: 1.1; } .stat-bar strong.accent { color: var(--accent); } .stat-bar strong.green { color: var(--green); } .stat-bar .stat-row { display: inline-flex; align-items: center; gap: 10px; } .stat-bar .sparkline { display: block; opacity: 0.85; } @media (max-width: 768px) { .stat-bar { padding: 12px 14px; gap: 12px; } .stat-divider { display: none; } .stat-group { gap: 18px; } } /* Stat-card legacy (queda por si alguien la usa, pero stat-bar es el patrón). */ .stat-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow-card); } .stat-card .label { text-transform: uppercase; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.08em; display: flex; align-items: center; gap: 6px; font-weight: 600; } .stat-card .value { font-family: 'JetBrains Mono', monospace; font-size: 1.4rem; font-weight: 600; margin-top: 6px; color: var(--text-primary); line-height: 1.1; } .stat-card .value.accent { color: var(--accent); } .stat-card .value.green { color: var(--green); } .panel { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); margin-bottom: 20px; } .panel-header { padding: 14px 20px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--bg-card); } .panel-title { font-weight: 600; font-size: 0.92rem; display: flex; align-items: center; gap: 9px; color: var(--text-primary); } .panel-title i { color: var(--accent); } .panel-body { padding: 20px; } /* ----- formularios ----- */ .form-control, .form-select, textarea.form-control { background: var(--bg-card); border-color: var(--border-soft); color: var(--text-primary); } .form-control:focus, .form-select:focus, textarea.form-control:focus { background: var(--bg-card); border-color: var(--accent); color: var(--text-primary); box-shadow: 0 0 0 0.18rem var(--accent-soft); } .form-control::placeholder { color: var(--text-muted); } textarea.form-control { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.55; } label { color: var(--text-secondary); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; font-weight: 600; } .hint { color: var(--text-muted); font-size: 0.78rem; margin-top: 4px; } .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 600; padding: 9px 20px; transition: all 0.15s ease; } .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on); } .btn-accent:focus { box-shadow: 0 0 0 0.18rem var(--accent-soft); } /* Dirty form indicator: pequeño punto en el botón submit cuando hay cambios. */ .dirty-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-left: 8px; vertical-align: middle; box-shadow: 0 0 0 2px var(--amber-soft); } button.dirty { box-shadow: 0 0 0 2px var(--amber-soft); } /* Subtítulo de sección anidada dentro de un panel (alternativa a card-en-card). */ .subsection-heading { font-size: 0.84rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin: 0 0 4px 0; display: flex; align-items: center; gap: 6px; } .subsection-heading i { color: var(--accent); } .btn-danger-soft { background: var(--red-soft); border: 1px solid rgba(220, 38, 38, 0.25); color: var(--red); } .btn-danger-soft:hover { background: var(--red); color: #ffffff; border-color: var(--red); } /* Tablas dentro de paneles (admin / ficha): cabecera atenuada en mayúsculas finas. */ .panel-body table { font-size: 0.88rem; } .panel-body table th { color: var(--text-secondary); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .panel-body table td { color: var(--text-primary); vertical-align: middle; } /* Tarjetas de herramientas (function-calling). */ .tool-card-existing { background: var(--bg-card-2); border: 1px solid var(--border-soft); border-radius: 10px; } .tool-card-new { background: var(--bg-card); border: 1px dashed var(--accent); border-radius: 10px; } .tool-config-textarea { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; } /* Markdown preview en empresa.php prompt + settings.php prompt */ .md-preview { min-height: 240px; max-height: 60vh; overflow-y: auto; background: var(--bg-card-2); border-color: var(--border-soft); line-height: 1.55; } .md-preview h1, .md-preview h2, .md-preview h3 { margin-top: 0.8em; margin-bottom: 0.4em; font-weight: 600; } .md-preview h1 { font-size: 1.4rem; } .md-preview h2 { font-size: 1.2rem; } .md-preview h3 { font-size: 1.05rem; } .md-preview p { margin-bottom: 0.6em; } .md-preview code { background: var(--bg-card); padding: 1px 5px; border-radius: 4px; font-size: 0.86em; } .md-preview pre { background: var(--bg-code); color: #cbd5e1; padding: 12px; border-radius: 6px; overflow-x: auto; } .md-preview pre code { background: transparent; color: inherit; padding: 0; } .md-preview ul, .md-preview ol { margin-bottom: 0.6em; padding-left: 1.4em; } .md-preview a { color: var(--accent); } .md-preview blockquote { border-left: 3px solid var(--border-strong); padding-left: 12px; color: var(--text-secondary); margin: 0.6em 0; } /* Buttons outline reaprovechan los de Bootstrap con tint */ .input-group-text { background: var(--bg-card-2); border-color: var(--border-soft); color: var(--text-secondary); } /* Slider range con valor inline */ .range-with-value { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .range-with-value input[type=range] { width: 100%; } .range-with-value .range-val { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; background: var(--bg-card-2); padding: 4px 10px; border-radius: 6px; min-width: 56px; text-align: center; color: var(--text-primary); border: 1px solid var(--border-soft); } input[type=range] { accent-color: var(--accent); } /* ----- tabla de llamadas ----- */ table.calls { width: 100%; margin: 0; font-size: 0.88rem; } table.calls thead th { background: var(--bg-card-2); color: var(--text-secondary); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; position: sticky; top: 0; } table.calls tbody td { padding: 11px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; color: var(--text-primary); } table.calls tbody tr { cursor: pointer; transition: background 0.1s ease; } table.calls tbody tr:hover { background: var(--accent-soft); } table.calls tbody tr:last-child td { border-bottom: none; } table.calls .audio-wrap, table.calls .btn-download { cursor: default; } /* Responsivo: en <900px ocultamos columnas pesadas. El detalle vive en el modal. */ @media (max-width: 900px) { table.calls .col-id, table.calls .col-did, table.calls .col-coste { display: none; } } @media (max-width: 640px) { table.calls .col-nombre, table.calls .col-empresa { display: none; } table.calls thead th, table.calls tbody td { padding: 12px 10px; } table.calls { font-size: 0.92rem; } table.calls .col-audio { display: none; } /* Indicador discreto de que hay audio cuando ocultamos las columnas. */ table.calls .col-estado .status-badge { padding: 4px 12px; } } .id-cell { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); font-size: 0.84rem; } .reviewed-mark { color: var(--green); margin-left: 4px; font-size: 0.9rem; } table.calls tbody tr.reviewed td { color: var(--text-muted); } table.calls tbody tr.reviewed .num-strong { color: var(--text-secondary); } .num-strong { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-primary); } .num-soft { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); font-size: 0.82rem; } .no-data { color: var(--text-muted); font-style: italic; font-size: 0.85rem; } .empresa-tag { background: var(--accent-soft); border: 1px solid rgba(2, 132, 199, 0.25); color: var(--accent); padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-family: 'JetBrains Mono', monospace; font-weight: 600; } /* ----- badges de estado de llamada (más sobrios, sin uppercase agresivo) ----- */ .status-badge { font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 500; padding: 3px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; } .status-badge .dot { width: 6px; height: 6px; border-radius: 50%; } .status-badge.active { background: var(--green-soft); color: var(--green); border-color: rgba(5, 150, 105, 0.25); } .status-badge.active .dot { background: var(--green); animation: pulse 1.4s infinite; } .status-badge.completed { background: var(--bg-card-2); color: var(--text-secondary); border-color: var(--border-soft); } .status-badge.aborted { background: var(--red-soft); color: var(--red); border-color: rgba(220, 38, 38, 0.25); } .status-badge.pending { background: var(--amber-soft); color: var(--amber); border-color: rgba(217, 119, 6, 0.25); } /* ----- audio player ----- */ .audio-wrap { display: flex; align-items: center; gap: 8px; } audio { width: 220px; height: 32px; filter: var(--audio-filter); } .btn-download { color: var(--accent); text-decoration: none; padding: 4px 8px; border-radius: 6px; transition: background 0.15s; } .btn-download:hover { background: var(--accent-soft); color: var(--accent-hover); } /* ----- estados vacíos y animaciones ----- */ .empty-state { padding: 50px 20px; text-align: center; color: var(--text-muted); } .empty-state i { font-size: 2.5rem; color: var(--border-strong); display: block; margin-bottom: 10px; } .empty-state .hint { display: inline-block; margin-top: 6px; } .empty-onboarding .empty-title { color: var(--text-primary); font-weight: 600; font-size: 1rem; margin-bottom: 4px; } .empty-onboarding .empty-desc { font-size: 0.88rem; color: var(--text-secondary); max-width: 500px; margin: 0 auto; } .empty-onboarding .empty-desc a { color: var(--accent); text-decoration: none; } .empty-onboarding .empty-desc a:hover { text-decoration: underline; } .row-new { animation: rowIn 0.6s ease; } @keyframes rowIn { from { background: var(--accent-soft); } to { background: transparent; } } /* ----- modal ----- */ .modal-content { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-soft); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15); } .modal-header, .modal-footer { border-color: var(--border-soft); } .modal-title { color: var(--text-primary); } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 22px; } .detail-item .label { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .detail-item .value { font-family: 'JetBrains Mono', monospace; color: var(--text-primary); margin-top: 3px; font-size: 0.92rem; } .detail-section { background: var(--bg-card-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px 16px; } .detail-section h6 { color: var(--accent); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; font-weight: 600; } .cost-breakdown { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; } .cost-breakdown .row-cb { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--border-soft); } .cost-breakdown .row-cb:last-child { border-bottom: none; font-weight: 700; color: var(--accent); padding-top: 9px; margin-top: 3px; border-top: 1px solid var(--border-soft); } .json-dump { background: var(--bg-code); border: 1px solid var(--border-soft); border-radius: 6px; padding: 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; max-height: 280px; overflow: auto; white-space: pre-wrap; color: #cbd5e1; } .audio-big audio { width: 100%; height: 36px; filter: var(--audio-filter); } .dm-summary-text { margin-bottom: 0.5rem; } .dm-summary-highlights { padding-left: 1.2rem; margin: 0; } .details-summary { cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); } .details-summary:hover { color: var(--accent); } pre.call-log { max-height: 320px; overflow: auto; background: var(--bg-code); padding: 0.75rem; border-radius: 0.4rem; font-size: 0.78rem; color: #cbd5e1; margin: 0; white-space: pre-wrap; word-break: break-word; } /* ----- dropdown ----- */ .dropdown-menu { background: var(--bg-card); border: 1px solid var(--border-soft); box-shadow: var(--shadow-hover); color: var(--text-primary); } .controls-menu { min-width: 320px; } /* Menú avatar (colapsa recordings/phpmyadmin/ajustes/salir tras la ficha del user) */ .user-menu-toggle { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 0.78rem; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-soft); padding: 5px 11px; border-radius: 999px; cursor: pointer; } .user-menu-toggle:hover, .user-menu-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); } .user-menu-toggle .caret { font-size: 0.7rem; opacity: 0.6; } .user-menu .dropdown-item { display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 0.86rem; padding: 8px 14px; } .user-menu .dropdown-item:hover { background: var(--accent-soft); color: var(--accent); } .user-menu .dropdown-item i { color: var(--text-muted); width: 16px; text-align: center; } .user-menu .dropdown-item:hover i { color: var(--accent); } .user-menu .dropdown-item.danger { color: var(--red); } .user-menu .dropdown-item.danger i { color: var(--red); opacity: 0.7; } .user-menu .dropdown-item.danger:hover { background: var(--red-soft); } .user-menu .dropdown-header { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 8px 14px 4px; } .user-menu .dropdown-divider { border-color: var(--border-soft); margin: 6px 0; } /* Cluster de toggles (theme + sound) sin borde — visualmente agrupados */ .toggle-cluster { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--bg-card-2); border: 1px solid var(--border-soft); } .toggle-cluster .theme-toggle { width: 30px; height: 30px; background: transparent; border: none; } .toggle-cluster .theme-toggle:hover { background: var(--accent-soft); } /* Filtros agrupados tras un botón popover en la toolbar del panel calls */ .filter-trigger { position: relative; } .filter-trigger .filter-badge { position: absolute; top: -4px; right: -4px; background: var(--accent); color: var(--accent-on); font-size: 0.65rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .filter-popover { min-width: 320px; padding: 14px; } .filter-popover .filter-row { margin-bottom: 12px; } .filter-popover .filter-row:last-child { margin-bottom: 0; } .filter-popover .filter-row label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; font-weight: 600; } .filter-popover .filter-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-soft); padding-top: 10px; margin-top: 10px; } /* Tabla unificada tokens+coste (sustituye dos paneles col-md-6) */ .cost-table { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 0.84rem; border-collapse: collapse; } .cost-table thead th { font-family: 'Inter', sans-serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; text-align: right; padding: 4px 10px 8px; border-bottom: 1px solid var(--border-soft); } .cost-table thead th:first-child { text-align: left; } .cost-table tbody td { padding: 6px 10px; border-bottom: 1px dashed var(--border-soft); text-align: right; color: var(--text-primary); } .cost-table tbody td:first-child { text-align: left; color: var(--text-secondary); font-family: 'Inter', sans-serif; font-size: 0.85rem; } .cost-table tbody tr.total td { font-weight: 700; color: var(--accent); border-bottom: none; border-top: 1px solid var(--border-soft); padding-top: 9px; } .cost-table tbody tr.total td:first-child { color: var(--accent); } /* Radio cards para el selector de modo de barge-in (sustituye select + muro de texto) */ .barge-mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .barge-mode-card { display: block; cursor: pointer; background: var(--bg-card); border: 1.5px solid var(--border-soft); border-radius: 10px; padding: 14px 16px; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; position: relative; } .barge-mode-card:hover { border-color: var(--accent); } .barge-mode-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .barge-mode-card .mode-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .barge-mode-card .mode-name { font-weight: 600; color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-size: 0.92rem; } .barge-mode-card .mode-badge { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--bg-card-2); color: var(--text-muted); padding: 2px 7px; border-radius: 999px; font-weight: 600; } .barge-mode-card .mode-desc { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.45; } .barge-mode-card input[type="radio"]:checked + .mode-head + .mode-desc, .barge-mode-card:has(input[type="radio"]:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.10); } .barge-mode-card:has(input[type="radio"]:checked) .mode-badge { background: var(--accent); color: var(--accent-on); } .barge-mode-card:has(input[type="radio"]:checked) .mode-name { color: var(--accent); } /* ----- visually hidden (live regions, skip-links) ----- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----- health dots ----- */ .hc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; vertical-align: middle; background: var(--text-muted); transition: background 0.2s; } .hc-dot.ok { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .hc-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); } .hc-dot.bad { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); } #healthPill { cursor: help; } /* ----- flash messages ----- */ .flash { padding: 11px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.88rem; border: 1px solid transparent; } .flash.success { background: var(--green-soft); border-color: rgba(5, 150, 105, 0.25); color: var(--green); } .flash.error { background: var(--red-soft); border-color: rgba(220, 38, 38, 0.25); color: var(--red); } /* ----- bloques info (settings) ----- */ .info-row { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; } .info-item { color: var(--text-muted); font-size: 0.82rem; } .info-item strong { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; margin-left: 6px; font-weight: 600; } .tag { background: var(--accent-soft); border: 1px solid rgba(2, 132, 199, 0.25); color: var(--accent); padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-family: 'JetBrains Mono', monospace; font-weight: 600; } /* ----- login ----- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 36px 32px; width: 100%; max-width: 380px; box-shadow: var(--shadow-hover); } /* ----- compactar ligeramente en pantallas pequeñas ----- */ @media (max-width: 768px) { .container-main { padding: 16px 14px 40px; } .topbar { padding: 12px 14px; } .stat-card .value { font-size: 1.3rem; } .panel-body { padding: 16px; } } /* ----- dispositivos táctiles: cumplir WCAG 2.5.5 Target Size (44x44) ----- * Aplicamos solo cuando el dispositivo principal es táctil (pointer: coarse), * para no inflar los botones en desktop con ratón. */ @media (pointer: coarse) { .btn-sm, .btn-sm.btn-accent, .btn-sm.btn-outline-secondary, .btn-sm.btn-danger-soft, .btn-sm.btn-outline-warning, .btn-sm.btn-outline-danger { min-height: 44px; min-width: 44px; padding: 8px 12px; font-size: 0.9rem; } .meta-pill { min-height: 38px; padding: 8px 13px; } .did-pill button { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; } .hc-dot { transform: scale(1.3); } .form-control, .form-select { min-height: 44px; } .form-control-sm, .form-select-sm { min-height: 38px; font-size: 0.95rem; } .form-check-input { min-width: 22px; min-height: 22px; } } /* ===== Transcripción tipo chat (modal dashboard + llamada.php) — 2026-06-10 ===== */ .chat-box { max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; } .chat-row { display: flex; } .chat-row.chat-agent { justify-content: flex-end; } .chat-row.chat-caller { justify-content: flex-start; } .chat-bubble { max-width: 72%; padding: 8px 12px; border-radius: 12px; font-size: 0.9rem; line-height: 1.45; } .chat-caller .chat-bubble { background: var(--bg-page, #f1f3f5); border: 1px solid var(--border-soft); border-bottom-left-radius: 4px; } .chat-agent .chat-bubble { background: rgba(13,110,253,0.08); border: 1px solid rgba(13,110,253,0.18); border-bottom-right-radius: 4px; } .chat-who { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; } .chat-ts { font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; text-align: right; }