/* ============================================================= app.css — Sistema visual del Panel de Pedidos (Sofycon) ------------------------------------------------------------- Complementa a Tailwind (CDN). Aquí viven los tokens de color y los componentes que se repiten, para no arrastrar cadenas de veinte clases por cada tarjeta o botón. El tema oscuro se activa con la clase .dark en , que es lo que ya hacía el proyecto (Tailwind darkMode: 'class'). ============================================================= */ :root { /* --- Marca ------------------------------------------------ */ --naranja: #EC5B21; /* acción principal, navegación activa */ --naranja-fuerte: #C7441240; --naranja-oscuro: #B8400F; --naranja-texto: #9A3A11; /* legible sobre fondo claro */ --naranja-suave: #FDF1EC; /* fondos de selección */ --naranja-borde: #F7C9B6; /* --- Superficies ------------------------------------------ */ --fondo: #F7F6F4; /* gris cálido muy claro */ --superficie: #FFFFFF; --hundido: #F1EFEC; --linea: #E3E0DC; --linea-sutil:#EDEBE8; /* --- Texto ------------------------------------------------ */ --tinta: #22201E; /* gris carbón */ --tinta-2: #5A5652; --tinta-3: #8A8580; /* --- Semánticos ------------------------------------------- */ --ok: #15803D; --ok-fondo: #ECFDF3; --ok-borde: #BBF7D0; --info: #1D4ED8; --info-fondo: #EFF4FF; --info-borde: #C3D4FE; --aviso: #B45309; --aviso-fondo: #FFF8EB; --aviso-borde: #FDE3A7; --error: #B91C1C; --error-fondo: #FEF2F2; --error-borde: #FBCFCF; --neutro: #57534E; --neutro-fondo:#F5F4F2; --neutro-borde:#E0DDD9; --excel: #217346; /* --- Rejilla de 8 px -------------------------------------- */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --radio: 8px; --radio-s: 6px; --sombra: 0 1px 2px rgb(34 32 30 / .06), 0 1px 3px rgb(34 32 30 / .04); --sombra-md: 0 4px 12px -2px rgb(34 32 30 / .10); --sombra-lg: 0 12px 32px -8px rgb(34 32 30 / .22); color-scheme: light; } .dark { --naranja: #F97742; --naranja-oscuro: #EC5B21; --naranja-texto: #FDBA9B; --naranja-suave: #2A1710; --naranja-borde: #6B3418; --fondo: #16151A; --superficie: #1D1C22; --hundido: #25242B; --linea: #34323B; --linea-sutil:#2A2930; --tinta: #EDEBE9; --tinta-2: #A8A4A0; --tinta-3: #7D7975; --ok: #4ADE80; --ok-fondo: #0D2818; --ok-borde: #1C5136; --info: #93B4FD; --info-fondo: #111C33; --info-borde: #27406E; --aviso: #FCD34D; --aviso-fondo: #2A1F08; --aviso-borde: #5C4415; --error: #FCA5A5; --error-fondo: #2C1212; --error-borde: #642424; --neutro: #B5B1AC; --neutro-fondo:#26252B; --neutro-borde:#3A383F; --excel: #268A54; --sombra-lg: 0 12px 32px -8px rgb(0 0 0 / .55); color-scheme: dark; } /* ============================================================= Base ============================================================= */ body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--fondo); color: var(--tinta); font-feature-settings: "cv05" 1, "cv08" 1; } /* Los números de las tablas deben alinearse en columna */ .tabular, table td, table th { font-variant-numeric: tabular-nums; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgb(138 133 128 / .35); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgb(138 133 128 / .6); border: 2px solid transparent; background-clip: content-box; } /* Foco visible en toda la aplicación, en naranja de marca */ :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; border-radius: var(--radio-s); } body.sin-scroll { overflow: hidden; } /* ============================================================= Componentes ============================================================= */ /* --- Tarjeta -------------------------------------------------- */ .panel-card { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); } .panel-card-plano { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); } /* --- Indicadores del resumen ---------------------------------- */ .kpi-card { display: flex; flex-direction: column; gap: var(--e1); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e4); box-shadow: var(--sombra); text-align: left; transition: border-color .15s ease, box-shadow .15s ease; } .kpi-card.clicable { cursor: pointer; } .kpi-card.clicable:hover { border-color: var(--naranja-borde); box-shadow: var(--sombra-md); } .kpi-card.activa { border-color: var(--naranja); box-shadow: 0 0 0 1px var(--naranja); } .kpi-etiqueta { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); } .kpi-valor { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--tinta); } .kpi-pie { font-size: 12px; color: var(--tinta-2); } .kpi-icono { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radio-s); flex-shrink: 0; } /* --- Botones -------------------------------------------------- */ .panel-button-primary, .panel-button-secondary, .panel-button-danger { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); border-radius: var(--radio-s); padding: 9px 14px; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; min-height: 38px; } .panel-button-primary { background: var(--naranja); color: #fff; border-color: var(--naranja-oscuro); } .panel-button-primary:hover:not(:disabled) { background: var(--naranja-oscuro); } .panel-button-primary:active:not(:disabled) { background: var(--naranja-oscuro); box-shadow: inset 0 1px 3px rgb(0 0 0 / .2); } .panel-button-secondary { background: var(--superficie); color: var(--tinta); border-color: var(--linea); } .panel-button-secondary:hover:not(:disabled) { background: var(--hundido); border-color: var(--tinta-3); } .panel-button-secondary.activo { border-color: var(--naranja); color: var(--naranja-texto); background: var(--naranja-suave); } .panel-button-danger { background: var(--error-fondo); color: var(--error); border-color: var(--error-borde); } .panel-button-danger:hover:not(:disabled) { background: var(--error); color: #fff; border-color: var(--error); } .panel-button-primary:disabled, .panel-button-secondary:disabled, .panel-button-danger:disabled { opacity: .45; cursor: default; } .panel-button-sm { padding: 6px 10px; font-size: 12px; min-height: 32px; } /* --- Etiquetas de estado -------------------------------------- */ .panel-status { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; white-space: nowrap; } /* Un punto además del color: el estado no debe depender solo del tono */ .panel-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .panel-status.sin-punto::before { display: none; } .estado-ok { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde); } .estado-info { background: var(--info-fondo); color: var(--info); border-color: var(--info-borde); } .estado-aviso { background: var(--aviso-fondo); color: var(--aviso); border-color: var(--aviso-borde); } .estado-error { background: var(--error-fondo); color: var(--error); border-color: var(--error-borde); } .estado-neutro { background: var(--neutro-fondo); color: var(--neutro); border-color: var(--neutro-borde); } .estado-marca { background: var(--naranja-suave); color: var(--naranja-texto); border-color: var(--naranja-borde); } /* --- Chips de filtro ------------------------------------------ */ .filter-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radio-s); padding: 6px 11px; font-size: 12.5px; font-weight: 500; line-height: 1.3; background: var(--superficie); color: var(--tinta-2); border: 1px solid var(--linea); white-space: nowrap; transition: background .12s ease, border-color .12s ease, color .12s ease; min-height: 32px; } .filter-chip:hover:not(:disabled) { background: var(--hundido); color: var(--tinta); } .filter-chip .cuenta { font-variant-numeric: tabular-nums; opacity: .65; } .filter-chip[aria-pressed="true"], .filter-chip.activo { background: var(--naranja-suave); color: var(--naranja-texto); border-color: var(--naranja); font-weight: 600; } .filter-chip[aria-pressed="true"] .cuenta, .filter-chip.activo .cuenta { opacity: .8; } /* Chip que representa un filtro puesto y se puede quitar */ .filter-tag { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12px; font-weight: 500; background: var(--naranja-suave); color: var(--naranja-texto); border: 1px solid var(--naranja-borde); } .filter-tag button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--naranja-texto); opacity: .7; font-size: 14px; line-height: 1; } .filter-tag button:hover { opacity: 1; background: rgb(236 91 33 / .18); } /* --- Tablas --------------------------------------------------- */ .panel-table { width: 100%; text-align: left; font-size: 13.5px; border-collapse: separate; border-spacing: 0; } .panel-table thead th { position: sticky; top: 0; z-index: 2; background: var(--hundido); color: var(--tinta-3); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 10px var(--e3); border-bottom: 1px solid var(--linea); white-space: nowrap; } .panel-table tbody td { padding: 11px var(--e3); border-bottom: 1px solid var(--linea-sutil); vertical-align: middle; } .panel-table tbody tr:last-child td { border-bottom: none; } .panel-table tbody tr { transition: background .12s ease; } .panel-table tbody tr:hover { background: var(--hundido); } .panel-table tbody tr.clicable { cursor: pointer; } /* Fila que pide intervención */ .panel-table tbody tr.atencion { background: color-mix(in srgb, var(--error-fondo) 70%, transparent); } .panel-table tbody tr.atencion:hover { background: var(--error-fondo); } .panel-table tbody tr.atencion td:first-child { box-shadow: inset 3px 0 0 var(--error); } .num { text-align: right; font-variant-numeric: tabular-nums; } .tabla-scroll { overflow: auto; max-height: calc(100vh - 300px); } .tabla-scroll-corta { overflow: auto; max-height: 420px; } /* Cabecera de sección dentro de una tarjeta */ .panel-table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea); } /* Agrupación de columnas por bloque temático */ .grupo-col { border-left: 1px solid var(--linea); } .grupo-etiqueta { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; } /* --- Avisos --------------------------------------------------- */ .panel-aviso { display: flex; gap: var(--e3); align-items: flex-start; border-radius: var(--radio); padding: 10px var(--e4); font-size: 13px; line-height: 1.5; border: 1px solid; border-left-width: 3px; } .aviso-info { background: var(--info-fondo); color: var(--info); border-color: var(--info-borde); border-left-color: var(--info); } .aviso-ok { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde); border-left-color: var(--ok); } .aviso-atencion { background: var(--aviso-fondo); color: var(--aviso); border-color: var(--aviso-borde); border-left-color: var(--aviso); } .aviso-error { background: var(--error-fondo); color: var(--error); border-color: var(--error-borde); border-left-color: var(--error); } /* --- Campos de formulario ------------------------------------- */ .panel-input, .panel-select { width: 100%; background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 8px var(--e3); font-size: 13.5px; min-height: 38px; transition: border-color .15s ease, box-shadow .15s ease; } .panel-input::placeholder { color: var(--tinta-3); } .panel-input:focus, .panel-select:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 3px rgb(236 91 33 / .15); } .panel-label { display: block; font-size: 12px; font-weight: 500; color: var(--tinta-2); margin-bottom: 6px; } /* --- Esqueletos de carga -------------------------------------- */ .skeleton { background: linear-gradient(90deg, var(--hundido) 25%, var(--linea-sutil) 37%, var(--hundido) 63%); background-size: 400% 100%; animation: brillo 1.4s ease infinite; border-radius: var(--radio-s); } @keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* --- Estado vacío --------------------------------------------- */ .estado-vacio { padding: var(--e7) var(--e4); text-align: center; color: var(--tinta-2); } .estado-vacio h3 { font-size: 14px; font-weight: 600; color: var(--tinta); margin-bottom: var(--e1); } .estado-vacio p { font-size: 13px; max-width: 44ch; margin: 0 auto; } /* ============================================================= Menú lateral ============================================================= */ .marca { display: flex; align-items: center; gap: 10px; } .marca-nombre { font-size: 17px; font-weight: 700; letter-spacing: .14em; color: var(--tinta); line-height: 1; } .marca-nombre em { font-style: normal; color: var(--naranja); } .marca-sub { font-size: 11px; color: var(--tinta-3); letter-spacing: .02em; margin-top: 3px; } .nav-grupo { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3); padding: var(--e3) var(--e3) 6px; } .nav-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; border-radius: var(--radio-s); padding: 9px var(--e3); font-size: 13.5px; font-weight: 500; color: var(--tinta-2); transition: background .12s ease, color .12s ease; min-height: 40px; } .nav-item:hover { background: var(--hundido); color: var(--tinta); } .nav-item[data-activo="true"] { background: var(--naranja-suave); color: var(--naranja-texto); font-weight: 600; } .nav-item[data-activo="true"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 22px; margin-top: -11px; border-radius: 0 3px 3px 0; background: var(--naranja); } .nav-item[data-activo="true"]:hover { background: var(--naranja-suave); } .nav-contador { margin-left: auto; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; background: var(--hundido); color: var(--tinta-2); font-variant-numeric: tabular-nums; } .nav-item[data-activo="true"] .nav-contador { background: rgb(236 91 33 / .18); color: var(--naranja-texto); } /* ============================================================= Cabecera ============================================================= */ .migas { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--tinta-3); } .migas span[aria-current] { color: var(--tinta-2); font-weight: 500; } .cabecera-titulo { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--tinta); line-height: 1.2; } .cabecera-meta { font-size: 12px; color: var(--tinta-2); } .avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hundido); color: var(--tinta-2); font-size: 12px; font-weight: 600; border: 1px solid var(--linea); } .icon-button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radio-s); color: var(--tinta-2); transition: background .12s ease, color .12s ease; } .icon-button:hover { background: var(--hundido); color: var(--tinta); } /* ============================================================= Movimiento y transiciones ============================================================= */ .drawer { transition: transform .26s cubic-bezier(.4,0,.2,1); } .drawer[data-open="false"] { transform: translateX(100%); } .drawer[data-open="true"] { transform: translateX(0); } .backdrop { transition: opacity .26s ease; } .backdrop[data-open="false"] { opacity: 0; pointer-events: none; } .backdrop[data-open="true"] { opacity: 1; } #sidebar { transition: transform .24s cubic-bezier(.4,0,.2,1); } @media (max-width: 1023px) { #sidebar[data-open="false"] { transform: translateX(-100%); } #sidebar[data-open="true"] { transform: translateX(0); } } .fila-pedido { transition: background-color .12s ease; } .vista { animation: entrar .2s ease both; } @keyframes entrar { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .barra { transition: height .45s cubic-bezier(.4,0,.2,1); } /* ============================================================= Menú plegado: barra de iconos permanente Plegado deja una columna estrecha siempre visible. Al pasar el ratón por un icono asoma su nombre en un panel flotante, sin empujar el contenido ni desplegar el menú entero. ============================================================= */ #zona-revelar { display: none; } @media (min-width: 1024px) { :root[data-menu="oculto"] #sidebar { width: 56px; transition: width .18s cubic-bezier(.4,0,.2,1); } /* En la barra estrecha solo quedan los iconos, centrados. El nav pierde el recorte: con overflow-y auto el navegador recorta también en horizontal, y el panel flotante quedaba dentro de la barra. Plegado caben las seis secciones sin scroll, así que no hace falta. */ :root[data-menu="oculto"] #sidebar #nav { overflow: visible; } :root[data-menu="oculto"] #sidebar { overflow: visible; } :root[data-menu="oculto"] #sidebar .nav-item { justify-content: center; padding-inline: 0; position: relative; } :root[data-menu="oculto"] #sidebar .marca-nombre { font-size: 0; } :root[data-menu="oculto"] #sidebar .marca-nombre::before { content: "S"; font-size: 20px; letter-spacing: 0; } :root[data-menu="oculto"] #sidebar .marca-sub, :root[data-menu="oculto"] #sidebar .nav-grupo, :root[data-menu="oculto"] #sidebar .nav-contador, :root[data-menu="oculto"] #sidebar .pie-menu { display: none; } /* El nombre de la sección, flotando junto a su icono */ :root[data-menu="oculto"] #sidebar .nav-item > span:not(.nav-contador) { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(-4px); padding: 8px 14px; background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-lg); font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 60; transition: opacity .14s ease, transform .14s ease; } :root[data-menu="oculto"] #sidebar .nav-item:hover > span:not(.nav-contador), :root[data-menu="oculto"] #sidebar .nav-item:focus-visible > span:not(.nav-contador) { opacity: 1; transform: translateY(-50%) translateX(0); } /* La sección activa mantiene su marca en la barra estrecha */ :root[data-menu="oculto"] #sidebar .nav-item[data-activo="true"] > span:not(.nav-contador) { color: var(--naranja-texto); font-weight: 600; } } /* ============================================================= Botón de exportar a Excel El verde de las hojas de cálculo: se reconoce al instante y distingue la exportación del resto de acciones. ============================================================= */ .btn-excel { display: inline-flex; align-items: center; gap: 7px; background: var(--excel); color: #fff; border: 1px solid color-mix(in srgb, var(--excel) 80%, black); border-radius: var(--radio-s); padding: 7px 12px; font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; min-height: 34px; transition: background .15s ease, box-shadow .15s ease, opacity .15s ease; } .btn-excel:hover:not(:disabled) { background: color-mix(in srgb, var(--excel) 85%, black); box-shadow: 0 1px 6px -1px rgb(33 115 70 / .45); } .btn-excel:active:not(:disabled) { background: color-mix(in srgb, var(--excel) 72%, black); } .btn-excel:disabled { opacity: .45; cursor: default; } .btn-excel:focus-visible { outline: 2px solid var(--excel); outline-offset: 2px; } .btn-excel.grande { padding: 9px 14px; font-size: 13px; min-height: 38px; } /* ============================================================= Responsive y accesibilidad ============================================================= */ /* En móvil el panel de detalle ocupa toda la pantalla */ @media (max-width: 640px) { #drawer { max-width: 100%; } .panel-table thead th, .panel-table tbody td { padding-inline: var(--e2); } .tabla-scroll { max-height: none; } } /* Área táctil suficiente en pantallas de dedo */ @media (pointer: coarse) { .panel-button-primary, .panel-button-secondary, .panel-button-danger, .filter-chip, .icon-button, .btn-excel { min-height: 42px; } .nav-item { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } @media (prefers-contrast: more) { :root { --linea: #B8B4AF; --tinta-2: #3F3C39; --tinta-3: #5F5B57; } } /* Las referencias no deben partirse: se leen como una unidad */ .panel-table td .font-mono, .panel-table td button.font-mono { white-space: nowrap; } /* En pantallas estrechas, la tabla se desplaza en horizontal dentro de su tarjeta en lugar de comprimir las columnas hasta hacerlas ilegibles */ @media (max-width: 767px) { .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .panel-table { min-width: 560px; } } /* --------------------------------------------------------------- Columnas agrupadas por bloque temático Con doce columnas, la cabecera de dos pisos dice a qué mundo pertenece cada dato: identificación, costes o inventario. --------------------------------------------------------------- */ .panel-table thead tr.grupos th { padding-top: 8px; padding-bottom: 4px; font-size: 10px; letter-spacing: .07em; color: var(--tinta-3); border-bottom: none; background: var(--hundido); text-align: left; } .panel-table thead tr.grupos th[data-grupo] { border-left: 1px solid var(--linea); } .panel-table thead tr.grupos + tr th { top: 26px; } /* Separador vertical entre bloques, también en el cuerpo */ .panel-table td.inicio-grupo, .panel-table th.inicio-grupo { border-left: 1px solid var(--linea); } /* Primera columna fija al desplazarse en horizontal */ .col-fija { position: sticky; left: 0; z-index: 1; background: var(--superficie); } .panel-table tbody tr:hover .col-fija { background: var(--hundido); } .panel-table tbody tr.atencion .col-fija { background: var(--error-fondo); } .panel-table thead th.col-fija { z-index: 3; background: var(--hundido); } .col-fija::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--linea); } @media (max-width: 767px) { .col-fija { position: static; } .col-fija::after { display: none; } } /* --------------------------------------------------------------- Pestañas de estado y paginación numerada --------------------------------------------------------------- */ .pestanas { display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--linea); padding-inline: 2px; } .pestana { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--tinta-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .12s ease, border-color .12s ease; } .pestana:hover { color: var(--tinta); } .pestana[aria-pressed="true"] { color: var(--naranja-texto); border-bottom-color: var(--naranja); font-weight: 600; } .pestana-cuenta { border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; background: var(--hundido); color: var(--tinta-2); font-variant-numeric: tabular-nums; } .pestana[aria-pressed="true"] .pestana-cuenta { background: var(--naranja-suave); color: var(--naranja-texto); } .pag-num { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 7px; border-radius: var(--radio-s); font-size: 12.5px; font-weight: 500; color: var(--tinta-2); border: 1px solid transparent; font-variant-numeric: tabular-nums; transition: background .12s ease, color .12s ease; } .pag-num:hover:not(:disabled):not(.activa) { background: var(--hundido); color: var(--tinta); } .pag-num.activa { background: var(--naranja); color: #fff; font-weight: 600; } .pag-num:disabled { opacity: .35; cursor: default; } /* Menú de acciones por fila */ .menu-acciones { position: relative; display: inline-block; } .menu-desplegable { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 170px; padding: 4px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-lg); text-align: left; } .menu-desplegable button { display: block; width: 100%; padding: 7px 10px; border-radius: var(--radio-s); font-size: 12.5px; text-align: left; color: var(--tinta-2); } .menu-desplegable button:hover { background: var(--hundido); color: var(--tinta); } /* Marca del menú, al tamaño de la referencia */ .marca-nombre { font-size: 20px; font-weight: 800; letter-spacing: .1em; color: var(--naranja); } .dark .marca-nombre { color: var(--naranja); } /* ============================================================= Ajustes por tamaño de pantalla ============================================================= */ /* Portátil pequeño: la cabecera pierde el buscador global, que duplica al de la sección, y las tarjetas pasan a dos columnas */ @media (max-width: 1279px) { .kpi-card { padding: 12px; } .kpi-valor { font-size: 22px; } } /* Tableta en horizontal: el menú sigue fijo pero más estrecho */ @media (min-width: 1024px) and (max-width: 1150px) { #sidebar { width: 208px; } .marca-nombre { font-size: 17px; letter-spacing: .07em; } } /* Tableta en vertical y menor: el menú pasa a panel deslizante */ @media (max-width: 1023px) { #sidebar { width: 264px; box-shadow: var(--sombra-lg); } .pestanas { gap: 0; } .pestana { padding: 10px 11px; font-size: 12.5px; } } /* Móvil */ @media (max-width: 640px) { .cabecera-titulo { font-size: 16px; } .migas { font-size: 11px; } .cabecera-meta { font-size: 11px; } /* Los indicadores caben de dos en dos, apilados */ .kpi-card { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; } .kpi-icono { width: 28px !important; height: 28px !important; } .kpi-valor { font-size: 19px !important; } /* Los filtros ocupan el ancho completo, uno por línea */ .panel-input, .panel-select { font-size: 16px; } /* evita el zoom de iOS */ /* La paginación se reparte en dos líneas sin romperse */ .pag-num { min-width: 34px; height: 34px; } /* El detalle ocupa toda la pantalla */ #drawer { max-width: 100%; } } /* Los controles de filtro ocupan todo el ancho en pantallas estrechas */ @media (max-width: 767px) { .panel-card > .flex.flex-wrap.items-end > div { min-width: 100% !important; flex: 1 1 100% !important; } .panel-card > .flex.flex-wrap.items-end > button, .panel-card > .flex.flex-wrap.items-end > .btn-excel { flex: 1 1 auto; justify-content: center; } }