/* WebRadar — panel admin
* Tema claro, moderno, minimalista. Indigo como acento. Inter como tipografía.
* Todas las clases conservan los mismos nombres del tema anterior para no
* romper plantillas existentes; solo cambian los valores visuales.
*/
:root {
--bg: #f7f8fb; /* lienzo, gris muy frío */
--panel: #ffffff; /* tarjetas y barra superior */
--panel-soft: #f3f5f9; /* inputs / hover sutil */
--text: #1a2030; /* texto principal — gris muy oscuro, no negro */
--text-strong: #0c1322; /* títulos */
--muted: #6b7384; /* texto secundario, etiquetas, fechas */
--muted-2: #9aa0ad; /* hints todavía más bajos */
--accent: #6366f1; /* indigo — joven, moderno, distintivo */
--accent-soft: #eef0ff; /* fondo botón fantasma / focus ring */
--accent-strong: #4f52e0;
--danger: #ef4444;
--danger-soft: #fef2f2;
--warning: #f59e0b;
--warning-soft: #fffbeb;
--ok: #10b981;
--ok-soft: #ecfdf5;
--border: #e6e8ef; /* bordes finos sobre blanco */
--border-strong: #d2d6e0;
--shadow-sm: 0 1px 2px rgba(15, 22, 32, 0.04);
--shadow-md: 0 4px 14px rgba(15, 22, 32, 0.06), 0 1px 2px rgba(15, 22, 32, 0.04);
--shadow-lg: 0 10px 30px rgba(15, 22, 32, 0.08);
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--text);
font-size: 14.5px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Barra superior ───────────────────────────────────────────────────── */
.top {
background: var(--panel);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: saturate(180%) blur(8px);
}
.top-inner {
max-width: 1080px;
margin: 0 auto;
padding: 14px 28px;
display: flex;
align-items: center;
justify-content: space-between;
}
.top .brand {
font-weight: 700;
letter-spacing: -0.01em;
font-size: 16px;
color: var(--text-strong);
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: opacity 120ms ease;
}
.top .brand:hover { opacity: 0.78; color: var(--text-strong); }
.top .brand-logo {
display: inline-block;
width: 22px;
height: 22px;
flex-shrink: 0;
}
/* Botón "Instalar app" en la barra superior (PWA). Aparece solo cuando el
navegador soporta instalación Y la app aún no está instalada. La
detección/handler vive en _layout_footer.php. */
.top nav {
display: flex;
gap: 4px;
align-items: center;
}
/* Estilo base de TODOS los enlaces del nav top — incluye usuario, logout,
instalar app. Misma altura, padding, font-size y border-radius. Solo
cambia el color base y el comportamiento de hover por variante. */
.top nav a {
color: var(--muted);
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
padding: 7px 12px;
border-radius: var(--radius-sm);
transition: background 120ms ease, color 120ms ease;
position: relative;
display: inline-flex;
align-items: center;
line-height: 1.4;
/* D-501.1: con el item "Imágenes" la barra tiene 8 enlaces; evitar que el
texto de un enlace se parta en 2 líneas en anchos ~800-1000px (la nav es
flex de una sola línea sin wrap). En móvil el drawer es columna → ok. */
white-space: nowrap;
}
.top nav a:hover {
color: var(--text-strong);
background: var(--panel-soft);
}
.top nav a.active,
.top nav a[aria-current="page"] {
color: var(--accent-strong);
background: var(--accent-soft);
font-weight: 600;
}
/* Usuario — hereda padding/altura del .top nav a base; solo se diferencia
por color levemente más sutil. El hover usa el mismo gris suave que el
resto. */
.top nav .who {
color: var(--muted);
}
.top nav .who:hover {
color: var(--text-strong);
background: var(--panel-soft);
}
.top nav a.logout {
color: var(--muted);
}
.top nav a.logout:hover {
color: var(--danger);
background: var(--danger-soft);
}
/* Instalar PWA — destacado en color primary pero MISMA altura/padding que
el resto del nav (hereda de .top nav a). Sin border (añadiría altura);
el destaque viene del color y un hover lleno. Hidden por defecto, lo
activa el JS de _layout_footer cuando tiene sentido mostrarlo. */
.top nav a.install-app {
color: var(--primary, #4f46e5);
font-weight: 600;
}
.top nav a.install-app:hover {
background: var(--primary, #4f46e5);
color: #fff;
}
.install-app[hidden] { display: none !important; }
/* ─── Hamburger (móvil) ──────────────────────────────────────────
Por defecto el botón está oculto. Se muestra en @media < 768px
(ver bloque responsive al final del archivo). Mismo patrón que las
demos generadas (plantillas/base/_shared/main.js + nav/simple.php).
──────────────────────────────────────────────────────────────── */
.top-hamburger {
display: none;
background: transparent;
border: 0;
padding: 8px;
cursor: pointer;
margin-left: auto;
/* Redondea el área del botón Y el tap highlight de iOS/Android (que
por defecto sigue el rect completo del elemento). Gris muy claro
en el flash al tocar — feedback sutil sin invadir. */
border-radius: 16px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.04);
}
/* Mantener fondo transparente en TODOS los estados — la regla global
`button:hover { background: var(--accent-strong) }` pisaría con su
especificidad si no la sobrescribimos explícitamente por estado.
Solo cambia la forma (span → X via transforms en .is-open). */
.top-hamburger:hover,
.top-hamburger:focus,
.top-hamburger:active,
.top-hamburger.is-open,
.top-hamburger.is-open:hover,
.top-hamburger.is-open:focus {
background: transparent;
border: 0;
box-shadow: none;
transform: none; /* anula el translateY(1px) global de button:active */
}
.top-hamburger:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.top-hamburger span {
display: block;
width: 24px;
height: 2.5px;
background: var(--text-strong);
border-radius: 2px;
margin: 5px 0;
transition: transform .25s ease, opacity .15s ease, background .15s ease;
transform-origin: center;
}
main {
max-width: 1080px;
margin: 28px auto;
padding: 0 28px;
}
/* ── Tipografía ───────────────────────────────────────────────────────── */
h1 {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--text-strong);
margin: 0 0 18px;
}
/* Cabecera de página unificada: h1 + icono SVG (estilo del panel admin, pero
un punto más grande y de trazo más grueso). Reutilizable en cualquier página: