/* ========================================================================== ÁCIDO — sistema de diseño de Plataforma para Eventos Fuente canónica de estilos. CLAUDE.md documenta las reglas; este archivo las implementa. No agregar colores, sombras ni degradados nuevos. ========================================================================== */ /* ---------- Tokens ---------- Dos temas: oscuro (default) y claro, conmutables con data-theme en . --acc texto/bordes de acento (en claro se oscurece para contraste AA) --acc-fill rellenos de acento (topbar, botón primario, barras): SIEMPRE el verde ácido brillante con texto --acc-ink encima, en ambos temas. */ :root, :root[data-theme="dark"] { --bg: #101010; --surface: #101010; --ink: #f2f2ec; --mut: #8f8f85; --line: #2e2e2a; --acc: #c9f24b; --acc-fill: #c9f24b; --acc-soft: rgba(201, 242, 75, .13); --acc-ink: #0f1400; --ok: #c9f24b; --ok-bg: rgba(201, 242, 75, .14); --warn: #f2b84b; --warn-bg: rgba(242, 184, 75, .14); --bad: #f2564b; --bad-bg: rgba(242, 86, 75, .15); --ref: rgba(201, 242, 75, .07); --ref-line: rgba(201, 242, 75, .55); --r: 0px; --shadow: none; --body: "Helvetica Neue", Helvetica, Arial, sans-serif; --display: var(--body); --h-weight: 800; --chart-track: #1f1f1c; --row-alt: #171713; color-scheme: dark; /* Movimiento */ --t-fast: 160ms ease-out; /* hover, focus, color */ --t-med: 300ms ease-out; /* entradas de paneles, acordeones */ --t-slow: 500ms ease-out; /* barras de progreso, gráficos */ } /* Tema claro: papel cálido, mismo acento en rellenos, acento oscurecido en texto */ :root[data-theme="light"] { --bg: #f5f5ee; --surface: #f5f5ee; --ink: #16160f; --mut: #6f6f65; --line: #d8d8cb; --acc: #567400; --acc-fill: #c9f24b; --acc-soft: rgba(122, 160, 0, .12); --acc-ink: #0f1400; --ok: #4d7000; --ok-bg: rgba(92, 125, 0, .12); --warn: #96660a; --warn-bg: rgba(178, 124, 16, .14); --bad: #c02a1e; --bad-bg: rgba(192, 42, 30, .12); --ref: rgba(122, 160, 0, .08); --ref-line: rgba(86, 116, 0, .55); --chart-track: #e6e6da; --row-alt: #ecece0; color-scheme: light; } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--body); transition: background var(--t-fast), color var(--t-fast); } [data-num], .num { font-variant-numeric: tabular-nums; } ::selection { background: var(--acc-fill); color: var(--acc-ink); } /* Scrollbars finos y oscuros */ * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--line); } *::-webkit-scrollbar-thumb:hover { background: var(--mut); } /* Foco visible universal */ :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } a { color: var(--acc); text-decoration: none; transition: opacity var(--t-fast); } a:hover { opacity: .8; } /* ---------- Topbar ---------- */ .topbar { display: flex; align-items: center; gap: 1.1rem; padding: .7rem 1.4rem; background: var(--acc-fill); color: var(--acc-ink); } .topbar .logo { font-weight: 800; letter-spacing: -.02em; color: var(--acc-ink); display: flex; align-items: center; gap: .5rem; } .topbar .logo img { height: 22px; display: block; } .topbar nav { display: flex; gap: 1rem; font-size: .86rem; } .topbar nav a { color: color-mix(in srgb, var(--acc-ink) 75%, transparent); font-weight: 650; transition: color var(--t-fast); } .topbar nav a:hover, .topbar nav a.on { color: var(--acc-ink); opacity: 1; } .topbar .user { margin-left: auto; font-size: .82rem; color: color-mix(in srgb, var(--acc-ink) 75%, transparent); } /* ---------- Layout ---------- */ .page { padding: 1.4rem; display: grid; gap: 1.1rem; max-width: 1180px; margin: 0 auto; } .page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; } .page-head h1, .page-head h2 { margin: 0; font-family: var(--display); font-size: 2.4rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; line-height: .95; } .page-head h1::after, .page-head h2::after { content: " ↗"; color: var(--acc); } /* Chip de sistema / estado global */ .sys { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; background: transparent; color: var(--acc); border: 1.5px solid var(--acc); border-radius: 999px; padding: .22rem .65rem; } /* ---------- KPIs ---------- */ .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; } .kpi { background: transparent; border: 1.5px solid var(--line); border-radius: 0; padding: .85rem 1rem; transition: border-color var(--t-fast); } .kpi:hover { border-color: var(--mut); } .kpi.destacado, .kpi.destacado:hover { border-color: var(--acc); } .kpi.destacado .k-value { color: var(--acc); } .kpi .k-label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); } .kpi .k-value { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; font-variant-numeric: tabular-nums; } .kpi .k-note { font-size: .74rem; color: var(--mut); } .kpi .up { color: var(--ok); font-size: .85rem; } .kpi .down { color: var(--bad); font-size: .85rem; } /* ---------- Panel ---------- */ .panel { background: transparent; border: 1.5px solid var(--line); border-radius: 0; overflow: hidden; } .panel > header { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1.5px solid var(--line); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; } .panel > header .info { margin-left: auto; color: var(--mut); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .78rem; } .p-pad { padding: 1rem; } /* ---------- Tabla ---------- Headers/secciones INVERTIDOS (barra de tinta + texto del fondo) con filo de acento arriba: las secciones nunca se confunden con filas de datos. Filas con zebra sutil (--row-alt) para escaneo. Aplica a TODA tabla. */ .table { width: 100%; border-collapse: collapse; font-size: .86rem; } .table thead th, .comp thead th { text-align: left; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: var(--bg); font-weight: 800; padding: .6rem .8rem; border-top: 3px solid var(--acc-fill); border-bottom: none; white-space: nowrap; /* los headers JAMÁS se parten en dos renglones */ } /* Columnas numéricas: ancho mínimo (el detalle absorbe el resto) */ .table th.num, .table td.num, .comp th.num { width: 1%; white-space: nowrap; } .table td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); } .table tr:last-child td { border-bottom: none; } .table tbody tr { transition: background var(--t-fast); } .table tbody tr:nth-child(even) td { background: var(--row-alt); } .table tbody tr:hover td { background: var(--acc-soft); } .table .rank { font-weight: 800; color: var(--mut); font-variant-numeric: tabular-nums; } .table tr.first .rank { color: var(--acc); } /* Fila de totales/resumen al pie de una tabla */ .table tfoot td, .table tr.total td { border-top: 1.5px solid var(--ink); border-bottom: none; font-weight: 800; background: var(--row-alt); } /* ---------- Realce universal: ordenar + redimensionar (spec 21 §4) ---------- Se aplica a TODA `.table` vía `mejorarTabla()` (JS). Los grids editables (`data-noorden`) no se ordenan pero sí se redimensionan. */ .table thead th { position: relative; } .table thead th.ord { cursor: pointer; user-select: none; } /* La flecha de orden va pegada al texto del header; reserva de espacio para no saltar. */ .table thead th.ord .ord-ind { display: inline-block; width: .9em; margin-left: .25em; opacity: 0; transition: opacity var(--t-fast); font-weight: 700; } .table thead th.ord:hover .ord-ind { opacity: .5; } /* insinúa que ordena */ .table thead th.ord.asc .ord-ind, .table thead th.ord.desc .ord-ind { opacity: 1; color: var(--acc-fill); } /* Asa de redimensionar: franja invisible sobre el borde derecho del th. */ .table thead th .col-resize { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; user-select: none; z-index: 3; touch-action: none; } .table thead th .col-resize:hover, .table thead th .col-resize.activo { background: var(--acc-fill); opacity: .6; } .table.redim td, .table.redim th { overflow: hidden; text-overflow: ellipsis; } /* ---------- Reordenado por arrastre en grids editables (spec 21 §5) ---------- */ .drag-handle { cursor: grab; color: var(--mut); display: inline-flex; align-items: center; padding: 0 .2rem; opacity: .55; transition: opacity var(--t-fast), color var(--t-fast); touch-action: none; } .drag-handle:hover { opacity: 1; color: var(--acc); } .drag-handle:active, .arrastrando .drag-handle { cursor: grabbing; } tr.arrastrando, .sec-arrastrando { opacity: .5; } tr.drop-target > td { box-shadow: inset 0 2px 0 0 var(--acc-fill); } tr.drop-target-abajo > td { box-shadow: inset 0 -2px 0 0 var(--acc-fill); } .sec-drop-target { box-shadow: inset 0 3px 0 0 var(--acc-fill); } /* Columna del asa de arrastre: mínima, centrada. */ .table th.dragcol, .table td.dragcell { width: 1%; white-space: nowrap; text-align: center; padding-left: .3rem; padding-right: .2rem; } .table .sec + .sec { margin-top: .1rem; } /* ---------- Tabla editable (lista estilo Odoo, vestida Ácido) ---------- Celdas editables inline: input plano que revela borde al hover y se marca con el acento al foco. Filas se agregan/quitan con controles discretos. */ .t-input { font: inherit; color: inherit; background: transparent; border: none; border-bottom: 1.5px solid transparent; padding: .1rem .2rem; width: 100%; min-width: 3.5rem; transition: border-color var(--t-fast), background var(--t-fast); } .t-input:hover { border-bottom-color: var(--line); } .t-input:focus { outline: none; border-bottom-color: var(--acc); background: var(--acc-soft); } .t-input.num { text-align: right; font-variant-numeric: tabular-nums; } thead .t-input { color: var(--bg); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; } thead .t-input:hover { border-bottom-color: color-mix(in srgb, var(--bg) 40%, transparent); } thead .t-input:focus { border-bottom-color: var(--acc-fill); background: transparent; } .row-del { border: none; background: none; color: var(--bad); font: inherit; font-weight: 800; cursor: pointer; opacity: 0; padding: 0 .3rem; transition: opacity var(--t-fast); } tr:hover .row-del, .row-del:focus-visible { opacity: .85; } .add-line td { border-bottom: none; padding: .3rem .8rem; } .add-line button, .add-section { font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); background: none; border: none; cursor: pointer; padding: .25rem 0; transition: color var(--t-fast), border-color var(--t-fast); } .add-line button:hover { text-decoration: underline; } .add-section { display: block; width: 100%; text-align: center; border: 1.5px dashed var(--line); padding: .65rem; } .add-section:hover { border-color: var(--acc); } /* Tabla comparativa */ .comp { width: 100%; border-collapse: collapse; font-size: .84rem; } .comp td { padding: .5rem .8rem; border-bottom: 1px solid var(--line); } .comp thead th { text-align: center; } .comp td { text-align: center; } .comp thead th:first-child, .comp td:first-child { text-align: left; } .comp tbody tr:nth-child(even) td { background: var(--row-alt); } .comp .ref { background: var(--ref); border-left: 1px solid var(--ref-line); border-right: 1px solid var(--ref-line); } .comp td.best { background: var(--acc-soft); font-weight: 700; } /* ---------- Gráfico de barras ---------- */ .chart { display: grid; gap: .55rem; } .c-row { display: grid; grid-template-columns: 110px 1fr 52px; align-items: center; gap: .7rem; font-size: .84rem; } .c-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-track { background: var(--chart-track); border-radius: 0; height: 14px; position: relative; } .c-fill { position: absolute; inset: 0 auto 0 0; background: var(--acc-fill); border-radius: 0; opacity: .55; transition: width var(--t-slow); } .c-row.lead .c-fill { opacity: 1; } .c-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--mut); } .c-row.lead .c-val { color: inherit; font-weight: 700; } /* ---------- Badges y pills ---------- */ .badge { display: inline-block; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .16rem .55rem; border: 1.5px solid currentColor; background: transparent; font-variant-numeric: tabular-nums; } .b-ok { color: var(--ok); } .b-warn { color: var(--warn); } .b-bad { color: var(--bad); } .b-mut { color: var(--mut); } .pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 650; border-radius: 999px; padding: .18rem .6rem; border: 1.5px solid var(--pc, var(--acc)); border-left-width: 5px; background: transparent; } .pill .x { cursor: pointer; opacity: .6; font-weight: 800; transition: opacity var(--t-fast); } .pill .x:hover { opacity: 1; } /* ---------- Botones ---------- */ .btn { font: inherit; font-size: .66rem; font-weight: 650; text-transform: uppercase; letter-spacing: .1em; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); border-radius: 999px; padding: .38rem .9rem; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); } .btn:hover { border-color: var(--acc); color: var(--acc); } .btn.pri { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--acc-ink); } .btn.pri:hover { filter: brightness(1.08); color: var(--acc-ink); } .btn:disabled { border-color: var(--line); color: var(--mut); cursor: not-allowed; background: transparent; filter: none; } .btn.danger { border-color: var(--bad); color: var(--bad); } .btn.danger:hover { background: var(--bad-bg); } /* ---------- Formularios ---------- */ .field { display: grid; gap: .35rem; } .field label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 650; } .field input, .field select, .field textarea { font: inherit; font-size: .9rem; background: transparent; color: var(--ink); border: 1.5px solid var(--line); border-radius: 0; padding: .5rem .7rem; transition: border-color var(--t-fast); } .field input::placeholder, .field textarea::placeholder { color: var(--mut); } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--mut); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--acc); } .field .error-msg { font-size: .74rem; color: var(--bad); } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--bad); } input[type="checkbox"], input[type="radio"] { accent-color: var(--acc); width: 15px; height: 15px; cursor: pointer; } /* ---------- Toasts / alertas ---------- */ .toast { display: flex; align-items: center; gap: .6rem; border: 1.5px solid; border-radius: 0; padding: .6rem .9rem; font-size: .86rem; font-weight: 650; } .toast.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); } .toast.warn { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); } .toast.bad { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); } /* ---------- Estado vacío ---------- */ .empty { border: 1.5px dashed var(--line); border-radius: 0; padding: 2.2rem 1rem; text-align: center; color: var(--mut); } .empty strong { display: block; color: var(--ink); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; margin-bottom: .3rem; } /* ---------- Skeleton / loading ---------- */ .skeleton { background: var(--chart-track); border-radius: 0; min-height: 1em; animation: sk-pulse 1.4s ease-in-out infinite; } @keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* ---------- Barra inferior de acciones ---------- */ .actionbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; background: var(--acc-fill); color: var(--acc-ink); padding: .65rem 1.4rem; } .actionbar .t { font-size: .82rem; font-weight: 700; color: var(--acc-ink); } .actionbar .pill { border-color: var(--acc-ink); background: color-mix(in srgb, var(--acc-ink) 6%, transparent); color: var(--acc-ink); } .actionbar .btn { border-color: var(--acc-ink); color: var(--acc-ink); } .actionbar .btn:hover { border-color: var(--acc-ink); color: var(--acc-ink); background: color-mix(in srgb, var(--acc-ink) 8%, transparent); } .actionbar .btn.pri { background: var(--acc-ink); border-color: var(--acc-ink); color: var(--acc-fill); } .actionbar .cta { margin-left: auto; display: flex; gap: .5rem; } /* ---------- Overlay y modal ---------- */ .overlay { position: fixed; inset: 0; background: rgba(9, 12, 10, .65); display: none; align-items: flex-start; justify-content: center; padding: 2.2rem 1rem; z-index: 50; } .overlay.open { display: flex; } .modal { background: var(--surface); color: var(--ink); /* respeta el tema (claro/oscuro) */ border: 1.5px solid var(--acc); border-radius: 0; width: min(820px, 100%); overflow: hidden; animation: modal-in var(--t-med); } @keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .modal > header { display: flex; align-items: center; gap: .7rem; padding: .8rem 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--acc-fill); color: var(--acc-ink); } .modal > header .close { margin-left: auto; cursor: pointer; font-weight: 800; background: none; border: none; color: inherit; font-size: 1rem; } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: .2rem; padding: .6rem 1rem 0; border-bottom: 1.5px solid var(--line); flex-wrap: wrap; } .tabs span, .tabs button { font: inherit; font-size: .8rem; font-weight: 650; padding: .4rem .7rem; color: var(--mut); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); } .tabs .on { color: var(--acc); border-bottom-color: var(--acc); } /* ---------- Entradas animadas ---------- */ .fade-in { animation: fade-in var(--t-med) backwards; } @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- Responsive ---------- */ @media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, 1fr); } .topbar nav { display: none; } .page-head h1, .page-head h2 { font-size: 1.7rem; } } /* ---------- Movimiento reducido ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }