/* ========================================================================= PME · Ticketera — TEMA SOBRIO (propuesta B, oct-2026) Capa de estilos que se superpone a styles.css SOLO cuando el servidor pone data-skin="sobrio" en el (flag COMBRIL_TEMA_SOBRIO o ?tema=sobrio). Apagado el flag, este archivo ni se linkea: la vuelta atrás es inmediata. Idea: la identidad de PME se mantiene, pero el degradé pasa de ser el FONDO a ser un DETALLE (una línea fina bajo la barra). Menos redondeo, menos sombra, y color solo donde significa algo (vencido, urgente, estado). ========================================================================= */ /* ---------- Paleta: menos violeta, más neutra ---------- */ html[data-skin="sobrio"] { --bg: #15131c; --bg-2: #1b1924; --surface: #1c1a25; --surface-2: #232130; --surface-3: #2a2836; --border: #2b2836; --border-2: #39354a; --text: #eceaf2; --text-2: #a7a2b6; --text-3: #7d7890; --shadow: 0 12px 32px rgba(0,0,0,.45); --shadow-sm: 0 1px 2px rgba(0,0,0,.25); --ring: rgba(110,92,230,.25); /* Radios: de 11-20px a 6-10px. Se usan abajo en vez de los valores sueltos. */ --r-chico: 6px; --r-medio: 8px; --r-grande: 12px; /* Recuadro de las fichas: neutro, un punto más marcado que el borde. */ --linea-ficha: #5d5775; --sombra-ficha: 0 1px 3px rgba(0,0,0,.30); --sombra-ficha-hover: 0 2px 8px rgba(0,0,0,.40); /* Fondo de las columnas del tablero. En oscuro la columna va más CLARA que la página; en claro, más oscura (ver abajo): en los dos casos la ficha se despega. */ --col-fondo: #1b1924; } html[data-skin="sobrio"][data-theme="light"] { --bg: #f4f5f7; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f7f7f9; --surface-3: #eeeef1; --border: #e4e4e9; --border-2: #d7d7de; --text: #1c1c21; --text-2: #5c5c68; --text-3: #8a8a96; --shadow: 0 12px 28px rgba(20,20,40,.10); --shadow-sm: 0 1px 2px rgba(20,20,40,.06); /* Gris oscuro, NO negro: a 1px y con la sombra abajo, alcanza para definir la ficha sin que el recuadro grite. */ --linea-ficha: #9c9ca8; --sombra-ficha: 0 1px 3px rgba(20,20,40,.12); --sombra-ficha-hover: 0 3px 10px rgba(20,20,40,.16); /* El gris de los filtros (.bf): la columna deja de ser blanca y las fichas, que sí quedan blancas, se despegan del fondo. */ --col-fondo: #f0f0f3; } /* Las olas del fondo SE MANTIENEN (al usuario le gustan): son la única nota de color de la marca que queda en toda la pantalla, y como viven detrás de todo no compiten con el contenido. El canvas toma su color base de --bg (ver app.js). */ /* ---------- Barra superior ---------- */ /* Antes: degradé de 4 colores a todo lo ancho. Ahora: superficie sólida con el degradé reducido a una línea de 2px abajo (la marca sigue estando). */ html[data-skin="sobrio"] .topbar { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none; height: 56px; position: relative; } html[data-skin="sobrio"] .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand-grad); } html[data-skin="sobrio"] .topbar .brand { color: var(--text); font-weight: 600; letter-spacing: -.2px; } html[data-skin="sobrio"] .topbar .brand small { color: var(--text-3); } html[data-skin="sobrio"] .brand-logo-box { width: 34px; height: 34px; border-radius: var(--r-chico); box-shadow: none; border: 1px solid var(--border); } html[data-skin="sobrio"] .topbar .icon-btn { background: transparent; border-color: transparent; color: var(--text-2); border-radius: var(--r-chico); } html[data-skin="sobrio"] .topbar .icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: transparent; } html[data-skin="sobrio"] .topbar .userchip { background: transparent; border-color: transparent; } html[data-skin="sobrio"] .topbar .userchip .name { color: var(--text-2); font-weight: 500; } html[data-skin="sobrio"] .topbar .userchip-btn:hover { background: var(--surface-2); } html[data-skin="sobrio"] .topbar .userchip-btn:hover .name { color: var(--text); } html[data-skin="sobrio"] .topsearch { background: var(--bg); border-color: var(--border); border-radius: var(--r-chico); height: 34px; } /* Avatares: el degradé de marca en cada inicial es mucho. Tono sólido apagado. */ html[data-skin="sobrio"] .avatar { background: #3a3450; color: #d3cbe9; font-weight: 600; } html[data-skin="sobrio"][data-theme="light"] .avatar { background: #e8e6f0; color: #4b4463; } /* ---------- Barra de módulos: de píldoras de colores a pestañas ---------- */ html[data-skin="sobrio"] .modulenav { background: var(--surface); border-bottom: 1px solid var(--border); gap: 2px; padding: 0 18px; } html[data-skin="sobrio"] .modulenav .mtab { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 13px; font-size: 13.5px; font-weight: 500; color: var(--text-3); } html[data-skin="sobrio"] .modulenav .mtab:hover { color: var(--text); transform: none; background: transparent; } html[data-skin="sobrio"] .modulenav .mtab.active { background: transparent; color: var(--text); font-weight: 600; border-bottom-color: var(--brand); box-shadow: none; } /* Neutraliza el anillo de degradé que styles.css le pone a lo activo. */ html[data-skin="sobrio"] .modulenav .mtab.active::after { display: none; } /* ---------- Sub-solapas: solo texto ---------- */ /* Con íconos arriba Y abajo la pantalla se satura. El segundo nivel va en texto. */ html[data-skin="sobrio"] .viewnav { background: var(--bg-2); padding: 0 18px; } html[data-skin="sobrio"] .viewnav .tab { font-size: 13px; font-weight: 500; padding: 11px 13px; border-bottom-width: 2px; } html[data-skin="sobrio"] .viewnav .tab.active { font-weight: 600; } html[data-skin="sobrio"] .viewnav .tab .ic { display: none; } /* ---------- Íconos de la barra de módulos y del topbar ---------- */ /* Se reemplaza el emoji por un ícono de trazo, sin tocar el HTML: el emoji se oculta (font-size:0) y el ::before pinta un SVG como máscara, que toma el color del texto. Así todo sigue siendo CSS y el rollback es apagar el flag. */ html[data-skin="sobrio"] .modulenav .mtab .ic, html[data-skin="sobrio"] .topbar .icon-btn { font-size: 0; /* esconde el emoji, conserva el lugar */ } html[data-skin="sobrio"] .modulenav .mtab .ic::before, html[data-skin="sobrio"] .topbar .icon-btn::before { content: ""; display: block; width: 17px; height: 17px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Módulos */ html[data-skin="sobrio"] .mtab[data-module="pendientes"] .ic::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] .mtab[data-module="mejoras"] .ic::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] .mtab[data-module="cr"] .ic::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] .mtab[data-module="tickets"] .ic::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] .mtab[data-module="comerciales"] .ic::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] .mtab[data-module="informes"] .ic::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] .mtab[data-module="admin"] .ic::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Botones del topbar (campana, correo, manuales, refrescar, tema) */ html[data-skin="sobrio"] #btn-notif::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] #btn-mail::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] #btn-manuales::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] #btn-refrescar::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] #btn-theme::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* El de salir queda con su rojo, pero con ícono de trazo. */ html[data-skin="sobrio"] #btn-logout { font-size: 0; } html[data-skin="sobrio"] #btn-logout::before { content: ""; display: block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* ---------- Botones ---------- */ /* El degradé queda solo para la acción principal, y plano (sin el anillo). */ html[data-skin="sobrio"] .btn { border-radius: var(--r-chico); font-weight: 600; font-size: 13.5px; padding: 10px 16px; box-shadow: none; } /* OJO con la especificidad: html[data-skin] + .btn le gana a .btn.ghost, así que el fondo hay que darlo SOLO al botón principal. Si se pone en .btn a secas, los secundarios (Excel, Cancelar, Ghost en general) se pintan de color. */ html[data-skin="sobrio"] .btn:not(.ghost):not(.danger) { background: var(--brand); } html[data-skin="sobrio"] .btn.danger { background: #e4546b; } html[data-skin="sobrio"] .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border-2); } html[data-skin="sobrio"] .btn.ghost:hover { background: var(--surface-2); } html[data-skin="sobrio"] .btn:hover { filter: brightness(1.1); transform: none; } html[data-skin="sobrio"] .btn:not(.ghost)::after, html[data-skin="sobrio"] .btn.solid::after { display: none; } /* fuera el anillo de degradé */ html[data-skin="sobrio"] .btn.sm { padding: 8px 13px; font-size: 12.5px; } html[data-skin="sobrio"] .btn-exp { border-radius: var(--r-chico); border-width: 1px; box-shadow: none; } html[data-skin="sobrio"] .btn-exp:hover { transform: none; box-shadow: none; } html[data-skin="sobrio"] .icon-btn { border-radius: var(--r-chico); } html[data-skin="sobrio"] .addbtn { border-radius: var(--r-chico); border-style: solid; } /* ---------- Tarjetas del tablero ---------- */ /* Ficha del tablero: SIN barra de color a la izquierda. Una línea neutra, apenas más marcada que el resto del borde, igual para todas. El estado no se pierde: ya se lee en los chips (Vencido, prioridad, departamento). */ html[data-skin="sobrio"] .kcard { border-radius: var(--r-medio); padding: 13px 14px; border: 1px solid var(--linea-ficha); /* el recuadro ENTERO, no solo la izquierda */ box-shadow: var(--sombra-ficha); /* la sombra hace el trabajo que hacía el trazo grueso */ } /* El !important es imprescindible acá y solo acá: app.js escribe el color de la barra EN LÍNEA en cada ficha (por estado en Mejoras, por departamento en Tickets), y un estilo en línea le gana a cualquier hoja. Apagando el flag vuelve el color. */ html[data-skin="sobrio"] .kcard { border-color: var(--linea-ficha) !important; } /* Al pasar por encima la ficha no se mueve: se tiñe el fondo (lo que se nota en oscuro) y se refuerza la sombra (lo que se nota en claro). */ html[data-skin="sobrio"] .kcard:hover { transform: none; background: var(--surface-2); box-shadow: var(--sombra-ficha-hover); } /* Vencido traía un anillo rojo por dentro: sobra, el chip "Vencido" ya lo dice. Se le deja la misma sombra que a las demás para que no quede plana. */ html[data-skin="sobrio"] .kcard.venc { box-shadow: var(--sombra-ficha); } html[data-skin="sobrio"] .kcard.venc:hover { box-shadow: var(--sombra-ficha-hover); } /* Mis Pendientes es una LISTA, no fichas: va sin ninguna línea a la izquierda (antes marcaba el vencido en rojo). El vencimiento se sigue viendo en la fecha, en rojo. */ html[data-skin="sobrio"] .pend-row.venc { border-left: 1px solid var(--border); } html[data-skin="sobrio"] .kcard .ti { font-size: 13.5px; font-weight: 600; } html[data-skin="sobrio"] .kcard .code { font-variant-numeric: tabular-nums; } html[data-skin="sobrio"] .col { background: var(--col-fondo); border-radius: var(--r-medio); } /* El contador de la columna era del mismo gris que el fondo nuevo: se le pone el color de la ficha y un borde, para que se lea. */ html[data-skin="sobrio"] .col-head .count { border-radius: var(--r-chico); font-weight: 600; background: var(--surface); border: 1px solid var(--border); } html[data-skin="sobrio"] .col-head .t { text-transform: uppercase; font-size: 11.5px; letter-spacing: .7px; color: var(--text-2); } /* ---------- Chips y etiquetas ---------- */ html[data-skin="sobrio"] .chip, html[data-skin="sobrio"] .tag, html[data-skin="sobrio"] .uc-badge, html[data-skin="sobrio"] .sla-tag, html[data-skin="sobrio"] .dias-badge { border-radius: 5px; font-weight: 600; } html[data-skin="sobrio"] .uchip, html[data-skin="sobrio"] .pend-pill { border-radius: var(--r-chico); } /* --- Etiquetas de las fichas de Centro de Cómputos y Usuarios --- app.js les escribe el color EN LÍNEA (por eso el !important), y al "Nº" del centro le pone el degradé de marca: entre fichas neutras quedaba como un chicle de colores. En Centros todas pasan a neutras (son conteos, no estados). En Usuarios se conservan los colores de Activo/Pendiente, que SÍ son estados, y Admin pasa a color sólido. OJO: el selector [style*="brand-grad"] depende de ese texto en el atributo style; si se cambia cómo app.js arma la etiqueta, hay que revisar esto. */ html[data-skin="sobrio"] #cc-cards .uc-badge { background: var(--surface-2) !important; color: var(--text-2) !important; border: 1px solid var(--border); } html[data-skin="sobrio"] #admin-cards .uc-badge[style*="brand-grad"] { background: var(--brand) !important; } /* ---------- Paneles, tablas y fichas ---------- */ html[data-skin="sobrio"] .panel, html[data-skin="sobrio"] .stat, html[data-skin="sobrio"] .tablewrap, html[data-skin="sobrio"] .user-card, html[data-skin="sobrio"] .ac-card, html[data-skin="sobrio"] .inf-filtros, html[data-skin="sobrio"] .pend-row { border-radius: var(--r-medio); box-shadow: none; } html[data-skin="sobrio"] .stat:hover, html[data-skin="sobrio"] .user-card:hover { transform: none; box-shadow: none; border-color: var(--border-2); } html[data-skin="sobrio"] .modal { border-radius: var(--r-grande); } html[data-skin="sobrio"] .overlay { background: rgba(5,7,12,.55); } html[data-skin="sobrio"] .field input, html[data-skin="sobrio"] .field select, html[data-skin="sobrio"] .field textarea, html[data-skin="sobrio"] .tk-search, html[data-skin="sobrio"] .bf, html[data-skin="sobrio"] .seg .opt { border-radius: var(--r-chico); border-width: 1px; } html[data-skin="sobrio"] .seg .opt.active { background: var(--brand); } html[data-skin="sobrio"] .seg .opt.active::after { display: none; } /* Los filtros "Todos" de Tickets y C&R tienen regla propia con degradé (y más especificidad): hay que apagarla con el mismo nivel de selector. */ html[data-skin="sobrio"] #tk-filtro .opt.active[data-f="todos"], html[data-skin="sobrio"] #cr-filtro .opt.active[data-f="todos"], html[data-skin="sobrio"] #cr-depto .opt.active[data-f="todos"] { background: var(--brand); box-shadow: none; } html[data-skin="sobrio"] #tk-filtro .opt.active[data-f="todos"]::after, html[data-skin="sobrio"] #cr-filtro .opt.active[data-f="todos"]::after, html[data-skin="sobrio"] #cr-depto .opt.active[data-f="todos"]::after { display: none; } html[data-skin="sobrio"] .notif-panel, html[data-skin="sobrio"] .admin-menu, html[data-skin="sobrio"] .search-results { border-radius: var(--r-medio); box-shadow: var(--shadow); } html[data-skin="sobrio"] .admin-menu-it { border-radius: var(--r-chico); font-weight: 500; } html[data-skin="sobrio"] .toast { border-radius: var(--r-medio); } /* Títulos de vista: un punto menos de dramatismo. */ html[data-skin="sobrio"] .view-head h2 { font-size: 19px; font-weight: 600; letter-spacing: -.2px; } /* ========================================================================= INGRESO (login / registro / olvidé contraseña / reset) Antes: media pantalla con el degradé de cuatro colores a pleno. Ahora el panel de marca es oscuro y el degradé queda reducido a la línea que divide las dos mitades — la misma idea que en la barra superior. El logo, que ya es de color, pasa a ser la única nota fuerte de marca, que es lo que corresponde en la puerta de entrada. Las olas se mantienen, más tenues. Abajo de 880px styles.css esconde el panel de marca: en el celular no cambia nada. ========================================================================= */ html[data-skin="sobrio"] .auth-hero { background: var(--bg-2); color: var(--text); padding: 56px 60px; } /* El círculo blanco de arriba a la derecha pasa a ser un halo violeta muy tenue: da profundidad detrás del logo sin ensuciar. */ html[data-skin="sobrio"] .auth-hero::before { width: 560px; height: 560px; top: -220px; right: -170px; background: radial-gradient(circle, rgba(110,92,230,.30), rgba(110,92,230,0) 70%); filter: none; } /* El segundo círculo se recicla como la línea de marca que separa las dos mitades (hay que pisarle TODAS las medidas del original, que era un círculo de 260px). */ html[data-skin="sobrio"] .auth-hero::after { top: 0; bottom: 0; right: 0; left: auto; width: 2px; height: auto; border-radius: 0; filter: none; z-index: 2; background: linear-gradient(180deg,#13B0EF,#6E5CE6,#EE5E72,#F7941E); } html[data-skin="sobrio"] #hero-wave { opacity: .5; } html[data-skin="sobrio"] .auth-hero h1 { font-size: 30px; font-weight: 600; line-height: 1.3; letter-spacing: -.3px; } html[data-skin="sobrio"] .auth-hero p { font-size: 14.5px; line-height: 1.65; color: var(--text-2); opacity: 1; margin-top: 14px; } html[data-skin="sobrio"] .auth-hero .logo { margin-bottom: 44px; } /* Lista de funciones: cajitas neutras con ícono de trazo en vez del emoji de color. OJO: los íconos van por nth-child — si se agrega, saca o reordena un .feat en login.html hay que actualizar estos cuatro bloques. */ html[data-skin="sobrio"] .auth-hero .feat { font-size: 14px; color: var(--text-2); opacity: 1; } html[data-skin="sobrio"] .auth-hero .feat .ic { width: 26px; height: 26px; border-radius: var(--r-chico); background: transparent; border: 1px solid var(--border-2); color: var(--text-3); font-size: 0; } html[data-skin="sobrio"] .auth-hero .feat .ic::before { content: ""; display: block; width: 14px; height: 14px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } html[data-skin="sobrio"] .auth-hero .feat:nth-child(1) .ic::before { /* Mejoras */ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] .auth-hero .feat:nth-child(2) .ic::before { /* Consultas y reclamos */ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] .auth-hero .feat:nth-child(3) .ic::before { /* Tickets */ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } html[data-skin="sobrio"] .auth-hero .feat:nth-child(4) .ic::before { /* Correos */ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Formulario */ html[data-skin="sobrio"] .auth-card h2 { font-size: 22px; font-weight: 600; letter-spacing: -.2px; } html[data-skin="sobrio"] .auth-card .sub { margin-bottom: 24px; } html[data-skin="sobrio"] .auth-card .btn { padding: 12px 16px; font-size: 14px; } /* Los enlaces de abajo eran naranja fuerte: con todo lo demás apagado, eran lo que más gritaba en la pantalla. Van como enlaces de texto, subrayados. */ html[data-skin="sobrio"] .linkbtn, html[data-skin="sobrio"] .auth-foot a { color: var(--text-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2); } html[data-skin="sobrio"] .linkbtn:hover, html[data-skin="sobrio"] .auth-foot a:hover { color: var(--text); text-decoration-color: currentColor; }