/* Marca de GE para el panel: tipografía Poppins, azul #0054FF y logo.
   Se carga después del diseño de Django, así que reemplaza sus colores sin tocar el código del panel. */

/* ---- Tipografía Poppins, alojada en este mismo proyecto (carpeta fonts/) ---- */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
             src: url("fonts/Poppins-Regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
             src: url("fonts/Poppins-Medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600 700; font-style: normal; font-display: swap;
             src: url("fonts/Poppins-Bold.woff2") format("woff2"); }

/* ---- Colores de la marca. Django los guarda como variables, y aquí se cambian ---- */
:root {
  --primary: #0054FF;               /* azul principal de GE */
  --secondary: #0054FF;             /* fondo de la franja de arriba */
  --accent: #FFFFFF;                /* color del título de la franja */
  --link-fg: #0054FF;               /* enlaces */
  --link-hover-color: #0040C7;      /* enlaces al pasar el mouse */
  --link-selected-fg: #0040C7;
  --header-bg: #0054FF;
  --header-color: #FFFFFF;
  --header-branding-color: #FFFFFF;
  --header-link-color: #FFFFFF;
  --breadcrumbs-bg: #0040C7;        /* franja de la ruta de navegación */
  --breadcrumbs-fg: #D6E4FF;
  --breadcrumbs-link-fg: #FFFFFF;
  --button-bg: #0054FF;             /* botones principales */
  --button-hover-bg: #0040C7;
  --default-button-bg: #0040C7;
  --default-button-hover-bg: #0033A0;
  --object-tools-bg: #0054FF;
  --object-tools-hover-bg: #0040C7;
  --module-bg: #FFFFFF;
  --selected-row: #EAF1FF;
}

/* ---- Poppins en todo el panel ---- */
html, body, input, select, textarea, button, .button, .module caption, #header, #site-name {
  font-family: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body { font-size: 14px; }
h1, h2, h3 { font-weight: 600; }

/* ---- Logo y nombre en la franja de arriba ---- */
#header { align-items: center; }
#site-name { margin: 0; }
#site-name a.marca { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF;
                     text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: 0.01em; }
#site-name a.marca svg { width: 34px; height: 34px; flex: none; }
#site-name a.marca small { font-weight: 400; opacity: 0.9; font-size: 15px; }

/* ---- Pantalla de entrada: el logo un poco más grande ---- */
.login #header { justify-content: center; padding: 22px 20px; }
.login #site-name a.marca svg { width: 44px; height: 44px; }
.login #site-name a.marca { font-size: 22px; }

/* ---- Enlace "Resumen" de arriba ---- */
.enlace-resumen { color: #FFFFFF; font-weight: 600; margin-left: 24px; text-decoration: none; }
.enlace-resumen:hover { text-decoration: underline; }

/* ---- Franja de aviso de vencimientos (arriba en cada pantalla del panel) ---- */
.alerta-venc { background: #FFF4E5; color: #7A3E00; border: 1px solid #F5C98A; border-radius: 8px;
               padding: 10px 14px; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.alerta-venc.urgente { background: #FDECEA; color: #8A1C12; border-color: #F0A8A0; }
.alerta-venc a { margin-left: auto; font-weight: 600; text-decoration: underline; color: inherit; }

/* ---- Mensajes del panel: que no se corten por el borde derecho ----
   La clave temporal de un cliente se muestra en un mensaje largo; si la pantalla es angosta, el texto debe
   bajar a la línea siguiente en vez de quedar tapado. */
ul.messagelist li { overflow-wrap: anywhere; word-break: break-word; }