/* ============================================
PANEL DE ADMINISTRACIÓN - ESTILOS PRINCIPALES
DESIGN SYSTEM v3.0 — Port del rediseño "Sistema de Bots"
light + [data-theme="dark"] + [data-density="compact"]
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* ──── Brand accent (oklch, override via tweaks panel) ──── */
--accent: oklch(0.54 0.22 282);
--accent-hover: oklch(0.49 0.22 282);
--accent-active: oklch(0.44 0.22 282);
--accent-fg: #ffffff;
--accent-subtle: oklch(0.96 0.025 282);
--accent-border: oklch(0.88 0.06 282);
/* ──── Neutral surfaces (light) ──── */
--bg: #fafafa;
--surface: #ffffff;
--surface-2: #f6f6f7;
--surface-3: #ededee;
--surface-hover: #f4f4f5;
--border: #e7e7e9;
--border-strong: #d4d4d8;
--border-input: #e1e1e4;
/* ──── Text ──── */
--fg: #0a0a0b;
--fg-2: #27272a;
--muted: #6b6b71;
--subtle: #9b9ba1;
/* ──── Status ──── */
--success: #15803d;
--success-bg: #ecfdf5;
--success-border: #bbf7d0;
--warning: #a16207;
--warning-bg: #fefce8;
--warning-border: #fde68a;
--danger: #b91c1c;
--danger-bg: #fef2f2;
--danger-border: #fecaca;
--info: #1d4ed8;
--info-bg: #eff6ff;
--info-border: #bfdbfe;
--neutral-bg: #f4f4f5;
--neutral-border: #e4e4e7;
/* ──── Elevation ──── */
--shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.04);
--shadow-md: 0 4px 16px -4px rgba(9, 9, 11, 0.08), 0 1px 2px rgba(9, 9, 11, 0.04);
--shadow-lg: 0 12px 40px -8px rgba(9, 9, 11, 0.14), 0 4px 8px rgba(9, 9, 11, 0.04);
/* ──── Geometry ──── */
--r-xs: 4px;
--r-sm: 6px;
--r-md: 8px;
--r-lg: 10px;
--r-xl: 12px;
/* ──── Density ──── */
--row-h: 44px;
--control-h: 34px;
--sidebar-w: 240px;
--subnav-w: 240px;
--topbar-h: 56px;
/* ──── Type ──── */
--font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Inter", Roboto, sans-serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
color-scheme: light;
/* ──────────────────────────────────────────────────────
LEGACY ALIASES — CSS existente sigue funcionando.
Mientras se migra HTML a las clases nuevas, los selectores
que usen --primary-color/--bg-card/--text-primary/etc.
siguen renderizando contra los tokens nuevos.
────────────────────────────────────────────────────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-base: 13px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 20px;
--line-height-tight: 1.3;
--line-height-normal: 1.5;
--input-height: var(--control-h);
--input-height-sm: 28px;
--button-height: var(--control-h);
--button-height-sm: 24px;
--badge-height: 20px;
--border-width: 1px;
--border-radius-sm: var(--r-xs);
--border-radius-md: var(--r-sm);
--border-radius-lg: var(--r-md);
--sidebar-width: var(--sidebar-w);
--primary-color: var(--accent);
--primary-dark: var(--accent-active);
--secondary-color: var(--muted);
--success-color: var(--success);
--danger-color: var(--danger);
--warning-color: var(--warning);
--info-color: var(--info);
--bg-primary: var(--bg);
--bg-card: var(--surface);
--bg-secondary: var(--surface-2);
--bg-tertiary: var(--surface-3);
--light-bg: var(--surface-2);
--border-color: var(--border);
--border-color-focus: var(--accent);
--text-primary: var(--fg);
--text-secondary: var(--muted);
--text-muted: var(--subtle);
--dark-text: var(--fg);
}
/* ──── Dark theme (toggle via ) ──── */
[data-theme="dark"] {
--accent: oklch(0.68 0.20 282);
--accent-hover: oklch(0.72 0.20 282);
--accent-active: oklch(0.78 0.18 282);
--accent-fg: #0a0a0b;
--accent-subtle: color-mix(in oklch, oklch(0.68 0.20 282) 14%, #0a0a0b);
--accent-border: color-mix(in oklch, oklch(0.68 0.20 282) 28%, #0a0a0b);
--bg: #0a0a0b;
--surface: #131316;
--surface-2: #18181b;
--surface-3: #1f1f23;
--surface-hover: #1c1c20;
--border: #26262a;
--border-strong: #3a3a3f;
--border-input: #2a2a2e;
--fg: #fafafa;
--fg-2: #e4e4e7;
--muted: #a1a1aa;
--subtle: #6b6b71;
--success: #4ade80;
--success-bg: color-mix(in oklch, #4ade80 12%, #0a0a0b);
--success-border: color-mix(in oklch, #4ade80 24%, #0a0a0b);
--warning: #fbbf24;
--warning-bg: color-mix(in oklch, #fbbf24 10%, #0a0a0b);
--warning-border: color-mix(in oklch, #fbbf24 22%, #0a0a0b);
--danger: #f87171;
--danger-bg: color-mix(in oklch, #f87171 12%, #0a0a0b);
--danger-border: color-mix(in oklch, #f87171 24%, #0a0a0b);
--info: #60a5fa;
--info-bg: color-mix(in oklch, #60a5fa 12%, #0a0a0b);
--info-border: color-mix(in oklch, #60a5fa 24%, #0a0a0b);
--neutral-bg: #1f1f23;
--neutral-border: #2a2a2e;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 8px 24px -8px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.3);
--shadow-lg: 0 18px 48px -12px rgba(0,0,0,0.7), 0 6px 12px rgba(0,0,0,0.4);
color-scheme: dark;
}
/* ──── Density compact (filas/controles más bajos) ──── */
[data-density="compact"] {
--row-h: 36px;
--control-h: 30px;
}
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--fg);
line-height: var(--line-height-normal);
font-size: var(--font-size-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; /* Prevenir scroll horizontal */
}
/* ============================================
LOGIN PAGE
============================================ */
.login-page {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.login-container {
width: 100%;
max-width: 400px;
}
.login-box {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-box h1 {
text-align: center;
margin-bottom: 10px;
color: var(--dark-text);
}
.login-box .subtitle {
text-align: center;
color: var(--secondary-color);
margin-bottom: 30px;
font-size: 14px;
}
.login-form .form-group {
margin-bottom: 20px;
}
.login-form label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--dark-text);
}
.login-form input {
width: 100%;
height: var(--input-height);
padding: 0 var(--space-3);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius-md);
font-size: 14px;
transition: border-color 0.2s ease;
}
.login-form input:focus {
outline: none;
border-color: var(--border-color-focus);
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}
.login-form .btn {
width: 100%;
padding: 14px;
margin-top: 10px;
}
.login-note {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
text-align: center;
font-size: 12px;
color: var(--secondary-color);
}
/* ============================================
LAYOUT PRINCIPAL
============================================ */
.admin-wrapper {
display: flex;
min-height: 100vh;
}
/* Sidebar */
.sidebar {
width: var(--sidebar-width);
background: var(--bg-card);
border-right: var(--border-width) solid var(--border-color);
position: fixed;
height: 100vh;
overflow-y: auto;
z-index: 1000;
transition: transform 0.25s ease;
}
.sidebar-header {
padding: var(--space-4) var(--space-4);
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: white;
}
.sidebar-header h2 {
font-size: var(--font-size-lg);
margin-bottom: var(--space-1);
font-weight: 600;
}
.sidebar-header p {
font-size: var(--font-size-xs);
opacity: 0.9;
}
.sidebar-nav {
padding: var(--space-3) 0;
}
.sidebar-nav a {
display: flex;
align-items: center;
padding: var(--space-2) var(--space-4);
color: var(--text-primary);
text-decoration: none;
font-size: var(--font-size-base);
transition: all 0.15s ease;
border-left: 3px solid transparent;
}
.sidebar-nav a:hover {
background: var(--bg-secondary);
border-left-color: var(--primary-color);
}
.sidebar-nav a.active {
background: var(--bg-secondary);
border-left-color: var(--primary-color);
font-weight: 500;
color: var(--primary-color);
}
.sidebar-nav a i {
margin-right: var(--space-2);
width: 18px;
display: inline-block;
text-align: center;
}
/* Main Content */
.main-content {
flex: 1;
margin-left: var(--sidebar-width);
padding: var(--space-4);
overflow-x: hidden; /* Prevenir scroll horizontal */
max-width: 100%;
}
/* Header */
.content-header {
background: var(--bg-card);
padding: var(--space-3) var(--space-4);
margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4) calc(-1 * var(--space-4));
border-bottom: var(--border-width) solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.content-header h1 {
font-size: var(--font-size-xl);
color: var(--text-primary);
font-weight: 600;
margin: 0;
}
/* Hamburger button (visible solo en mobile) */
.hamburger-btn {
display: none;
background: none;
border: none;
padding: var(--space-2);
cursor: pointer;
color: var(--text-secondary);
margin-right: var(--space-3);
border-radius: var(--border-radius-sm);
}
.hamburger-btn:hover {
background: var(--bg-secondary);
}
.header-left {
display: flex;
align-items: center;
}
.user-menu {
display: flex;
align-items: center;
gap: var(--space-3);
}
.user-menu span {
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
/* Cards */
.card {
background: var(--bg-card);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius-md);
padding: var(--space-4);
margin-bottom: var(--space-3);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-3);
padding-bottom: var(--space-3);
border-bottom: var(--border-width) solid var(--border-color);
}
.card-header h2 {
font-size: var(--font-size-md);
color: var(--text-primary);
font-weight: 600;
margin: 0;
}
/* Forms */
.form-group {
margin-bottom: var(--space-4);
}
.form-group label {
display: block;
margin-bottom: var(--space-2);
font-weight: 500;
font-size: var(--font-size-sm);
color: var(--text-primary);
}
/* ============================================
SLIM INPUTS - Reglas Estrictas
============================================ */
/* Base: Inputs, Selects */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
select {
width: 100%;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
padding: 0 var(--space-3) !important;
font-size: 13px !important;
line-height: 32px !important;
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius-sm);
background: var(--bg-card);
color: var(--text-primary);
font-family: inherit;
transition: border-color 0.15s ease;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
/* Textareas: Altura automática, mínimo compacto */
textarea {
width: 100%;
min-height: 80px;
max-height: 300px;
padding: var(--space-2) var(--space-3);
font-size: 13px;
line-height: 1.5;
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius-sm);
background: var(--bg-card);
color: var(--text-primary);
font-family: inherit;
resize: vertical;
transition: border-color 0.15s ease;
}
/* Textarea Compacto (para mensajes cortos) */
.textarea-compact {
min-height: 64px !important;
max-height: 150px !important;
}
/* Textarea Grande (para código/instrucciones) */
.textarea-code {
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
font-size: 12px;
min-height: 120px;
max-height: 400px;
}
/* ============================================
CUSTOM SELECT (Flecha SVG)
============================================ */
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
padding-right: 36px !important;
cursor: pointer;
text-overflow: ellipsis;
}
select:hover {
border-color: var(--text-muted);
}
select:focus {
border-color: var(--primary-color);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Fix para Firefox */
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 var(--text-primary);
}
/* Compatibilidad con .form-group */
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
}
.form-group small {
display: block;
margin-top: var(--space-1);
color: var(--text-secondary);
font-size: var(--font-size-xs);
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-4);
align-items: end;
}
/* Config Grid - ELIMINADO (conflicto con Slim Inputs) */
/* Buttons */
.btn {
height: var(--button-height);
padding: 0 var(--space-3);
border: none;
border-radius: var(--border-radius-sm);
font-size: var(--font-size-base);
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: white;
}
.btn-primary:hover {
filter: brightness(1.05);
}
.btn-secondary {
background: var(--secondary-color);
color: white;
}
.btn-secondary:hover {
filter: brightness(1.1);
}
.btn-success {
background: var(--success-color);
color: white;
}
.btn-success:hover {
filter: brightness(1.1);
}
.btn-danger {
background: var(--danger-color);
color: white;
}
.btn-danger:hover {
filter: brightness(1.1);
}
.btn-info {
background: var(--info-color);
color: white;
}
.btn-info:hover {
filter: brightness(1.1);
}
.btn-sm {
height: var(--button-height-sm);
padding: 0 var(--space-2);
font-size: var(--font-size-xs);
}
/* Tables */
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--bg-card);
}
table th,
table td {
padding: var(--space-2) var(--space-3);
text-align: left;
border-bottom: var(--border-width) solid var(--border-color);
font-size: var(--font-size-base);
vertical-align: middle;
}
table th {
background: var(--bg-secondary);
font-weight: 600;
color: var(--text-secondary);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
}
table td {
color: var(--text-primary);
}
table tr:hover {
background: var(--bg-secondary);
}
/* Columna de acciones */
table td:last-child {
white-space: nowrap;
}
table td .btn + .btn {
margin-left: var(--space-1);
}
/* ============================================
TABLAS RESPONSIVE → CARDS EN MOBILE
============================================ */
@media (max-width: 768px) {
.table-container {
overflow-x: visible;
}
/* Ocultar thead */
table thead {
display: none;
}
/* Convertir tbody en flex container */
table tbody {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* Cada fila es una card */
table tr {
display: flex;
flex-direction: column;
padding: var(--space-3);
background: var(--bg-card);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius-md);
gap: var(--space-2);
}
table tr:hover {
background: var(--bg-card);
}
/* Cada celda muestra su label */
table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-2) 0;
border: none;
gap: var(--space-3);
}
/* Label del dato (desde data-label) */
table td::before {
content: attr(data-label);
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
}
/* Valor del dato alineado a la derecha */
table td > * {
text-align: right;
}
/* Columna de acciones ocupa ancho completo */
table td:last-child {
flex-direction: row;
justify-content: flex-start;
padding-top: var(--space-3);
margin-top: var(--space-2);
border-top: var(--border-width) solid var(--border-color);
white-space: normal;
}
table td:last-child::before {
content: '';
}
table td:last-child .btn {
flex: 1;
}
/* Badges y otros elementos inline */
table td .badge,
table td strong {
margin-left: auto;
}
}
/* Alerts */
.alert {
padding: var(--space-3);
border-radius: var(--border-radius-md);
margin-bottom: var(--space-4);
font-size: var(--font-size-sm);
}
.alert-success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.alert-error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.alert-info {
background: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
/* Badges — v3 (clases legacy mapeadas a tokens nuevos; HTML sin tocar) */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
height: 20px;
padding: 0 7px;
border-radius: 4px;
font-size: 11.5px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.005em;
border: 1px solid transparent;
white-space: nowrap;
}
.badge-success {
background: var(--success-bg);
color: var(--success);
border-color: var(--success-border);
}
.badge-danger {
background: var(--danger-bg);
color: var(--danger);
border-color: var(--danger-border);
}
.badge-warning {
background: var(--warning-bg);
color: var(--warning);
border-color: var(--warning-border);
}
/* Stats Cards */
.stats-grid {
display: grid;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
/* Mobile: 2 columnas */
@media (max-width: 639px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Tablet: 3 columnas */
@media (min-width: 640px) and (max-width: 1023px) {
.stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Desktop: Auto-fit con mínimo de 150px */
@media (min-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
}
.stat-card {
background: var(--bg-card);
border: var(--border-width) solid var(--border-color);
padding: var(--space-3);
border-radius: var(--border-radius-md);
}
.stat-card h3 {
font-size: var(--font-size-xs);
color: var(--text-secondary);
margin-bottom: var(--space-1);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.stat-card .stat-value {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--primary-color);
line-height: 1.2;
}
/* ============================================
TABS HÍBRIDAS (Desktop + Mobile)
============================================ */
/* Contenedor principal */
.tabs-container {
margin-bottom: var(--space-4);
}
/* === DESKTOP TABS === */
.tabs--desktop {
display: flex;
border-bottom: var(--border-width) solid var(--border-color);
gap: 0;
overflow-x: auto;
scrollbar-width: none; /* Firefox */
}
.tabs--desktop::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.tabs--desktop .tab {
padding: var(--space-2) var(--space-3);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-secondary);
transition: all 0.15s ease;
white-space: nowrap;
}
.tabs--desktop .tab:hover {
color: var(--primary-color);
background: var(--bg-secondary);
}
.tabs--desktop .tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* === MOBILE SELECT === */
.tabs-mobile {
display: none; /* Oculto por defecto (desktop) */
}
.tabs-mobile__label {
display: block;
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
margin-bottom: var(--space-2);
}
.tabs-mobile__select {
width: 100%;
height: 36px;
padding: 0 36px 0 var(--space-3);
font-size: var(--font-size-base);
font-weight: 500;
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius-sm);
background-color: var(--bg-card);
color: var(--text-primary);
cursor: pointer;
/* Flecha personalizada (evitar glitch) */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px 12px;
}
.tabs-mobile__select:focus {
outline: none;
border-color: var(--primary-color);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* === RESPONSIVE SWITCH === */
@media (max-width: 768px) {
.tabs--desktop {
display: none; /* Ocultar tabs en mobile */
}
.tabs-mobile {
display: block; /* Mostrar select en mobile */
}
}
/* Tabs legacy (mantener compatibilidad) */
.tabs {
display: flex;
border-bottom: var(--border-width) solid var(--border-color);
margin-bottom: var(--space-4);
overflow-x: auto;
}
.tab {
padding: var(--space-2) var(--space-4);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-secondary);
transition: all 0.15s ease;
white-space: nowrap;
}
.tab:hover {
color: var(--primary-color);
background: var(--bg-secondary);
}
.tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* Tabs Anidadas (dentro de otra pestaña) */
.tabs--nested {
margin-bottom: var(--space-4);
border-bottom: var(--border-width) solid var(--border-color);
}
.tabs--nested .tab {
font-size: var(--font-size-xs);
padding: var(--space-2) var(--space-3);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Responsive */
/* Overlay para cerrar sidebar en mobile */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.sidebar-overlay.active {
display: block;
}
@media (max-width: 768px) {
/* Sidebar como drawer en mobile */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 280px;
transform: translateX(-100%);
z-index: 1001;
}
.sidebar.open {
transform: translateX(0);
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
/* Main content sin margen en mobile */
.main-content {
margin-left: 0;
padding: var(--space-3);
}
/* Header compacto en mobile */
.content-header {
padding: var(--space-3);
margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3) calc(-1 * var(--space-3));
}
.content-header h1 {
font-size: var(--font-size-lg);
}
/* Mostrar hamburger button */
.hamburger-btn {
display: flex;
}
/* Form row en 1 columna */
.form-row {
grid-template-columns: 1fr;
}
/* Config grid - ELIMINADO */
}
/* Tablet */
@media (min-width: 769px) and (max-width: 1023px) {
.main-content {
padding: var(--space-4);
}
}
/* Loading */
.loading {
text-align: center;
padding: 40px;
color: var(--secondary-color);
}
/* Empty State */
.empty-state {
text-align: center;
padding: var(--space-6) var(--space-4);
color: var(--text-secondary);
}
.empty-state i,
.empty-state div:first-child {
font-size: 48px;
margin-bottom: var(--space-4);
opacity: 0.5;
}
.empty-state p {
font-size: var(--font-size-sm);
margin: 0;
}
/* ============================================
FORM FIELDS - SIDE BY SIDE LAYOUT
============================================ */
/* Contenedor de campo */
.form-field {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--space-3);
align-items: start;
padding: var(--space-3) 0;
border-bottom: var(--border-width) solid var(--border-color);
}
.form-field:last-child {
border-bottom: none;
}
/* Columna izquierda: Label + Hint */
.form-field__label {
display: flex;
align-items: center;
gap: var(--space-2);
padding-top: 6px; /* Alinear con input */
}
.form-field__label label {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
margin: 0;
}
/* Icono de ayuda (tooltip) */
.form-field__hint {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--text-muted);
cursor: help;
position: relative;
flex-shrink: 0;
}
.form-field__hint svg {
width: 14px;
height: 14px;
}
/* Tooltip on hover */
.form-field__hint::after {
content: attr(title);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--text-primary);
color: white;
font-size: var(--font-size-xs);
border-radius: var(--border-radius-sm);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease;
z-index: 100;
max-width: 250px;
white-space: normal;
pointer-events: none;
}
.form-field__hint:hover::after {
opacity: 1;
visibility: visible;
}
/* Columna derecha: Input */
.form-field__input {
flex: 1;
}
.form-field__input input,
.form-field__input select,
.form-field__input textarea {
width: 100%;
max-width: 600px; /* Limitar ancho en desktop */
margin: 0;
}
/* Variante: Campo ancho completo (para textareas grandes) */
.form-field--full {
grid-template-columns: 1fr;
gap: var(--space-2);
}
.form-field--full .form-field__label {
padding-top: 0;
}
/* Variante: Campo para Textareas */
.form-field--textarea {
grid-template-columns: 1fr;
gap: var(--space-2);
}
.form-field--textarea .form-field__label {
padding-top: 0;
}
.form-field--textarea .form-field__input {
width: 100%;
}
/* === RESPONSIVE === */
@media (max-width: 768px) {
.form-field {
grid-template-columns: 1fr;
gap: var(--space-2);
}
.form-field__label {
padding-top: 0;
}
/* Ocultar tooltip en mobile (muy pequeño) */
.form-field__hint::after {
display: none;
}
}
/* === SECCIONES DE FORMULARIO === */
.form-section {
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: var(--border-width) solid var(--border-color);
}
.form-section__title {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-4);
}
.form-section__description {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-bottom: var(--space-4);
}
/* === OPCIONES DEL MENÚ (Grid de opciones) === */
.menu-options-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
@media (max-width: 768px) {
.menu-options-grid {
grid-template-columns: 1fr;
}
}
.menu-option-card {
padding: var(--space-3);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius-md);
background: var(--bg-card);
}
.menu-option-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-3);
}
.menu-option-card__number {
display: flex;
align-items: center;
gap: var(--space-2);
}
.menu-option-card__emoji {
font-size: var(--font-size-lg);
font-weight: 700;
}
.menu-option-card__toggle {
display: flex;
align-items: center;
gap: var(--space-2);
}
.menu-option-card__toggle input[type="checkbox"] {
width: auto;
height: auto;
cursor: pointer;
}
.menu-option-card__status {
font-size: var(--font-size-xs);
padding: 3px 8px;
border-radius: 12px;
font-weight: 500;
}
.menu-option-card__status--active {
background: var(--success-color);
color: white;
}
.menu-option-card__status--inactive {
background: var(--danger-color);
color: white;
}
.menu-option-card__input {
width: 100%;
}
/* ============================================
PAGINACIÓN
============================================ */
.pagination {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) 0;
margin-top: var(--space-4);
border-top: var(--border-width) solid var(--border-color);
}
.pagination__info {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.pagination__controls {
display: flex;
align-items: center;
gap: var(--space-2);
}
.pagination__pages {
display: flex;
gap: var(--space-1);
}
.pagination__btn,
.pagination__page {
height: 32px;
padding: 0 var(--space-3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
text-decoration: none;
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius-sm);
background: var(--bg-card);
color: var(--text-primary);
transition: all 0.15s ease;
}
.pagination__btn:hover,
.pagination__page:hover {
background: var(--bg-secondary);
border-color: var(--primary-color);
}
.pagination__page.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* Mobile: Stack paginación */
@media (max-width: 768px) {
.pagination {
flex-direction: column;
gap: var(--space-3);
}
.pagination__info {
order: 2;
}
.pagination__controls {
order: 1;
width: 100%;
justify-content: center;
}
.pagination__pages {
gap: var(--space-1);
}
}
/* ============================================
ACORDEONES
============================================ */
.accordion-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.accordion {
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius-md);
overflow: hidden;
background: var(--bg-card);
}
.accordion__header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
background: var(--bg-secondary);
border: none;
cursor: pointer;
transition: background 0.15s ease;
}
.accordion__header:hover {
background: var(--bg-tertiary);
}
.accordion__title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-md);
font-weight: 600;
color: var(--text-primary);
}
.accordion__flag {
font-size: 20px;
}
.accordion__meta {
display: flex;
align-items: center;
gap: var(--space-3);
}
.accordion__count {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.accordion__active {
font-size: var(--font-size-xs);
padding: 2px 8px;
background: var(--success-color);
color: white;
border-radius: 10px;
}
.accordion__icon {
width: 20px;
height: 20px;
stroke: var(--text-secondary);
stroke-width: 2;
fill: none;
transition: transform 0.2s ease;
}
/* Estado expandido */
.accordion.open .accordion__icon {
transform: rotate(180deg);
}
.accordion__content {
display: none;
padding: var(--space-3);
border-top: var(--border-width) solid var(--border-color);
}
.accordion.open .accordion__content {
display: block;
}
/* Tabla dentro de acordeón */
.accordion__content table {
margin: 0;
}
/* ============================================
SEGMENTED CONTROL (Filtros por Estado)
============================================ */
.segmented-control {
display: flex;
flex-wrap: nowrap;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: var(--bg-secondary);
border-radius: var(--border-radius-md);
padding: var(--space-1);
gap: var(--space-1);
margin-bottom: var(--space-4);
scrollbar-width: none; /* Firefox */
}
.segmented-control::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.segmented-control__option {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
border-radius: var(--border-radius-sm);
transition: all 0.15s ease;
white-space: nowrap;
flex-shrink: 0; /* No comprimir en scroll */
}
.segmented-control__option:hover {
color: var(--text-primary);
background: var(--bg-card);
}
.segmented-control__option.active {
background: var(--bg-card);
color: var(--primary-color);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.segmented-control__count {
font-size: var(--font-size-xs);
padding: 2px 6px;
background: var(--bg-tertiary);
border-radius: 10px;
color: var(--text-muted);
font-weight: 600;
}
.segmented-control__option.active .segmented-control__count {
background: var(--primary-color);
color: white;
}
/* Responsive: Scroll horizontal en mobile */
@media (max-width: 768px) {
.segmented-control {
width: 100%;
}
}
/* ============================================
SEARCH INPUT MEJORADO
============================================ */
.search-input {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 100%;
}
.search-input__icon {
position: absolute;
left: var(--space-3);
width: 18px;
height: 18px;
stroke: var(--text-muted);
stroke-width: 2;
fill: none;
pointer-events: none;
}
.search-input input {
width: 100%;
min-width: 0; /* Reset flexbox min-width */
padding-left: 40px;
padding-right: var(--space-4);
}
.search-input input:focus + .search-input__icon {
stroke: var(--primary-color);
}
.search-input__clear {
position: absolute;
right: var(--space-3);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
text-decoration: none;
font-size: 20px;
font-weight: 500;
cursor: pointer;
transition: color 0.15s ease;
}
.search-input__clear:hover {
color: var(--danger-color);
}
/* ============================================
COMPONENTES ESTANDARIZADOS
============================================ */
/* FilterBar - Barra de filtros compacta */
.filter-bar {
display: flex;
gap: var(--space-3);
padding: var(--space-3);
background: var(--bg-secondary);
border-radius: var(--border-radius-md);
margin-bottom: var(--space-4);
align-items: flex-end;
max-width: 100%;
overflow: hidden; /* Contener hijos */
}
.filter-bar .form-group {
margin-bottom: 0;
flex: 1;
min-width: 140px;
}
.filter-bar .form-group label {
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filter-bar .filter-actions {
display: flex;
gap: var(--space-2);
}
@media (max-width: 768px) {
.filter-bar {
flex-direction: column;
align-items: stretch;
}
.filter-bar .form-group {
width: 100%;
}
.filter-bar .filter-actions {
flex-direction: row;
}
.filter-bar .filter-actions .btn {
flex: 1;
}
}
/* PageHeader - Encabezado de página estandarizado */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-4);
}
.page-header__title {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.page-header__title h2 {
font-size: var(--font-size-lg);
font-weight: 600;
margin: 0;
color: var(--text-primary);
}
.page-header__count {
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.page-header__actions {
display: flex;
gap: var(--space-2);
}
@media (max-width: 640px) {
.page-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.page-header__actions {
width: 100%;
}
.page-header__actions .btn {
flex: 1;
}
}
/* ============================================
DASHBOARD SPECIFIC
============================================ */
.dashboard-widgets {
display: grid;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
/* Mobile: 1 columna */
@media (max-width: 767px) {
.dashboard-widgets {
grid-template-columns: 1fr;
}
}
/* Tablet: 2 columnas */
@media (min-width: 768px) and (max-width: 1023px) {
.dashboard-widgets {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop: 3 columnas */
@media (min-width: 1024px) {
.dashboard-widgets {
grid-template-columns: repeat(3, 1fr);
}
}
/* Widget de reactivación ocupa altura completa */
.widget-reactivation {
display: flex;
flex-direction: column;
}
/* ============================================
MODALES ESTANDARIZADOS
============================================ */
.modal {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal.open {
display: flex;
}
.modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.modal__container {
position: relative;
background: var(--bg-card);
border-radius: var(--border-radius-lg);
width: 90%;
max-width: 600px;
max-height: 90vh;
display: flex;
flex-direction: column;
animation: modalSlideUp 0.2s ease;
}
@keyframes modalSlideUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4);
border-bottom: var(--border-width) solid var(--border-color);
}
.modal__title {
font-size: var(--font-size-md);
font-weight: 600;
margin: 0;
}
.modal__close {
background: none;
border: none;
padding: var(--space-2);
cursor: pointer;
color: var(--text-secondary);
border-radius: var(--border-radius-sm);
font-size: 24px;
line-height: 1;
}
.modal__close:hover {
background: var(--bg-secondary);
}
.modal__body {
padding: var(--space-4);
overflow-y: auto;
flex: 1;
}
.modal__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-4);
border-top: var(--border-width) solid var(--border-color);
background: var(--bg-secondary);
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
@media (max-width: 640px) {
.modal__container {
width: 100%;
max-width: none;
height: 100%;
max-height: none;
border-radius: 0;
}
.modal__footer {
flex-direction: column-reverse;
}
.modal__footer .btn {
width: 100%;
}
}
/* Info display en modales */
.info-row {
margin-bottom: var(--space-3);
}
.info-row strong {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-secondary);
margin-bottom: var(--space-1);
}
.info-row .info-content {
padding: var(--space-2);
background: var(--bg-secondary);
border-radius: var(--border-radius-sm);
font-size: var(--font-size-base);
white-space: pre-wrap;
}
.info-row img {
max-width: 100%;
max-height: 300px;
border-radius: var(--border-radius-md);
border: var(--border-width) solid var(--border-color);
cursor: pointer;
}
.info-row-inline {
display: flex;
gap: var(--space-6);
margin-bottom: var(--space-3);
}
/* ════════════════════════════════════════════════════════════
COMPONENTES v3 — Port del rediseño "Sistema de Bots"
Disponibles para Fase 3+. .field-row reemplaza .form-group
spec; .segmented-tabs reemplaza .tabs spec para no chocar
con los selectores de tabs/forms preexistentes.
════════════════════════════════════════════════════════════ */
/* ─── Sidebar v3 ─── */
.sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px 8px; }
.sidebar__brand-mark {
width: 28px; height: 28px; border-radius: 7px;
background: var(--accent); color: var(--accent-fg);
display: grid; place-items: center;
font-weight: 700; font-size: 13px; letter-spacing: -0.02em;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(9,9,11,0.12);
}
.sidebar__brand-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; color: var(--fg); }
.sidebar__brand-sub { font-size: 11.5px; color: var(--muted); margin-top: -1px; }
.sidebar__search { position: relative; margin-bottom: 14px; }
.sidebar__search input {
width: 100%; height: 30px;
border: 1px solid var(--border-input); background: var(--surface);
border-radius: var(--r-sm);
padding: 0 8px 0 28px; font-size: 12.5px; color: var(--fg); outline: none;
transition: border-color .15s, box-shadow .15s;
}
.sidebar__search input::placeholder { color: var(--subtle); }
.sidebar__search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.sidebar__search .icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--subtle); }
.sidebar__search kbd {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
font-family: var(--font-mono); font-size: 10.5px;
background: var(--surface-3); color: var(--muted);
padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border);
}
.sidebar__nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar__group-label {
font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--subtle);
padding: 12px 8px 6px;
}
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 6px 8px; border-radius: var(--r-sm);
color: var(--fg-2); font-size: 13px; font-weight: 450;
cursor: pointer; user-select: none; height: 30px; position: relative;
text-decoration: none;
}
.nav-item .icon { color: var(--muted); flex-shrink: 0; }
.nav-item:hover { background: var(--surface-hover); color: var(--fg); }
.nav-item:hover .icon { color: var(--fg); }
.nav-item--active {
background: var(--surface); color: var(--fg);
box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(9,9,11,0.04);
font-weight: 500;
}
.nav-item--active .icon { color: var(--accent); }
.nav-item__badge {
margin-left: auto;
font-family: var(--font-mono); font-size: 10.5px;
background: var(--surface-3); color: var(--muted);
border-radius: 4px; padding: 1px 6px;
}
.nav-item--active .nav-item__badge { background: var(--accent-subtle); color: var(--accent); }
.sidebar__footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.profile { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); }
.profile:hover { background: var(--surface-hover); }
.avatar {
width: 26px; height: 26px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), oklch(0.65 0.18 240));
color: var(--accent-fg); display: grid; place-items: center;
font-size: 11px; font-weight: 600;
}
.profile__name { font-size: 12.5px; font-weight: 500; color: var(--fg); line-height: 1.2; }
.profile__role { font-size: 11px; color: var(--muted); }
.profile__menu { margin-left: auto; color: var(--muted); }
/* ─── Top bar v3 ─── */
.topbar {
height: var(--topbar-h);
border-bottom: 1px solid var(--border);
background: color-mix(in oklch, var(--bg) 80%, transparent);
backdrop-filter: blur(8px);
position: sticky; top: 0; z-index: 10;
display: flex; align-items: center;
padding: 0 24px; gap: 12px;
}
.topbar__crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.topbar__crumbs .sep { color: var(--subtle); }
.topbar__crumbs .now { color: var(--fg); font-weight: 500; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.page { padding: 24px 24px 64px; max-width: 1280px; width: 100%; margin: 0 auto; }
.page--narrow { max-width: 880px; }
.page__header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.page__title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.page__sub { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.page__actions { display: flex; gap: 8px; }
/* ─── Card v3 ─── */
.card__head {
padding: 14px 16px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 8px;
}
.card__title { font-size: 14px; font-weight: 600; color: var(--fg); }
.card__sub { font-size: 12.5px; color: var(--muted); }
.card__body { padding: 16px; }
.card__actions { margin-left: auto; display: flex; gap: 6px; }
/* ─── Button v3 (BEM --variants) ─── */
.btn--primary {
background: var(--accent); color: var(--accent-fg);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 2px rgba(9,9,11,0.12);
border: 1px solid transparent;
}
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-active); }
.btn--secondary {
background: var(--surface); color: var(--fg);
border: 1px solid var(--border-strong);
}
.btn--secondary:hover { background: var(--surface-hover); }
.btn--ghost { background: transparent; color: var(--fg-2); border: 1px solid transparent; }
.btn--ghost:hover { background: var(--surface-hover); color: var(--fg); }
.btn--danger {
background: var(--surface); color: var(--danger);
border: 1px solid var(--danger-border);
}
.btn--danger:hover { background: var(--danger-bg); }
.btn--success {
background: var(--success); color: white;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 2px rgba(9,9,11,0.12);
border: 1px solid transparent;
}
.btn--sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 5px; }
.btn--xs { height: 24px; padding: 0 8px; font-size: 12px; border-radius: 4px; gap: 4px; }
.btn--icon { width: var(--control-h); padding: 0; }
.btn--icon.btn--sm { width: 28px; }
/* ─── Inputs v3 ─── */
.input, .textarea, .select {
width: 100%;
height: var(--control-h);
border: 1px solid var(--border-input);
background: var(--surface);
color: var(--fg);
border-radius: var(--r-sm);
padding: 0 10px;
font-size: 13px;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--subtle); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.textarea { height: auto; padding: 8px 10px; font-family: var(--font-sans); resize: vertical; min-height: 64px; }
.input--mono { font-family: var(--font-mono); font-size: 12.5px; }
.input-group {
display: flex; align-items: center;
border: 1px solid var(--border-input);
background: var(--surface);
border-radius: var(--r-sm);
transition: border-color .15s, box-shadow .15s;
}
.input-group:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.input-group__icon { padding: 0 8px 0 10px; color: var(--subtle); display: flex; align-items: center; }
.input-group .input { border: 0; box-shadow: none; height: calc(var(--control-h) - 2px); }
.input-group .input:focus { box-shadow: none; }
.input-group__suffix { padding: 0 10px; font-size: 12px; color: var(--muted); }
.select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
padding-right: 28px;
}
.toggle { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle__slider {
position: absolute; inset: 0;
background: var(--border-strong);
border-radius: 999px; transition: background .15s; cursor: pointer;
}
.toggle__slider::before {
content: ""; position: absolute; left: 2px; top: 2px;
width: 14px; height: 14px; background: white; border-radius: 50%;
transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle__slider { background: var(--accent); }
.toggle input:checked + .toggle__slider::before { transform: translateX(14px); }
.checkbox-v3 {
width: 16px; height: 16px;
border: 1px solid var(--border-strong);
border-radius: 4px; background: var(--surface);
display: inline-grid; place-items: center; cursor: pointer; flex-shrink: 0;
}
.checkbox-v3[data-checked="true"] { background: var(--accent); border-color: var(--accent); }
.checkbox-v3[data-checked="true"]::before {
content: ""; width: 9px; height: 5px;
border-left: 1.5px solid white; border-bottom: 1.5px solid white;
transform: rotate(-45deg) translate(1px, -1px);
}
/* ─── Badge v3 (tone-based) ─── */
.badge {
display: inline-flex; align-items: center; gap: 4px;
height: 20px; padding: 0 7px;
border-radius: 4px;
font-size: 11.5px; font-weight: 500; line-height: 1;
letter-spacing: 0.005em;
border: 1px solid; white-space: nowrap;
}
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge--neutral { background: var(--neutral-bg); color: var(--muted); border-color: var(--neutral-border); }
.badge--success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge--warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.badge--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.badge--info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.badge--accent { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-border); }
/* ─── KPI v3 ─── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; }
.kpi__label {
font-size: 11.5px; font-weight: 500; color: var(--muted);
letter-spacing: 0.02em; text-transform: uppercase;
display: flex; align-items: center; gap: 6px;
}
.kpi__value {
font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
color: var(--fg); margin-top: 4px; font-feature-settings: "tnum";
display: flex; align-items: baseline; gap: 8px;
}
.kpi__delta { font-size: 12px; font-weight: 500; color: var(--success); display: inline-flex; align-items: center; gap: 2px; }
.kpi__delta--down { color: var(--danger); }
.kpi__sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.sparkline { width: 100%; height: 36px; margin-top: 8px; }
/* ─── Table v3 ─── */
.table-wrap { overflow-x: auto; }
.table-v3 { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-v3 thead th {
text-align: left; font-size: 11.5px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--muted); padding: 0 14px; height: 36px;
background: var(--surface-2); border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.table-v3 thead th:first-child { padding-left: 16px; }
.table-v3 thead th:last-child { padding-right: 16px; }
.table-v3 tbody tr { border-bottom: 1px solid var(--border); }
.table-v3 tbody tr:last-child { border-bottom: 0; }
.table-v3 tbody tr:hover { background: var(--surface-hover); }
.table-v3 tbody td { padding: 0 14px; height: var(--row-h); color: var(--fg-2); vertical-align: middle; }
.table-v3 tbody td:first-child { padding-left: 16px; }
.table-v3 tbody td:last-child { padding-right: 16px; }
.table-v3 .mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); font-feature-settings: "tnum"; }
.table-v3 .muted { color: var(--muted); }
.table-v3 .actions { display: flex; gap: 4px; justify-content: flex-end; }
.table-v3 tr.row--selected { background: var(--accent-subtle); }
.table-v3 tr.row--clickable { cursor: pointer; }
.toolbar {
display: flex; align-items: center; gap: 8px;
padding: 12px; border-bottom: 1px solid var(--border);
background: var(--surface);
}
.toolbar .input-group { max-width: 320px; flex: 1; }
.toolbar__right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pager {
padding: 10px 16px; border-top: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
font-size: 12.5px; color: var(--muted); background: var(--surface);
}
.pager__pages { display: flex; gap: 4px; }
.pager__page {
min-width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 5px; border: 1px solid var(--border);
background: var(--surface); font-size: 12.5px; color: var(--fg-2);
padding: 0 6px;
}
.pager__page--active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.pager__page:hover:not(.pager__page--active) { background: var(--surface-hover); }
/* ─── Segmented tabs v3 (.tabs/.tab del spec renombrado para no chocar con tabs--desktop) ─── */
.segmented-tabs {
display: flex; gap: 2px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r-md); padding: 3px; align-items: center;
}
.seg-tab {
height: 28px; padding: 0 12px; border-radius: 5px;
font-size: 12.5px; font-weight: 500; color: var(--muted);
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; white-space: nowrap;
background: transparent; border: 0;
}
.seg-tab:hover { color: var(--fg); }
.seg-tab--active {
background: var(--surface); color: var(--fg);
box-shadow: 0 1px 2px rgba(9,9,11,0.06), 0 0 0 1px var(--border);
}
.seg-tab__count {
font-family: var(--font-mono); font-size: 10.5px;
background: var(--surface-3); color: var(--muted);
padding: 1px 5px; border-radius: 3px;
}
.seg-tab--active .seg-tab__count { background: var(--accent-subtle); color: var(--accent); }
/* ─── Settings layout v3 (sub-sidebar Stripe) ─── */
.settings {
display: grid; grid-template-columns: var(--subnav-w) 1fr; gap: 0;
min-height: calc(100vh - var(--topbar-h));
}
.settings__nav {
border-right: 1px solid var(--border);
padding: 24px 16px 24px 24px;
position: sticky; top: var(--topbar-h); align-self: start;
height: calc(100vh - var(--topbar-h)); overflow-y: auto;
}
.settings__nav-group { margin-bottom: 18px; }
.settings__nav-label {
font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--subtle);
padding: 4px 8px 6px;
}
.settings__nav-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px; border-radius: 5px;
font-size: 13px; color: var(--fg-2);
cursor: pointer; height: 28px;
text-decoration: none;
}
.settings__nav-item:hover { background: var(--surface-hover); }
.settings__nav-item--active { background: var(--accent-subtle); color: var(--accent); font-weight: 500; }
.settings__nav-item .icon { color: var(--muted); }
.settings__nav-item--active .icon { color: var(--accent); }
.settings__content { padding: 32px 40px 80px; max-width: 820px; width: 100%; }
.settings__section-header {
margin-bottom: 24px; padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.settings__section-title { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.settings__section-sub { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
/* ─── Field row v3 (.form-group del spec renombrado para no chocar con .form-group existente) ─── */
.field-row {
display: grid;
grid-template-columns: 240px 1fr;
gap: 32px;
padding: 20px 0;
border-bottom: 1px solid var(--border);
}
.field-row:last-child { border-bottom: 0; }
.field-row__label { font-size: 13.5px; font-weight: 500; color: var(--fg); }
.field-row__hint { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.field-row__control { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-row__inline { display: flex; align-items: center; gap: 10px; }
.save-bar {
position: sticky; bottom: 16px; margin-top: 28px;
display: flex; justify-content: flex-end; gap: 8px;
padding: 10px 12px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-md); box-shadow: var(--shadow-md);
align-items: center;
}
.save-bar__status { margin-right: auto; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.save-bar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.save-bar__dot--clean { background: var(--success); }
/* G1b fix (2026-05-21): bloque drawer viejo eliminado — sin [data-open] gate
provocaba animation:slideIn al cargar la página (drawer flasheaba 200ms al
abrir users.php). El bloque canónico vive más abajo (~L2696) con
[data-open="true"] como guarda. Las clases __head/__close/__title/__body/__foot
eran del CSS viejo; el HTML actual usa __header/__close-btn/__title/__body
(definidos en el bloque canónico). */
/* ─── Misc v3 ─── */
.divider-v3 { height: 1px; background: var(--border); margin: 16px 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.row-v3 { display: flex; align-items: center; gap: 8px; }
.col-v3 { display: flex; flex-direction: column; gap: 8px; }
.spacer { flex: 1; }
.kbd {
font-family: var(--font-mono); font-size: 11px;
background: var(--surface-3); color: var(--muted);
padding: 2px 5px; border-radius: 4px; border: 1px solid var(--border);
}
.activity { display: flex; flex-direction: column; }
.activity__item {
display: grid; grid-template-columns: 26px 1fr auto;
gap: 10px; padding: 10px 16px;
border-bottom: 1px solid var(--border); align-items: flex-start;
}
.activity__item:last-child { border-bottom: 0; }
.activity__icon {
width: 26px; height: 26px; border-radius: 6px;
display: grid; place-items: center;
background: var(--surface-3); color: var(--muted); flex-shrink: 0;
}
.activity__icon--success { background: var(--success-bg); color: var(--success); }
.activity__icon--warning { background: var(--warning-bg); color: var(--warning); }
.activity__icon--info { background: var(--info-bg); color: var(--info); }
.activity__icon--accent { background: var(--accent-subtle); color: var(--accent); }
.activity__title { font-size: 13px; color: var(--fg); font-weight: 450; }
.activity__title b { font-weight: 600; }
.activity__meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); }
.activity__time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
/* Empty state */
.empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 48px 24px; text-align: center;
color: var(--muted);
}
.empty__icon { color: var(--subtle); margin-bottom: 12px; }
.empty__title { font-size: 14px; font-weight: 500; color: var(--fg); margin-bottom: 4px; }
.empty__sub { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
/* ───────────────────────────────────────────────────────────────────
COMPACTNESS — scoped a Configuración → Avanzado (text-tab-*).
Reduce el aire entre filas, sub-secciones y títulos en las 9
categorías de textos. Cero impacto en SMTP / DeepSeek / General.
─────────────────────────────────────────────────────────────────── */
[id^="text-tab-"] .form-field {
padding: 6px 0;
}
[id^="text-tab-"] .form-field__label {
padding-top: 4px;
}
[id^="text-tab-"] .form-section {
margin-top: 12px;
padding-top: 12px;
}
[id^="text-tab-"] .form-section__title {
margin-bottom: 4px;
font-size: var(--font-size-md);
}
[id^="text-tab-"] .form-section__description {
margin-bottom: 8px;
font-size: var(--font-size-xs);
}
[id^="text-tab-"] .card {
margin-bottom: 8px;
}
[id^="text-tab-"] .card-header {
padding: 8px 12px;
}
[id^="text-tab-"] .card .card-body {
padding: 8px 12px;
}
[id^="text-tab-"] textarea {
min-height: 56px;
}
/* ───────────────────────────────────────────────────────────────────
COMPACTNESS — scoped a #configForm.
Aprieta padding/margin/gap + normaliza inputs.
Re-trabajo 2026-05-20: el usuario reportó "todo muy separado" + "form fields no normalizados".
─────────────────────────────────────────────────────────────────── */
/* Fila label+input compacta */
#configForm .form-field {
padding: 4px 0;
gap: 16px;
grid-template-columns: 200px 1fr;
border-bottom: 1px solid var(--border, #e5e7eb);
align-items: center;
}
#configForm .form-field:last-of-type {
border-bottom: none;
}
#configForm .form-field__label {
padding-top: 0;
}
#configForm .form-field__label label {
font-size: 13px;
font-weight: 500;
color: var(--fg-2, #27272a);
}
/* Inputs normalizados: misma altura, mismo padding, max-width: 100% */
#configForm .form-field__input input,
#configForm .form-field__input select,
#configForm .form-field__input textarea {
width: 100%;
max-width: 100%;
padding: 6px 10px;
font-size: 13px;
line-height: 1.4;
height: auto;
box-sizing: border-box;
}
#configForm .form-field__input textarea {
min-height: 60px;
}
/* PW toggle wrap normalizado */
#configForm .pw-toggle-wrap {
width: 100%;
max-width: 100%;
}
#configForm .pw-toggle-wrap input {
padding-right: 80px;
}
#configForm .pw-toggle {
height: auto;
padding: 3px 8px !important;
}
/* form-section: compactness (regla anti-spam, webhook URL, etc.) */
#configForm .form-section {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border, #e5e7eb);
}
#configForm .form-section__title {
margin-top: 0;
margin-bottom: 4px;
font-size: 14px;
font-weight: 600;
}
#configForm .form-section__description {
margin-top: 0;
margin-bottom: 8px;
font-size: 12px;
color: var(--muted, #6b6b71);
line-height: 1.45;
}
/* Card que envuelve cada tab — menos padding */
#configForm .tab-content .card {
padding: 12px 14px;
}
#configForm .form-fields-container {
padding: 0;
}
#configForm .tabs-container {
margin-bottom: 8px;
}
/* Tabs más compactos (menos altura) */
#configForm .tab {
padding: 6px 12px;
font-size: 13px;
}
/* Botón Guardar al final más prominente y centrado */
#configForm > .card:last-child {
padding: 10px 14px;
margin-top: 8px;
text-align: center;
}
#configForm > .card:last-child .btn {
padding: 8px 24px;
font-size: 14px;
font-weight: 500;
}
/* Mensaje "Empty state" cuando no hay configs */
#configForm .empty-state {
padding: 16px;
font-size: 13px;
color: var(--muted, #6b6b71);
text-align: center;
}
/* Collapsible WA avanzado más compacto */
.wa-advanced-collapsible .form-field {
padding: 4px 0;
}
.wa-advanced-collapsible .form-field__label label {
font-size: 12.5px;
color: var(--fg-2, #27272a);
}
/* ───────────────────────────────────────────────────────────────────
POLISH 2026-05-20: Tabla de Auditoría y Envíos más densa.
El layout default tiene padding cómodo para tablas con pocas filas.
Para listas de 50+ entradas, lo apretamos para que se vea más info.
─────────────────────────────────────────────────────────────────── */
.table th,
.table td {
font-size: 13px;
line-height: 1.35;
}
/* Specific overrides para logs/envios */
body.audit-page .table th,
body.audit-page .table td {
padding: 6px 8px;
}
/* Aplicar a las nuevas tablas usando el matching del DOM */
.card > .table-wrapper > table,
.card > table {
font-size: 13px;
}
/* KPI cards más compactas */
.card.kpi-card {
padding: 12px !important;
}
/* Cuando empieza una etiqueta de friendly action, dar más espacio horizontal */
[data-test-result] {
margin-top: 8px !important;
}
/* WaMundo: el collapsible más estético */
.wa-advanced-collapsible {
background: linear-gradient(to bottom, transparent, #fafbfc 30%);
border-radius: 6px;
padding: 10px 14px !important;
border: 1px dashed #d1d5db;
margin-top: 16px !important;
}
.wa-advanced-collapsible[open] {
background: #fff;
border-style: solid;
}
.wa-advanced-collapsible summary {
list-style: none;
position: relative;
padding-left: 22px;
}
.wa-advanced-collapsible summary::-webkit-details-marker { display: none; }
.wa-advanced-collapsible summary::before {
content: '▶';
position: absolute;
left: 0;
transition: transform .15s;
font-size: 10px;
top: 4px;
}
.wa-advanced-collapsible[open] summary::before {
transform: rotate(90deg);
}
/* ═══════════════════════════════════════════════════════════════════
E1 (merge 2026-05-20): Sub-sidebar Stripe-style en Configuración.
Sólo en pantallas ≥ 1024px. En mobile/tablet conserva tabs horizontales.
Sin modificar HTML — usa CSS Grid sobre #configForm.
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
#configForm {
display: grid;
grid-template-columns: 220px 1fr;
column-gap: 20px;
row-gap: 0;
align-items: start;
}
/* Todo lo demás cae en columna 2 por defecto */
#configForm > * {
grid-column: 2;
}
/* Tabs-container ocupa columna 1, sticky */
#configForm > .tabs-container {
grid-column: 1;
grid-row: 1 / span 99;
position: sticky;
top: 16px;
margin-bottom: 0;
}
#configForm .tabs--desktop {
display: flex !important;
flex-direction: column;
gap: 2px;
background: var(--surface, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 8px;
padding: 6px;
}
#configForm .tabs--desktop .tab {
text-align: left !important;
width: 100%;
background: transparent !important;
border: none !important;
padding: 8px 12px !important;
border-radius: 6px;
cursor: pointer;
color: var(--fg-2, #27272a);
font-size: 13.5px;
font-weight: 400;
transition: background .12s, color .12s;
position: relative;
line-height: 1.4;
}
#configForm .tabs--desktop .tab:hover {
background: var(--surface-2, #f3f4f6);
}
#configForm .tabs--desktop .tab.active {
background: var(--accent-subtle, #eff6ff) !important;
color: var(--accent, #1d4ed8) !important;
font-weight: 500;
}
#configForm .tabs--desktop .tab.active::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
background: var(--accent, #1d4ed8);
border-radius: 2px;
}
/* Ocultar el select mobile en desktop */
#configForm .tabs-mobile {
display: none !important;
}
/* Botón Guardar al final también en columna 2 */
#configForm > .card:last-child {
grid-column: 2;
}
}
/* ═══════════════════════════════════════════════════════════════════
E2 (merge 2026-05-20): Drawer lateral genérico.
Slide-in desde la derecha (480px) para detalles de cliente/venta/ticket.
Reemplaza a modales centrados full-screen donde aplique.
═══════════════════════════════════════════════════════════════════ */
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 8000;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease-out;
}
.drawer-backdrop[data-open="true"] {
opacity: 1;
pointer-events: auto;
}
.drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 480px;
background: var(--surface, #fff);
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
z-index: 8001;
transform: translateX(100%);
transition: transform .25s cubic-bezier(.4, 0, .2, 1);
display: flex;
flex-direction: column;
}
.drawer[data-open="true"] {
transform: translateX(0);
}
.drawer__header {
padding: 14px 18px;
border-bottom: 1px solid var(--border, #e5e7eb);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.drawer__title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--fg, #0a0a0b);
}
.drawer__close {
background: var(--surface-2, #f3f4f6);
border: 1px solid var(--border, #e5e7eb);
border-radius: 6px;
width: 32px;
height: 32px;
cursor: pointer;
font-size: 16px;
color: var(--muted, #888);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.drawer__close:hover {
background: var(--surface-3, #ededee);
}
.drawer__body {
padding: 16px 18px;
overflow-y: auto;
flex: 1;
font-size: 14px;
}
.drawer__footer {
padding: 10px 18px;
border-top: 1px solid var(--border, #e5e7eb);
display: flex;
gap: 8px;
justify-content: flex-end;
flex-shrink: 0;
}
.drawer__field {
margin-bottom: 12px;
}
.drawer__field-label {
font-size: 11px;
color: var(--muted, #888);
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 3px;
font-weight: 500;
}
.drawer__field-value {
font-size: 14px;
color: var(--fg, #0a0a0b);
word-break: break-word;
}
@media (max-width: 540px) {
.drawer {
max-width: 100%;
}
}