/* ════════════════════════════════════════════════════════════════════════ AMEST Campus — sistema de diseño ──────────────────────────────────────────────────────────────────────── TODO el look & feel de la app (colores, tipografía, radios, sombras, efecto glass) vive en el bloque de TOKENS de aquí abajo. Para cambiar el diseño completo de la plataforma basta con editar ESTE archivo — todas las vistas (admin, docente, alumno, sponsor, login) lo comparten. Modos: claro, oscuro y "sistema" (respeta el SO si no hay preferencia guardada). El toggle vive en partials/nav.php y solo aplica el atributo data-theme="light|dark" en ; sin ese atributo, se usa el modo "sistema" vía prefers-color-scheme. ════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap'); /* ── 1. TOKENS: paleta clara (por defecto) ──────────────────────────────── */ :root { color-scheme: light; /* Marca */ --amest-primary: #f97316; --amest-primary-dark: #ea580c; --amest-primary-soft: rgba(249, 115, 22, .13); --amest-primary-ring: rgba(249, 115, 22, .35); --amest-accent: #6366f1; --amest-accent-soft: rgba(99, 102, 241, .13); /* Semántico */ --amest-success: #16a34a; --amest-success-soft: rgba(22, 163, 74, .13); --amest-warning: #d97706; --amest-warning-soft: rgba(217, 119, 6, .13); --amest-danger: #dc2626; --amest-danger-soft: rgba(220, 38, 38, .13); /* Superficie / fondo */ --amest-bg: #eef1f8; --amest-blob-1: rgba(249, 115, 22, .20); --amest-blob-2: rgba(99, 102, 241, .18); --amest-blob-3: rgba(34, 197, 94, .12); --amest-surface: rgba(255, 255, 255, .68); --amest-surface-solid: #ffffff; --amest-surface-2: rgba(255, 255, 255, .45); --amest-surface-hover: rgba(255, 255, 255, .9); --amest-border: rgba(15, 23, 42, .09); --amest-border-strong: rgba(15, 23, 42, .16); /* Texto */ --amest-text: #0f172a; --amest-text-muted: #64748b; /* Efectos */ --radius: 16px; --radius-sm: 10px; --radius-lg: 22px; --blur: 22px; --shadow: 0 10px 34px rgba(15, 23, 42, .09), 0 1px 2px rgba(15, 23, 42, .05); --shadow-lift: 0 16px 44px rgba(15, 23, 42, .14), 0 2px 4px rgba(15, 23, 42, .06); --shadow-glow-primary: 0 8px 22px rgba(249, 115, 22, .30); --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Sora', 'Inter', -apple-system, sans-serif; } /* ── 1b. TOKENS: paleta oscura (sistema en modo oscuro, sin elección) ───── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --amest-primary: #fb923c; --amest-primary-dark: #f97316; --amest-primary-soft: rgba(251, 146, 60, .18); --amest-primary-ring: rgba(251, 146, 60, .4); --amest-accent: #818cf8; --amest-accent-soft: rgba(129, 140, 248, .18); --amest-success: #4ade80; --amest-success-soft: rgba(74, 222, 128, .16); --amest-warning: #fbbf24; --amest-warning-soft: rgba(251, 191, 36, .16); --amest-danger: #f87171; --amest-danger-soft: rgba(248, 113, 113, .16); --amest-bg: #090e1a; --amest-blob-1: rgba(251, 146, 60, .22); --amest-blob-2: rgba(99, 102, 241, .26); --amest-blob-3: rgba(34, 197, 94, .14); --amest-surface: rgba(23, 32, 54, .62); --amest-surface-solid: #131e33; --amest-surface-2: rgba(255, 255, 255, .05); --amest-surface-hover: rgba(255, 255, 255, .09); --amest-border: rgba(255, 255, 255, .09); --amest-border-strong: rgba(255, 255, 255, .16); --amest-text: #eef2f8; --amest-text-muted: #97a3c4; --shadow: 0 10px 34px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .3); --shadow-lift: 0 20px 50px rgba(0, 0, 0, .5); --shadow-glow-primary: 0 8px 26px rgba(251, 146, 60, .35); } } /* ── 1c. TOKENS: elección explícita del usuario (anula el sistema) ──────── */ :root[data-theme="dark"] { color-scheme: dark; --amest-primary: #fb923c; --amest-primary-dark: #f97316; --amest-primary-soft: rgba(251, 146, 60, .18); --amest-primary-ring: rgba(251, 146, 60, .4); --amest-accent: #818cf8; --amest-accent-soft: rgba(129, 140, 248, .18); --amest-success: #4ade80; --amest-success-soft: rgba(74, 222, 128, .16); --amest-warning: #fbbf24; --amest-warning-soft: rgba(251, 191, 36, .16); --amest-danger: #f87171; --amest-danger-soft: rgba(248, 113, 113, .16); --amest-bg: #090e1a; --amest-blob-1: rgba(251, 146, 60, .22); --amest-blob-2: rgba(99, 102, 241, .26); --amest-blob-3: rgba(34, 197, 94, .14); --amest-surface: rgba(23, 32, 54, .62); --amest-surface-solid: #131e33; --amest-surface-2: rgba(255, 255, 255, .05); --amest-surface-hover: rgba(255, 255, 255, .09); --amest-border: rgba(255, 255, 255, .09); --amest-border-strong: rgba(255, 255, 255, .16); --amest-text: #eef2f8; --amest-text-muted: #97a3c4; --shadow: 0 10px 34px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .3); --shadow-lift: 0 20px 50px rgba(0, 0, 0, .5); --shadow-glow-primary: 0 8px 26px rgba(251, 146, 60, .35); } /* ── 2. Reset & base ─────────────────────────────────────────────────────*/ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); background: var(--amest-bg); color: var(--amest-text); -webkit-font-smoothing: antialiased; transition: background-color .3s ease, color .3s ease; } h1, h2, h3, .app-sidebar__brand span, .auth-card__brand span { font-family: var(--font-display); letter-spacing: -.01em; } a { color: var(--amest-primary); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--amest-primary-soft); color: var(--amest-text); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--amest-border-strong); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--amest-text-muted); } /* Blobs de fondo decorativos — el efecto "glassy" de las tarjetas destaca sobre este degradado difuso. Fijos, sin interacción, detrás de todo. */ .auth-shell::before, .app-shell::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38vw 38vw at 8% 8%, var(--amest-blob-1), transparent 60%), radial-gradient(42vw 42vw at 92% 18%, var(--amest-blob-2), transparent 60%), radial-gradient(36vw 36vw at 30% 95%, var(--amest-blob-3), transparent 60%); filter: blur(10px); transition: background .3s ease; } /* ── 3. Auth (login / recuperar contraseña) ─────────────────────────────*/ .auth-shell { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { width: 100%; max-width: 400px; background: var(--amest-surface); backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); border: 1px solid var(--amest-border); border-radius: var(--radius-lg); padding: 68px 32px 34px; box-shadow: var(--shadow-lift); } .auth-wrap { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; } .auth-logo { position: relative; z-index: 2; margin-bottom: -56px; filter: drop-shadow(0 14px 26px rgba(15, 23, 42, .28)); } .auth-logo img { display: block; height: 132px; width: auto; } .auth-card h1 { font-size: 21px; margin: 0 0 4px; font-weight: 800; text-align: center; } .auth-card p.subtitle { color: var(--amest-text-muted); font-size: 13px; margin: 0 0 22px; text-align: center; } .powered-by { margin-top: 22px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--amest-text-muted); } .powered-by img { height: 18px; width: auto; } .powered-by .pb-claro { display: none; } .powered-by .pb-oscuro { display: inline-block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .powered-by .pb-oscuro { display: none; } :root:not([data-theme="light"]) .powered-by .pb-claro { display: inline-block; } } :root[data-theme="dark"] .powered-by .pb-oscuro { display: none; } :root[data-theme="dark"] .powered-by .pb-claro { display: inline-block; } /* Logo de patrocinador en la tabla de Patrocinadores: muestra la variante positiva en modo claro y la negativa (fondos oscuros) en modo oscuro — si no se subió una negativa, se usa la positiva como respaldo. */ .sponsor-logo-cell img { height: 28px; max-width: 80px; object-fit: contain; } .sponsor-logo-cell .sponsor-logo-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sponsor-logo-cell .sponsor-logo-light { display: none; } :root:not([data-theme="light"]) .sponsor-logo-cell .sponsor-logo-dark { display: inline-block; } } :root[data-theme="dark"] .sponsor-logo-cell .sponsor-logo-light { display: none; } :root[data-theme="dark"] .sponsor-logo-cell .sponsor-logo-dark { display: inline-block; } /* ── 4. Formularios ──────────────────────────────────────────────────────*/ .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--amest-text-muted); font-weight: 500; } .field input, .field select, .field textarea { width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--amest-border-strong); background: var(--amest-surface-2); color: var(--amest-text); font-size: 14px; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .field textarea { resize: vertical; min-height: 80px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--amest-primary); box-shadow: 0 0 0 4px var(--amest-primary-ring); background: var(--amest-surface-hover); } .field-static { width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px dashed var(--amest-border-strong); background: var(--amest-surface-2); color: var(--amest-text-muted); font-size: 14px; box-sizing: border-box; } .module-drag-handle { cursor: grab; text-align: center; color: var(--amest-text-muted); font-size: 16px; width: 24px; } .data-table tr.dragging { opacity: .4; } .data-table tr[draggable="true"]:hover { background: var(--amest-surface-hover); } .field-checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13.5px; color: var(--amest-text-muted); } .field-checkbox input { width: 16px; height: 16px; accent-color: var(--amest-primary); } .field-hint { color: var(--amest-text-muted); font-size: 12px; margin-top: -12px; margin-bottom: 16px; } .checkbox-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .checkbox-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--amest-text-muted); background: var(--amest-surface-2); border: 1px solid var(--amest-border); border-radius: var(--radius-sm); padding: 6px 11px; transition: border-color .15s ease, color .15s ease; } .checkbox-row label:has(input:checked) { border-color: var(--amest-primary); color: var(--amest-text); } /* ── 5. Botones ──────────────────────────────────────────────────────────*/ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--radius-sm); padding: 11px 20px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(135deg, var(--amest-primary), var(--amest-primary-dark)); color: #fff; width: 100%; box-shadow: var(--shadow-glow-primary); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(249, 115, 22, .38); } .btn-secondary { background: var(--amest-surface-2); color: var(--amest-text); border: 1px solid var(--amest-border-strong); backdrop-filter: blur(var(--blur)); } .btn-secondary:hover { background: var(--amest-surface-hover); transform: translateY(-1px); } .btn-danger { background: var(--amest-danger-soft); color: var(--amest-danger); border: 1px solid transparent; } .btn-danger:hover { background: var(--amest-danger); color: #fff; } .btn-sm { padding: 7px 13px; font-size: 12.5px; width: auto; box-shadow: none; } .btn-block-inline { display: inline-flex; } .alert { padding: 11px 15px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; border: 1px solid transparent; } .alert-error { background: var(--amest-danger-soft); color: var(--amest-danger); border-color: rgba(220, 38, 38, .25); } .alert-ok { background: var(--amest-success-soft); color: var(--amest-success); border-color: rgba(22, 163, 74, .25); } .auth-links { margin-top: 18px; font-size: 13px; text-align: center; color: var(--amest-text-muted); } /* ── 6. App shell (post-login) ───────────────────────────────────────────*/ .app-shell { position: relative; display: flex; min-height: 100vh; } .app-sidebar { width: 244px; flex-shrink: 0; margin: 16px 0 16px 16px; padding: 20px 14px; background: var(--amest-surface); backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); border: 1px solid var(--amest-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: flex; flex-direction: column; height: calc(100vh - 32px); position: sticky; top: 16px; } .app-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 20px; } .app-sidebar__brand img { height: 30px; } .app-sidebar__brand span { font-weight: 700; font-size: 14.5px; } .app-nav { flex: 1; overflow-y: auto; } .app-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--amest-text-muted); font-size: 13.8px; font-weight: 500; margin-bottom: 3px; transition: background .15s ease, color .15s ease, transform .15s ease; } .app-nav a svg { flex-shrink: 0; width: 18px; height: 18px; opacity: .85; } .app-nav a:hover { background: var(--amest-surface-2); color: var(--amest-text); text-decoration: none; transform: translateX(2px); } .app-nav a.active { background: linear-gradient(135deg, var(--amest-primary-soft), var(--amest-accent-soft)); color: var(--amest-text); font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px var(--amest-primary-ring); } .app-nav a.active svg { opacity: 1; color: var(--amest-primary); } .app-main { flex: 1; padding: 28px 34px; max-width: 1800px; width: 100%; } .app-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; gap: 16px; flex-wrap: wrap; } .app-topbar h1 { font-size: 23px; margin: 0; font-weight: 800; } .app-topbar .user-chip { font-size: 13px; color: var(--amest-text-muted); display: flex; align-items: center; gap: 10px; } .app-topbar .user-chip a { color: var(--amest-text-muted); } .app-topbar .user-chip a:hover { color: var(--amest-danger); } .app-topbar .user-chip .user-greeting { font-size: 15px; font-weight: 800; color: var(--amest-text); } /* ── 6b. Selector de tema (claro / oscuro / sistema) ─────────────────────*/ .theme-toggle { display: flex; gap: 3px; padding: 4px; margin: 4px 8px 14px; background: var(--amest-surface-2); border: 1px solid var(--amest-border); border-radius: 999px; } .theme-toggle button { flex: 1; display: flex; align-items: center; justify-content: center; padding: 7px 0; border: none; border-radius: 999px; background: transparent; color: var(--amest-text-muted); cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .theme-toggle button svg { width: 15px; height: 15px; } .theme-toggle button:hover { color: var(--amest-text); } .theme-toggle button.active { background: var(--amest-surface-solid); color: var(--amest-primary); box-shadow: var(--shadow); } /* ── 7. Estadísticas, tarjetas, tablas, badges ───────────────────────────*/ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; } .stat-card { background: var(--amest-surface); backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); border: 1px solid var(--amest-border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .stat-card .value { font-size: 27px; font-weight: 800; font-family: var(--font-display); background: linear-gradient(135deg, var(--amest-primary), var(--amest-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-card .label { font-size: 12.5px; color: var(--amest-text-muted); margin-top: 5px; } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; align-items: start; } .card { background: var(--amest-surface); backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); border: 1px solid var(--amest-border); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; box-shadow: var(--shadow); } .card h2 { font-size: 15.5px; margin: 0 0 14px; font-weight: 700; } .empty-state { color: var(--amest-text-muted); font-size: 13.5px; padding: 24px 0; text-align: center; } table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.data-table th { text-align: left; color: var(--amest-text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 1px solid var(--amest-border); } table.data-table td { padding: 12px 10px; border-bottom: 1px solid var(--amest-border); } table.data-table tbody tr { transition: background .15s ease; } table.data-table tbody tr:hover { background: var(--amest-surface-2); } .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; } .badge-green { background: var(--amest-success-soft); color: var(--amest-success); } .badge-yellow { background: var(--amest-warning-soft); color: var(--amest-warning); } .badge-red { background: var(--amest-danger-soft); color: var(--amest-danger); } .badge-gray { background: var(--amest-surface-2); color: var(--amest-text-muted); } /* ── 6c. Menú móvil: botón hamburguesa + sidebar deslizable + overlay ───── */ .app-navtoggle { display: none; align-items: center; justify-content: center; position: fixed; top: 14px; left: 14px; z-index: 1001; width: 44px; height: 44px; padding: 0; border: 1px solid var(--amest-border); border-radius: var(--radius-sm); background: var(--amest-surface-solid); color: var(--amest-text); box-shadow: var(--shadow); cursor: pointer; } .app-navtoggle svg { width: 20px; height: 20px; } .app-navbackdrop { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(9, 14, 26, .5); } .app-navbackdrop.is-open { display: block; } @media (max-width: 820px) { .app-navtoggle { display: flex; } .app-sidebar { position: fixed; top: 0; left: 0; margin: 0; height: 100vh; width: 268px; max-width: 82vw; border-radius: 0; z-index: 1000; transform: translateX(-100%); transition: transform .25s ease; } .app-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lift); } .app-main { padding: 20px; padding-top: 78px; } } /* ── 8. Admin CRUD: formularios de 2 columnas, cajas especiales ─────────*/ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 16px; } .btn-secondary:hover { background: var(--amest-surface-hover); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; } .card-header h2 { margin: 0; } /* ── 9. Diplomados: grid de tarjetas (admin y alumno) ────────────────────*/ .dip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-bottom: 6px; } .dip-card { background: var(--amest-surface); backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); border: 1px solid var(--amest-border); border-top: 4px solid var(--dip-accent, var(--amest-primary)); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; overflow: hidden; } .dip-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .dip-card-link { display: block; padding: 18px 20px 4px; color: inherit; } .dip-card-link:hover { color: inherit; } .dip-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; } .dip-card-title { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; margin: 0 0 8px; line-height: 1.35; } .dip-card-dates { color: var(--amest-text-muted); font-size: 12.5px; margin-bottom: 12px; } .dip-card-sponsors { display: flex; align-items: center; margin-bottom: 4px; } .dip-sponsor-chip { width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--amest-surface-solid), 0 0 0 3px var(--amest-border); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-left: -8px; flex-shrink: 0; } .dip-sponsor-chip:first-child { margin-left: 0; } .dip-sponsor-chip.is-principal { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--amest-surface-solid), 0 0 0 3px var(--amest-primary-ring); z-index: 1; } .dip-sponsor-chip img { width: 100%; height: 100%; object-fit: contain; padding: 4px; } .dip-sponsor-initial { font-size: 12px; font-weight: 800; color: var(--amest-text-muted); } .dip-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 20px 18px; margin-top: auto; } .dip-card-footer form { margin: 0; } table.data-table .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } table.data-table form { display: inline; margin: 0; } table.data-table a.link-action { font-size: 12.5px; font-weight: 600; } .confidential-box { border: 1px dashed var(--amest-warning); border-radius: var(--radius-sm); padding: 14px 16px; margin: 8px 0 20px; background: var(--amest-warning-soft); } .confidential-box .tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--amest-warning); text-transform: uppercase; margin-bottom: 8px; } .temp-password-box { border: 1px solid var(--amest-success); background: var(--amest-success-soft); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 20px; font-size: 13.5px; } .temp-password-box code { background: var(--amest-surface-solid); border: 1px solid var(--amest-border); padding: 3px 9px; border-radius: 6px; font-size: 13px; } /* ── 9. Modales ───────────────────────────────────────────────────────*/ .modal-overlay { position: fixed; inset: 0; background: rgba(6, 10, 20, .55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; } .modal-overlay[hidden] { display: none; } .modal-card { position: relative; width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto; background: var(--amest-surface-solid); border: 1px solid var(--amest-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: 26px 26px 22px; } .modal-card h2 { margin: 0 0 18px; font-size: 16.5px; font-weight: 700; } .modal-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border: none; border-radius: 999px; background: var(--amest-surface-2); color: var(--amest-text-muted); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; } .modal-close:hover { background: var(--amest-danger-soft); color: var(--amest-danger); } body.modal-open { overflow: hidden; } @media (max-width: 600px) { .modal-card { padding: 20px 18px 18px; max-height: 100vh; border-radius: var(--radius); } } /* ── 10. Selector de color + subida de logos (Patrocinadores) ───────────*/ .color-input-row { display: flex; gap: 8px; align-items: center; } .color-input-row input[type="color"] { width: 44px; height: 40px; padding: 2px; flex-shrink: 0; border: 1px solid var(--amest-border-strong); border-radius: var(--radius-sm); background: var(--amest-surface-2); cursor: pointer; } .color-input-row input[type="text"] { flex: 1; } .logo-upload { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .logo-upload .logo-preview { width: 56px; height: 56px; flex-shrink: 0; border: 1px dashed var(--amest-border-strong); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--amest-surface-2); } .logo-upload .logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .logo-upload .logo-preview.is-empty::after { content: 'Sin logo'; font-size: 9.5px; color: var(--amest-text-muted); text-align: center; padding: 2px; } .logo-upload .logo-preview.on-dark { background: #0d1526; border-color: rgba(255, 255, 255, .16); } .logo-upload .logo-upload-field { flex: 1; } .logo-upload input[type="file"] { font-size: 12.5px; color: var(--amest-text-muted); } .marca2-toggle-row { margin: 4px 0 20px; } .marca2-section { border-top: 1px dashed var(--amest-border-strong); margin-top: 4px; padding-top: 18px; } .marca2-section[hidden] { display: none; } .section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--amest-text-muted); margin-bottom: 12px; } /* ── 11. Usuarios, importaciones y envío individual de accesos ──────────*/ .card-subtitle, .page-kicker { color: var(--amest-text-muted); font-size: 13px; margin: 4px 0 0; } .page-kicker { margin-top: 6px; } .table-scroll { width: 100%; overflow-x: auto; } .muted-cell { color: var(--amest-text-muted); font-size: 12.5px; } .send-actions, .form-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; } .form-actions { margin-top: 8px; } .send-actions .btn-primary, .form-actions .btn-primary { width: auto; } .import-upload-card { max-width: 900px; } .import-stats .stat-card .value { font-size: 25px; } .send-console { border-color: var(--amest-primary-ring); } .send-progress { display: flex; align-items: center; gap: 12px; color: var(--amest-text-muted); font-size: 12.5px; } .send-progress__track { flex: 1; min-width: 120px; height: 9px; overflow: hidden; border-radius: 99px; background: var(--amest-surface-2); border: 1px solid var(--amest-border); } .send-progress__bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--amest-primary), var(--amest-accent)); transition: width .25s ease; } .delivery-note { margin: 12px 0 0; color: var(--amest-text-muted); font-size: 11.5px; } .row-error { max-width: 320px; margin-top: 5px; color: var(--amest-danger); font-size: 11px; line-height: 1.35; } .data-table--profiles, .import-table { min-width: 1080px; } .profile-meta { margin-top: 4px; color: var(--amest-text-muted); font-size: 12px; } .profile-stack { display: flex; flex-direction: column; gap: 4px; min-width: 145px; color: var(--amest-text-muted); font-size: 12.5px; line-height: 1.35; } .profile-stack strong { color: var(--amest-text); font-weight: 600; } .profile-stack--compact { min-width: 165px; } .profile-link { color: var(--amest-primary); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; } .sponsor-privacy-note { margin: -4px 0 16px; } .import-row[data-status="sending"] { background: var(--amest-warning-soft); } .import-row[data-status="sent"] { background: var(--amest-success-soft); } .role-fields { padding-top: 2px; } .role-fields[hidden] { display: none; } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } @media (max-width: 700px) { .send-progress { align-items: stretch; flex-direction: column; } .send-actions { width: 100%; } .send-actions .btn { flex: 1; } }