/* Hoja de estilos canónica de la fachada. Los nombres de clase y la estructura del DOM los definen las plantillas (crates/fachada/plantillas); la identidad visual (paleta, tipografía, componentes) se porta de funes-front — paleta tomada de MoiSys para Datco y Ch'aska. Paleta y métricas en propiedades custom para que el diseño se cambie sin tocar reglas. */ :root { /* ===== marca ===== */ --azul-datco: #00214c; --celeste-datco: #1173ff; /* ===== base ===== */ --color-blanco-solido: #fef9f0; --color-negro-solido: #000000; --color-gris-claro-0: #f6efe6; --color-gris-claro-1: #eddcd2; --color-gris-claro-2: #dec0aa; --color-gris-medio-0: #a29aa3; --color-gris-medio-1: #6b687a; --color-gris-medio-2: #3f4154; /* ===== semánticos — modo OSCURO por defecto (paleta de /acceso); ver .tema-claro para el modo claro. Los nombres son históricos de esta hoja. ===== */ --color-fondo: #1a1a1a; --color-superficie: color-mix(in srgb, var(--azul-datco), white 10%); --color-superficie-suave: color-mix(in srgb, var(--azul-datco), white 4%); --color-tinta: #ffffff; --color-tinta-suave: color-mix(in srgb, white, var(--azul-datco) 30%); --color-acento: color-mix(in srgb, var(--celeste-datco), white 12%); --color-secundario: #8fb6ff; --color-exito: #8edfc5; --color-exito-fondo: color-mix(in srgb, #8edfc5, black 78%); --color-error: #ff7a7a; --color-error-fondo: color-mix(in srgb, #ff7a7a, black 75%); --color-aviso: #ffc36d; --color-aviso-fondo: color-mix(in srgb, #ffc36d, black 78%); --color-borde: color-mix(in srgb, var(--celeste-datco), transparent 75%); --color-borde-suave: color-mix(in srgb, var(--celeste-datco), transparent 88%); --color-foco: var(--celeste-datco); --sombra-panel: 0 24px 70px rgba(0, 0, 0, 0.3); --sombra-suave: 0 14px 40px rgba(0, 0, 0, 0.24); /* ===== tipografía ===== */ --fuente-texto: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --fuente-titulos: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --fuente-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace; /* ===== escalas ===== */ --espacio: 1rem; --radio: 8px; --radio-chico: 4px; --transicion-rapida: 150ms ease; --transicion-normal: 240ms ease; } /* Modo claro: los colores tal como estaban antes de agregar el modo oscuro. Se activa con la clase `.tema-claro` en (estaticos/js/tema.js). */ :root.tema-claro { --color-fondo: var(--color-blanco-solido); --color-superficie: #ffffff; --color-superficie-suave: var(--color-gris-claro-0); --color-tinta: var(--color-negro-solido); --color-tinta-suave: var(--color-gris-medio-2); --color-acento: var(--celeste-datco); --color-secundario: var(--azul-datco); --color-exito: color-mix(in srgb, #74c1a7, black 40%); --color-exito-fondo: color-mix(in srgb, #74c1a7, white 82%); --color-error: #c24040; --color-error-fondo: color-mix(in srgb, #c24040, white 88%); --color-aviso: color-mix(in srgb, #eca33b, black 35%); --color-aviso-fondo: color-mix(in srgb, #eca33b, white 84%); --color-borde: color-mix(in srgb, var(--color-gris-claro-2), white 20%); --color-borde-suave: color-mix(in srgb, var(--color-gris-claro-2), white 55%); --color-foco: color-mix(in srgb, var(--azul-datco), var(--celeste-datco) 30%); --sombra-panel: 0 24px 70px rgba(27, 30, 49, 0.14); --sombra-suave: 0 14px 40px rgba(27, 30, 49, 0.08); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--fuente-texto); line-height: 1.5; background: linear-gradient( 135deg, color-mix(in srgb, var(--color-fondo), transparent 5%), color-mix(in srgb, var(--color-superficie-suave), transparent 2%) ), var(--color-fondo); color: var(--color-tinta); } ::selection { background-color: color-mix(in srgb, var(--color-secundario), transparent 70%); } .pagina-publica { max-width: 28rem; margin: 10vh auto 0; padding: calc(var(--espacio) * 1.5); background: color-mix(in srgb, var(--color-superficie), transparent 4%); border: 1px solid var(--color-borde); border-radius: calc(var(--radio) + 4px); box-shadow: var(--sombra-panel); } h1 { margin-top: 0; color: var(--color-acento); font-family: var(--fuente-titulos); font-size: 1.4rem; } .pagina-acceso { position: relative; display: grid; min-height: calc(100vh - 3.5rem); align-items: center; overflow: hidden; background: linear-gradient(160deg, var(--azul-datco), color-mix(in srgb, var(--azul-datco), black 35%)); } .pagina-acceso::before, .pagina-acceso::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); pointer-events: none; } .pagina-acceso::before { top: -12rem; right: -8rem; width: 32rem; height: 32rem; background: color-mix(in srgb, var(--celeste-datco), transparent 45%); } .pagina-acceso::after { bottom: -14rem; left: -10rem; width: 28rem; height: 28rem; background: color-mix(in srgb, var(--celeste-datco), transparent 65%); } .pagina-acceso .acceso { position: relative; z-index: 1; } .acceso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: calc(var(--espacio) * 3); align-items: start; width: min(100%, 66rem); margin: 0 auto; padding: calc(var(--espacio) * 1.5); } .acceso__marca { padding-top: calc(var(--espacio) * 1.75); } .acceso__logo { height: 1.9rem; margin: 0.75rem 0 2.75rem; } .acceso__rotulo { margin: 0 0 0.65rem; color: color-mix(in srgb, var(--celeste-datco), white 35%); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .acceso__titulo { margin: 0 0 1.25rem; color: #ffffff; font-family: var(--fuente-titulos); font-size: 2rem; } .acceso__bajada { max-width: 28rem; margin: 0 0 1rem; color: rgba(255, 255, 255, 0.78); font-size: 1.05rem; line-height: 1.5; } .acceso__metricas { margin-top: 80px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: 30rem; margin: 2rem 0 0; padding: 1.5rem 0; } .acceso__metricas::before, .acceso__metricas::after { margin-top: 35px; content: ""; position: absolute; left: 0; width: 92%; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent); } .acceso__metricas::before { top: 1rem; } .acceso__metricas::after { bottom: 1rem; } .acceso__metrica { margin-top: 40px; position: relative; display: grid; align-content: center; justify-items: start; gap: 0.5rem; text-align: left; } .acceso__metrica + .acceso__metrica::before { content: ""; position: absolute; top: 15%; left: -0.75rem; width: 1px; height: 70%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.25), transparent); } .acceso__metrica-valor { display: block; color: #ffffff; font-family: var(--fuente-titulos); font-size: 2rem; font-weight: 700; line-height: 1; } .acceso__metrica-etiqueta { display: block; color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; } .formulario { display: grid; gap: var(--espacio); width: 100%; padding: calc(var(--espacio) * 1.75); border: 1px solid var(--color-borde); border-radius: calc(var(--radio) + 4px); box-shadow: var(--sombra-panel); } .formulario > form { margin-block: 0; } .formulario__titulo { margin: 0; color: #ffffff; font-family: var(--fuente-titulos); font-size: 1.5rem; } .formulario--plano { background-color: var(--azul-datco); border-color: rgba(17, 115, 255, 0.28); box-shadow: var(--sombra-panel); } /* Spotlight fijo en CSS puro: se realza con :hover, sin JS ni seguimiento del mouse. `.tarjeta-brillo` da la mecánica (contexto de apilamiento propio + recorte); el color de fondo de la tarjeta lo sigue dando cada componente (`.formulario--plano`, `.area-autenticada__lateral`, ...) — el brillo funciona igual en modo claro u oscuro. */ .tarjeta-brillo { position: relative; z-index: 0; overflow: hidden; } .tarjeta-brillo__foco { position: absolute; inset: -1px; z-index: -1; opacity: 0.55; background: radial-gradient( 320px circle at 15% 10%, rgba(17, 115, 255, 0.32), rgba(17, 115, 255, 0.22) 45%, transparent 70% ); transition: opacity var(--transicion-normal); pointer-events: none; } .tarjeta-brillo:hover .tarjeta-brillo__foco { opacity: 1; } .formulario--plano label, .formulario--plano small { color: rgba(255, 255, 255, 0.85); } .formulario--plano label:has(:required)::after { content: " *"; color: #ff6b6b; } .formulario--plano input:not([type="checkbox"]) { min-height: 2.85rem; background: #c9cbd6; border-color: transparent; color: var(--color-negro-solido); } .formulario--plano input::placeholder { color: color-mix(in srgb, var(--color-negro-solido), transparent 45%); } .formulario--plano input:not([type="checkbox"]):focus { border-color: var(--color-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acento), transparent 65%); } .formulario--plano .boton--principal { width: auto; justify-self: start; } .formulario__blanqueo { margin-top: -0.25rem; color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; } .formulario__blanqueo summary { cursor: pointer; color: var(--color-acento); font-weight: 600; } .formulario__blanqueo form { margin-top: var(--espacio); } @media screen and (max-width: 56em) { .acceso { grid-template-columns: 1fr; gap: calc(var(--espacio) * 1.5); text-align: center; } .acceso__bajada { margin: 0 auto; } } form { display: grid; gap: var(--espacio); margin-block: var(--espacio); } label { display: grid; gap: 0.25rem; font-size: 0.9rem; } label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 0.5rem; } input:not([type="checkbox"]) { padding: 0.5rem 0.65rem; border: 1px solid var(--color-borde); border-radius: var(--radio-chico); background: var(--color-superficie); color: var(--color-tinta); font: inherit; transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida); } input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; } input:not([type="checkbox"]):focus { border-color: var(--color-secundario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secundario), transparent 84%); outline: 0; } a { color: var(--color-secundario); } /* ===== componentes compartidos (funes-front) ===== */ .boton { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.6rem 1.15rem; border: 1px solid transparent; border-radius: var(--radio-chico); cursor: pointer; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; transition: background-color var(--transicion-rapida), border-color var(--transicion-rapida), color var(--transicion-rapida), transform var(--transicion-rapida); } .boton:hover { transform: translateY(-1px); } .boton:active { transform: translateY(0); } .boton--principal { background-color: var(--color-acento); color: #ffffff; } .boton--principal:hover { background-color: color-mix(in srgb, var(--color-acento), var(--color-secundario) 32%); } .boton--secundario { background-color: var(--color-superficie-suave); border-color: var(--color-borde); color: var(--color-tinta-suave); } .boton--secundario:hover { border-color: color-mix(in srgb, var(--color-secundario), transparent 35%); color: var(--color-secundario); } .etiqueta { display: inline-flex; align-items: center; justify-content: center; min-height: 1.6rem; padding: 0.15rem 0.55rem; border: 1px solid var(--color-borde); border-radius: var(--radio-chico); background-color: var(--color-superficie-suave); color: var(--color-tinta-suave); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.25; text-align: center; text-transform: uppercase; white-space: nowrap; } .etiqueta--exito { border-color: color-mix(in srgb, var(--color-exito), transparent 45%); background-color: var(--color-exito-fondo); color: var(--color-exito); } .etiqueta--alerta { border-color: color-mix(in srgb, var(--color-aviso), transparent 34%); background-color: var(--color-aviso-fondo); color: var(--color-aviso); } .etiqueta--error { border-color: color-mix(in srgb, var(--color-error), transparent 45%); background-color: var(--color-error-fondo); color: var(--color-error); } .pie { --pie-fondo-inicio: #24282f; --pie-fondo-fin: #171b20; --pie-borde: #333a44; --pie-texto: #f8fafc; display: flex; align-items: center; justify-content: space-between; gap: var(--espacio); padding: calc(var(--espacio) * 0.85) calc(var(--espacio) * 1.5); border-top: 1px solid var(--pie-borde); background: linear-gradient(180deg, var(--pie-fondo-inicio), var(--pie-fondo-fin)); color: var(--pie-texto); font-size: 0.85rem; } .pie a { color: color-mix(in srgb, var(--pie-texto), transparent 10%); } .pie__marca { display: flex; align-items: center; gap: 0.6rem; min-width: 0; } .pie__logo { height: 1.35rem; } .pie__derechos { margin: 0; color: color-mix(in srgb, var(--pie-texto), transparent 25%); } @media screen and (max-width: 40em) { .pie { flex-direction: column; align-items: flex-start; gap: 0.6rem; } } .totp { --totp-celda: 2.35rem; --totp-alto: 2.75rem; position: relative; display: inline-grid; width: min(100%, calc(var(--totp-celda) * 6)); min-height: var(--totp-alto); vertical-align: top; } .totp input.totp__entrada { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; padding: 0; color: transparent; caret-color: transparent; background: transparent; border: 0; box-shadow: none; } .totp input.totp__entrada:focus-visible { outline: none; } .totp__casillas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-height: var(--totp-alto); overflow: hidden; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); } .totp__casilla { display: grid; place-items: center; min-width: 0; border-left: 1px solid var(--color-borde-suave); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; } .totp__casilla:first-child { border-left: 0; } .totp__casilla.ocupado { color: var(--color-tinta); } .totp:focus-within .totp__casillas { border-color: var(--color-secundario); outline: 2px solid var(--color-foco); outline-offset: 1px; } button { appearance: none; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--radio-chico); background: var(--color-acento); color: #ffffff; font: inherit; font-weight: 700; cursor: pointer; transition: background-color var(--transicion-rapida), transform var(--transicion-rapida); } button::-moz-focus-inner { padding: 0; border: 0; } button:hover { background: color-mix(in srgb, var(--color-acento), var(--color-secundario) 32%); transform: translateY(-1px); } button:active { transform: translateY(0); } .error { padding: 0.6rem 0.8rem; border: 1px solid color-mix(in srgb, var(--color-error), transparent 52%); border-radius: var(--radio-chico); background: var(--color-error-fondo); color: var(--color-error); font-weight: 600; } .mensaje { padding: 0.6rem 0.8rem; border: 1px solid color-mix(in srgb, var(--color-aviso), transparent 52%); border-radius: var(--radio-chico); background: var(--color-aviso-fondo); color: var(--color-aviso); font-weight: 600; } code { overflow-wrap: anywhere; } .doble-factor { display: grid; gap: var(--espacio); } .doble-factor__qr { display: grid; justify-items: center; gap: 0.5rem; margin: 0; padding: var(--espacio); background: var(--color-superficie-suave); border: 1px solid var(--color-borde); border-radius: var(--radio); text-align: center; } .doble-factor__qr-imagen { display: grid; place-items: center; width: min(100%, 15rem); padding: 0.5rem; background: #ffffff; border: 1px solid var(--color-borde-suave); border-radius: var(--radio); } .doble-factor__qr-imagen svg { display: block; width: 100%; height: auto; } .doble-factor__qr figcaption, .doble-factor__manual { color: var(--color-tinta-suave); font-size: 0.9rem; } .doble-factor__manual summary { cursor: pointer; color: var(--color-acento); font-weight: 600; } .pagina-autenticada { width: min(112rem, calc(100% - 1rem)); margin: 0 auto; padding: 0; } .area-autenticada { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; } .area-autenticada__encabezado, .area-autenticada__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio); padding: calc(var(--espacio) * 1.15) 0; } .area-autenticada__encabezado { border-bottom: 1px solid var(--color-borde-suave); padding-left: var(--espacio); padding-right: var(--espacio); } .area-autenticada__pie { border-top: 1px solid var(--color-borde-suave); } .area-autenticada__marca, .area-autenticada__usuario, .area-autenticada__pie, .monitoreo__lectura, .monitoreo__tabla small, .monitoreo__vacio p, .backups__descripcion, .backups__bloque-encabezado p, .backups__vacio p, .programaciones__descripcion, .programaciones__bloque-encabezado p, .programaciones__detalle, .programaciones__vacio p, .historial__descripcion, .historial__bloque-encabezado p, .historial__detalle, .historial__vacio p { margin: 0; color: var(--color-tinta-suave); } .area-autenticada__marca { color: var(--color-acento); font-family: var(--fuente-titulos); font-size: 1.5rem; font-weight: 700; } .area-autenticada__usuario, .area-autenticada__pie, .monitoreo__lectura, .monitoreo__tabla small, .backups__descripcion { font-size: 0.875rem; } .area-autenticada__acciones { display: flex; align-items: center; gap: 0.65rem; } .area-autenticada__salida { margin: 0; } .area-autenticada__boton-tema, .area-autenticada__boton-salida { background: var(--color-superficie-suave); border-color: var(--color-borde); color: var(--color-tinta-suave); } .area-autenticada__boton-tema:hover, .area-autenticada__boton-salida:hover { background: var(--color-superficie-suave); border-color: color-mix(in srgb, var(--color-secundario), transparent 35%); color: var(--color-secundario); } .area-autenticada__cuerpo { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--espacio); align-items: start; padding: var(--espacio) 0 calc(var(--espacio) * 2); } .area-autenticada__columna-lateral { display: grid; min-width: 0; gap: var(--espacio); } .area-autenticada__lateral, .area-autenticada__lateral-bloque, .area-autenticada__principal { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra-suave); } .area-autenticada__lateral { padding: calc(var(--espacio) * 0.65); } .area-autenticada__lateral-bloque { display: grid; min-width: 0; gap: calc(var(--espacio) * 0.85); padding: calc(var(--espacio) * 0.75); } .area-autenticada__navegacion { display: grid; gap: 0.25rem; } .area-autenticada__enlace { display: block; padding: 0.5rem 0.65rem; border-radius: var(--radio-chico); color: var(--color-tinta); font-weight: 600; text-decoration: none; transition: background-color var(--transicion-rapida), color var(--transicion-rapida); } .area-autenticada__enlace:hover, .area-autenticada__enlace:focus-visible { background: var(--color-superficie-suave); color: var(--color-secundario); } .area-autenticada__enlace.activo { background: color-mix(in srgb, var(--color-acento), transparent 88%); color: var(--color-acento); } .area-autenticada__principal { min-width: 0; padding: var(--espacio); } .monitoreo { display: grid; gap: calc(var(--espacio) * 1.25); } .monitoreo__encabezado { display: flex; align-items: start; justify-content: space-between; gap: var(--espacio); } .monitoreo__resumen { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio); padding: calc(var(--espacio) * 1.5) 0; } .monitoreo__resumen::before, .monitoreo__resumen::after { content: ""; position: absolute; left: 0; width: 92%; height: 1px; background: linear-gradient(90deg, var(--color-borde), transparent); } .monitoreo__resumen::before { top: 0; } .monitoreo__resumen::after { bottom: 0; } .monitoreo__metrica { position: relative; display: grid; align-content: center; justify-items: start; gap: 0.25rem; text-align: left; } .monitoreo__metrica + .monitoreo__metrica::before { content: ""; position: absolute; top: 15%; left: calc(var(--espacio) / -2); width: 1px; height: 70%; background: linear-gradient(180deg, transparent, var(--color-borde), transparent); } .monitoreo__metrica span { color: var(--color-tinta-suave); font-size: 0.875rem; } .monitoreo__metrica strong { font-size: 1.6rem; line-height: 1; } .monitoreo__tabla-marco { overflow-x: auto; overflow-y: auto; max-height: min(48rem, calc(100vh - 10rem)); border: 1px solid var(--color-borde); border-radius: var(--radio); } .monitoreo__tabla { width: 100%; min-width: 78rem; table-layout: fixed; border-collapse: collapse; background: var(--color-superficie); } .monitoreo__columna--numero { width: 4%; } .monitoreo__columna--backup { width: 11%; } .monitoreo__columna--origen { width: 16%; } .monitoreo__columna--instantanea { width: 16%; } .monitoreo__columna--estado { width: 9%; } .monitoreo__columna--tamano { width: 8%; } .monitoreo__columna--programacion { width: 15%; } .monitoreo__columna--notificacion { width: 12%; } .monitoreo__columna--acciones { width: 9%; } .monitoreo__tabla th, .monitoreo__tabla td { padding: 0.65rem; border-bottom: 1px solid var(--color-borde); text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; } .monitoreo__tabla tr > * + * { border-left: 1px solid var(--color-borde-suave); } .monitoreo__tabla thead th { background: var(--color-superficie-suave); color: var(--color-tinta-suave); font-size: 0.82rem; font-weight: 700; } .monitoreo__tabla tbody tr:last-child th, .monitoreo__tabla tbody tr:last-child td { border-bottom: 0; } .monitoreo__celda--backup, .monitoreo__ruta { overflow-wrap: anywhere; } .monitoreo__celda--tamano { white-space: nowrap; } .monitoreo__celda--instantanea { overflow-wrap: anywhere; } .monitoreo__celda--estado { text-align: left; } .monitoreo__celda--programacion { line-height: 1.35; } .monitoreo__tabla small, .monitoreo__detalle { display: block; margin-top: 0.25rem; } .monitoreo__detalle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .monitoreo__codigo { font-variant-numeric: tabular-nums; } .monitoreo__separador { color: var(--color-tinta-suave); } .monitoreo__estado { display: inline-flex; align-items: center; max-width: 100%; padding: 0.15rem 0.45rem; border-radius: var(--radio); background: var(--color-superficie-suave); color: var(--color-tinta); line-height: 1.25; overflow-wrap: normal; white-space: normal; } .monitoreo__notificacion { display: block; overflow-wrap: anywhere; white-space: normal; } .monitoreo__sin-notificaciones { color: var(--color-tinta-suave); } .monitoreo__accion, .backups__accion { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: 0.35rem 0.65rem; border-radius: var(--radio); background: var(--color-acento); color: #ffffff; font-size: 0.84rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; } .monitoreo__estado--exito { background: var(--color-exito-fondo); color: var(--color-exito); } .monitoreo__estado--aviso { background: var(--color-aviso-fondo); color: var(--color-aviso); } .monitoreo__estado--error { background: var(--color-error-fondo); color: var(--color-error); } .monitoreo__vacio { padding: calc(var(--espacio) * 1.25); background: var(--color-superficie-suave); border: 1px solid var(--color-borde); border-radius: var(--radio); } .usuarios { display: grid; gap: calc(var(--espacio) * 1.25); } .usuarios__encabezado, .usuarios__bloque-encabezado { display: flex; align-items: start; justify-content: space-between; gap: var(--espacio); } .usuarios__descripcion, .usuarios__bloque-encabezado p, .usuarios__detalle, .usuarios__clave p, .usuarios__mensaje, .usuarios__clave-estado { margin: 0; color: var(--color-tinta-suave); } .usuarios__mensaje, .usuarios__clave, .usuarios__bloque { padding: var(--espacio); border: 1px solid var(--color-borde); border-radius: var(--radio); } .usuarios__mensaje { background: var(--color-superficie-suave); } .usuarios__mensaje--exito { background: linear-gradient( 90deg, color-mix(in srgb, var(--color-exito-fondo), var(--color-exito) 10%), var(--color-exito-fondo) ); border-color: color-mix(in srgb, var(--color-exito) 52%, var(--color-borde) 48%); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--color-exito), white 8%); color: var(--color-exito); font-weight: 650; } .usuarios__mensaje--error { background: var(--color-error-fondo); border-color: color-mix(in srgb, var(--color-error) 52%, var(--color-borde) 48%); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--color-error), white 8%); color: var(--color-error); font-weight: 650; } .usuarios__clave { display: grid; gap: var(--espacio); background: var(--color-aviso-fondo); border-color: color-mix(in srgb, var(--color-aviso) 35%, var(--color-borde) 65%); } .usuarios__clave h2, .usuarios__bloque h2 { margin: 0; font-size: 1.05rem; } .usuarios__clave-control { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem; align-items: center; } .usuarios__clave-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; } .usuarios__boton-icono { display: inline-grid; width: 2.35rem; height: 2.35rem; place-items: center; padding: 0; background: var(--color-tinta); } .usuarios__icono { width: 1.1rem; height: 1.1rem; } .usuarios__clave-estado { grid-column: 1 / -1; min-height: 1.25rem; font-size: 0.85rem; } /* Fila de KPIs (mismo patrón que .acceso__metricas / .programaciones__resumen): sin tarjetas, sólo líneas divisorias. Colores y datos son los de siempre. */ .usuarios__resumen { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espacio); padding: calc(var(--espacio) * 1.5) 0; } .usuarios__resumen::before, .usuarios__resumen::after { content: ""; position: absolute; left: 0; width: 92%; height: 1px; background: linear-gradient(90deg, var(--color-borde), transparent); } .usuarios__resumen::before { top: 0; } .usuarios__resumen::after { bottom: 0; } .usuarios__metrica { position: relative; display: grid; align-content: center; justify-items: start; gap: 0.25rem; text-align: left; } .usuarios__metrica + .usuarios__metrica::before { content: ""; position: absolute; top: 15%; left: calc(var(--espacio) / -2); width: 1px; height: 70%; background: linear-gradient(180deg, transparent, var(--color-borde), transparent); } .usuarios__metrica span { color: var(--color-tinta-suave); font-size: 0.875rem; } .usuarios__metrica strong { font-size: 1.6rem; line-height: 1; } .usuarios__bloque { display: grid; gap: var(--espacio); background: var(--color-superficie); } .usuarios__formulario { grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 14rem) auto; align-items: end; } .usuarios__opciones { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .usuarios__checkbox { display: inline-flex; gap: 0.55rem; align-items: center; color: var(--color-tinta); font-weight: 700; } .usuarios__checkbox input { width: 1rem; height: 1rem; accent-color: var(--color-acento); } .usuarios__lectura { display: grid; gap: 0.75rem; } .usuarios__tabla-marco { overflow-x: auto; overflow-y: auto; max-height: min(48rem, calc(100vh - 10rem)); border: 1px solid var(--color-borde); border-radius: var(--radio); } .usuarios__tabla { width: 100%; min-width: 72rem; table-layout: fixed; border-collapse: collapse; background: var(--color-superficie); } .usuarios__tabla th, .usuarios__tabla td { padding: 0.75rem; border-bottom: 1px solid var(--color-borde); text-align: left; vertical-align: top; overflow-wrap: anywhere; } .usuarios__tabla tr > * + * { border-left: 1px solid var(--color-borde-suave); } .usuarios__tabla thead th { background: var(--color-superficie-suave); color: var(--color-tinta-suave); font-size: 0.82rem; font-weight: 700; } .usuarios__tabla tbody tr:last-child th, .usuarios__tabla tbody tr:last-child td { border-bottom: 0; } .usuarios__nombre, .usuarios__detalle { display: block; } .usuarios__detalle { margin-top: 0.25rem; font-size: 0.84rem; } .usuarios__estado { display: inline-flex; align-items: center; max-width: 100%; margin: 0 0.25rem 0.35rem 0; padding: 0.15rem 0.45rem; border-radius: var(--radio); background: var(--color-superficie-suave); color: var(--color-tinta); font-size: 0.83rem; line-height: 1.25; white-space: nowrap; } .usuarios__estado--exito { background: var(--color-exito-fondo); color: var(--color-exito); } .usuarios__estado--aviso { background: var(--color-aviso-fondo); color: var(--color-aviso); } .usuarios__estado--error { background: var(--color-error-fondo); color: var(--color-error); } .usuarios__estado--neutro { background: var(--color-superficie-suave); color: var(--color-tinta-suave); } .usuarios__acciones { display: grid; gap: 0.5rem; } .usuarios__accion { border: 1px solid var(--color-borde-suave); border-radius: var(--radio); background: var(--color-superficie); } .usuarios__accion summary { padding: 0.55rem 0.7rem; cursor: pointer; font-weight: 700; } .usuarios__accion form { padding: 0 0.7rem 0.7rem; } .usuarios__accion p { margin: 0; color: var(--color-tinta-suave); font-size: 0.88rem; } .usuarios__lista-admin { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .usuarios__admin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.75rem; background: var(--color-superficie-suave); border: 1px solid var(--color-borde-suave); border-radius: var(--radio); } .backups { display: grid; gap: calc(var(--espacio) * 1.25); } .backups__encabezado, .backups__bloque-encabezado { display: flex; align-items: start; justify-content: space-between; gap: var(--espacio); } .backups__bloque-encabezado h2 { margin: 0; font-size: 1.05rem; } .backups__conjunto-seleccionado-nombre { display: inline-block; color: var(--color-acento); font-size: 1.35em; line-height: 1.2; } .backups__bloque { display: grid; min-width: 0; gap: var(--espacio); padding: var(--espacio); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); } .backups__bloque--principal { gap: calc(var(--espacio) * 1.1); } .backups__filtros { grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1fr) auto; align-items: end; margin: 0; } .backups__filtros label, .backups__filtros select, .backups__filtros button { min-width: 0; max-width: 100%; } .backups__filtros select { width: 100%; min-height: 2.35rem; padding: 0.45rem 0.5rem; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie); color: var(--color-tinta); font: inherit; } .backups__filtros select:focus-visible, .backups__accion:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 1px; } .backups__lista-scroll { max-height: min(42rem, calc(100vh - 23rem)); overflow-y: auto; overflow-x: hidden; border: 1px solid var(--color-borde); border-radius: var(--radio); } .backups__lista { display: grid; gap: 0.25rem; padding: 0.35rem; margin: 0; list-style: none; } .backups__item { min-width: 0; } .backups__item.seleccionado { background: var(--color-superficie-suave); border-radius: var(--radio); } .backups__enlace-conjunto { display: block; min-width: 0; padding: 0.5rem 0.55rem; overflow-wrap: anywhere; border-radius: var(--radio); color: var(--color-tinta); font-size: 0.92rem; font-weight: 650; line-height: 1.25; text-decoration: none; } .backups__enlace-conjunto:hover, .backups__enlace-conjunto:focus-visible { background: var(--color-superficie-suave); } .backups__enlace-conjunto[aria-current="true"] { color: var(--color-acento); } .backups__tabla-marco { overflow-x: auto; overflow-y: auto; max-height: min(48rem, calc(100vh - 10rem)); border: 1px solid var(--color-borde); border-radius: var(--radio); } .backups__tabla { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--color-superficie); } .backups__tabla--instantaneas { min-width: 64rem; } .backups__tabla th, .backups__tabla td { padding: 0.75rem; border-bottom: 1px solid var(--color-borde); text-align: left; vertical-align: top; overflow-wrap: anywhere; } .backups__tabla tr > * + * { border-left: 1px solid var(--color-borde-suave); } .backups__tabla thead th { background: var(--color-superficie-suave); color: var(--color-tinta-suave); font-size: 0.82rem; font-weight: 700; } .backups__tabla tbody tr:last-child th, .backups__tabla tbody tr:last-child td { border-bottom: 0; } .backups__codigo { font-variant-numeric: tabular-nums; } .backups__estado { display: inline-flex; align-items: center; max-width: 100%; margin: 0 0.25rem 0.35rem 0; padding: 0.15rem 0.45rem; border-radius: var(--radio); background: var(--color-superficie-suave); color: var(--color-tinta); font-size: 0.83rem; line-height: 1.25; white-space: nowrap; } .backups__estado--completa { background: var(--color-exito-fondo); color: var(--color-exito); } .backups__estado--curso { background: var(--color-aviso-fondo); color: var(--color-aviso); } .backups__estado--neutro { background: var(--color-superficie-suave); color: var(--color-tinta-suave); } .backups__notificacion { display: inline-grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; background: var(--color-aviso); color: #ffffff; font-size: 0.82rem; font-weight: 800; line-height: 1; } .backups__sin-notificaciones { color: var(--color-tinta-suave); } .backups__detalle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; } .backups__detalle-grid div { min-width: 0; padding: 0.75rem; background: var(--color-superficie-suave); border: 1px solid var(--color-borde-suave); border-radius: var(--radio); } .backups__detalle-grid dt { color: var(--color-tinta-suave); font-size: 0.78rem; font-weight: 700; } .backups__detalle-grid dd { margin: 0.2rem 0 0; overflow-wrap: anywhere; } .backups__detalle-grid-ancho { grid-column: 1 / -1; } .backups__paginacion { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio); color: var(--color-tinta-suave); font-size: 0.875rem; } .backups__paginacion-acciones { display: flex; align-items: center; gap: 0.5rem; } .backups__vacio { padding: calc(var(--espacio) * 1.25); background: var(--color-superficie-suave); border: 1px solid var(--color-borde); border-radius: var(--radio); } .programaciones { display: grid; gap: calc(var(--espacio) * 1.25); } .programaciones__encabezado, .programaciones__bloque-encabezado { display: flex; align-items: start; justify-content: space-between; gap: var(--espacio); } .programaciones__bloque-encabezado h2 { margin: 0; font-size: 1.05rem; } .programaciones__bloque { padding: var(--espacio); border: 1px solid var(--color-borde); border-radius: var(--radio); } /* Fila de KPIs (mismo patrón que .acceso__metricas en funes-front): sin tarjetas, sólo líneas divisorias arriba/abajo y entre ítems. Colores y datos son los de siempre. */ .programaciones__resumen { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espacio); padding: calc(var(--espacio) * 1.5) 0; } .programaciones__resumen::before, .programaciones__resumen::after { content: ""; position: absolute; left: 0; width: 92%; height: 1px; background: linear-gradient(90deg, var(--color-borde), transparent); } .programaciones__resumen::before { top: 0; } .programaciones__resumen::after { bottom: 0; } .programaciones__metrica { position: relative; display: grid; align-content: center; justify-items: start; gap: 0.25rem; text-align: left; } .programaciones__metrica + .programaciones__metrica::before { content: ""; position: absolute; top: 15%; left: calc(var(--espacio) / -2); width: 1px; height: 70%; background: linear-gradient(180deg, transparent, var(--color-borde), transparent); } .programaciones__metrica span { color: var(--color-tinta-suave); font-size: 0.875rem; } .programaciones__metrica strong { font-size: 1.6rem; line-height: 1; } .programaciones__bloque { display: grid; gap: var(--espacio); background: var(--color-superficie); } .programaciones__tabla-marco { overflow-x: auto; overflow-y: auto; max-height: min(48rem, calc(100vh - 10rem)); border: 1px solid var(--color-borde); border-radius: var(--radio); } .programaciones__tabla { width: 100%; min-width: 68rem; table-layout: fixed; border-collapse: collapse; background: var(--color-superficie); } .programaciones__tabla th, .programaciones__tabla td { padding: 0.75rem; border-bottom: 1px solid var(--color-borde); text-align: left; vertical-align: top; overflow-wrap: anywhere; } .programaciones__tabla tr > * + * { border-left: 1px solid var(--color-borde-suave); } .programaciones__tabla thead th { background: var(--color-superficie-suave); color: var(--color-tinta-suave); font-size: 0.82rem; font-weight: 700; } .programaciones__tabla tbody tr:last-child th, .programaciones__tabla tbody tr:last-child td { border-bottom: 0; } .programaciones__nombre, .programaciones__detalle, .programaciones__codigo, .programaciones__notificacion { display: block; } .programaciones__detalle { margin-top: 0.25rem; font-size: 0.84rem; } .programaciones__codigo { font-variant-numeric: tabular-nums; } .programaciones__estado { display: inline-flex; align-items: center; max-width: 100%; margin: 0 0.25rem 0.35rem 0; padding: 0.15rem 0.45rem; border-radius: var(--radio); background: var(--color-superficie-suave); color: var(--color-tinta); font-size: 0.83rem; line-height: 1.25; white-space: nowrap; } .programaciones__estado--exito { background: var(--color-exito-fondo); color: var(--color-exito); } .programaciones__estado--aviso { background: var(--color-aviso-fondo); color: var(--color-aviso); } .programaciones__estado--neutro { background: var(--color-superficie-suave); color: var(--color-tinta-suave); } .programaciones__notificacion { max-width: 100%; padding: 0.35rem 0.5rem; border-radius: var(--radio); line-height: 1.3; } .programaciones__notificacion--error { background: var(--color-error-fondo); color: var(--color-error); } .programaciones__notificacion--aviso { background: var(--color-aviso-fondo); color: var(--color-aviso); } .programaciones__sin-notificaciones { color: var(--color-tinta-suave); } .programaciones__vacio { padding: calc(var(--espacio) * 1.25); background: var(--color-superficie-suave); border: 1px solid var(--color-borde); border-radius: var(--radio); } .historial { display: grid; gap: calc(var(--espacio) * 1.25); } .historial__encabezado, .historial__bloque-encabezado { display: flex; align-items: start; justify-content: space-between; gap: var(--espacio); } .historial__bloque-encabezado h2 { margin: 0; font-size: 1.05rem; } .historial__bloque { display: grid; gap: var(--espacio); padding: var(--espacio); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); } .historial__mensaje { padding: 0.75rem 1rem; border: 1px solid var(--color-exito-fondo); border-radius: var(--radio); background: var(--color-exito-fondo); color: var(--color-exito); font-weight: 700; } .historial__mensaje--error { border-color: var(--color-error-fondo); background: var(--color-error-fondo); color: var(--color-error); } .historial__filtros { grid-template-columns: repeat(4, minmax(10rem, 1fr)); align-items: end; margin: 0; } .historial__filtros label, .historial__filtros input, .historial__filtros select, .historial__filtros button { min-width: 0; max-width: 100%; } .historial__filtros select { width: 100%; min-height: 2.35rem; padding: 0.45rem 0.5rem; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie); color: var(--color-tinta); font: inherit; } .historial__filtros select:focus-visible, .historial__accion:focus-visible, .historial__accion-secundaria:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 1px; } .historial__checkbox { display: flex; min-height: 2.35rem; align-items: center; gap: 0.5rem; } .historial__checkbox input { width: 1rem; height: 1rem; margin: 0; } .historial__filtros-acciones { display: flex; align-items: center; justify-content: end; gap: 0.75rem; } .historial__filtros-acciones .historial__accion { border-radius: var(--radio); } .historial__tabla-marco { overflow-x: auto; overflow-y: auto; max-height: min(48rem, calc(100vh - 10rem)); border: 1px solid var(--color-borde); border-radius: var(--radio); } .historial__tabla { width: 100%; min-width: 68rem; table-layout: fixed; border-collapse: collapse; background: var(--color-superficie); } .historial__col-numero { width: 3rem; } .historial__col-accion { width: 12rem; } .historial__col-fecha { width: 6.25rem; } .historial__col-hora { width: 4.75rem; } .historial__col-usuario { width: 10rem; } .historial__col-origen { width: 12rem; } .historial__col-resultado { width: 7rem; } .historial__col-detalle { width: auto; } .historial__tabla th, .historial__tabla td { padding: 0.75rem; border-bottom: 1px solid var(--color-borde); text-align: left; vertical-align: top; overflow-wrap: anywhere; } .historial__tabla tr > * + * { border-left: 1px solid var(--color-borde-suave); } .historial__tabla thead th { background: var(--color-superficie-suave); color: var(--color-tinta-suave); font-size: 0.82rem; font-weight: 700; } .historial__tabla tbody tr:last-child td { border-bottom: 0; } .historial__nombre, .historial__detalle, .historial__codigo { display: block; } .historial__detalle { margin-top: 0.25rem; font-size: 0.84rem; } .historial__codigo { font-variant-numeric: tabular-nums; } .historial__estado { display: inline-flex; align-items: center; max-width: 100%; margin: 0 0.25rem 0.35rem 0; padding: 0.15rem 0.45rem; border-radius: var(--radio); background: var(--color-superficie-suave); color: var(--color-tinta); font-size: 0.83rem; line-height: 1.25; white-space: nowrap; } .historial__estado--exito { background: var(--color-exito-fondo); color: var(--color-exito); } .historial__estado--error { background: var(--color-error-fondo); color: var(--color-error); } .historial__detalle-maquina { display: inline; margin-top: 0; margin-left: 0.4rem; } .historial__detalle-maquina summary { display: inline; padding: 0; border: none; background: transparent; color: var(--color-acento); cursor: pointer; font-size: 0.82rem; font-weight: 700; font-style: italic; line-height: 1.2; } .historial__detalle-maquina summary:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 1px; } .historial__detalle-maquina dl { display: grid; gap: 0.35rem; margin: 0.45rem 0 0; padding: 0.55rem; border: 1px solid var(--color-borde-suave); border-radius: var(--radio); background: var(--color-superficie-suave); font-size: 0.8rem; } .historial__detalle-maquina dt { color: var(--color-tinta-suave); font-weight: 700; } .historial__detalle-maquina dd { margin: 0; overflow-wrap: anywhere; } .historial__revelar-ip { display: grid; gap: 0.45rem; margin: 0.5rem 0 0; padding: 0.55rem; border: 1px solid var(--color-borde-suave); border-radius: var(--radio); background: var(--color-superficie); } .historial__revelar-ip label { display: grid; gap: 0.25rem; margin: 0; color: var(--color-tinta-suave); font-size: 0.8rem; font-weight: 700; } .historial__revelar-ip input { width: 100%; min-width: 0; } .historial__revelar-ip button { width: 100%; min-height: 2.15rem; padding: 0.35rem 0.55rem; font-size: 0.82rem; } .historial__detalle-tecnico summary { color: var(--color-acento); cursor: pointer; font-size: 0.85rem; font-weight: 700; } .historial__detalle-tecnico .historial__resumen-evento { margin: 0.5rem 0 0; } .historial__detalle-tecnico pre { max-height: 16rem; margin: 0.5rem 0 0; padding: 0.75rem; overflow: auto; background: var(--color-superficie-suave); border: 1px solid var(--color-borde-suave); border-radius: var(--radio); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.35; white-space: pre-wrap; } .historial__paginacion { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio); color: var(--color-tinta-suave); font-size: 0.875rem; } .historial__paginacion-acciones { display: flex; align-items: center; gap: 0.5rem; } .historial__accion, .historial__accion-secundaria { display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; padding: 0.45rem 0.75rem; border-radius: var(--radio); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; } .historial__accion { background: var(--color-acento); color: #ffffff; } .historial__accion-secundaria { background: var(--color-superficie-suave); border: 1px solid var(--color-borde); color: var(--color-tinta-suave); } .historial__vacio { padding: calc(var(--espacio) * 1.25); background: var(--color-superficie-suave); border: 1px solid var(--color-borde); border-radius: var(--radio); } /* ===== ajuste de identidad sobre los bloques ya definidos arriba ===== Estas reglas van DESPUÉS a propósito: misma especificidad que sus originales (una clase), así que las sobreescriben en cascada sin duplicar cada bloque. */ .monitoreo__estado, .usuarios__estado, .backups__estado, .programaciones__estado, .historial__estado { border: 1px solid var(--color-borde); border-radius: var(--radio-chico); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .monitoreo__estado--exito, .usuarios__estado--exito, .backups__estado--completa, .programaciones__estado--exito, .historial__estado--exito { border-color: color-mix(in srgb, var(--color-exito), transparent 45%); } .monitoreo__estado--aviso, .usuarios__estado--aviso, .backups__estado--curso, .programaciones__estado--aviso { border-color: color-mix(in srgb, var(--color-aviso), transparent 34%); } .monitoreo__estado--error, .usuarios__estado--error, .historial__estado--error { border-color: color-mix(in srgb, var(--color-error), transparent 45%); } /* éxito/fallido en tablas: sólo texto de color, sin recuadro ni fondo */ .monitoreo__estado--exito, .monitoreo__estado--error, .usuarios__estado--exito, .usuarios__estado--error, .backups__estado--completa, .programaciones__estado--exito, .historial__estado--exito, .historial__estado--error { background: transparent; border: none; padding: 0; } .monitoreo__vacio, .usuarios__mensaje, .usuarios__clave, .usuarios__bloque, .backups__bloque, .backups__vacio, .programaciones__bloque, .programaciones__vacio, .historial__bloque, .historial__vacio { border-radius: var(--radio); box-shadow: var(--sombra-suave); } .monitoreo__metrica strong, .usuarios__metrica strong, .programaciones__metrica strong { color: var(--color-acento); font-family: var(--fuente-titulos); } .monitoreo__accion, .backups__accion, .historial__accion { border-radius: var(--radio-chico); font-weight: 700; transition: background-color var(--transicion-rapida), transform var(--transicion-rapida); } .monitoreo__accion:hover, .backups__accion:hover, .historial__accion:hover { background: color-mix(in srgb, var(--color-acento), var(--color-secundario) 32%); transform: translateY(-1px); } .monitoreo__tabla thead th, .usuarios__tabla thead th, .backups__tabla thead th, .programaciones__tabla thead th, .historial__tabla thead th { letter-spacing: 0.03em; text-transform: uppercase; } /* Densidad tipo planilla de cálculo: celdas más chicas, cabecera con borde propio y resalte de fila al pasar el mouse — mismos colores y datos, otra densidad. */ .monitoreo__tabla th, .monitoreo__tabla td, .usuarios__tabla th, .usuarios__tabla td, .backups__tabla th, .backups__tabla td, .programaciones__tabla th, .programaciones__tabla td, .historial__tabla th, .historial__tabla td { padding: 0.5rem 0.65rem; font-size: 0.875rem; } .monitoreo__tabla thead th, .usuarios__tabla thead th, .backups__tabla thead th, .programaciones__tabla thead th, .historial__tabla thead th { border-bottom: 2px solid var(--color-borde); } .monitoreo__tabla tbody tr:nth-child(even), .usuarios__tabla tbody tr:nth-child(even), .backups__tabla tbody tr:nth-child(even), .programaciones__tabla tbody tr:nth-child(even), .historial__tabla tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-superficie-suave), var(--color-superficie) 50%); } .monitoreo__tabla tbody tr:hover, .usuarios__tabla tbody tr:hover, .backups__tabla tbody tr:hover, .programaciones__tabla tbody tr:hover, .historial__tabla tbody tr:hover { background: var(--color-superficie-suave); transition: background-color var(--transicion-rapida); } .monitoreo__tabla-marco, .usuarios__tabla-marco, .backups__tabla-marco, .programaciones__tabla-marco, .historial__tabla-marco { scrollbar-color: var(--color-acento) transparent; } .monitoreo__tabla-marco::-webkit-scrollbar, .usuarios__tabla-marco::-webkit-scrollbar, .backups__tabla-marco::-webkit-scrollbar, .programaciones__tabla-marco::-webkit-scrollbar, .historial__tabla-marco::-webkit-scrollbar { height: 0.6rem; } .monitoreo__tabla-marco::-webkit-scrollbar-track, .usuarios__tabla-marco::-webkit-scrollbar-track, .backups__tabla-marco::-webkit-scrollbar-track, .programaciones__tabla-marco::-webkit-scrollbar-track, .historial__tabla-marco::-webkit-scrollbar-track { background: transparent; } .monitoreo__tabla-marco::-webkit-scrollbar-thumb, .usuarios__tabla-marco::-webkit-scrollbar-thumb, .backups__tabla-marco::-webkit-scrollbar-thumb, .programaciones__tabla-marco::-webkit-scrollbar-thumb, .historial__tabla-marco::-webkit-scrollbar-thumb { background-color: var(--color-acento); border-radius: var(--radio-chico); } @media screen and (max-width: 64em) { .pagina-autenticada { width: min(100% - 1rem, 112rem); } .area-autenticada__cuerpo { grid-template-columns: 1fr; padding-block: var(--espacio) calc(var(--espacio) * 1.5); } .area-autenticada__navegacion { display: flex; overflow-x: auto; } .area-autenticada__enlace { white-space: nowrap; } .monitoreo__resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .usuarios__resumen, .programaciones__resumen, .usuarios__formulario, .historial__filtros, .backups__detalle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .usuarios__formulario button, .historial__filtros-acciones, .backups__filtros button { grid-column: 1 / -1; } } @media screen and (max-width: 48em) { .monitoreo__tabla-marco, .usuarios__tabla-marco, .programaciones__tabla-marco, .historial__tabla-marco, .backups__tabla-marco, .backups__lista-scroll { overflow: visible; border: 0; max-height: none; } .monitoreo__tabla, .monitoreo__tabla tbody, .monitoreo__tabla tr, .monitoreo__tabla th, .monitoreo__tabla td, .usuarios__tabla, .usuarios__tabla tbody, .usuarios__tabla tr, .usuarios__tabla th, .usuarios__tabla td, .programaciones__tabla, .programaciones__tabla tbody, .programaciones__tabla tr, .programaciones__tabla th, .programaciones__tabla td, .historial__tabla, .historial__tabla tbody, .historial__tabla tr, .historial__tabla th, .historial__tabla td, .backups__tabla, .backups__tabla tbody, .backups__tabla tr, .backups__tabla th, .backups__tabla td { display: block; width: 100%; } .monitoreo__tabla, .usuarios__tabla, .programaciones__tabla, .historial__tabla, .backups__tabla { min-width: 0; background: transparent; } .monitoreo__tabla thead, .usuarios__tabla thead, .programaciones__tabla thead, .historial__tabla thead, .backups__tabla thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .monitoreo__tabla tbody, .usuarios__tabla tbody, .programaciones__tabla tbody, .historial__tabla tbody, .backups__tabla tbody { display: grid; gap: var(--espacio); } .monitoreo__tabla tr, .usuarios__tabla tr, .programaciones__tabla tr, .historial__tabla tr, .backups__tabla tr { overflow: hidden; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); } .monitoreo__tabla th, .monitoreo__tabla td, .usuarios__tabla th, .usuarios__tabla td, .programaciones__tabla th, .programaciones__tabla td, .historial__tabla th, .historial__tabla td, .backups__tabla th, .backups__tabla td { display: grid; grid-template-columns: minmax(7.5rem, 34%) minmax(0, 1fr); gap: var(--espacio); align-items: start; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--color-borde-suave); border-left: 0; } .monitoreo__tabla tbody tr:last-child th, .monitoreo__tabla tbody tr:last-child td, .usuarios__tabla tbody tr:last-child th, .usuarios__tabla tbody tr:last-child td, .programaciones__tabla tbody tr:last-child th, .programaciones__tabla tbody tr:last-child td, .historial__tabla tbody tr:last-child td, .backups__tabla tbody tr:last-child th, .backups__tabla tbody tr:last-child td { border-bottom: 1px solid var(--color-borde-suave); } .monitoreo__tabla tr > :last-child, .usuarios__tabla tr > :last-child, .programaciones__tabla tr > :last-child, .historial__tabla tr > :last-child, .backups__tabla tr > :last-child { border-bottom: 0; } .monitoreo__tabla th::before, .monitoreo__tabla td::before, .usuarios__tabla th::before, .usuarios__tabla td::before, .programaciones__tabla th::before, .programaciones__tabla td::before, .historial__tabla th::before, .historial__tabla td::before, .backups__tabla th::before, .backups__tabla td::before { content: attr(data-etiqueta); color: var(--color-tinta-suave); font-size: 0.78rem; font-weight: 700; } .monitoreo__celda--backup { background: var(--color-superficie-suave); } .monitoreo__celda--estado { text-align: left; } .monitoreo__celda--tamano { white-space: normal; } .usuarios__acciones { display: grid; grid-template-columns: 1fr; } .historial__filtros, .historial__paginacion { grid-template-columns: 1fr; } .historial__paginacion { display: grid; } .historial__paginacion-acciones, .historial__filtros-acciones { align-items: stretch; flex-direction: column; } .backups__filtros, .backups__detalle-grid, .backups__paginacion { grid-template-columns: 1fr; } .backups__paginacion { display: grid; } .backups__paginacion-acciones { align-items: stretch; flex-direction: column; } } @media screen and (max-width: 40em) { .area-autenticada__encabezado { align-items: stretch; flex-direction: column; } .area-autenticada__acciones { align-items: stretch; flex-direction: column; } .area-autenticada__boton-tema, .area-autenticada__boton-salida { width: 100%; } .monitoreo__resumen { grid-template-columns: 1fr; } .usuarios__resumen, .programaciones__resumen, .usuarios__formulario, .usuarios__admin, .historial__filtros, .backups__filtros, .backups__detalle-grid { grid-template-columns: 1fr; } .monitoreo__tabla th, .monitoreo__tabla td, .usuarios__tabla th, .usuarios__tabla td, .programaciones__tabla th, .programaciones__tabla td, .historial__tabla th, .historial__tabla td, .backups__tabla th, .backups__tabla td { grid-template-columns: 1fr; gap: 0.25rem; } .usuarios__clave-control { grid-template-columns: minmax(0, 1fr) auto auto; } } /* Monitoreo: columnas Estado y Notificación sólo como texto de color, sin caja ni fondo (para cualquier estado_clase: exito, aviso, error o neutro/vacío). Va al final a propósito para ganar sobre el fondo por variante y el borde compartido con otras tablas. */ .monitoreo__estado { background: transparent; border: none; padding: 0; } /* Conjuntos (backups): columna Estado de instantáneas, mismo criterio que monitoreo. */ .backups__estado { background: transparent; border: none; padding: 0; } /* Monitoreo: "Ver detalles" en Acciones deja de ser un botón, sólo texto celeste. */ .monitoreo__accion { background: transparent; color: var(--color-acento); padding: 0; border-radius: 0; } .monitoreo__accion:hover { background: transparent; color: var(--color-acento); text-decoration: underline; transform: none; } /* Programación: columnas Estado y Notificación, mismo criterio que monitoreo. */ .programaciones__estado, .programaciones__notificacion { background: transparent; border: none; padding: 0; } /* Usuarios: columna Estado, mismo criterio que monitoreo. */ .usuarios__estado { background: transparent; border: none; padding: 0; } /* Columna Notificación (monitoreo, programación): texto en minúsculas y negrita, sin heredar el MAYÚSCULAS de la columna Estado con la que comparte clase base. */ .monitoreo__notificacion, .programaciones__notificacion { text-transform: none; font-weight: 700; } /* Columna de numeración de fila: primera columna de las cinco tablas, fija al hacer scroll horizontal. El fondo se repite explícito para cebra y hover porque una celda sticky no hereda el fondo de su fila (si no, se ve transparente al desplazarse). */ .monitoreo__tabla th:first-child, .monitoreo__tabla td:first-child, .usuarios__tabla th:first-child, .usuarios__tabla td:first-child, .backups__tabla th:first-child, .backups__tabla td:first-child, .programaciones__tabla th:first-child, .programaciones__tabla td:first-child, .historial__tabla th:first-child, .historial__tabla td:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-superficie); text-align: center; } .usuarios__tabla th:first-child, .usuarios__tabla td:first-child, .backups__tabla th:first-child, .backups__tabla td:first-child, .programaciones__tabla th:first-child, .programaciones__tabla td:first-child { width: 3rem; } .monitoreo__tabla thead th:first-child, .usuarios__tabla thead th:first-child, .backups__tabla thead th:first-child, .programaciones__tabla thead th:first-child, .historial__tabla thead th:first-child { background: var(--color-superficie-suave); z-index: 2; } .monitoreo__tabla tbody tr:nth-child(even) th:first-child, .monitoreo__tabla tbody tr:nth-child(even) td:first-child, .usuarios__tabla tbody tr:nth-child(even) th:first-child, .usuarios__tabla tbody tr:nth-child(even) td:first-child, .backups__tabla tbody tr:nth-child(even) th:first-child, .backups__tabla tbody tr:nth-child(even) td:first-child, .programaciones__tabla tbody tr:nth-child(even) th:first-child, .programaciones__tabla tbody tr:nth-child(even) td:first-child, .historial__tabla tbody tr:nth-child(even) th:first-child, .historial__tabla tbody tr:nth-child(even) td:first-child { background: color-mix(in srgb, var(--color-superficie-suave), var(--color-superficie) 50%); } .monitoreo__tabla tbody tr:hover th:first-child, .monitoreo__tabla tbody tr:hover td:first-child, .usuarios__tabla tbody tr:hover th:first-child, .usuarios__tabla tbody tr:hover td:first-child, .backups__tabla tbody tr:hover th:first-child, .backups__tabla tbody tr:hover td:first-child, .programaciones__tabla tbody tr:hover th:first-child, .programaciones__tabla tbody tr:hover td:first-child, .historial__tabla tbody tr:hover th:first-child, .historial__tabla tbody tr:hover td:first-child { background: var(--color-superficie-suave); } /* Primera fila (encabezado): fija al hacer scroll vertical, dentro del marco de la tabla (que ahora tiene alto acotado para que el scroll vertical exista de verdad). */ .monitoreo__tabla thead th, .usuarios__tabla thead th, .backups__tabla thead th, .programaciones__tabla thead th, .historial__tabla thead th { position: sticky; top: 0; z-index: 2; } /* La celda de la esquina (columna numérica del encabezado) debe ganarle a ambas filas/columnas fijas cuando el scroll es simultáneo en los dos sentidos. */ .monitoreo__tabla thead th:first-child, .usuarios__tabla thead th:first-child, .backups__tabla thead th:first-child, .programaciones__tabla thead th:first-child, .historial__tabla thead th:first-child { z-index: 3; }