/* ========================================================================== Memoria Legal — Visual Foundation Implementación de diseño.md sobre Bootstrap 5. El documento de diseño está escrito para Next.js + Tailwind; aquí los mismos tokens y reglas se aplican sobre Bootstrap redefiniendo sus variables CSS. ========================================================================== */ :root { /* --- Fondos ------------------------------------------------------------ */ --background: #f6f3ec; /* marfil cálido */ --card: #ffffff; --sidebar-bg: #1a3a6b; /* institucional: NUNCA cambia */ /* --- Textos ------------------------------------------------------------ */ --foreground: #1a1a2e; --warm-text-secondary: #736c60; /* gris cálido, no frío */ --muted-foreground: var(--warm-text-secondary); /* --- Bordes ------------------------------------------------------------ */ --warm-border: #e8e1d4; --border: var(--warm-border); /* --- Acción y marca ---------------------------------------------------- */ --action-blue: #2563a8; --action-blue-hover: #4a90d9; --gold: #c9a84c; /* SOLO el logo de Memoria Legal */ /* --- Estados / semáforos ----------------------------------------------- */ --state-urgent: #dc2626; --state-warning: #d97706; --state-success: #16a34a; --state-info: #2563a8; /* --- Series de gráficos (modo claro) ------------------------------------ Derivadas del azul institucional y de los estados: ningún color nuevo, y el dorado queda reservado al logotipo. */ --chart-claro-1: var(--action-blue); --chart-claro-2: var(--state-success); --chart-claro-3: var(--state-warning); --chart-claro-4: var(--action-blue-hover); --chart-claro-5: #1a3a6b; /* navy institucional */ --chart-claro-6: #7a9cc6; /* azul claro derivado */ --chart-claro-7: var(--warm-text-secondary); /* --- Radios ------------------------------------------------------------ */ --radius: 0.25rem; /* 4px: botones, inputs */ --radius-card: 6px; /* excepción documentada: cards */ /* --- Tipografía -------------------------------------------------------- */ --font-display: "Cormorant Garamond", Georgia, serif; --font-heading: "Playfair Display", Georgia, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* --- Estructura -------------------------------------------------------- */ --sidebar-ancho: 260px; --navbar-alto: 56px; } /* -------------------------------------------------------------------------- Modo Oscuro Navy (Enterprise) Reservado para el Panel Gerencial (/dashboard/metricas en el diseño original). Esa pantalla todavía no existe en esta aplicación: los tokens quedan definidos para cuando se construya. Se activa aplicando la clase `.tema-navy` al contenedor de la ruta, nunca al global. -------------------------------------------------------------------------- */ .tema-navy { --navy-deep: #0a0b0d; --navy-surface: #111318; --navy-elevated: #1a1d25; --navy-border: rgba(255, 255, 255, 0.06); --ivory: #e8e2d9; --ivory-muted: #c8bfb0; --text-muted: #6b7280; /* Aliases: en este modo el gold sí es color de acento. */ --background: var(--navy-deep); --foreground: var(--ivory); --card: var(--navy-surface); --muted-foreground: var(--ivory-muted); --border: var(--navy-border); /* Series de gráficos */ --chart-1: var(--gold); --chart-2: oklch(0.72 0.17 160); --chart-3: oklch(0.68 0.18 240); --chart-4: oklch(0.75 0.16 55); --chart-5: oklch(0.65 0.20 310); background-color: var(--navy-deep); color: var(--ivory); } /* ========================================================================== Puente con Bootstrap: se redefinen sus variables para que los componentes nativos adopten la paleta sin reescribir cada clase. ========================================================================== */ :root { --bs-body-bg: var(--background); --bs-body-color: var(--foreground); --bs-body-font-family: var(--font-sans); --bs-border-color: var(--border); --bs-border-radius: var(--radius); --bs-border-radius-sm: 2px; --bs-border-radius-lg: var(--radius-card); --bs-border-radius-xl: var(--radius-card); --bs-border-radius-2xl: var(--radius-card); --bs-secondary-color: var(--muted-foreground); --bs-secondary-bg: #efeae0; --bs-tertiary-bg: #f1ede4; --bs-emphasis-color: var(--foreground); --bs-link-color: var(--action-blue); --bs-link-hover-color: var(--action-blue-hover); --bs-primary: var(--action-blue); --bs-primary-rgb: 37, 99, 168; --bs-danger: var(--state-urgent); --bs-warning: var(--state-warning); --bs-success: var(--state-success); --bs-info: var(--state-info); --bs-code-color: var(--action-blue); --bs-font-monospace: var(--font-mono); } body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 0.9375rem; -webkit-font-smoothing: antialiased; } /* ========================================================================== Tipografía — tres familias con rol exclusivo ========================================================================== */ h1, .titulo-pagina, .font-display { font-family: var(--font-display); font-weight: 400; /* light, según diseño */ letter-spacing: 0.01em; font-size: clamp(1.5rem, 2.5vw, 2rem); /* mínimo 24px */ color: var(--foreground); line-height: 1.2; } /* `.titulo-pagina` gana a las utilidades .h1-.h6 de Bootstrap, que de otro modo reducirían el h1 por debajo del mínimo de 24px que fija el diseño. */ h1.titulo-pagina { font-size: clamp(1.5rem, 2.5vw, 2rem); } h2, h3, h4, h5, h6, .font-heading { font-family: var(--font-heading); font-weight: 500; color: var(--foreground); } h5, h6 { font-weight: 500; } /* Nunca serif en densidad alta: tablas, formularios y navegación. */ table, .form-label, .form-control, .form-select, .btn, .nav-link, .badge, .breadcrumb, .dropdown-menu, .modal-title, .card-header h2, .card-header h3 { font-family: var(--font-sans); } .modal-title { font-weight: 600; font-size: 1rem; } /* Labels y badges de sección: versalitas espaciadas. */ .etiqueta-seccion { font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 600; } @media (min-width: 576px) { .etiqueta-seccion { font-size: 10px; letter-spacing: 0.2em; } } code, .font-mono { font-family: var(--font-mono); font-size: 0.875em; color: var(--action-blue); } /* ========================================================================== Sidebar institucional — reglas inamovibles ========================================================================== */ .app-sidebar { width: var(--sidebar-ancho); background-color: var(--sidebar-bg) !important; border-right: none !important; } @media (min-width: 992px) { .app-sidebar { position: fixed; top: var(--navbar-alto); bottom: 0; left: 0; overflow-y: auto; z-index: 1020; } .app-main { margin-left: var(--sidebar-ancho); } } .app-sidebar .offcanvas-header { color: #ffffff; } .app-sidebar .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Texto de navegación: nunca por debajo de 0.82 de opacidad. */ .app-sidebar .nav-link { color: rgba(255, 255, 255, 0.82); border-radius: var(--radius); font-weight: 400; transition: background-color 0.12s ease, color 0.12s ease; } .app-sidebar .nav-link:hover { background-color: rgba(255, 255, 255, 0.08); color: #ffffff; } .app-sidebar .nav-link.active { background-color: var(--action-blue); color: #ffffff; font-weight: 600; } .app-sidebar .nav-link.active i { color: #ffffff; } .sidebar-grupo { font-family: var(--font-sans); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.55); padding: 0.85rem 0.75rem 0.3rem; } @media (min-width: 576px) { .sidebar-grupo { font-size: 10px; letter-spacing: 0.2em; } } /* ========================================================================== Barra superior ========================================================================== */ .app-navbar { background-color: var(--sidebar-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.08); min-height: var(--navbar-alto); border-radius: 0; } /* El logotipo es el ÚNICO lugar donde aparece el gold. */ .logo-marca { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; color: var(--gold); text-decoration: none; font-size: 1.05rem; } .logo-marca:hover, .logo-marca:focus { color: var(--gold); } .logo-marca .bi { color: var(--gold); } .app-navbar .btn, .app-navbar .dropdown-toggle { color: rgba(255, 255, 255, 0.86); } .app-navbar .btn:hover { color: #ffffff; } /* ========================================================================== Cards ========================================================================== */ .card { background-color: var(--card); border: 1px solid var(--warm-border); border-radius: var(--radius-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .card-header { background-color: transparent; border-bottom: 1px solid var(--warm-border); font-family: var(--font-heading); } /* ========================================================================== Botones — 4px de radio, sin gradientes ========================================================================== */ .btn { border-radius: var(--radius); font-weight: 500; background-image: none; } .btn-primary { background-color: var(--action-blue); border-color: var(--action-blue); color: #ffffff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--action-blue-hover); border-color: var(--action-blue-hover); color: #ffffff; } .btn-outline-primary { border-color: var(--action-blue); color: var(--action-blue); background-color: transparent; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: var(--action-blue); border-color: var(--action-blue); color: #ffffff; } .btn-outline-secondary { border-color: var(--warm-border); color: var(--muted-foreground); } .btn-outline-secondary:hover { background-color: var(--bs-secondary-bg); border-color: var(--muted-foreground); color: var(--foreground); } .btn-danger, .btn-outline-danger:hover { background-color: var(--state-urgent); border-color: var(--state-urgent); } .btn-outline-danger { color: var(--state-urgent); border-color: var(--state-urgent); } /* ========================================================================== Formularios ========================================================================== */ .form-control, .form-select { border-radius: var(--radius); border-color: var(--warm-border); background-color: var(--card); color: var(--foreground); } .form-control:focus, .form-select:focus { border-color: var(--action-blue); box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.12); } .form-label { color: var(--foreground); font-weight: 500; } .form-text { color: var(--muted-foreground); } .input-group-text { background-color: var(--bs-secondary-bg); border-color: var(--warm-border); color: var(--muted-foreground); border-radius: var(--radius); } .form-check-input:checked { background-color: var(--action-blue); border-color: var(--action-blue); } .form-check-input:focus { border-color: var(--action-blue); box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.12); } /* ========================================================================== Badges — 2px, versalitas, sin serif ========================================================================== */ .badge { border-radius: 2px; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.04em; padding: 0.3em 0.55em; } .text-bg-primary { background-color: var(--action-blue) !important; color: #fff !important; } .text-bg-success { background-color: var(--state-success) !important; color: #fff !important; } .text-bg-danger { background-color: var(--state-urgent) !important; color: #fff !important; } .text-bg-warning { background-color: var(--state-warning) !important; color: #fff !important; } .text-bg-info { background-color: var(--state-info) !important; color: #fff !important; } .text-bg-secondary { background-color: var(--bs-secondary-bg) !important; color: var(--muted-foreground) !important; } .text-bg-light { background-color: var(--background) !important; color: var(--muted-foreground) !important; border: 1px solid var(--warm-border); } /* ========================================================================== Tablas ========================================================================== */ .table { --bs-table-bg: transparent; --bs-table-color: var(--foreground); --bs-table-border-color: var(--warm-border); --bs-table-hover-bg: rgba(37, 99, 168, 0.04); --bs-table-hover-color: var(--foreground); font-family: var(--font-sans); } .table > thead { --bs-table-bg: transparent; } .table > thead th { background-color: transparent; color: var(--muted-foreground); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid var(--warm-border); white-space: nowrap; } .table > tbody td { vertical-align: middle; border-color: var(--warm-border); } .table-danger { --bs-table-bg: rgba(220, 38, 38, 0.06); --bs-table-color: var(--foreground); } .tabla-acciones { white-space: nowrap; width: 1%; } /* Las celdas de texto largo se truncan para que la columna de acciones no quede empujada fuera del contenedor en pantallas medianas. */ .celda-sumilla { max-width: 26rem; } .celda-partes { max-width: 16rem; } @media (max-width: 1400px) { .celda-sumilla { max-width: 18rem; } .celda-partes { max-width: 12rem; } } /* DataTables */ .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--warm-border); border-radius: var(--radius); padding: 0.25rem 0.5rem; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { color: var(--muted-foreground); font-size: 0.85rem; } .page-link { color: var(--action-blue); border-color: var(--warm-border); border-radius: var(--radius) !important; } .active > .page-link { background-color: var(--action-blue); border-color: var(--action-blue); color: #ffffff; } /* ========================================================================== Navegación por pestañas ========================================================================== */ .nav-tabs { border-bottom-color: var(--warm-border); } .nav-tabs .nav-link { color: var(--muted-foreground); border: 1px solid transparent; border-radius: var(--radius) var(--radius) 0 0; font-weight: 500; } .nav-tabs .nav-link:hover { border-color: transparent transparent var(--warm-border); color: var(--foreground); } .nav-tabs .nav-link.active { color: var(--action-blue); background-color: var(--card); border-color: var(--warm-border) var(--warm-border) var(--card); font-weight: 600; } .tab-content { background-color: var(--card); border-color: var(--warm-border) !important; border-radius: 0 0 var(--radius-card) var(--radius-card); } /* ========================================================================== Modales, alertas y listas ========================================================================== */ .modal-content { background-color: var(--card); border: 1px solid var(--warm-border); border-radius: var(--radius-card); } .modal-header, .modal-footer { border-color: var(--warm-border); } .alert { border-radius: var(--radius); border-width: 1px; } .alert-danger { background-color: rgba(220, 38, 38, 0.07); border-color: rgba(220, 38, 38, 0.25); color: #991b1b; } .alert-warning { background-color: rgba(217, 119, 6, 0.08); border-color: rgba(217, 119, 6, 0.25); color: #92400e; } .alert-secondary { background-color: var(--bs-secondary-bg); border-color: var(--warm-border); color: var(--muted-foreground); } .list-group-item { background-color: var(--card); border-color: var(--warm-border); color: var(--foreground); } .breadcrumb { --bs-breadcrumb-divider-color: var(--muted-foreground); font-size: 0.8125rem; } .breadcrumb-item.active { color: var(--muted-foreground); } .dropdown-menu { border-color: var(--warm-border); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .dropdown-item:active { background-color: var(--action-blue); } /* ========================================================================== Pantalla de acceso ========================================================================== */ .pantalla-login { min-height: 100vh; display: flex; align-items: center; background-color: var(--sidebar-bg); /* institucional, sin gradiente */ } .tarjeta-login { max-width: 420px; width: 100%; margin: auto; } .login-marca { font-family: var(--font-display); color: var(--gold); letter-spacing: 0.08em; font-weight: 600; } .login-lema { color: rgba(255, 255, 255, 0.72); font-size: 0.8125rem; } /* ========================================================================== Indicadores y estados ========================================================================== */ .tarjeta-indicador .indicador-valor { font-family: var(--font-heading); font-weight: 500; font-size: 2.25rem; line-height: 1; } .tarjeta-indicador { transition: border-color 0.12s ease, box-shadow 0.12s ease; } a.tarjeta-indicador:hover { border-color: var(--action-blue); box-shadow: 0 2px 6px rgba(37, 99, 168, 0.12); } /* Conserva los saltos de línea de los datos importados. */ .texto-multilinea { white-space: pre-line; } /* Metadatos y marcas de tiempo: un escalón por debajo de .small. */ .texto-meta { font-size: 0.78rem; color: var(--muted-foreground); } /* Utilidades de color alineadas a la paleta, para las tarjetas del panel. */ .text-institucional { color: var(--sidebar-bg) !important; } .border-institucional { border-color: var(--sidebar-bg) !important; } .texto-urgente { color: var(--state-urgent); font-weight: 600; } .texto-alerta { color: var(--state-warning); font-weight: 600; } .texto-exito { color: var(--state-success); font-weight: 600; } .texto-info { color: var(--state-info); } /* Compatibilidad con las clases usadas en las plantillas de plazos. */ .dias-vencido { color: var(--state-urgent); font-weight: 600; } .dias-urgente { color: var(--state-warning); font-weight: 600; } .text-secondary { color: var(--muted-foreground) !important; } /* Indicador de actividad de HTMX */ .htmx-indicator { opacity: 0; transition: opacity 0.2s; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* SweetAlert2 alineado con la paleta */ .swal2-popup { border-radius: var(--radius-card); font-family: var(--font-sans); } .swal2-title { font-family: var(--font-heading); font-weight: 500; } .swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel { border-radius: var(--radius) !important; } /* ========================================================================== Módulo de consultas (chat) ========================================================================== */ #hilo-consulta { max-height: 60vh; overflow-y: auto; } .mensaje-abogado, .mensaje-asistente { max-width: 78%; padding: 0.6rem 0.85rem; border-radius: var(--radius-card); font-size: 0.9rem; line-height: 1.5; } /* La consulta del abogado: azul de acción, alineada a la derecha. */ .mensaje-abogado { background-color: var(--action-blue); color: #ffffff; white-space: pre-line; } .mensaje-abogado .texto-meta { color: rgba(255, 255, 255, 0.72); } /* La respuesta del asistente: tarjeta clara, alineada a la izquierda. */ .mensaje-asistente { background-color: var(--card); border: 1px solid var(--warm-border); color: var(--foreground); } .mensaje-asistente summary { cursor: pointer; } .mensaje-asistente summary::marker { color: var(--muted-foreground); }