/* ------------------------------------------------------------------ Portal ERP · Corporación SYS de Tibás S.A. Panel de instrumento oscuro. Tema único deliberado: es la identidad del producto y continúa la línea visual del sistema que reemplaza. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ Temas. El usuario elige entre tres desde la barra superior; la preferencia viaja en la cookie sys.tema y el layout la escribe como data-tema en , así el servidor pinta el tema correcto sin parpadeo. Los componentes usan solo estas variables — nunca un color fijo — para que el tema cambie todo de forma coherente. ------------------------------------------------------------------ */ :root { /* Fuentes y medidas: no cambian con el tema. */ --f-display: "Bahnschrift", "DIN Alternate", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif; --f-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --f-data: "Consolas", "Cascadia Mono", ui-monospace, "SF Mono", "Roboto Mono", monospace; --lateral: 218px; /* Tema 1 · Instrumento (por defecto): panel oscuro, cian y oro. */ --bg: #071322; --panel: #0C1E32; --panel-2: #0A1828; --line: #16324D; --line-soft: #10263C; --ink: #DCE9F5; --dim: #7E97AE; --dim-2: #5A748C; --acento: #35CFE8; --acento-2: #E6B44C; --acento-hondo: #1E8CA5; --sobre-acento: #04121C; --pos: #45BE92; --neg: #E8734F; --sombra: rgba(0, 0, 0, .45); --logo-placa: #FFFFFF; --logo-placa-borde: transparent; /* Alias que usan las pantallas nuevas (Contabilidad/Nómina). Mapean a las variables reales del tema activo, así respetan claro/oscuro automáticamente. Se declaran una vez y como referencia var(), por lo que siguen al tema. */ --fondo: var(--panel); --fondo-2: var(--panel-2); --borde: var(--line); --texto: var(--ink); --tenue: var(--dim); } /* Tema 2 · Corporativo SYS: mismo panel oscuro con el verde y el naranja del logo de Corporación SYS. */ :root[data-tema="corporativo"] { --bg: #08160E; --panel: #0E2418; --panel-2: #0A1B11; --line: #1E3A29; --line-soft: #132A1C; --ink: #E6F0E8; --dim: #8BA896; --dim-2: #607E6C; --acento: #5FC24A; --acento-2: #F2913D; --acento-hondo: #2F7D2A; --sobre-acento: #05210B; --pos: #4FBE7B; --neg: #E0523A; --sombra: rgba(0, 0, 0, .50); --logo-placa: #FFFFFF; --logo-placa-borde: transparent; } /* Tema 3 · Claro (sugerido): fondo claro para uso diurno o proyector, con acento verde azulado y ámbar. */ :root[data-tema="claro"] { --bg: #EEF1F5; --panel: #FFFFFF; --panel-2: #F5F8FB; --line: #D7DFE8; --line-soft: #E7ECF2; --ink: #17262F; --dim: #566673; --dim-2: #8496A4; --acento: #0E7C88; --acento-2: #C0761F; --acento-hondo: #0A5D66; --sobre-acento: #FFFFFF; --pos: #2E9E6B; --neg: #CB4B2A; --sombra: rgba(20, 34, 45, .16); --logo-placa: #FFFFFF; --logo-placa-borde: #D7DFE8; } * { box-sizing: border-box; } /* El atributo hidden debe ganar aunque el componente fije su propio display (botones, flex, grid): sin esto, hidden no oculta nada. */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--acento) 7%, transparent), transparent 60%), var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, .disp { font-family: var(--f-display); font-variation-settings: "wdth" 88, "wght" 600; font-weight: 600; margin: 0; line-height: 1.15; text-wrap: balance; } a { color: var(--acento); } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------------- barra superior ---------------- */ .barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px 0 12px; height: 52px; border-bottom: 1px solid var(--line); background: var(--panel-2); position: sticky; top: 0; z-index: 20; } .barra-izq, .barra-der { display: flex; align-items: center; gap: 6px; } .barra-izq { gap: 12px; } .barra-titulo { font-family: var(--f-display); font-variation-settings: "wdth" 88, "wght" 600; font-size: 13px; letter-spacing: .14em; color: var(--ink); padding-left: 4px; } /* Botones de acción de la barra: plegar, inicio, perfil, clave, campana, salir. */ .accion { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 5px; border: 0; background: transparent; color: var(--dim); cursor: pointer; text-decoration: none; padding: 0; } .accion:hover { background: color-mix(in srgb, var(--acento) 10%, transparent); color: var(--ink); } .accion .ico { width: 19px; height: 19px; } .accion.salir:hover { background: rgba(232, 115, 79, .14); color: var(--neg); } .ico { width: 20px; height: 20px; flex: none; } .marca { display: flex; align-items: center; text-decoration: none; } /* El logo de Corporación SYS va sobre una placa clara para que su texto gris lea sobre el panel oscuro. El tamaño lo fija cada contexto más abajo. */ .logo-plate { display: inline-flex; align-items: center; justify-content: center; background: var(--logo-placa); border: 1px solid var(--logo-placa-borde); border-radius: 7px; padding: 5px 10px; box-shadow: 0 2px 10px var(--sombra); } .logo-img { display: block; height: 28px; width: auto; } .sesion { font-family: var(--f-display); font-variation-settings: "wdth" 92, "wght" 400; font-size: 12px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; text-align: right; } .sesion b { display: block; color: var(--ink); font-variation-settings: "wdth" 92, "wght" 600; font-size: 13px; letter-spacing: .06em; } .sesion a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line); } .sesion a:hover { color: var(--acento); border-bottom-color: var(--acento); } /* ---------------- estructura ---------------- */ /* dvh en vez de vh: en iOS y Android la barra de direcciones se muestra y se esconde al desplazar, y 100vh cuenta siempre la pantalla completa, así que el pie de la página queda tapado. Se deja vh de respaldo para navegadores viejos, que ignoran la línea siguiente. */ .marco { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: calc(100vh - 57px); } .marco { min-height: calc(100dvh - 57px); } .lateral { border-right: 1px solid var(--line); padding: 0 0 24px; display: flex; flex-direction: column; gap: 2px; background: var(--panel-2); overflow-y: auto; } /* Cuando el usuario todavía no ha abierto nada, «Más utilizadas» explica de dónde va a salir su contenido en vez de quedar en blanco. */ .lateral-vacio { margin: 0; padding: 4px 14px 10px; font-size: 11px; line-height: 1.5; color: var(--dim-2); } .lateral-titulo { font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 10px; letter-spacing: .19em; text-transform: uppercase; color: var(--dim-2); padding: 14px 18px 8px; } /* ---------------- tarjeta de usuario ---------------- */ .usuario { display: flex; align-items: center; gap: 11px; padding: 16px 16px 15px; border-bottom: 1px solid var(--line); } .avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--acento) 18%, var(--panel)); border: 1px solid var(--line); color: var(--acento); font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 15px; letter-spacing: .04em; } .usuario-datos { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .usuario-empresa { font-family: var(--f-display); font-variation-settings: "wdth" 92, "wght" 600; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .usuario-correo, .usuario-nombre { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .usuario-nombre { color: var(--dim-2); } /* Conmutador de compañías: el nombre de la empresa abre la lista de entidades a las que el usuario tiene acceso. */ .emp-menu { position: relative; min-width: 0; flex: 1; } .emp-actual { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; } .emp-actual .chevron { width: 13px; height: 13px; flex: none; color: var(--dim-2); } .emp-actual:hover .usuario-empresa { color: var(--acento); } .emp-actual[disabled] { cursor: default; } .emp-actual[disabled] .chevron { display: none; } .emp-pop { position: absolute; left: 0; top: calc(100% + 8px); min-width: 240px; max-width: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px; box-shadow: 0 16px 44px var(--sombra); z-index: 45; display: flex; flex-direction: column; gap: 2px; } .emp-pop[hidden] { display: none; } .emp-pop-tit { font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim-2); padding: 6px 8px 5px; } .emp-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 0; background: transparent; border-radius: 6px; color: var(--dim); font-family: var(--f-body); font-size: 13px; text-align: left; cursor: pointer; } .emp-opt:hover { background: color-mix(in srgb, var(--acento) 10%, transparent); color: var(--ink); } .emp-opt.activa { color: var(--ink); } .emp-opt.activa::after { content: "\2713"; margin-left: auto; color: var(--acento); } .emp-opt .punto { width: 5px; height: 5px; border-radius: 50%; background: var(--dim-2); flex: none; } .emp-opt.activa .punto { background: var(--acento); } .emp-registrar { display: block; padding: 8px; border-top: 1px solid var(--line-soft); margin-top: 3px; font-size: 12px; color: var(--acento); text-decoration: none; } .emp-registrar:hover { text-decoration: underline; } /* ---------------- módulos con ícono y ventanas ---------------- */ .grupo { display: flex; flex-direction: column; } .modulo .ico-mod { display: inline-flex; width: 18px; height: 18px; flex: none; color: var(--dim); } .modulo .ico-mod .ico { width: 18px; height: 18px; } .modulo:hover .ico-mod, .grupo.abierto .modulo .ico-mod { color: var(--acento); } .ventanas { display: flex; flex-direction: column; overflow: hidden; max-height: 0; transition: max-height .18s ease; } .grupo.abierto .ventanas, .grupo:hover .ventanas { max-height: 460px; } .ventana { display: flex; align-items: center; gap: 9px; padding: 6px 18px 6px 40px; font-size: 12.5px; color: var(--dim); text-decoration: none; border-left: 2px solid transparent; } .ventana:hover { color: var(--ink); background: color-mix(in srgb, var(--acento) 5%, transparent); } .ventana .punto { width: 3px; height: 3px; border-radius: 50%; background: var(--dim-2); flex: none; } .ventana.activo { color: var(--ink); border-left-color: var(--acento); background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 10%, transparent), transparent 70%); } .ventana.activo .punto { background: var(--acento); } .modulo { display: flex; align-items: center; gap: 9px; padding: 7px 18px; font-size: 13px; color: var(--dim); border-left: 2px solid transparent; text-decoration: none; } .modulo .punto { width: 4px; height: 4px; border-radius: 50%; background: var(--dim-2); flex: none; } .modulo .txt { flex: 1; min-width: 0; } .modulo:hover { color: var(--ink); background: color-mix(in srgb, var(--acento) 5%, transparent); } .modulo.activo { color: var(--ink); border-left-color: var(--acento); background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 10%, transparent), transparent 70%); } .modulo.activo .punto { background: var(--acento); } .modulo.pendiente { color: var(--dim-2); cursor: default; } .modulo.pendiente:hover { background: none; color: var(--dim-2); } .insignia { font-family: var(--f-data); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--dim-2); padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; } .insignia.aviso { color: var(--acento-2); border-color: color-mix(in srgb, var(--acento-2) 40%, transparent); } .insignia.critico { color: var(--neg); border-color: rgba(232, 115, 79, .45); } .insignia.entrega { font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 9px; letter-spacing: .1em; border-style: dashed; } .contenido { padding: 18px 20px 40px; min-width: 0; display: flex; flex-direction: column; gap: 18px; } /* ---------------- avisos ---------------- */ .cinta { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--acento-2) 45%, transparent); background: color-mix(in srgb, var(--acento-2) 10%, transparent); color: var(--acento-2); font-size: 13px; } .cinta b { font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; flex: none; } .cinta code { font-family: var(--f-data); font-size: 12px; background: color-mix(in srgb, var(--acento-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acento-2) 30%, transparent); border-radius: 3px; padding: 0 4px; } .vacio { border: 1px dashed var(--line); border-radius: 6px; padding: 44px 30px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; } .vacio h2 { font-size: 19px; color: var(--ink); } .vacio p { margin: 0; max-width: 62ch; color: var(--dim); font-size: 14px; } /* ---------------- franja operativa ---------------- */ .operativa { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; } .op { background: var(--panel); padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; } .op .n { font-family: var(--f-data); font-size: 19px; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); } .op .t { font-size: 10.5px; color: var(--dim); line-height: 1.35; } .op .t em { font-style: normal; display: block; color: var(--dim-2); font-size: 10px; } .op.critico { box-shadow: inset 3px 0 0 var(--neg); } .op.critico .n { color: var(--neg); } .op.aviso { box-shadow: inset 3px 0 0 var(--acento-2); } .op.aviso .n { color: var(--acento-2); } /* ---------------- indicadores ---------------- */ .indicadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .indicador { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 13px 14px 11px; display: flex; flex-direction: column; gap: 9px; min-width: 0; } .indicador .encabezado { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .indicador .titulo { font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .indicador .unidad { font-family: var(--f-data); font-size: 9.5px; color: var(--dim-2); letter-spacing: .06em; } .cifra { font-family: var(--f-data); font-size: clamp(19px, 1.85vw, 25px); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; color: var(--ink); } .alcance { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2); margin-top: -4px; } .deltas { display: flex; flex-wrap: wrap; gap: 5px; } .delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-data); font-size: 11px; font-variant-numeric: tabular-nums; padding: 2px 6px; border-radius: 3px; line-height: 1.45; } .delta.baja { color: var(--neg); background: rgba(232, 115, 79, .15); } .delta.sube { color: var(--pos); background: rgba(69, 190, 146, .15); } .delta .ref { color: var(--dim-2); font-size: 10px; } .chispa { display: block; width: 100%; height: 34px; } /* El color de la serie lo lleva currentColor; el tema decide cuál. */ .chispa.ac1 { color: var(--acento); } .chispa.ac2 { color: var(--acento-2); } .chispa .eje { stroke: var(--line); } .filas { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); } .fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); } .fila:last-child { border-bottom: 0; } .fila .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2); } .fila .v { font-family: var(--f-data); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--dim); } .fila .v i { font-style: normal; color: var(--dim-2); font-size: 10.5px; } .fila.destacada .v { color: var(--ink); } /* ---------------- proyección ---------------- */ .proyeccion { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 10px; } .proyeccion .encabezado { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; } .proyeccion .titulo { font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .proyeccion .nota { font-size: 10.5px; color: var(--dim-2); } .barra-proy { position: relative; height: 26px; } .barra-proy .riel { position: absolute; inset: 0; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 3px; } .barra-proy .tramo { position: absolute; top: 0; bottom: 0; } .barra-proy .real { left: 0; background: linear-gradient(180deg, var(--acento), var(--acento-hondo)); border-radius: 3px 0 0 3px; } .barra-proy .estimado { background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--acento) 30%, transparent) 0 5px, transparent 5px 10px); border-top: 1px solid color-mix(in srgb, var(--acento) 45%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--acento) 45%, transparent); } .barra-proy .marca-ref { position: absolute; top: -5px; bottom: -5px; left: 100%; width: 2px; background: var(--acento-2); } .barra-proy .marca-ref span { position: absolute; right: 0; top: -16px; font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 9.5px; letter-spacing: .12em; color: var(--acento-2); white-space: nowrap; } .leyenda { display: flex; flex-wrap: wrap; gap: 6px 20px; } .leyenda div { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--dim); } .leyenda .muestra { width: 11px; height: 11px; border-radius: 2px; flex: none; } .leyenda .muestra.ac1 { background: var(--acento); } .leyenda .muestra.ac2 { background: var(--acento-2); } .leyenda .muestra.rayado { background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--acento) 50%, transparent) 0 3px, transparent 3px 6px); border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent); } .leyenda b { font-family: var(--f-data); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 400; } /* ---------------- ingreso ---------------- */ .ingreso { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; } .tarjeta-ingreso { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 26px 70px var(--sombra); } .tarjeta-ingreso .marca { justify-content: center; margin-bottom: 2px; } .tarjeta-ingreso .logo-plate { padding: 13px 20px; border-radius: 10px; } .tarjeta-ingreso .logo-img { height: 46px; } /* Logo CITRIC del ingreso: viene como cuadro (fondo gris propio), se muestra como placa redondeada centrada. */ .tarjeta-ingreso .citric-logo { display: block; width: 264px; height: 264px; object-fit: contain; border-radius: 20px; } .tarjeta-ingreso .titulo-ingreso { display: flex; flex-direction: column; gap: 5px; } .tarjeta-ingreso h1 { font-size: 19px; text-align: center; color: var(--ink); margin: 0; } .tarjeta-ingreso .sub-ingreso { font-size: 12.5px; text-align: center; color: var(--dim); margin: 0; } .tarjeta-ingreso .pie { font-size: 11px; color: var(--dim-2); text-align: center; letter-spacing: .04em; } /* «Powered by» + logo AURA, debajo de la tarjeta de ingreso. */ .powered { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 22px; } .powered .pb { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim-2); } .powered img { height: 40px; width: auto; display: block; opacity: .95; } /* aviso de conexión segura, debajo de la clave */ .ssl-nota { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 2px; font-size: 11px; color: var(--dim); } .ssl-nota .ico { width: 14px; height: 14px; color: #2fb572; opacity: .95; } /* Ingreso biométrico (WebAuthn): separador «o» y botón secundario. */ .bio-sep { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim-2); } .bio-sep::before, .bio-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); } .boton-bio { background: transparent; border: 1px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; } .boton-bio:hover { border-color: var(--acento); color: var(--acento); background: color-mix(in srgb, var(--acento) 6%, transparent); } .boton-bio .ico { width: 18px; height: 18px; } .campo { display: flex; flex-direction: column; gap: 5px; } .campo label { font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .campo input, .campo select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 9px 11px; color: var(--ink); font-family: var(--f-body); font-size: 14px; width: 100%; } .campo input:focus, .campo select:focus { border-color: var(--acento); outline: none; } .boton { background: var(--acento); color: var(--sobre-acento); border: 0; border-radius: 4px; padding: 10px 16px; font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; width: 100%; } .boton:hover { background: color-mix(in srgb, var(--acento) 82%, #FFFFFF); } .error { border: 1px solid rgba(232, 115, 79, .45); background: rgba(232, 115, 79, .12); color: var(--neg); border-radius: 4px; padding: 9px 11px; font-size: 13px; } form { display: flex; flex-direction: column; gap: 14px; margin: 0; } /* Barra de filtros/parámetros de reportes: fila horizontal que envuelve, alineada al inicio. Gana sobre la regla global form{flex-direction:column} (clase > elemento). */ .filtros-barra { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 12px; } .filtros-barra .campo { min-width: 0; } .filtros-barra input:not([type=checkbox]):not([type=hidden]), .filtros-barra select { min-width: 120px; } /* Formularios de alta en línea (Conceptos, Vacaciones, Préstamos): fila horizontal que envuelve. Gana sobre form{flex-direction:column} (clase > elemento). */ .vac-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; } .filtros-barra input[type=number] { min-width: 90px; } /* ---------------- Configuración (rejilla de apartados) ---------------- */ .cfg-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .cfg-titulo { font-size: clamp(22px, 3vw, 28px); letter-spacing: -.01em; color: var(--ink); } .cfg-sub { margin: 6px 0 0; color: var(--dim); font-size: 14px; max-width: 70ch; } .cfg-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; } .cfg-tarjeta { position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; transition: border-color .14s ease, transform .14s ease, background .14s ease; } a.cfg-tarjeta:hover { border-color: color-mix(in srgb, var(--acento) 55%, var(--line)); background: color-mix(in srgb, var(--acento) 5%, var(--panel)); transform: translateY(-1px); } .cfg-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 8px; background: color-mix(in srgb, var(--acento) 14%, var(--panel-2)); border: 1px solid var(--line); color: var(--acento); } .cfg-ico .ico { width: 21px; height: 21px; } .cfg-cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cfg-nombre { font-family: var(--f-display); font-variation-settings: "wdth" 92, "wght" 600; font-size: 15px; color: var(--ink); } .cfg-desc { font-size: 12.5px; color: var(--dim); line-height: 1.45; } .cfg-pronto { position: absolute; top: 12px; right: 12px; font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2); border: 1px dashed var(--line); border-radius: 3px; padding: 1px 6px; } /* Las tarjetas sin pantalla todavía conservan el color de marca; el rótulo "Pronto" y el cursor normal las distinguen de las ya navegables. */ .cfg-tarjeta.pendiente { cursor: default; } /* ---------------- lista + barra de acciones ---------------- */ .lista-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .lista-titulo { font-size: clamp(22px, 3vw, 28px); letter-spacing: -.01em; color: var(--ink); } .lista-sub { margin: 6px 0 0; color: var(--dim); font-size: 14px; max-width: 72ch; } .barra-acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn-acc { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--dim); font-family: var(--f-display); font-variation-settings: "wdth" 92, "wght" 600; font-size: 13px; letter-spacing: .01em; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn-acc .ico { width: 16px; height: 16px; } .btn-acc:hover { border-color: color-mix(in srgb, var(--acento) 55%, var(--line)); color: var(--ink); } .btn-acc.primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); } .btn-acc.primario:hover { background: color-mix(in srgb, var(--acento) 84%, #FFFFFF); color: var(--sobre-acento); } .btn-acc.peligro { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, var(--line)); } .btn-acc.peligro:hover { background: color-mix(in srgb, var(--neg) 12%, transparent); color: var(--neg); } .btn-acc.tenue { background: transparent; } .icono-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--dim); cursor: pointer; } .icono-btn .ico { width: 18px; height: 18px; } .icono-btn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--acento) 55%, var(--line)); } /* Buscador de la lista */ .buscador { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; } .buscador .campo { display: flex; flex-direction: column; gap: 5px; min-width: 190px; flex: 1; } .buscador .campo label { font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); } .buscador .campo input { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; color: var(--ink); font-family: var(--f-body); font-size: 13.5px; width: 100%; } .buscador .campo input:focus { border-color: var(--acento); outline: none; } .buscador-acc { display: flex; gap: 8px; align-items: flex-end; } /* Buscador general de una sola caja */ .buscador-general { display: flex; flex-direction: row; /* gana sobre la regla global form { flex-direction: column } */ align-items: center; justify-content: flex-start; gap: 10px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; flex-wrap: wrap; } /* Ancho fijo y a la izquierda; el botón Buscar queda justo a su derecha. */ .campo-busca { position: relative; flex: none; width: min(440px, 100%); display: flex; align-items: center; } .campo-busca .ico-busca { position: absolute; left: 11px; display: inline-flex; color: var(--dim-2); pointer-events: none; } .campo-busca .ico-busca .ico { width: 17px; height: 17px; } .campo-busca input { width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px 9px 36px; color: var(--ink); font-family: var(--f-body); font-size: 14px; } .campo-busca input:focus { border-color: var(--acento); outline: none; } /* Miniatura de logo en la lista */ .celda-entidad { display: inline-flex; align-items: center; gap: 9px; } .logo-mini { width: 24px; height: 24px; flex: none; border-radius: 4px; object-fit: contain; background: var(--logo-placa); border: 1px solid var(--line); padding: 1px; } /* Avatar en la lista de usuarios (foto o iniciales) */ .avatar-mini { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--acento) 18%, var(--panel-2)); border: 1px solid var(--line); color: var(--acento); font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 10px; } .avatar-mini .foto-mini { width: 100%; height: 100%; object-fit: cover; } /* Fila de casillas del formulario de usuario */ .checks-fila { display: flex; flex-wrap: wrap; gap: 10px 20px; } /* Carga de logo/foto en el panel */ .logo-carga { display: flex; gap: 14px; align-items: flex-start; } .logo-vista.foto-redonda { border-radius: 50%; width: 88px; height: 88px; } .logo-vista.foto-redonda img { width: 100%; height: 100%; object-fit: cover; } .logo-vista { width: 96px; height: 96px; flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); display: grid; place-items: center; overflow: hidden; } .logo-vista img { max-width: 100%; max-height: 100%; object-fit: contain; } .logo-vacio { font-size: 11px; color: var(--dim-2); } .logo-acc { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; } .logo-boton { cursor: pointer; } .aviso { padding: 10px 14px; border-radius: 6px; font-size: 13.5px; border: 1px solid var(--line); transition: opacity .3s ease, transform .3s ease; } .aviso.ok { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 45%, transparent); background: color-mix(in srgb, var(--pos) 10%, transparent); } .aviso.mal { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, transparent); background: color-mix(in srgb, var(--neg) 10%, transparent); } .aviso.saliendo { opacity: 0; transform: translateY(-6px); } /* ---------------- tabla ---------------- */ .tabla-lienzo { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } .tabla { width: 100%; border-collapse: collapse; min-width: 720px; } .tabla thead th { text-align: left; font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim-2); padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); } .tabla tbody td { padding: 10px 16px; font-size: 13.5px; border-bottom: 1px solid var(--line-soft); color: var(--ink); } .tabla tbody tr:last-child td { border-bottom: 0; } .tabla .der { text-align: right; } .tabla .mono { font-family: var(--f-data); font-size: 12.5px; font-variant-numeric: tabular-nums; } .tabla .tenue { color: var(--dim); } /* El login se muestra en mayúsculas (convención del ERP). En el campo de texto solo afecta lo que se ve; el valor se normaliza a mayúsculas al guardar. */ .mayus { text-transform: uppercase; } /* Asignación de usuarios a un departamento (buscador + tabla dentro del panel). */ .asignar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } .asignar input[type="text"] { flex: 1; min-width: 0; } .asignar .btn-acc { flex: none; } .tabla-asignados .col-accion { width: 40px; text-align: center; padding-left: 6px; padding-right: 6px; } .quitar-usuario { border: 0; background: transparent; color: var(--dim-2); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 7px; border-radius: 5px; } .quitar-usuario:hover { color: #E5484D; background: color-mix(in srgb, #E5484D 14%, transparent); } /* Campo combinado: un valor con su unidad/moneda al lado (Términos de pago). */ .combo { display: flex; gap: 6px; align-items: center; } .combo input { flex: 1 1 auto; min-width: 0; } .combo select { flex: 0 0 auto; width: auto; min-width: 74px; } /* Columna de casillas alineadas con el campo vecino. */ .checks-col { display: flex; flex-direction: column; gap: 9px; justify-content: center; } .fila-cuenta { cursor: pointer; transition: background .12s ease; } .fila-cuenta:hover, .fila-cuenta:focus-visible { background: color-mix(in srgb, var(--acento) 7%, transparent); outline: none; } .fila-cuenta:focus-visible { box-shadow: inset 2px 0 0 var(--acento); } .pill { display: inline-block; font-family: var(--f-data); font-size: 11px; padding: 1px 8px; border-radius: 20px; border: 1px solid var(--line); } .pill.si { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, transparent); background: color-mix(in srgb, var(--pos) 10%, transparent); } .pill.no { color: var(--dim-2); } .pill.mal { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 40%, transparent); background: color-mix(in srgb, var(--neg) 10%, transparent); } .etiqueta-actual { display: inline-block; margin-left: 8px; font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent); background: color-mix(in srgb, var(--acento) 12%, transparent); border-radius: 3px; padding: 1px 6px; vertical-align: middle; } .usos { display: inline-flex; gap: 4px; flex-wrap: wrap; } .usos .chip { font-family: var(--f-data); font-size: 10px; letter-spacing: .04em; color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); border-radius: 3px; padding: 0 5px; line-height: 1.5; } /* ---------------- panel deslizante ---------------- */ .panel-scrim { position: fixed; inset: 0; background: rgba(4, 10, 16, .5); opacity: 0; transition: opacity .2s ease; z-index: 55; } .panel-scrim.visible { opacity: 1; } .panel { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; /* ver la nota de .marco */ /* Al menos la mitad del ancho disponible, y nunca menos de 500px si caben: dentro de una pestaña del workspace un panel fijo se veía muy angosto. */ width: min(100%, max(500px, 50%)); padding-bottom: env(safe-area-inset-bottom); background: var(--panel); border-left: 1px solid var(--line); box-shadow: -18px 0 60px var(--sombra); transform: translateX(100%); transition: transform .22s ease; z-index: 60; display: flex; flex-direction: column; } .panel.abierto { transform: translateX(0); } /* Panel más ancho para formularios con muchos campos (entidades). */ /* Fichas con muchos campos o subgrillas (partidas, proveedores). */ .panel-ancho { width: min(100%, max(600px, 62%)); } /* Teléfono / fax: código de país estrecho + número. */ .tel-grupo { display: flex; gap: 8px; } .panel .tel-grupo .tel-codigo { width: 64px; flex: none; text-align: center; } .panel .tel-grupo .tel-numero { flex: 1; min-width: 0; } .panel-form { display: flex; flex-direction: column; height: 100%; gap: 0; margin: 0; } .panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--panel-2); flex: none; } .panel-eyebrow { display: block; font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim-2); } .panel-titulo { font-family: var(--f-data); font-size: 15px; color: var(--ink); margin-top: 3px; word-break: break-all; } .panel-acc { display: flex; align-items: center; gap: 7px; flex: none; } .panel-cuerpo { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 22px; } .panel-seccion { display: flex; flex-direction: column; gap: 12px; } .panel-seccion-tit { font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); padding-bottom: 7px; border-bottom: 1px solid var(--line-soft); } .campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .campos-2 .dos-col { grid-column: 1 / -1; } .panel .campo { display: flex; flex-direction: column; gap: 5px; } .panel .campo select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; color: var(--ink); font-family: var(--f-body); font-size: 13.5px; width: 100%; } .panel .campo select:focus { border-color: var(--acento); outline: none; } .panel .campo label { font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); } .panel .campo input { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; color: var(--ink); font-family: var(--f-body); font-size: 13.5px; width: 100%; } .panel .campo input:focus { border-color: var(--acento); outline: none; } .panel .campo input.solo-lectura, .panel .campo input[readonly] { color: var(--dim); background: var(--panel); } .campo-en-linea { justify-content: flex-end; } .check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink); } /* Una casilla no es un campo de texto: no se estira ni lleva caja. Hay que decirlo con esta especificidad porque «.panel .campo input» (0,2,1) le gana a «.check input» (0,1,1) y dejaba la casilla del ancho de la columna, con su etiqueta empujada fuera del renglón. */ .campo input[type="checkbox"], .campo input[type="radio"], .panel .campo input[type="checkbox"], .panel .campo input[type="radio"], .check input { width: 16px; height: 16px; min-width: 0; flex: none; padding: 0; border: 0; border-radius: 4px; background: none; accent-color: var(--acento); } .check-alto { min-height: 34px; } /* alinea la casilla con la altura de un input al lado */ .checks { display: flex; flex-direction: column; gap: 10px; } .meta-fechas { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 11.5px; color: var(--dim-2); } .meta-fechas b { color: var(--dim); font-weight: 400; font-family: var(--f-data); } .oauth { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; } .oauth-estado { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); } .oauth-estado b { color: var(--ink); font-weight: 600; } .oauth-nota { margin: 0; font-size: 11.5px; color: var(--dim-2); } /* Subgrilla dentro del panel: mini-formulario de alta + tabla de lo agregado. La usan los teléfonos, direcciones y contactos del proveedor. */ .sub-alta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--acento) 4%, transparent); } .sub-alta .campo { flex: 1 1 150px; min-width: 0; margin: 0; } .sub-alta .campo-corto { flex: 0 1 100px; } .sub-alta .btn-acc { flex: none; } .tabla-sub { font-size: 12.5px; } .tabla-sub th, .tabla-sub td { padding: 6px 9px; } .tabla-sub .sub-pral { width: 1%; text-align: center; } .tabla-sub .sub-pral .check { justify-content: center; margin: 0; } .icono-btn.peligro:hover { color: var(--neg); } .sub-vacio { margin: 0; font-size: 11.5px; color: var(--dim-2); } /* Campo apagado porque su casilla no está marcada. */ .campo.apagado label { opacity: .5; } .campo.apagado input { opacity: .5; } .sub-aviso { margin: 0 0 10px; } .visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Una sola columna de campos: para listas largas de un solo dato por renglón, como las 20 cuentas contables del ítem. */ .campos-1 { display: grid; grid-template-columns: 1fr; gap: 12px 16px; } /* Galería de imágenes del ítem. */ .img-alta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .img-alta label.btn-acc { cursor: pointer; } .img-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } .img-tarjeta { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); } .img-tarjeta.principal { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; } .img-tarjeta img { display: block; width: 100%; height: 88px; object-fit: cover; } .img-tarjeta figcaption { padding: 5px 7px; font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .img-acc { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; } .img-acc button { width: 22px; height: 22px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--ink); cursor: pointer; font-size: 13px; line-height: 1; display: grid; place-items: center; } .img-acc button:hover { background: var(--bg); } .img-acc button.peligro:hover { color: var(--neg); } /* Miniatura en la lista de ítems. */ .celda-mini { width: 1%; padding-right: 0; } .celda-mini .foto-mini { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; display: block; } /* Caja de importación de Excel y el informe de lo que pasó. */ .caja-importar { margin-bottom: 16px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; background: color-mix(in srgb, var(--acento) 4%, transparent); } .caja-importar h2 { margin: 0 0 4px; font-size: 15px; } .caja-importar p { margin: 0 0 10px; font-size: 12px; color: var(--dim); max-width: 78ch; } .importar-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .importar-fila input[type="file"] { font-size: 12.5px; color: var(--dim); } .resultado-importacion { margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } .resultado-importacion h3 { margin: 0 0 6px; font-size: 14px; } .resultado-importacion .resumen { margin: 0 0 10px; font-family: var(--f-data); font-size: 12.5px; color: var(--dim); } .lista-errores, .lista-avisos { margin: 8px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; } .lista-errores { color: var(--neg); } .lista-avisos { color: var(--dim); } .nota-tope { margin-top: 10px; font-size: 11.5px; } /* Aviso dentro del panel para una sección que aún no se puede habilitar. */ .panel-nota { margin: 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; font-size: 11.5px; line-height: 1.5; color: var(--dim-2); background: color-mix(in srgb, var(--acento) 4%, transparent); } .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); padding: 10px 16px; border-radius: 7px; font-size: 13px; box-shadow: 0 12px 34px var(--sombra); opacity: 0; transition: opacity .25s ease, transform .25s ease; z-index: 70; } .toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .oculto { display: none; } body.sin-scroll { overflow: hidden; } @media (max-width: 620px) { .campos-2 { grid-template-columns: 1fr; } .panel { width: 100%; } } /* ---------------- selector de tema ---------------- */ .tema-menu { position: relative; } .tema-pop { position: absolute; right: 0; top: 42px; min-width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px; box-shadow: 0 14px 40px var(--sombra); z-index: 40; display: flex; flex-direction: column; gap: 2px; } .tema-pop[hidden] { display: none; } .tema-pop-titulo { font-family: var(--f-display); font-variation-settings: "wdth" 90, "wght" 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim-2); padding: 6px 8px 5px; } .tema-opt { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; background: transparent; border-radius: 6px; color: var(--dim); font-family: var(--f-body); font-size: 13px; cursor: pointer; text-align: left; width: 100%; } .tema-opt:hover { background: color-mix(in srgb, var(--acento) 10%, transparent); color: var(--ink); } .tema-opt.activa { color: var(--ink); } .tema-opt.activa::after { content: "✓"; margin-left: auto; color: var(--acento); font-size: 13px; } /* Muestra de cada tema: fondo del tema con una diagonal de sus dos acentos. */ .tema-sw { width: 30px; height: 18px; border-radius: 4px; flex: none; background: linear-gradient(135deg, var(--sw-a) 0 52%, var(--sw-b) 52% 100%); box-shadow: inset 0 0 0 2px var(--sw-bg), inset 0 0 0 3px rgba(0, 0, 0, .25); } /* Selector de idioma: cada opción es un formulario; el código ES/EN va en lugar de la muestra de color del tema. */ .tema-pop form { margin: 0; display: block; } .idioma-cod { width: 30px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: color-mix(in srgb, var(--acento) 16%, transparent); color: var(--acento); font-family: var(--f-data, monospace); font-size: 10px; font-weight: 700; letter-spacing: .06em; } /* ---------------- menú plegado ---------------- */ /* El botón de la barra alterna esta clase en . En pantallas anchas la columna del menú desaparece y el contenido ocupa todo el ancho. */ .menu-plegado .marco { grid-template-columns: 1fr; } .menu-plegado .lateral { display: none; } /* ---------------- adaptación ---------------- */ @media (max-width: 1040px) { .indicadores { grid-template-columns: repeat(2, 1fr); } .operativa { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .marco { grid-template-columns: 1fr; } .indicadores { grid-template-columns: 1fr; } .operativa { grid-template-columns: repeat(2, 1fr); } .barra-titulo { display: none; } /* El menú deja de ser una columna y pasa a ser un cajón que se superpone. En teléfono arranca CERRADO y se abre con el botón de la barra: si respetara la preferencia de escritorio («abierto»), al entrar taparía el contenido. Por eso acá manda .menu-movil y no .menu-plegado. */ .lateral { position: fixed; top: 52px; bottom: 0; left: 0; width: min(264px, 82vw); z-index: 30; display: flex; border-right: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); padding-left: env(safe-area-inset-left); padding-bottom: max(24px, env(safe-area-inset-bottom)); overscroll-behavior: contain; /* Cerrado es «display:none», no un transform fuera de pantalla. Se probó deslizarlo con una transición y no sirve: al pasar de oculto a visible en el mismo fotograma el navegador no anima, y el cajón se quedaba trabado fuera de la pantalla. Con una animación de entrada el elemento ya existe cuando arranca, así que siempre corre. */ display: none; } /* Gana a la preferencia de escritorio (.menu-plegado) por venir después. */ .menu-movil .lateral { display: flex; animation: cajon-entra .2s ease; } @keyframes cajon-entra { from { transform: translateX(-100%); } to { transform: none; } } /* Velo: oscurece el contenido y sirve para cerrar tocando fuera. */ .menu-movil .marco::before { content: ""; position: fixed; inset: 52px 0 0 0; background: rgba(0, 0, 0, .45); z-index: 29; } /* ── Barra superior en teléfono ───────────────────────────────────────── Con siete acciones a 34px más el logo, la barra medía 460px y se salía de una pantalla de 390. Se ocultan las dos que no aportan (ver _Layout), el logo se achica y los botones se agrandan para el dedo. */ .barra { gap: 8px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); } .barra-izq { gap: 6px; } .barra-der { gap: 2px; } .solo-ancho { display: none !important; } .logo-img { height: 22px; } .logo-plate { padding: 4px 7px; } .accion { width: 38px; height: 38px; } /* El panel deslizante ocupa la pantalla: a este ancho no tiene sentido dejar una franja de fondo detrás. */ .panel { width: 100%; } .campos-2, .campos-1 { grid-template-columns: 1fr; } /* El alta de las subgrillas pasa a una columna. */ .sub-alta { flex-direction: column; align-items: stretch; } .sub-alta .campo, .sub-alta .campo-corto { flex: 1 1 auto; } .sub-alta .btn-acc { width: 100%; justify-content: center; } .lista-cab { flex-direction: column; align-items: stretch; gap: 10px; } .barra-acc { flex-wrap: wrap; } .buscador-general { flex-wrap: wrap; } .buscador-general .campo-busca { flex: 1 1 100%; } .importar-fila { flex-direction: column; align-items: stretch; } .importar-fila .btn-acc { width: 100%; justify-content: center; } } /* ── Ajustes propios de móvil (iOS y Android) ─────────────────────────────── */ @media (max-width: 760px) { /* iOS hace zoom al enfocar un campo cuyo texto mide menos de 16px, y luego deja la página desplazada. Subirlos a 16px lo evita; es la única razón por la que el formulario se ve más grande en teléfono. */ input, select, textarea, .campo input, .campo select, .campo textarea, .panel .campo input, .panel .campo select, .panel .campo textarea { font-size: 16px; } /* Las casillas no llevan texto: se mantienen del tamaño que ya tenían. */ input[type="checkbox"], input[type="radio"] { font-size: inherit; } /* Objetivos táctiles cómodos sin agrandar la interfaz de escritorio. */ .btn-acc, .boton { min-height: 40px; } .fila-cuenta td { padding-top: 12px; padding-bottom: 12px; } .icono-btn { min-width: 34px; min-height: 34px; } /* Las tablas anchas se desplazan con el dedo en vez de estirar la página. */ .tabla-lienzo { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* Las subgrillas del panel (teléfonos, direcciones, contactos) no van dentro de un .tabla-lienzo, así que heredaban el min-width de 720px de .tabla y empujaban el panel a lo ancho. Convertidas en bloque se desplazan solas sin sacar de sitio al resto de la ficha. */ .tabla-sub { display: block; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .tabla-sub thead, .tabla-sub tbody { display: table; width: 100%; min-width: 520px; } } @media (max-width: 420px) { /* En pantallas muy angostas el nombre del módulo cede su sitio. */ .lista-titulo { font-size: 19px; } .barra-acc .btn-acc { flex: 1 1 auto; justify-content: center; } }