/* ═══════════════════════════════════════════════════════════════════════════ CAJA · ESTUDIO ROGANTI — Kit visual Paleta y tipografía: del diseño aprobado por el cliente (Index.html). NO TOCAR. Maquinaria (tema, barra lateral, acordeón, colapso, arreglos de CSS): portada del Tablero Amalfi. Sin dependencias externas salvo las tipografías IBM Plex. ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── 1 · FICHAS DE COLOR Nada en este archivo usa un color escrito a mano fuera de este bloque. Cambiar la paleta = tocar solo acá. ───────────────────────────────────────────────────────────────────────── */ :root{ /* ── Marca Roganti · aprobado por el cliente. NO MODIFICAR ── */ --acc:#D8232A; /* rojo de marca — fondos, bordes, barras */ --acc2:#F0353C; /* rojo para TEXTO sobre oscuro (4.0:1 → 5.0:1) */ --ok:#2E9E6B; /* ingresos */ --ok2:#3DBE86; /* ingresos, texto sobre oscuro */ --warn:#E0A03A; /* por vencer */ /* ── Superficies (tema oscuro = el canónico) ── */ --bg:#08080A; /* lienzo */ --panel:#101014; /* barra lateral, arriba del degradado */ --panel2:#0A0A0C; /* barra lateral, abajo del degradado */ --card:#121216; /* paneles y tarjetas */ --field:#0C0C10; /* fondo de campos de formulario */ --hover:#0E0E12; /* fila de tabla al pasar el mouse, encabezados */ /* ── Líneas ── */ --line:#212126; /* borde principal */ --line2:#1A1A1E; /* separador interno, más tenue */ --line3:#3A3A42; /* borde de control interactivo */ /* ── Texto ── */ --txt:#F4F4F5; --soft:#C9C9CF; --mut:#6E6E76; --mut2:#5C5C64; /* ── Barra lateral: se mantiene oscura en los DOS temas. Es el ancla de marca: si en modo claro se aclarara, la app perdería identidad y el rojo dejaría de resaltar. ── */ --side-bg-a:#101014; --side-bg-b:#0A0A0C; --side-fg:#F4F4F5; --side-mut:#6E6E76; --side-mut2:#5C5C64; --side-ico:#A6A6B2; /* íconos secundarios de la barra (salir). --side-mut2 daba 2,99:1 sobre el negro; este da 8,2:1. */ --side-line:#1A1A1E; --side-hover:#17171A; --side-act-a:#1B1B21; --side-act-b:#131317; --side-w:236px; --side-w-min:64px; /* barra lateral colapsada, solo íconos */ /* ── Atmósfera: cuadrícula de plano técnico + dos focos de luz ── */ --grid:rgba(255,255,255,.015); --halo-acc:rgba(216,35,42,.085); --halo-cool:rgba(140,152,184,.055); /* ── Movimiento ── */ --ease:cubic-bezier(.2,.75,.25,1); /* general */ --spring:cubic-bezier(.34,1.45,.5,1); /* acordeón, con rebote */ --foco:0 0 0 3px rgba(216,35,42,.14); /* anillo de foco */ /* Luz roja detrás de los íconos del menú. El rojo de Roganti entra como halo, no como relleno: el dibujo queda blanco y legible, y el color de marca aparece igual. Van como filtro para que el halo siga el trazo. */ --ico-luz:drop-shadow(0 0 5px rgba(216,35,42,.5)); --ico-luz-on:drop-shadow(0 0 4px rgba(216,35,42,.95)) drop-shadow(0 0 11px rgba(216,35,42,.5)); /* ── Tipografía ── */ --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif; --cond:'IBM Plex Sans Condensed',var(--sans); --mono:'IBM Plex Mono',ui-monospace,monospace; } /* ── TEMA CLARO ── Variante nueva: el cliente aprobó el oscuro. Los rojos y verdes de marca no cambian de valor; sí se invierte cuál de los dos tonos se usa para texto, porque sobre blanco el que necesita oscurecerse es el otro. ── */ html[data-theme="light"]{ --acc:#D8232A; /* 5.0:1 sobre blanco → no hace falta tocarlo */ --acc2:#B31A20; /* rojo para TEXTO sobre claro */ --ok:#2E9E6B; --ok2:#1F7A50; --warn:#9A6510; --bg:#F1F1F3; --panel:#FFFFFF; --panel2:#FAFAFB; --card:#FFFFFF; --field:#FFFFFF; --hover:#F7F7F9; --line:#E2E2E6; --line2:#EDEDF0; --line3:#C4C4CC; --txt:#141417; --soft:#3F3F46; --mut:#71717A; --mut2:#9A9AA3; /* En claro NO va cuadrícula. Sobre blanco la trama se ve sucia, como un papel cuadriculado fotocopiado, y encima se cuela por detrás de los paneles. En oscuro sí queda bien: apenas se insinúa. */ --grid:transparent; --halo-acc:rgba(216,35,42,.06); --halo-cool:rgba(90,110,150,.05); } /* ───────────────────────────────────────────────────────────────────────── 2 · BASE ───────────────────────────────────────────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box} /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ARREGLO VERIFICADO 1 de 3 · costó ~1,5 h en el proyecto anterior ║ ║ El atributo [hidden] pierde contra CUALQUIER regla que declare ║ ║ display (flex, grid, block). Toda la app funcionaba y una capa la ║ ║ tapaba. Esta regla va primero y con !important. No sacarla. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ [hidden]{display:none !important} html{transition:background .25s var(--ease)} body{ min-height:100vh; background: radial-gradient(1100px 520px at 82% -14%, var(--halo-acc), transparent 62%), radial-gradient(920px 480px at -6% 110%, var(--halo-cool), transparent 60%), repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 32px), var(--bg); background-attachment:fixed; color:var(--txt); font-family:var(--sans); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; transition:background-color .25s var(--ease),color .25s var(--ease); } body,.card,.panel,.topbar,table,aside{ transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease); } a{color:var(--acc2);text-decoration:none} ::selection{background:var(--acc);color:#fff} /* Todo número va en monoespaciada de ancho fijo: las columnas de importes quedan alineadas aunque cambien los dígitos. Es un libro de caja. */ .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} :focus-visible{outline:none;box-shadow:var(--foco);border-radius:4px} @keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes grow{from{transform:scaleY(.2);opacity:0}to{transform:scaleY(1);opacity:1}} @keyframes flyDrop{0%{opacity:0;transform:translateY(-13px)}58%{opacity:1;transform:translateY(7px)}80%{transform:translateY(-2px)}100%{transform:none}} @keyframes pulso{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.75}} /* ───────────────────────────────────────────────────────────────────────── 3 · ESTRUCTURA ───────────────────────────────────────────────────────────────────────── */ .app{display:flex;min-height:100vh} /* La barra lateral va DENTRO del flujo (sticky), no flotando sobre él. Antes era position:fixed y el contenido se corría con margin-left:236px: dos números que tenían que coincidir a mano. Si se desincronizaban, la barra tapaba la primera columna de las tablas. Así el ancho se declara una sola vez y el solapamiento es imposible: colapsar es animar un único width. */ aside{ flex:0 0 auto; width:var(--side-w); position:sticky;top:0;z-index:60; height:100vh; display:flex;flex-direction:column; padding:26px 0 20px; /* El color de base va aparte del degradado a propósito. Si se deja solo el degradado, el fondo del elemento es transparente: cualquier cosa que lo impida pintar deja ver el body detrás —con su cuadrícula— y la barra aparece clara con el texto blanco encima, ilegible. Con un color de base opaco eso no puede pasar. */ background-color:var(--side-bg-b); background-image:linear-gradient(180deg,var(--side-bg-a) 0%,var(--side-bg-b) 100%); border-right:1px solid var(--line); /* Sí, esto anima `width`, que en general no se hace porque obliga a recalcular la posición de todo. Acá es a propósito y es la opción correcta: es UN elemento, la acción pasa de vez en cuando, y `.main` es flex:1 al lado, así que se reacomoda solo. Hacerlo con `transform` obligaría a desplazar también el contenido: dos números que tienen que coincidir a mano, que es justo el problema que este layout vino a resolver. */ transition:width .24s var(--ease),transform .22s var(--ease); } .main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column} .wrap{padding:26px 34px 60px;animation:up 260ms var(--ease) both} /* ── Marca ── */ .brand{padding:0 24px 30px;overflow:hidden;white-space:nowrap} .brand b{font-family:var(--cond);font-weight:700;font-size:22px;display:block;color:var(--side-fg)} .brand b i{font-style:normal;color:var(--acc)} .brand span{font-size:8px;letter-spacing:.34em;color:var(--side-mut);font-weight:500;display:block;margin-top:5px} .brand-min{display:none;font-family:var(--cond);font-weight:700;font-size:22px;color:var(--acc);text-align:center} .seclbl{font-size:10px;letter-spacing:.18em;color:var(--side-mut2);font-weight:600} /* ───────────────────────────────────────────────────────────────────────── 4 · NAVEGACIÓN ───────────────────────────────────────────────────────────────────────── */ nav{padding:0 16px;display:flex;flex-direction:column;gap:3px} nav .seclbl{padding:0 10px 10px} .navit{ display:flex;align-items:center;gap:10px; width:100%;height:40px;padding:0 10px; border:0;border-radius:4px;background:transparent; color:var(--side-mut);font:500 13px var(--sans);text-align:left; cursor:pointer;position:relative; transition:background .16s ease,color .16s ease; } .navit:hover{background:var(--side-hover);color:var(--side-fg)} .navit[aria-current="true"],.navit.active{ background:linear-gradient(90deg,var(--side-act-a) 0%,var(--side-act-b) 100%); color:var(--side-fg); } .navit .dot{width:3px;height:12px;border-radius:2px;background:#2A2A30;flex:0 0 auto; transition:height .2s var(--ease),width .2s var(--ease),background .2s ease} .navit[aria-current="true"] .dot,.navit.active .dot{ height:18px;background:var(--acc);box-shadow:0 0 12px rgba(216,35,42,.6)} /* Ícono del ítem. Es lo único que queda cuando la barra está colapsada, así que no es decoración: es el que tiene que dejar leer la sección de un vistazo. */ /* stroke-width acá y no en el atributo del SVG: el trazo fino se apaga sobre negro. El CSS le gana al atributo de presentación, así que manda esta línea. */ .navit .ico{width:18px;height:18px;flex:0 0 auto;color:var(--side-fg);stroke-width:2; filter:var(--ico-luz);transition:filter .16s ease,color .16s ease} /* El dibujo es blanco siempre: el estado lo dice la intensidad de la luz, más la ficha de fondo, la barrita roja y el peso del texto. */ .navit:hover .ico{filter:var(--ico-luz-on)} .navit[aria-current="true"] .ico,.navit.active .ico{filter:var(--ico-luz-on)} .navit .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .navit .chev{width:13px;height:13px;flex:0 0 auto;color:var(--side-mut2); transition:transform .5s var(--spring)} .navsec.open>.navit .chev{transform:rotate(180deg)} /* Aviso numérico y punto de alerta */ .navbadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px; padding:0 5px;font:800 11px/1 var(--sans);color:#fff;background:var(--acc);border-radius:10px} .navdot{position:absolute;top:9px;left:14px;width:8px;height:8px;border-radius:50%; background:var(--acc);border:2px solid var(--side-bg-a);animation:pulso 1.8s ease-in-out infinite} /* Misma especificidad que las reglas de display de arriba: sin esto quedan siempre visibles. Ver ARREGLO VERIFICADO 1. */ .navbadge[hidden],.navdot[hidden]{display:none !important} /* ── Submenú desplegable (acordeón) ── Roganti hoy tiene 4 ítems planos y no lo necesita. Queda listo para cuando aparezcan secciones con subniveles, sin rehacer la barra. ── */ .fly{padding:2px 0 6px 26px;display:flex;flex-direction:column;gap:2px} .flyit{display:block;padding:7px 12px;border-radius:4px;border:0;background:transparent; color:var(--side-mut);font:600 12.5px var(--sans);text-align:left;width:100%;cursor:pointer; transition:background .14s,color .14s} .flyit:hover{background:var(--side-hover);color:var(--side-fg)} .flyit.active{background:var(--side-act-a);color:var(--side-fg)} .flyit .flysub{display:block;font-size:10px;font-weight:500;color:var(--side-mut2);margin-top:1px} @media(min-width:901px){ .navsec .fly{overflow:hidden;max-height:0;opacity:0; transition:max-height .62s var(--spring),opacity .46s ease} .navsec.open .fly{max-height:340px;opacity:1} .navsec.open .fly .flyit{animation:flyDrop .6s var(--ease) both} .navsec.open .fly .flyit:nth-child(2){animation-delay:.11s} .navsec.open .fly .flyit:nth-child(3){animation-delay:.22s} } /* ── Período y saldo ── */ .periodo{padding:26px 26px 0;margin-top:26px;border-top:1px solid var(--side-line); display:flex;flex-direction:column;gap:12px;overflow:hidden;white-space:nowrap} .periodo .v{font-family:var(--mono);font-size:13px;color:var(--soft)} .saldobox{margin:auto 16px 0;padding:16px;border:1px solid var(--line);border-radius:6px; background:#0E0E12;overflow:hidden;white-space:nowrap} html[data-theme="light"] .saldobox{background:#0E0E12} .saldobox .l{font-size:9px;letter-spacing:.2em;color:var(--side-mut2);font-weight:600} .saldobox .v{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.02em; margin:8px 0 4px;color:var(--side-fg)} .saldobox .d{font-size:11px;color:var(--ok2)} /* ── Pie: usuario y salida ── */ .side-foot{margin-top:16px;padding:14px 20px 0;border-top:1px solid var(--side-line); display:flex;align-items:center;gap:10px;overflow:hidden} .side-foot .ava{width:30px;height:30px;border-radius:5px;flex:0 0 auto; background:linear-gradient(180deg,#1E1E24,#141418);border:1px solid var(--line3); display:flex;align-items:center;justify-content:center;font:600 11px var(--sans);color:var(--soft)} .side-foot .who{flex:1;min-width:0;line-height:1.25;white-space:nowrap} .side-foot .who b{display:block;font-size:12.5px;color:var(--side-fg);overflow:hidden;text-overflow:ellipsis} .side-foot .who span{font-size:10px;letter-spacing:.14em;color:var(--side-mut)} .side-foot .out{border:0;background:transparent;color:var(--side-ico);cursor:pointer; padding:6px;border-radius:4px;display:flex;transition:background .14s,color .14s} .side-foot .out:hover{background:var(--side-hover);color:var(--acc2)} /* ── Barra lateral colapsada (solo íconos) ── */ /* Colapsar = un solo cambio de ancho. El contenido se reacomoda solo porque .main es flex:1 dentro del mismo contenedor. */ body.min aside{width:var(--side-w-min)} /* Lo que desaparece al colapsar. Se va con una transición corta de opacidad antes de ocultarse: si se apagara de golpe, el texto parpadearía mientras la barra todavía se está achicando. */ .navit .lbl,.side-foot .who,.periodo,.saldobox,.brand{ transition:opacity .12s ease} body.min .brand,body.min .periodo,body.min .saldobox, body.min nav .seclbl,body.min .navit .lbl,body.min .navit .chev, body.min .navit .dot,body.min .fly,body.min .side-foot .who{display:none} body.min .brand-min{display:block;padding:0 0 30px} body.min nav{padding:0 10px} body.min .navit{justify-content:center;padding:0} body.min .navit .ico{width:20px;height:20px} /* El ítem activo pierde la barrita roja al ocultarse el .dot: se la devuelve pegada al borde de la barra. left:-10px = el padding lateral de nav. */ body.min .navit[aria-current="true"]::before,body.min .navit.active::before{ content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%); width:3px;height:20px;border-radius:0 2px 2px 0; background:var(--acc);box-shadow:0 0 12px rgba(216,35,42,.6)} /* El aviso numérico no entra al lado del ícono: pasa a la esquina. */ body.min .navbadge{position:absolute;top:1px;right:3px; min-width:16px;height:16px;padding:0 4px;font-size:9.5px; border:2px solid var(--side-bg-a)} /* 30px de avatar + 29px de botón no entran en 64px: en columna sí. */ body.min .side-foot{flex-direction:column;gap:8px;justify-content:center;padding:14px 0 0} /* ───────────────────────────────────────────────────────────────────────── 5 · BARRA SUPERIOR ───────────────────────────────────────────────────────────────────────── */ .topbar{ display:flex;align-items:center;gap:16px; padding:0 34px;min-height:70px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--panel2) 85%, transparent); backdrop-filter:blur(8px); position:sticky;top:0;z-index:40; } .topbar h1{font-size:19px;font-weight:600;letter-spacing:-.01em} .topbar .sub{font-size:12px;color:var(--mut)} .topbar .sp{flex:1} .iconbtn{border:0;background:transparent;color:var(--mut);cursor:pointer; padding:7px;border-radius:4px;display:flex;transition:background .14s,color .14s} .iconbtn:hover{background:var(--hover);color:var(--txt)} .iconbtn:active{transform:scale(.95)} .burger{display:none} .deskToggle svg{transition:transform .2s var(--ease)} body.min .deskToggle svg{transform:rotate(180deg)} /* Sol y luna: se muestra el que corresponde. Ver ARREGLO VERIFICADO 1 — sin [hidden]{display:none!important} arriba, se verían los dos. */ .temaSol{display:none} html[data-theme="light"] .temaSol{display:block} html[data-theme="light"] .temaLuna{display:none} .who{display:flex;align-items:center;gap:10px} .who .av{width:34px;height:34px;border-radius:5px;flex:0 0 auto; background:linear-gradient(180deg,#1E1E24,#141418);border:1px solid var(--line3); display:flex;align-items:center;justify-content:center;font:600 12px var(--sans);color:var(--soft)} .who .n{font-size:13px;font-weight:500} .who .r{font-size:10px;letter-spacing:.14em;color:var(--mut)} /* ───────────────────────────────────────────────────────────────────────── 6 · PANELES Y TARJETAS ───────────────────────────────────────────────────────────────────────── */ .panel{background:var(--card);border:1px solid var(--line);border-radius:6px} html[data-theme="light"] .panel{box-shadow:0 1px 2px rgba(16,16,20,.04)} .ph{padding:16px 20px;border-bottom:1px solid var(--line2); display:flex;align-items:center;justify-content:space-between;gap:12px} .ph .t{font-size:13px;font-weight:600} .ph .s{font-size:11px;color:var(--mut);margin-top:2px} .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px} .kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))} .kpi{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px 18px; animation:up 300ms var(--ease) both} .kpi:nth-child(2){animation-delay:60ms} .kpi:nth-child(3){animation-delay:120ms} .kpi:nth-child(4){animation-delay:180ms} .kpi .top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px} .kpi .lbl{font-size:9px;letter-spacing:.16em;color:var(--mut2);font-weight:700} .kpi .dlt{font-size:11px;font-weight:600} .kpi .val{font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:-.02em} .kpi .sub{margin-top:12px;padding-top:11px;border-top:1px solid var(--line2); display:flex;justify-content:space-between;gap:8px} .kpi .sub div:first-child{font-size:9px;letter-spacing:.14em;color:var(--mut2);font-weight:600} .kpi .sub div:last-child{font-family:var(--mono);font-size:12px;color:var(--soft)} .side-col{display:flex;flex-direction:column;gap:14px} .side-col .row{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:9px 0;border-bottom:1px solid var(--line2)} .side-col .row:last-child{border-bottom:0} .side-col .row span:first-child{font-size:12px;color:var(--mut)} .meta{font-size:11px;color:var(--mut);margin-top:3px} .empty{padding:46px 20px;text-align:center;color:var(--mut);font-size:13px} /* ───────────────────────────────────────────────────────────────────────── 7 · FORMULARIOS ───────────────────────────────────────────────────────────────────────── */ .form{padding:20px;display:flex;flex-direction:column;gap:16px} label{display:block;font-size:10px;letter-spacing:.14em;color:var(--mut);font-weight:600;margin-bottom:7px} input,select,textarea{ width:100%;background:var(--field);color:var(--txt); border:1px solid var(--line);border-radius:4px;padding:11px 12px; font:400 14px var(--sans); transition:border-color .16s ease,box-shadow .2s ease,background-color .25s var(--ease); } input:hover,select:hover,textarea:hover{border-color:var(--line3)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:var(--foco)} textarea{resize:vertical;min-height:66px;font-family:var(--sans)} input[type="file"]{padding:9px 12px;color:var(--soft);font-size:13px} input[type="file"]::file-selector-button{ background:transparent;border:1px solid var(--line3);color:var(--soft); border-radius:3px;padding:6px 12px;margin-right:12px;cursor:pointer;font:600 10px var(--sans); letter-spacing:.08em;text-transform:uppercase} select{ appearance:none;padding-right:32px; background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%), linear-gradient(135deg,var(--mut) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px;background-repeat:no-repeat; } /* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ARREGLO VERIFICADO 2 de 3 · costó 3 vueltas en el proyecto anterior ║ ║ Las opciones de un