/* ========================================================================== 0. VARIABLES DE TEMA (claro/oscuro) El acento de marca (azul) no cambia entre temas -- lo que cambia son las superficies (fondo de página/tarjeta/sidebar), los bordes y el texto. El toggle (botón sol/luna en el header) alterna [data-theme="dark"] en ; ver components/header.php y admin/components/navbar.php para el botón, y el snippet inline en el de cada página que evita el parpadeo de tema al cargar. ========================================================================== */ :root { --bg-page: #f8f8f8; --bg-card: #ffffff; --bg-sidebar: #ffffff; --bg-surface-alt: #fcfcfc; --bg-hover: #f1f2fb; --text-primary: #333333; --text-heading: #444444; --text-secondary: #666666; --text-muted: #888888; --border-color: #d1d1d1; --border-color-soft: #e5e7eb; --hover-sweep: #c1c1c1; --accent: #007bff; --accent-2: #0069d9; --accent-soft: rgba(0, 123, 255, 0.12); --accent-soft-text: #0062cc; --radius-card: 16px; --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.05); } :root[data-theme="dark"] { --bg-page: #1c1a17; --bg-card: #26221d; --bg-sidebar: #211e1a; --bg-surface-alt: #2c2822; --bg-hover: #322d2a; --text-primary: #f1efec; --text-heading: #f1efec; --text-secondary: #a9a29a; --text-muted: #8a8377; --border-color: #3a352e; --border-color-soft: #3a352e; --hover-sweep: #3a352e; --accent-soft: rgba(0, 123, 255, 0.18); --accent-soft-text: #6cb2ff; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35); } /* View Transitions: crossfade nativo entre cargas de página (navegadores Chromium; en el resto simplemente no hace nada, no rompe). El toggle de tema usa document.startViewTransition() en JS (ver components/header.php y admin/components/navbar.php) para animar el cambio claro/oscuro. */ @view-transition { navigation: auto; } /* ========================================================================== 1. RESET Y TIPOGRAFÍA GLOBAL ========================================================================== */ * { box-sizing: border-box; font-family: "Archivo", sans-serif; } html, body { width: 100%; max-width: 100%; overflow-x: hidden; background-color: var(--bg-page); color: var(--text-primary); } h1 { font-weight: 900; font-size: 3em; } /* ========================================================================== 2. SHELL COMPARTIDO (header + sidebar + main + menu-toggle) Usado por todas las páginas con sidebar: /casos, /casos_u, /encargados, /fondos, /funcionarios, /oficios, /plazos, /recomendaciones, /reparaciones, /reparaciones-dictamenes, /sentencias, /correlativos, /nuevo-correlativo, /perfil, / (raíz). Ancho de sidebar unificado a 20% (mayoría de páginas). .main usa flex:1 en vez de un ancho fijo, así se adapta automáticamente al ancho real del sidebar sin que ambos números tengan que "coincidir" a mano. El padding u overflow específico de cada página vive en su propio wrapper de contenido (.table-container, .profile-container, .form-container, etc.), no aquí. ========================================================================== */ body { margin: 0; background-color: var(--bg-page); display: flex; flex-direction: column; min-height: 100vh; } .app { display: flex; flex-direction: row; flex: 1; } .header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: var(--bg-card); padding: 10px; border-bottom: var(--border-color) 1px solid; } .header h2 { margin: 0; font-size: 2em; font-weight: 900; color: var(--text-heading); } .header h5 { margin: 0; color: var(--text-secondary); } .sidebar { width: 20%; background-color: var(--bg-sidebar); border-right: var(--border-color) 1px solid; padding: 10px; position: sticky; height: 100%; transition: transform 0.3s, width 0.3s; } .sidebar.hidden { transform: translateX(-100%); width: 0; padding: 0; overflow: hidden; } .sidebar a { position: relative; display: inline-block; text-decoration: none; color: var(--text-heading); width: 100%; padding: 5px; font-weight: 600; transition: 0.1s; } .sidebar a::before { position: absolute; inset: 0; z-index: -1; content: ""; background: var(--hover-sweep); transition: transform 0.3s; transform-origin: right top; transform: scale(0, 1); } .sidebar a:hover { color: var(--text-primary); } .sidebar a:hover::before { transform-origin: left top; transform: scale(1, 1); } .sidebar-buttons { display: flex; flex-direction: column; } .sidebar-header { border-bottom: var(--border-color) 1px solid; margin-top: 10px; margin-bottom: 10px; } .sidebar-header h3 { margin: 0; color: var(--text-heading); padding-bottom: 10px; font-size: 1.6em; line-height: 10px; } .main { flex: 1; min-width: 0; transition: width 0.3s; } .main.expanded { width: 95%; } .menu-toggle { position: absolute; bottom: 20px; left: 20px; z-index: 1001; background: #444444; border: var(--border-color) 1px solid; width: 50px; height: 50px; border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 4px 8px rgba(50, 50, 50, 0.3); transition: all 0.3s; } .menu-toggle:hover { box-shadow: 0 6px 12px rgba(50, 50, 50, 0.7); } .menu-toggle span { width: 24px; height: 3px; background: #ffffff; border-radius: 2px; transition: all 0.3s; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; } .sidebar-overlay.active { display: block; } /* Botón de alternar tema claro/oscuro (usado por components/header.php y admin/components/navbar.php) */ .theme-toggle { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-heading); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; transition: all 0.2s ease; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .fa-exclamation-triangle { color: orangered; font-size: 15px; } /* Sidebar deslizable en móvil (drawer) con overlay */ @media (max-width: 968px) { .app { flex-direction: column; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 280px; z-index: 1000; transform: translateX(-100%); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); } .sidebar.active { transform: translateX(0); } .sidebar.hidden { transform: translateX(-100%); } .main { width: 100% !important; } .menu-toggle { display: flex; } .sidebar-overlay.active { display: block; } } @media (min-width: 969px) { .menu-toggle { display: flex; } .sidebar-overlay { display: none !important; } } /* ========================================================================== 3. LISTADOS Y TABLAS COMPARTIDOS Usado por casi todas las páginas de listado (tabla + popup de detalle). ========================================================================== */ .cr-wrapper { display: flex; flex-direction: column; width: fit-content; background: var(--bg-card); padding: 15px; } .table-container { background: var(--bg-card); padding: 20px; border-radius: var(--radius-card); border: 1px solid var(--border-color); box-shadow: var(--shadow-card); width: 100%; } .cr-search { margin-bottom: 15px; padding: 8px; width: 100%; max-width: 350px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); } /* Botón "Buscar" junto al .cr-search de cada listado. Antes duplicado inline o en el