/* App de campañas — Acciona IT / Flock IT Vanilla CSS, sin build step, sin framework. La consistencia se logra copiando el patrón de las otras vistas. Sistema visual: design system Acciona, el mismo que usan Payroll, Taskflow y OKR Manager (fuente: liquidaciones/docs/design.md). Los tokens canónicos son los de ese documento (--red, --dark, --bg, --surface...). Los nombres en español (--fondo, --borde, --peligro...) quedan como ALIAS porque varias vistas los usan en atributos style inline: no los borres sin revisar views/. Modo de color: tres estados (claro / oscuro / sistema). El atributo data-theme de lo escribe un script inline del layout antes del primer paint. La media query de abajo es el fallback para cuando no hay JS. */ /* ── Tokens ────────────────────────────────────────────────────────────── */ :root { /* Marca */ --red: #E30613; --red-dark: #C50510; --red-light: #FFF1F2; --dark: #1A1A2E; /* Neutrales */ --bg: #F7F7F8; --surface: #FFFFFF; --border: #E5E5EB; --border-hover: #D0D0DA; --dark-muted: #6B7085; /* Semánticos */ --success: #059669; --danger: #DC2626; --warning: #D97706; --info: #0891B2; --shadow: 0 1px 3px rgba(0,0,0,0.05); --shadow-lg: 0 4px 16px rgba(0,0,0,0.08); --radius: 10px; --font: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Alias en español — los usan views/ en estilos inline */ --fondo: var(--bg); --superficie: var(--surface); --borde: var(--border); --texto: var(--dark); --texto-suave: var(--dark-muted); --primario: var(--red); --ok: var(--success); --aviso: var(--warning); --peligro: var(--danger); --peligro-suave: var(--red-light); --radio: var(--radius); /* Color de enlace. Se separa del rojo de marca porque en oscuro necesita aclararse y porque un enlace no puede leerse igual que un boton destructivo. */ --enlace: var(--red); } /* Oscuro explícito. Los colores de marca y los semánticos NO cambian: sólo los fondos y los textos neutrales. */ [data-theme="dark"] { --bg: #0F0F14; --surface: #18181F; --border: #2A2A38; --border-hover: #3A3A4A; --dark: #E2E2EF; --dark-muted: #8888A0; --red-light: rgba(227,6,19,0.15); --shadow: 0 1px 3px rgba(0,0,0,0.2); --shadow-lg: 0 4px 16px rgba(0,0,0,0.3); /* El rojo de marca no se toca, pero como color de ENLACE sobre fondo oscuro da 3.9:1 y encima se confunde con lo destructivo. Los enlaces usan su propio token, aclarado. */ --enlace: #FF8A8A; } /* Fallback sin JS: respeta el sistema, salvo que se haya pedido claro. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0F0F14; --surface: #18181F; --border: #2A2A38; --border-hover: #3A3A4A; --dark: #E2E2EF; --dark-muted: #8888A0; --red-light: rgba(227,6,19,0.15); --shadow: 0 1px 3px rgba(0,0,0,0.2); --shadow-lg: 0 4px 16px rgba(0,0,0,0.3); --enlace: #FF8A8A; } } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.55; background: var(--bg); color: var(--dark); } a { color: var(--enlace); } /* ── Layout ────────────────────────────────────────────────────────────── */ .app-layout { display: flex; min-height: 100vh; } .sidebar { width: 240px; min-width: 240px; background: #1A1A2E; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 100; } /* La transición se habilita por JS recién después del primer paint: si no, arrancar colapsado desde localStorage se vería como un salto de 240 a 64px. */ .sidebar.sidebar-anim, .sidebar.sidebar-anim .sidebar-collapse-btn { transition: width .18s ease, min-width .18s ease, transform .18s ease; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); } .sidebar-logo { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; } .sidebar-logo-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .sidebar-logo-name { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.3px; } .sidebar-logo-sub { font-size: 11px; color: rgba(255,255,255,0.62); } .sidebar-collapse-btn { margin-left: auto; width: 28px; height: 28px; padding: 0; background: transparent; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; color: rgba(255,255,255,0.55); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color .12s, background .12s, border-color .12s, transform .18s ease; } .sidebar-collapse-btn svg { width: 14px; height: 14px; } .sidebar-collapse-btn:hover { color: #fff; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.25); } .sidebar-nav { flex: 1; padding: 10px 10px 0; display: flex; flex-direction: column; gap: 2px; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px; font-weight: 500; transition: background .12s, color .12s; } .sidebar-item svg { width: 18px; height: 18px; flex-shrink: 0; } .sidebar-item:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.9); } .sidebar-item.active { background: rgba(227,6,19,0.18); color: #fff; } .sidebar-item.active svg { color: var(--red); } .sidebar-item:focus-visible, .sidebar-logout:focus-visible, .theme-btn:focus-visible, .sidebar-collapse-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } /* El foco de la sidebar estaba resuelto y el del contenido no: un boton "Enviar a N destinatarios" con el anillo por defecto del navegador, mientras el menu tiene uno disenado, es inconsistente hacia adentro. */ button:focus-visible, .boton:focus-visible, .sidebar-hamburger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .sidebar-separator { height: 1px; background: rgba(255,255,255,0.07); margin: 8px 0; } .sidebar-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,0.62); padding: 4px 10px 2px; } /* Toggle de tema */ .sidebar-theme-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 8px 10px; background: rgba(255,255,255,0.06); border-radius: 10px; padding: 4px; } .theme-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 7px; border: none; border-radius: 7px; background: transparent; color: rgba(255,255,255,0.55); cursor: pointer; transition: background .12s, color .12s; } .theme-btn svg { width: 16px; height: 16px; } .theme-btn:hover { color: rgba(255,255,255,0.75); } .theme-btn.active { background: rgba(255,255,255,0.12); color: #fff; } .sidebar-footer { padding: 12px 10px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; gap: 6px; } .sidebar-user { display: flex; align-items: center; gap: 9px; padding: 4px 6px; min-width: 0; } .sidebar-user-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.12); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .sidebar-user-info { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .sidebar-user-name { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-rol { font-size: 11px; color: rgba(255,255,255,0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-logout { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13px; transition: background .12s, color .12s; } .sidebar-logout svg { width: 16px; height: 16px; flex-shrink: 0; } .sidebar-logout:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); } /* Colapsado (desktop) */ .sidebar.is-collapsed { width: 64px; min-width: 64px; } .sidebar.is-collapsed .sidebar-logo-info, .sidebar.is-collapsed .sidebar-section-label, .sidebar.is-collapsed .sidebar-user-info, .sidebar.is-collapsed .sidebar-item span, .sidebar.is-collapsed .sidebar-logout span { display: none; } .sidebar.is-collapsed .sidebar-brand { padding: 14px 8px; justify-content: center; } .sidebar.is-collapsed .sidebar-collapse-btn { margin: 0; transform: rotate(180deg); } .sidebar.is-collapsed .sidebar-nav { padding: 10px 6px 0; } .sidebar.is-collapsed .sidebar-item, .sidebar.is-collapsed .sidebar-logout { justify-content: center; padding: 10px 6px; } .sidebar.is-collapsed .sidebar-footer { padding: 10px 6px; } .sidebar.is-collapsed .sidebar-user { justify-content: center; padding: 6px 4px; } .sidebar.is-collapsed .sidebar-separator { margin: 6px 8px; } .sidebar.is-collapsed .sidebar-theme-toggle { flex-direction: column; padding: 8px 6px; gap: 4px; } .main-wrapper { flex: 1; min-width: 0; display: flex; flex-direction: column; } .main-content { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 28px 64px; } .app-footer { padding: 20px 28px; color: var(--dark-muted); border-top: 1px solid var(--border); margin-top: 48px; font-size: 12px; } /* Barra móvil */ .mobile-topbar { display: none; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .mobile-topbar-brand { font-size: 15px; font-weight: 700; color: var(--dark); flex: 1; } .sidebar-hamburger { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; flex-shrink: 0; color: var(--dark); } .sidebar-hamburger svg { width: 18px; height: 18px; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; } /* ── Tipografía ────────────────────────────────────────────────────────── */ h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.3px; } h2 { font-size: 17px; margin: 28px 0 12px; } h3 { font-size: 15px; margin: 20px 0 8px; } .subtitulo { color: var(--dark-muted); margin: 0 0 20px; } /* ── Tarjetas y grillas ────────────────────────────────────────────────── */ .tarjeta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow); } .grilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); } .kpi .valor { font-size: 24px; font-weight: 700; line-height: 1.2; } .kpi .etiqueta { color: var(--dark-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .kpi .nota { color: var(--dark-muted); font-size: 12px; margin-top: 4px; } /* ── Tablas ────────────────────────────────────────────────────────────── */ .tabla-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; background: var(--surface); } th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--dark-muted); font-weight: 700; } tbody tr:hover { background: var(--bg); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* ── Estados ───────────────────────────────────────────────────────────── */ .pastilla { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); color: var(--dark-muted); } .pastilla.activa, .pastilla.enviando, .pastilla.ok { color: var(--success); border-color: var(--success); } .pastilla.pausada, .pastilla.borrador { color: var(--warning); border-color: var(--warning); } .pastilla.suspendida, .pastilla.error, .pastilla.cortado { color: var(--danger); border-color: var(--danger); } /* ── Formularios ───────────────────────────────────────────────────────── */ label { display: block; margin-bottom: 4px; font-weight: 600; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=time], input[type=datetime-local], select, textarea { width: 100%; padding: 8px 10px; font: inherit; color: var(--dark); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; transition: border-color .15s, box-shadow .15s; } input:hover, select:hover, textarea:hover { border-color: var(--border-hover); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); } .campo { margin-bottom: 14px; } .campo .ayuda { color: var(--dark-muted); font-size: 12px; margin-top: 3px; } .fila { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* ── Botones ───────────────────────────────────────────────────────────── */ button, .boton { font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 7px; border: 1px solid var(--red); background: var(--red); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; transition: background .12s, border-color .12s; } button:hover, .boton:hover { background: var(--red-dark); border-color: var(--red-dark); } button.sec, .boton.sec { background: var(--surface); color: var(--dark); border-color: var(--border); } button.sec:hover, .boton.sec:hover { background: var(--bg); border-color: var(--border-hover); } /* ⚠️ Lo irreversible se ve distinto de lo reversible (regla 2 de .claude/rules/frontend.md). Pausar es reversible; enviar no lo es. Ojo con lo que pasó acá: al adoptar el rojo Acciona como color de acción primario, "Guardar" (--red #E30613) y "Enviar a 30.000 destinatarios" (--danger #DC2626) quedaron a cuatro puntos de diferencia: dos rojos indistinguibles salvo lado a lado. El tono dejó de separar lo que no vuelve. La distinción no puede apoyarse en el tono, entonces se apoya en la SUPERFICIE, que es como lo resuelve el design system: el primario es relleno sólido; lo destructivo es fondo tintado con borde y texto rojos. Se leen distinto de un vistazo, en escala de grises y con daltonismo rojo-verde. */ button.peligro, .boton.peligro { background: var(--red-light); border: 1.5px solid var(--danger); color: var(--danger); font-weight: 700; } button.peligro:hover, .boton.peligro:hover { background: var(--danger); border-color: var(--danger); color: #fff; } /* ── Avisos ────────────────────────────────────────────────────────────── */ .flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 18px; border: 1px solid var(--border); background: var(--surface); } .flash-ok { border-color: var(--success); color: var(--success); } .flash-aviso { border-color: var(--warning); color: var(--warning); } .flash-error { border-color: var(--danger); color: var(--danger); background: var(--red-light); } .caja-peligro { border: 1px solid var(--danger); background: var(--red-light); border-radius: var(--radius); padding: 14px 16px; margin: 16px 0; } .caja-aviso { border: 1px solid var(--warning); border-radius: var(--radius); padding: 12px 14px; margin: 14px 0; background: var(--surface); } .vacio { color: var(--dark-muted); padding: 28px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); } .acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0; } .encabezado-pagina { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 32px 0 24px; } code, .mono { font-family: var(--mono); font-size: 13px; } /* ── Embudo de secuencia ───────────────────────────────────────────────── */ .embudo-barra { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; } .embudo-barra > span { display: block; height: 100%; background: var(--red); } /* ── Login (sin sidebar) ───────────────────────────────────────────────── */ .main-wrapper.sin-sidebar .main-content { max-width: 420px; padding-top: 8vh; } /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .mobile-topbar { display: flex; } .sidebar { position: fixed; left: 0; top: 0; height: 100vh; z-index: 1000; transform: translateX(-100%); transition: transform .25s ease; } .sidebar.sidebar-open { transform: translateX(0); } .sidebar-overlay.active { display: block; } /* En móvil el colapsado no aplica: la sidebar se controla con el hamburger. */ .sidebar-collapse-btn { display: none; } .sidebar.is-collapsed { width: 240px; min-width: 240px; } .sidebar.is-collapsed .sidebar-logo-info, .sidebar.is-collapsed .sidebar-user-info, .sidebar.is-collapsed .sidebar-item span, .sidebar.is-collapsed .sidebar-logout span { display: flex; } .sidebar.is-collapsed .sidebar-section-label { display: block; } .sidebar.is-collapsed .sidebar-item, .sidebar.is-collapsed .sidebar-logout { justify-content: flex-start; padding: 9px 10px; } .sidebar.is-collapsed .sidebar-brand { padding: 16px 14px; justify-content: flex-start; } .sidebar.is-collapsed .sidebar-theme-toggle { flex-direction: row; padding: 4px; } .main-content { padding: 0 16px 48px; } .encabezado-pagina { margin: 20px 0 16px; } } @media (max-width: 480px) { .main-content { padding: 0 12px 40px; } .encabezado-pagina { flex-direction: column; } .fila, .grilla { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }