/* ClientIA — portal de administración. CSS propio, sin frameworks: la app se sirve on-premise y no queremos dependencias externas (el CSP y la red del cliente pueden bloquear CDNs). Escala de espaciado de 4px. Temas: los colores son variables semánticas y se redefinen en [data-tema="oscuro"]. El tema lo fija un atributo en ; si el usuario nunca eligió, se sigue el del sistema operativo. */ :root { color-scheme: light; /* Marca (constante en ambos temas) */ --primary: #1f4e79; --primary-hover: #17395a; --primary-contraste: #ffffff; /* Superficies y texto */ --fondo: #f4f6f9; --superficie: #ffffff; --superficie-2: #f8fafc; --texto: #1a2027; --texto-suave: #5a6672; --borde: #dde3ea; --borde-fuerte: #c3ccd6; --hover-fila: #f7f9fb; /* Estados */ --exito: #146c43; --exito-fondo: #e8f5ee; --exito-borde: #bcdfcb; --alerta: #b45309; --alerta-fondo: #fef6e7; --alerta-borde: #f5d9a8; --peligro: #b02a37; --peligro-fondo: #fdecee; --peligro-borde: #f1c2c7; --info: #0b5ed7; --info-fondo: #e7f1ff; --info-borde: #b6d4fe; --radio: 10px; --radio-sm: 6px; --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1); --sombra-md: 0 4px 14px rgba(16, 24, 40, .1); --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; } /* Tema oscuro: superficies desaturadas (no invertidas) y azul de marca aclarado, porque el #1f4e79 original no llega al contraste mínimo sobre fondo oscuro. */ [data-tema="oscuro"] { color-scheme: dark; --primary: #4a90d9; --primary-hover: #6aa6e3; --primary-contraste: #0d1117; --fondo: #0f141a; --superficie: #171d25; --superficie-2: #1e252e; --texto: #e6edf3; --texto-suave: #9aa7b4; --borde: #2b333d; --borde-fuerte: #3b4652; --hover-fila: #1e252e; --exito: #56d364; --exito-fondo: #12251a; --exito-borde: #1f4a2c; --alerta: #e3a008; --alerta-fondo: #2a2010; --alerta-borde: #5a4210; --peligro: #ff7b72; --peligro-fondo: #2b1618; --peligro-borde: #5c2b2f; --info: #6aa6e3; --info-fondo: #10202f; --info-borde: #24405c; --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3); --sombra-md: 0 4px 14px rgba(0, 0, 0, .45); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--texto); background: var(--fondo); transition: background-color .15s ease, color .15s ease; } h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--esp-3); font-weight: 600; letter-spacing: -.01em; } h1 { font-size: 1.75rem; margin-bottom: var(--esp-5); } h2 { font-size: 1.125rem; } h3 { font-size: 1rem; } p { margin: 0 0 var(--esp-3); } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radio-sm); } /* ---------- Encabezado ---------- */ header { background: var(--primary); color: var(--primary-contraste); box-shadow: var(--sombra); } header nav { max-width: 1180px; margin: 0 auto; padding: 0 var(--esp-5); display: flex; align-items: center; gap: var(--esp-5); min-height: 60px; flex-wrap: wrap; } .marca { color: var(--primary-contraste); font-weight: 600; font-size: 1.0625rem; } .marca:hover { text-decoration: none; opacity: .9; } header nav ul { list-style: none; display: flex; gap: var(--esp-1); margin: 0; padding: 0; flex: 1; } header nav ul a { color: var(--primary-contraste); opacity: .88; padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-sm); display: block; font-size: .9375rem; line-height: 28px; } header nav ul a:hover { background: rgba(127, 127, 127, .22); opacity: 1; text-decoration: none; } .usuario { display: flex; align-items: center; gap: var(--esp-3); font-size: .875rem; } .usuario a { color: var(--primary-contraste); opacity: .92; } .chip { background: rgba(127, 127, 127, .25); border: 1px solid rgba(127, 127, 127, .35); padding: 2px var(--esp-2); border-radius: 999px; font-size: .75rem; font-weight: 500; } .salir, .btn-tema { background: transparent; border: 1px solid rgba(127, 127, 127, .45); color: var(--primary-contraste); padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-sm); cursor: pointer; font: inherit; font-size: .875rem; min-height: 36px; transition: background .15s ease; } .salir:hover, .btn-tema:hover { background: rgba(127, 127, 127, .22); } .btn-tema { min-width: 40px; } /* ---------- Contenido ---------- */ main { max-width: 1180px; margin: 0 auto; padding: var(--esp-6) var(--esp-5) var(--esp-7); } section { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--esp-5); box-shadow: var(--sombra); } section > h2:first-child { margin-top: 0; } fieldset { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: var(--esp-4); margin: 0 0 var(--esp-4); } legend { font-weight: 600; font-size: .8125rem; padding: 0 var(--esp-2); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; } /* ---------- Formularios ---------- */ .campo { margin-bottom: var(--esp-4); max-width: 560px; } label { display: block; font-weight: 500; font-size: .875rem; margin-bottom: var(--esp-1); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: 10px var(--esp-3); font: inherit; font-size: 1rem; /* 16px evita el zoom automático en iOS */ color: var(--texto); background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); min-height: 44px; transition: border-color .15s ease, box-shadow .15s ease; } input:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--primary); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); } input:disabled { background: var(--superficie-2); color: var(--texto-suave); cursor: not-allowed; } input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin-right: var(--esp-2); accent-color: var(--primary); vertical-align: -3px; } label:has(input[type="checkbox"]) { font-weight: 400; display: flex; align-items: center; cursor: pointer; } .nota, .ayuda { display: block; font-size: .8125rem; color: var(--texto-suave); margin-top: var(--esp-1); line-height: 1.45; } .ayuda { margin-bottom: var(--esp-4); max-width: 70ch; } /* .interruptor queda afuera: es un botón pero se dibuja como un switch, no como un botón. */ button[type="submit"]:not(.salir):not(.interruptor), .btn { background: var(--primary); color: var(--primary-contraste); border: 1px solid var(--primary); padding: 10px var(--esp-5); border-radius: var(--radio-sm); font: inherit; font-size: .9375rem; font-weight: 500; min-height: 44px; cursor: pointer; transition: background .15s ease; } button[type="submit"]:not(.salir):not(.interruptor):hover, .btn:hover { background: var(--primary-hover); } button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; } /* Botones secundarios dentro de tablas (activar/desactivar, resetear). */ table button:not(.interruptor), .btn-sec { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); padding: 6px var(--esp-3); font: inherit; font-size: .8125rem; min-height: 34px; cursor: pointer; } table button:not(.interruptor):hover, .btn-sec:hover { background: var(--superficie-2); border-color: var(--primary); } /* ---------- Mensajes ---------- */ .mensaje, .error, .exito, .aviso { padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-sm); margin-bottom: var(--esp-4); font-size: .9375rem; border: 1px solid transparent; } .mensaje, .exito { background: var(--exito-fondo); border-color: var(--exito-borde); color: var(--exito); } .error { background: var(--peligro-fondo); border-color: var(--peligro-borde); color: var(--peligro); } .aviso { background: var(--alerta-fondo); border-color: var(--alerta-borde); color: var(--alerta); } /* ---------- Tablas ---------- */ table { width: 100%; border-collapse: collapse; font-size: .9375rem; } th { text-align: left; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); padding: var(--esp-3); border-bottom: 1px solid var(--borde); white-space: nowrap; } td { padding: var(--esp-3); border-bottom: 1px solid var(--borde); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--hover-fila); } td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; } .tabla-scroll, .scroll-x { overflow-x: auto; } /* ---------- KPIs ---------- */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--esp-4); margin-bottom: var(--esp-5); } .kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--esp-4) var(--esp-5); box-shadow: var(--sombra); /* Franja de color que identifica la familia del dato de un vistazo. */ border-left: 4px solid var(--primary); } .kpi .rotulo { font-size: .8125rem; color: var(--texto-suave); font-weight: 500; } .kpi .valor { font-size: 2rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: var(--esp-1); } .kpi .detalle { font-size: .8125rem; color: var(--texto-suave); margin-top: var(--esp-1); } .kpi.exito { border-left-color: var(--exito); } .kpi.alerta { border-left-color: var(--alerta); } .kpi.peligro { border-left-color: var(--peligro); } .kpi.info { border-left-color: var(--info); } /* ---------- Chat (conversaciones) ---------- */ .chat { display: flex; flex-direction: column; gap: var(--esp-3); background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--esp-4); max-height: 70vh; overflow-y: auto; } .burbuja { max-width: min(78%, 640px); padding: var(--esp-3) var(--esp-4); border-radius: 14px; font-size: .9375rem; /* Los mensajes traen saltos de línea y listados: se respetan tal cual los ve el cliente. */ white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--sombra); } /* Del cliente final: alineadas a la izquierda, superficie neutra. */ .burbuja.cliente { align-self: flex-start; background: var(--superficie); border: 1px solid var(--borde); border-bottom-left-radius: 4px; } /* Del asistente: a la derecha y con el color de marca, como en cualquier chat. */ .burbuja.asistente { align-self: flex-end; background: var(--primary); color: var(--primary-contraste); border-bottom-right-radius: 4px; } /* Llamadas a herramientas: no son parte del diálogo, se muestran discretas y centradas. */ .burbuja.herramienta { align-self: center; background: transparent; border: 1px dashed var(--borde-fuerte); color: var(--texto-suave); font-size: .8125rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: none; max-width: 90%; } .burbuja .hora { display: block; font-size: .6875rem; opacity: .75; margin-top: var(--esp-1); } .burbuja.asistente .hora { text-align: right; } .separador-fecha { align-self: center; font-size: .75rem; color: var(--texto-suave); background: var(--superficie); border: 1px solid var(--borde); padding: 2px var(--esp-3); border-radius: 999px; } /* ---------- Login ---------- */ body.login { display: grid; place-items: center; min-height: 100dvh; padding: var(--esp-4); background: var(--fondo); } .tarjeta-login { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-md); padding: var(--esp-6); width: 100%; max-width: 400px; } .tarjeta-login h1 { font-size: 1.5rem; margin-bottom: var(--esp-1); } .tarjeta-login .subtitulo { color: var(--texto-suave); font-size: .9375rem; margin-bottom: var(--esp-5); } .tarjeta-login .campo { max-width: none; } .tarjeta-login button[type="submit"] { width: 100%; margin-top: var(--esp-2); } /* ---------- Responsive ---------- */ @media (max-width: 720px) { header nav { padding: var(--esp-3) var(--esp-4); gap: var(--esp-3); } header nav ul { order: 3; width: 100%; overflow-x: auto; } main { padding: var(--esp-4) var(--esp-4) var(--esp-6); } section { padding: var(--esp-4); } h1 { font-size: 1.375rem; } .burbuja { max-width: 88%; } } /* Interruptor de encendido del asistente (Mis asistentes). Es un