/* Sistema de diseño tomado de Acttura (base TailAdmin / Untitled UI): fuente Outfit, marca azul #465fff, rampa de grises con tinte azul (matiz 260), tarjetas de 16 px de radio, chips pill y sombras suaves. El login usa la paleta Acttura: naranja #E05720 / #CB2E1B. El tema oscuro se manda por CLASE (`.dark` en ), no por la preferencia del sistema: hay un interruptor en la cabecera y la eleccion se guarda. Igual que en Acttura, la rampa de grises se INVIERTE y los acentos no. */ :root { --color-white: #ffffff; --color-brand-25: #f2f7ff; --color-brand-50: #ecf3ff; --color-brand-100: #dde9ff; --color-brand-200: #c2d6ff; --color-brand-300: #9cb9ff; --color-brand-400: #7592ff; --color-brand-500: #465fff; --color-brand-600: #3641f5; --color-brand-700: #2a31d8; /* Los grises NO son neutros: llevan el tinte azul de Untitled UI (matiz 260). Van en hexadecimal y no en oklch() a proposito: Chrome deja el color ya resuelto en cache cuando sale de una variable con oklch(), y al quitar la clase .dark el fondo no se repintaba hasta recargar. Ademas oklch() pide navegador reciente y esto lo abren 60 personas con lo que tengan. */ --color-gray-25: #fcfcfd; --color-gray-50: #f9fafb; --color-gray-100: #f2f4f7; --color-gray-200: #e4e7ec; --color-gray-300: #d0d5dd; --color-gray-400: #98a2b3; --color-gray-500: #667085; --color-gray-600: #475467; --color-gray-700: #344054; --color-gray-800: #1d2939; --color-gray-900: #101828; --color-success-50: #ecfdf3; --color-success-100: #d1fadf; --color-success-500: #12b76a; --color-success-600: #039855; --color-success-700: #027a48; --color-error-50: #fef3f2; --color-error-100: #fee4e2; --color-error-500: #f04438; --color-error-600: #d92d20; --color-error-700: #b42318; --color-warning-50: #fffaeb; --color-warning-100: #fef0c7; --color-warning-500: #f79009; --color-warning-600: #dc6803; --color-warning-700: #b54708; --color-purple-50: #f4f3ff; --color-purple-500: #7a5af8; --color-purple-700: #5925dc; --color-orange-50: #fff6ed; --color-orange-500: #fb6514; /* Marca Acttura (login) */ --color-acttura-500: #e05720; --color-acttura-600: #cb2e1b; --shadow-theme-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); --shadow-theme-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06); --shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06); --shadow-theme-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); --shadow-focus-ring: 0px 0px 0px 4px rgba(70, 95, 255, 0.12); --ancho-menu: 208px; } /* Tema oscuro: la rampa de grises se invierte y las superficies dejan de ser blancas. Los acentos (brand, success, error, warning) NO se invierten para que los chips de estado se queden pastel; solo se aclaran los tonos 700, que aqui siempre se usan como texto y sobre fondo oscuro no se leen. */ .dark { color-scheme: dark; --color-white: #1a2333; --color-gray-25: #0d1421; --color-gray-50: #111a29; --color-gray-100: #1e2839; --color-gray-200: #2a3547; --color-gray-300: #3b4759; --color-gray-400: #8b95a6; --color-gray-500: #98a2b3; --color-gray-600: #b3bbc9; --color-gray-700: #cdd3dd; --color-gray-800: #e3e7ee; --color-gray-900: #f2f4f7; --color-success-700: #75e0a7; --color-error-700: #fda29b; --color-warning-700: #fec84b; --color-purple-700: #bdb4fe; --shadow-theme-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.35); --shadow-theme-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3); --shadow-theme-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.4), 0px 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-theme-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.45), 0px 4px 6px -2px rgba(0, 0, 0, 0.3); } /* Los bloques con fondo de acento pastel siguen siendo claros en tema oscuro (los acentos no se invierten), asi que adentro el gris tiene que volver a ser oscuro o el texto queda claro sobre claro. */ .dark .alerta, .dark .metrica-acento, .dark .lista-archivos li.excedido, .dark .lista-archivos li.aviso { --color-gray-400: #98a2b3; --color-gray-500: #667085; --color-gray-600: #475467; --color-gray-700: #344054; --color-gray-800: #1d2939; --color-gray-900: #101828; --color-success-700: #027a48; --color-error-700: #b42318; --color-warning-700: #b54708; color-scheme: light; } /* ───────────── Base ───────────── */ * { box-sizing: border-box; border-color: var(--color-gray-200); } /* Las reglas de display de mas abajo pisarian el atributo hidden. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--color-gray-700); background: var(--color-gray-50); } a { color: var(--color-brand-500); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { color: var(--color-gray-800); margin: 0; font-weight: 600; } h1 { font-size: 30px; line-height: 38px; letter-spacing: -0.4px; } h2 { font-size: 20px; line-height: 30px; } h3 { font-size: 15px; line-height: 22px; } p { margin: 0; } button:not(:disabled), [role='button']:not(:disabled) { cursor: pointer; } .tenue { color: var(--color-gray-500); font-size: 12px; line-height: 18px; font-weight: 400; } .sub { color: var(--color-gray-500); margin: 6px 0 0; max-width: 72ch; } /* ───────────── Armazon ───────────── */ .app { min-height: 100vh; } .barra-lateral { position: fixed; top: 0; left: 0; z-index: 40; display: flex; flex-direction: column; width: var(--ancho-menu); height: 100vh; padding: 0 10px; background: var(--color-white); border-right: 1px solid var(--color-gray-200); transition: transform 0.3s ease-in-out; } .marca-menu { display: flex; align-items: center; gap: 9px; padding: 16px 6px 14px; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: var(--color-gray-800); } .marca-menu:hover { text-decoration: none; } /* El logo de Acttura lleva las letras "Ac" y "ura" en gris casi negro, que sobre el menu oscuro desaparecen. En vez de mantener dos versiones del archivo, va siempre sobre un lienzo blanco: en tema claro se funde con la cabecera y no se nota, y en oscuro queda como una placa, que es a proposito. */ .lienzo-logo { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 7px; background: #fff; } .dark .lienzo-logo { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } /* Alto fijo y ancho automatico, NO max-width:100%: dentro de un contenedor flexible que se ajusta a su contenido, ese porcentaje se resuelve contra un ancho que depende de la propia imagen, y da 0. Paso en el login, donde el logo no tiene texto al lado que le de ancho al contenedor. */ .lienzo-logo img { display: block; height: 31px; width: auto; } .marca-menu.menu-lateral .lienzo-logo img { height: 41px; } .login-marca .lienzo-logo img { height: 60px; } /* Raya fina entre la marca de la empresa y el nombre del sistema. */ .separador-marca { width: 1px; height: 22px; margin: 0 2px; background: var(--color-gray-200); } /* En el menu lateral el logo va solo y centrado: el titulo de la pantalla ya aparece en la cabecera, repetirlo al lado no cabe en 208 px. */ .marca-menu.menu-lateral { justify-content: center; padding: 14px 6px 12px; } /* En la cabecera manda el alto de la barra, no el relleno del menu lateral: sin esto el logo estiraba la cabecera de 60 a 88 px. */ .cabecera .marca-menu { padding: 0; } .menu { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } .menu-titulo { margin: 4px 0 6px; padding: 0 12px; font-size: 12px; line-height: 20px; font-weight: 500; text-transform: uppercase; color: var(--color-gray-400); } .menu-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; font-weight: 500; font-size: 14px; line-height: 20px; border-radius: 8px; color: var(--color-gray-700); } .menu-item:hover { background: var(--color-gray-100); text-decoration: none; } .menu-item.activo { background: var(--color-brand-50); color: var(--color-brand-500); } .dark .menu-item.activo { background: rgb(70 95 255 / 0.14); color: var(--color-brand-400); } .menu-item .cuenta { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--color-error-500); color: #fff; font-size: 12px; font-weight: 600; } .menu-pie { border-top: 1px solid var(--color-gray-200); padding: 10px 0; } .menu-item.peligro { color: var(--color-error-600); } .menu-item.peligro:hover { background: var(--color-error-50); } .velo { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.5); } .marco { min-height: 100vh; } .marco.con-menu { margin-left: var(--ancho-menu); } .cabecera { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 20px; background: var(--color-white); border-bottom: 1px solid var(--color-gray-200); } .cabecera h1, .cabecera .titulo-cabecera { font-size: 20px; line-height: 30px; font-weight: 600; color: var(--color-gray-800); letter-spacing: 0; } .cabecera .derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; } .icono-boton { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--color-gray-200); border-radius: 8px; background: var(--color-white); color: var(--color-gray-500); } .icono-boton:hover { background: var(--color-gray-50); } .icono-boton .en-oscuro { display: none; } .dark .icono-boton .en-claro { display: none; } .dark .icono-boton .en-oscuro { display: inline-flex; } .solo-movil { display: none; } .contenido { padding: 20px; max-width: 1240px; } .contenido.angosto { max-width: 780px; margin: 0 auto; } .pie { padding: 4px 20px 32px; max-width: 1240px; color: var(--color-gray-400); font-size: 12px; line-height: 18px; } /* ───────────── Tarjetas ───────────── */ .tarjeta { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 16px; padding: 20px 22px; margin-bottom: 18px; } .tarjeta > h2 + .tenue { margin-top: -4px; margin-bottom: 14px; display: block; } .tarjeta.acento { border-left: 3px solid var(--color-success-500); } .encabezado-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .acciones { display: flex; gap: 8px; flex-wrap: wrap; } /* ───────────── Botones ───────────── */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 8px; background: var(--color-white); color: var(--color-gray-700); border: 0; box-shadow: inset 0 0 0 1px var(--color-gray-300); font: inherit; font-size: 14px; font-weight: 500; transition: background 0.15s ease; } .boton:hover { background: var(--color-gray-50); text-decoration: none; } .boton.principal { padding: 10px 20px; background: var(--color-brand-500); color: #fff; box-shadow: var(--shadow-theme-xs); } .boton.principal:hover { background: var(--color-brand-600); } .boton.chico { padding: 7px 12px; font-size: 13px; } .boton:disabled { opacity: 0.5; cursor: not-allowed; } /* ───────────── Formularios ───────────── */ label { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--color-gray-700); } label .tenue { font-weight: 400; display: block; margin-top: 5px; } label.en-linea { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 14px; color: var(--color-gray-700); } label.en-linea input { width: auto; margin: 0; } input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date], select, textarea { width: 100%; margin-top: 6px; padding: 10px 14px; font: inherit; font-size: 14px; color: var(--color-gray-800); background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: 8px; box-shadow: var(--shadow-theme-xs); transition: border-color 0.15s ease, box-shadow 0.15s ease; } input::placeholder, textarea::placeholder { color: var(--color-gray-400); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-brand-300); box-shadow: var(--shadow-focus-ring); } textarea { resize: vertical; line-height: 21px; } input[type=file] { margin-top: 6px; font-size: 13px; color: var(--color-gray-600); width: 100%; } input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--color-gray-100); color: var(--color-gray-700); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; } input[type=file]::file-selector-button:hover { background: var(--color-gray-200); } input[type=checkbox], input[type=radio] { accent-color: var(--color-brand-500); width: 16px; height: 16px; } .fila { display: flex; gap: 16px; flex-wrap: wrap; } .fila > label { flex: 1 1 220px; } fieldset.prioridad { border: 1px solid var(--color-gray-200); border-radius: 12px; padding: 16px 18px; margin: 0 0 16px; } fieldset.prioridad legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--color-gray-700); } label.opcion { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; font-weight: 500; font-size: 14px; transition: background 0.15s ease, border-color 0.15s ease; } label.opcion:hover { background: var(--color-gray-50); } label.opcion:has(input:checked) { background: var(--color-brand-25); border-color: var(--color-brand-200); } .dark label.opcion:has(input:checked) { background: rgb(70 95 255 / 0.1); border-color: var(--color-brand-700); } label.opcion input { width: auto; margin: 0; } label.opcion .tenue { display: inline; margin: 0; } /* Enlaces secundarios de las pantallas publicas. La cabecera no lleva menu: estas son las unicas salidas, y van donde hacen falta, no siempre. */ .salida-discreta { margin-top: 18px; text-align: center; font-size: 13px; color: var(--color-gray-500); } .volver { margin-bottom: 14px; font-size: 13px; } .volver a { color: var(--color-gray-500); } .volver a:hover { color: var(--color-brand-500); } /* Contador de horas: menos a la izquierda, mas a la derecha. Las flechas nativas del input se ocultan porque estos botones las reemplazan. */ .contador { display: flex; align-items: stretch; gap: 8px; margin-top: 6px; } .contador input[type=number] { margin-top: 0; text-align: center; font-weight: 500; -moz-appearance: textfield; appearance: textfield; } .contador input[type=number]::-webkit-outer-spin-button, .contador input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .contador-boton { flex: 0 0 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-gray-300); border-radius: 8px; background: var(--color-white); color: var(--color-gray-700); box-shadow: var(--shadow-theme-xs); font: inherit; font-size: 19px; line-height: 1; font-weight: 500; transition: background 0.15s ease, border-color 0.15s ease; } .contador-boton:hover { background: var(--color-gray-50); border-color: var(--color-gray-400); } .contador-boton:active { background: var(--color-gray-100); } .contador-boton:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); } /* Campo trampa del formulario publico: fuera de pantalla, no oculto con display:none, porque los robots mas cuidadosos ignoran lo que esta oculto de forma explicita. Ninguna persona lo ve ni lo alcanza con el tabulador. */ .campo-trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Lista de archivos elegidos, con boton para quitar cada uno. Sin esto la persona solo ve "3 archivos" y no puede sacar el que subio por error: tiene que volver a elegirlos todos. */ .lista-archivos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; /* minmax(0, 1fr) y no el 'auto' implicito: con 'auto' la columna crece hasta el contenido y un nombre de archivo larguisimo empuja la fila fuera de la tarjeta, en vez de recortarse con puntos suspensivos. */ grid-template-columns: minmax(0, 1fr); } .lista-archivos li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 8px 8px 12px; background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: 8px; font-size: 13px; } .lista-archivos .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-gray-800); font-weight: 500; } .lista-archivos .peso { color: var(--color-gray-500); font-size: 12px; white-space: nowrap; } .lista-archivos .quitar { flex: 0 0 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--color-gray-500); font: inherit; font-size: 13px; line-height: 1; transition: background 0.15s ease, color 0.15s ease; } .lista-archivos .quitar:hover { background: var(--color-error-50); color: var(--color-error-600); } .lista-archivos .quitar:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); } .lista-archivos li.excedido { background: var(--color-error-50); border-color: var(--color-error-100); } .lista-archivos li.excedido .peso { color: var(--color-error-700); font-weight: 500; } .lista-archivos li.aviso { display: block; background: var(--color-warning-50); border-color: var(--color-warning-100); color: var(--color-warning-700); } /* El codigo dejo de ser un numero de orden y paso a ser la llave del ticket: se escribe con monoespaciado y separado para que no se confunda una letra. */ .campo-codigo { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; } .campo-codigo::placeholder { letter-spacing: 1.5px; text-transform: none; } /* ───────────── Chips ───────────── */ .chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; background: var(--color-gray-100); color: var(--color-gray-700); } .chip.prioridad-urgente { background: var(--color-error-50); color: var(--color-error-700); } .chip.prioridad-alta { background: var(--color-orange-50); color: #b93815; } .chip.prioridad-normal { background: var(--color-brand-50); color: var(--color-brand-600); } .chip.prioridad-baja { background: var(--color-gray-100); color: var(--color-gray-600); } .chip.estado-nuevo { background: var(--color-purple-50); color: var(--color-purple-700); } .chip.estado-en-progreso { background: var(--color-brand-50); color: var(--color-brand-600); } .chip.estado-en-espera-del-solicitante { background: var(--color-warning-50); color: var(--color-warning-700); } .chip.estado-cerrado { background: var(--color-success-50); color: var(--color-success-700); } .chip.estado-rechazado { background: var(--color-gray-100); color: var(--color-gray-600); } .chip.interno { background: var(--color-warning-50); color: var(--color-warning-700); } /* Los pastel de los acentos no se invierten; en oscuro se les baja el fondo para que no queden como manchas claras, conservando el color del texto. */ .dark .chip.prioridad-urgente { background: rgb(240 68 56 / 0.15); } .dark .chip.prioridad-alta { background: rgb(251 101 20 / 0.15); color: #fdba74; } .dark .chip.prioridad-normal { background: rgb(70 95 255 / 0.16); color: var(--color-brand-400); } .dark .chip.estado-nuevo { background: rgb(122 90 248 / 0.16); } .dark .chip.estado-en-progreso { background: rgb(70 95 255 / 0.16); color: var(--color-brand-400); } .dark .chip.estado-en-espera-del-solicitante { background: rgb(247 144 9 / 0.16); } .dark .chip.estado-cerrado { background: rgb(18 183 106 / 0.16); } .dark .chip.interno { background: rgb(247 144 9 / 0.16); } /* ───────────── Alertas ───────────── */ .alerta { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 14px; border: 1px solid var(--color-gray-200); background: var(--color-white); } .alerta ul { margin: 6px 0 0; padding-left: 20px; } .alerta.error { background: var(--color-error-50); border-color: var(--color-error-100); color: var(--color-error-700); } .alerta.info { background: var(--color-brand-25); border-color: var(--color-brand-100); color: var(--color-brand-700); } .alerta.aviso { background: var(--color-warning-50); border-color: var(--color-warning-100); color: var(--color-warning-700); } /* ───────────── Ticket ───────────── */ .codigo { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-weight: 600; font-size: 13px; letter-spacing: 0.4px; color: var(--color-gray-500); } .codigo-grande { font-family: ui-monospace, Consolas, monospace; font-size: 38px; line-height: 46px; font-weight: 700; letter-spacing: 1px; color: var(--color-brand-500); margin: 10px 0 4px; } .enlace-ticket { display: block; word-break: break-all; padding: 11px 14px; margin: 10px 0; background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: 10px; font-size: 13px; } .estados { display: flex; gap: 8px; flex-wrap: wrap; } .texto { white-space: pre-wrap; color: var(--color-gray-700); } dl.datos { margin: 14px 0 0; display: grid; gap: 10px; } dl.datos > div { display: flex; gap: 12px; flex-wrap: wrap; } dl.datos dt { min-width: 170px; margin: 0; font-size: 12px; line-height: 20px; color: var(--color-gray-500); } dl.datos dd { margin: 0; font-size: 14px; color: var(--color-gray-800); } ul.adjuntos, ul.historial, ul.comentarios { list-style: none; padding: 0; margin: 0; } ul.adjuntos li { padding: 4px 0; font-size: 14px; } ul.historial li { font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--color-gray-100); color: var(--color-gray-600); } ul.historial li:last-child { border-bottom: 0; } ul.comentarios { display: grid; gap: 10px; margin-bottom: 18px; } ul.comentarios li { padding: 12px 14px; border-radius: 12px; background: var(--color-gray-50); border: 1px solid var(--color-gray-100); } ul.comentarios li.soporte { background: var(--color-brand-25); border-color: var(--color-brand-100); } .dark ul.comentarios li.soporte { background: rgb(70 95 255 / 0.08); border-color: rgb(70 95 255 / 0.2); } ul.comentarios li.interno { background: var(--color-warning-50); border-color: var(--color-warning-100); } .dark ul.comentarios li.interno { background: rgb(247 144 9 / 0.1); border-color: rgb(247 144 9 / 0.25); } ul.comentarios .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--color-gray-500); margin-bottom: 5px; } ul.comentarios .meta strong { color: var(--color-gray-700); font-weight: 600; } .dark ul.comentarios li.interno .meta strong, .dark ul.comentarios li.interno .texto { color: #1d2939; } .columnas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; } /* ───────────── Tablas ───────────── */ .marco-tabla { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 16px; overflow: hidden; margin-bottom: 18px; } .desplazable { overflow-x: auto; } .tabla { width: 100%; border-collapse: collapse; min-width: 640px; } .tabla thead th { padding: 12px 20px; text-align: left; font-size: 12px; line-height: 18px; font-weight: 500; text-transform: uppercase; color: var(--color-gray-500); background: var(--color-gray-50); border-bottom: 1px solid var(--color-gray-100); white-space: nowrap; } .tabla tbody td { padding: 13px 20px; font-size: 14px; color: var(--color-gray-600); border-bottom: 1px solid var(--color-gray-100); vertical-align: middle; } .tabla tbody tr:last-child td { border-bottom: 0; } .tabla tbody td.principal { color: var(--color-gray-800); font-weight: 500; } .tabla tbody tr.clicable { cursor: pointer; } .tabla tbody tr.clicable:hover { background: var(--color-gray-25); } .tabla tbody th { padding: 13px 20px; text-align: left; font-size: 13px; font-weight: 600; color: var(--color-gray-700); border-bottom: 1px solid var(--color-gray-100); } .tabla td.diagonal { background: var(--color-brand-25); color: var(--color-gray-800); font-weight: 600; } .dark .tabla td.diagonal { background: rgb(70 95 255 / 0.1); } .pie-tabla { padding: 12px 20px; border-top: 1px solid var(--color-gray-100); background: var(--color-gray-25); } .filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 16px; margin-bottom: 18px; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 16px; } .filtros input, .filtros select { margin: 0; } .filtros input[type=search] { flex: 1 1 240px; width: auto; } .filtros select { width: auto; } .filtros label.en-linea { margin: 0; } /* ───────────── Metricas ───────────── */ .metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; } .metrica { display: block; padding: 16px 18px; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 16px; color: inherit; } a.metrica:hover { border-color: var(--color-brand-300); text-decoration: none; box-shadow: var(--shadow-theme-sm); } .metrica .numero { display: block; font-size: 28px; line-height: 36px; font-weight: 700; color: var(--color-gray-800); letter-spacing: -0.5px; } .metrica .etiqueta { display: block; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--color-gray-500); } .metrica-acento { background: var(--color-warning-50); border-color: var(--color-warning-100); } .metrica-acento .numero { color: var(--color-warning-700); } /* ───────────── Graficos ───────────── */ .grafico-meses { display: flex; gap: 10px; align-items: flex-end; height: 210px; padding-top: 8px; overflow-x: auto; } .grafico-meses .mes { flex: 1 1 0; min-width: 46px; height: 100%; display: flex; flex-direction: column; align-items: center; } .grafico-meses .barras { flex: 1; display: flex; gap: 4px; align-items: flex-end; width: 100%; justify-content: center; } .grafico-meses .barra { width: 15px; min-height: 3px; border-radius: 4px 4px 0 0; } .barra.entradas, .punto.entradas { background: var(--color-brand-500); } .barra.cerrados, .punto.cerrados { background: var(--color-success-500); } .etiqueta-mes { font-size: 11px; color: var(--color-gray-500); margin-top: 8px; } .valores { font-size: 11px; color: var(--color-gray-400); margin-top: 1px; } .leyenda { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--color-gray-500); } .leyenda .punto { width: 10px; height: 10px; border-radius: 3px; } .leyenda .separador { width: 12px; } .tabla-barras { width: 100%; border-collapse: collapse; } .tabla-barras td { padding: 6px 10px 6px 0; font-size: 14px; } .tabla-barras td.etiqueta { width: 210px; color: var(--color-gray-700); } .tabla-barras td.numero-celda { width: 62px; text-align: right; font-variant-numeric: tabular-nums; color: var(--color-gray-800); font-weight: 500; } .tabla-barras td.numero-celda.tenue { font-weight: 400; } .barra-h { height: 18px; min-width: 3px; border-radius: 5px; background: linear-gradient(90deg, var(--color-brand-500), var(--color-brand-400)); } /* ───────────── Login (paleta Acttura) ───────────── */ .login-fondo { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px 16px; background: linear-gradient(160deg, #fdfeff 0%, #f7faff 45%, #ffffff 100%); overflow: auto; } .dark .login-fondo { background: linear-gradient(160deg, #0f1320 0%, #131828 45%, #0d111c 100%); } .login-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(16, 24, 40, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(16, 24, 40, 0.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(900px 640px at 50% 42%, transparent 30%, #000 78%); -webkit-mask-image: radial-gradient(900px 640px at 50% 42%, transparent 30%, #000 78%); } .dark .login-grid { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px); } .login-tarjeta { position: relative; z-index: 2; width: min(430px, 92vw); padding: 32px 34px 30px; border-radius: 24px; background: var(--color-white); border: 1px solid var(--color-gray-200); box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03); } .login-marca { display: flex; justify-content: center; margin-bottom: 16px; } .login-marca .lienzo-logo { padding: 6px 12px; border-radius: 10px; } .login-saludo { margin: 0 0 6px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gray-400); } .login-titulo { margin: 0 0 6px; text-align: center; font-size: 26px; line-height: 34px; font-weight: 700; letter-spacing: -0.6px; color: var(--color-gray-900); } .login-sub { margin: 0 0 22px; text-align: center; color: var(--color-gray-500); } .login-tarjeta label { margin-bottom: 14px; } .login-enviar { position: relative; overflow: hidden; width: 100%; margin-top: 8px; padding: 13px 14px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.2px; color: #fff; background: linear-gradient(135deg, var(--color-acttura-500), var(--color-acttura-600)); box-shadow: 0 12px 28px rgba(224, 87, 32, 0.28); transition: 0.18s ease; } .login-enviar:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(224, 87, 32, 0.34); } .login-enviar:active { transform: translateY(0); } .login-enviar::after { content: ''; position: absolute; top: 0; left: -70%; height: 100%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); pointer-events: none; } .login-enviar:hover::after { animation: brillo-boton 0.9s ease; } @keyframes brillo-boton { to { left: 135%; } } .login-volver { display: block; margin-top: 18px; text-align: center; font-size: 13px; } /* ───────────── Responsivo ───────────── */ @media (max-width: 1023px) { .barra-lateral { transform: translateX(-100%); } .barra-lateral.abierta { transform: translateX(0); } .marco.con-menu { margin-left: 0; } .solo-movil { display: inline-flex; } } @media (max-width: 900px) { .columnas { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .contenido { padding: 16px 14px; } .cabecera { padding: 10px 14px; flex-wrap: wrap; } .cabecera .titulo-cabecera { font-size: 17px; } .tarjeta { padding: 18px 16px; border-radius: 14px; } h1 { font-size: 24px; line-height: 32px; } .cabecera .derecha { margin-left: auto; } .cabecera .lienzo-logo img { height: 26px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }