/* Tema del panel de Django (/admin/) con la identidad visual del sistema FRR.
   Solo redefine las variables y algunos componentes del admin; no cambia su HTML. */

:root,
html[data-theme="light"] {
  --primary: #0f4c5c;
  --secondary: #0a3742;
  --accent: #ffffff;
  --primary-fg: #ffffff;

  --body-fg: #17212b;
  --body-bg: #ffffff;
  --body-quiet-color: #4b5866;
  --body-medium-color: #33404c;
  --body-loud-color: #0b141c;

  --header-color: #d6e4e8;
  --header-branding-color: #ffffff;
  --header-bg: #0a3742;
  --header-link-color: #ffffff;

  --breadcrumbs-fg: #4b5866;
  --breadcrumbs-link-fg: #0f4c5c;
  --breadcrumbs-bg: #f3f5f7;

  --link-fg: #0f4c5c;
  --link-hover-color: #0a3742;
  --link-selected-fg: #0a3742;

  --hairline-color: #e6ebef;
  --border-color: #c3ccd5;

  --error-fg: #b42318;
  --message-info-bg: #e8f1f8;
  --message-success-bg: #e7f4ed;
  --message-warning-bg: #fdf3e1;
  --message-error-bg: #fdecea;

  --darkened-bg: #f7f9fa;
  --selected-bg: #e6f0f2;
  --selected-row: #eef6f7;

  --button-fg: #ffffff;
  --button-bg: #0f4c5c;
  --button-hover-bg: #0a3742;
  --default-button-bg: #0a3742;
  --default-button-hover-bg: #0f4c5c;
  --close-button-bg: #5b6573;
  --close-button-hover-bg: #33404c;
  --delete-button-bg: #b42318;
  --delete-button-hover-bg: #912018;

  --object-tools-fg: #ffffff;
  --object-tools-bg: #0f4c5c;
  --object-tools-hover-bg: #0a3742;

  --font-family-primary: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-family-monospace: "Cascadia Mono", "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --frr-fondo: #f3f5f7;
  --frr-sombra: 0 1px 2px rgba(16, 24, 40, .05);
  --frr-foco: 0 0 0 3px rgba(15, 76, 92, .35);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --primary: #6fb3c4;
    --secondary: #0a3742;
    --accent: #ffffff;
    --primary-fg: #ffffff;
    --body-fg: #e5ecef;
    --body-bg: #121a20;
    --body-quiet-color: #a6b4bd;
    --body-medium-color: #c9d4da;
    --body-loud-color: #ffffff;
    --header-bg: #07262e;
    --breadcrumbs-fg: #a6b4bd;
    --breadcrumbs-link-fg: #8ccbdb;
    --breadcrumbs-bg: #18232b;
    --link-fg: #8ccbdb;
    --link-hover-color: #b7e0ea;
    --link-selected-fg: #b7e0ea;
    --hairline-color: #26333c;
    --border-color: #3a4954;
    --error-fg: #f08a80;
    --message-info-bg: #16324a;
    --message-success-bg: #133a29;
    --message-warning-bg: #3d2d0c;
    --message-error-bg: #4a1a16;
    --darkened-bg: #18232b;
    --selected-bg: #1d3a42;
    --selected-row: #17313a;
    --button-bg: #1b6a7c;
    --button-hover-bg: #23849a;
    --default-button-bg: #23849a;
    --default-button-hover-bg: #1b6a7c;
    --object-tools-bg: #1b6a7c;
    --object-tools-hover-bg: #23849a;
    --frr-fondo: #0d1418;
  }
}

html[data-theme="dark"] {
  --primary: #6fb3c4;
  --secondary: #0a3742;
  --body-fg: #e5ecef;
  --body-bg: #121a20;
  --body-quiet-color: #a6b4bd;
  --body-medium-color: #c9d4da;
  --body-loud-color: #ffffff;
  --header-bg: #07262e;
  --breadcrumbs-fg: #a6b4bd;
  --breadcrumbs-link-fg: #8ccbdb;
  --breadcrumbs-bg: #18232b;
  --link-fg: #8ccbdb;
  --link-hover-color: #b7e0ea;
  --link-selected-fg: #b7e0ea;
  --hairline-color: #26333c;
  --border-color: #3a4954;
  --error-fg: #f08a80;
  --message-info-bg: #16324a;
  --message-success-bg: #133a29;
  --message-warning-bg: #3d2d0c;
  --message-error-bg: #4a1a16;
  --darkened-bg: #18232b;
  --selected-bg: #1d3a42;
  --selected-row: #17313a;
  --button-bg: #1b6a7c;
  --button-hover-bg: #23849a;
  --default-button-bg: #23849a;
  --default-button-hover-bg: #1b6a7c;
  --object-tools-bg: #1b6a7c;
  --object-tools-hover-bg: #23849a;
  --frr-fondo: #0d1418;
}

/* --- Estructura -------------------------------------------------------------- */
body { font-size: 0.9375rem; }
#container { background: var(--frr-fondo); }
#header {
  min-height: 60px;
  padding: 10px 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
#site-name a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.frr-logo {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255, 255, 255, .12); font: 700 .75rem/1 var(--font-family-monospace); letter-spacing: .04em;
}
.frr-subtitulo { display: block; font-size: .72rem; font-weight: 400; color: #9fbac2; }
#user-tools { font-size: .78rem; letter-spacing: .02em; text-transform: none; }
#user-tools a { border-bottom: 0; }
#user-tools a:hover { text-decoration: underline; color: #fff; }
.frr-volver {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px;
}

div.breadcrumbs {
  padding: 10px 24px; border-bottom: 1px solid var(--hairline-color);
  font-size: .8125rem;
}
div.breadcrumbs a { color: var(--breadcrumbs-link-fg); }

#content { padding: 24px; }
#content h1 { font-weight: 700; letter-spacing: -.01em; color: var(--body-loud-color); }

/* --- Barra lateral de navegación del admin ------------------------------------ */
#nav-sidebar { background: var(--body-bg); border-right: 1px solid var(--hairline-color); }
#nav-sidebar .module th, #nav-sidebar .module caption { font-weight: 600; }
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited { color: var(--link-fg); font-weight: 700; }
#nav-sidebar .current-model { background: var(--selected-row); }
.toggle-nav-sidebar { background: var(--body-bg); border-color: var(--hairline-color); color: var(--link-fg); }

/* --- Módulos, tablas y tarjetas ------------------------------------------------- */
.module {
  background: var(--body-bg); border: 1px solid var(--hairline-color);
  border-radius: 10px; box-shadow: var(--frr-sombra); overflow: hidden;
}
.module h2, .module caption, .inline-group h2 {
  background: var(--primary); color: #fff; font-weight: 600;
  font-size: .8125rem; letter-spacing: .03em; padding: 10px 12px;
}
.module h2 a, .module caption a.section { color: #fff; }
#changelist .results, .results { border-radius: 10px; overflow-x: auto; }
thead th, tfoot td {
  background: var(--darkened-bg); color: var(--body-quiet-color);
  font-weight: 600; letter-spacing: .03em; border-bottom: 1px solid var(--hairline-color);
}
thead th a:link, thead th a:visited { color: var(--body-quiet-color); }
#result_list tbody tr:hover { background: var(--selected-row); }
td, th { border-bottom-color: var(--hairline-color); }

#changelist-filter {
  background: var(--body-bg); border: 1px solid var(--hairline-color); border-radius: 10px;
  box-shadow: var(--frr-sombra); overflow: hidden;
}
#changelist-filter h2 { background: var(--primary); color: #fff; }
#changelist-filter li.selected a { color: var(--link-fg); font-weight: 600; }
#changelist #toolbar { background: transparent; border: 0; padding: 0 0 12px; }

/* --- Botones -------------------------------------------------------------------- */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 6px; font-weight: 600; padding: 9px 15px;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.button:focus-visible, input[type=submit]:focus-visible, a.button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--frr-foco);
}
.submit-row {
  background: var(--darkened-bg); border: 1px solid var(--hairline-color); border-radius: 10px;
}
.submit-row a.deletelink { border-radius: 6px; }
.object-tools a:link, .object-tools a:visited {
  border-radius: 999px; padding: 6px 14px; font-weight: 600; letter-spacing: .02em;
}
/* Los enlaces con icono (añadir, ver en el sitio) necesitan su espacio a la derecha. */
.object-tools a.addlink, .object-tools a.viewsitelink { padding-right: 30px; background-position: right 10px center; }

/* --- Formularios --------------------------------------------------------------- */
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number],
input[type=tel], input[type=search], textarea, select, .vTextField {
  border: 1px solid var(--border-color); border-radius: 6px; padding: 7px 10px;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
fieldset.module { margin-bottom: 20px; }
.form-row { border-bottom-color: var(--hairline-color); }
.errornote { border-radius: 8px; }
.errorlist li { border-radius: 6px; }

/* --- Mensajes ------------------------------------------------------------------- */
ul.messagelist li { border-radius: 8px; margin: 0 24px 10px; }

/* --- Inicio de sesión ----------------------------------------------------------- */
.login #container {
  border-radius: 14px; overflow: hidden; border: 0;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .3);
}
body.login {
  background: linear-gradient(160deg, #0a3742 0%, #0f4c5c 55%, #1b6a7c 100%);
}

/* =====================================================================
   Estructura FRR en el editor: barra lateral fija + barra superior blanca
   (solo con sesión iniciada y fuera de ventanas emergentes: body.frr-layout)
   ===================================================================== */
body.frr-layout { --frr-ancho: 264px; padding-left: var(--frr-ancho); background: var(--frr-fondo); }
body.frr-layout #container { min-width: 0; background: var(--frr-fondo); }

.frr-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--frr-ancho); z-index: 1000;
  background: #0a3742; color: #d6e4e8; display: flex; flex-direction: column; overflow-y: auto;
}
.frr-marca {
  display: flex; align-items: center; gap: 10px; padding: 18px 20px; color: #fff !important;
  text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.frr-marca b { display: block; font-size: .95rem; line-height: 1.2; }
.frr-marca small { display: block; font-size: .72rem; color: #9fbac2; }
.frr-nav { padding: 10px 12px 24px; display: flex; flex-direction: column; gap: 12px; }
.frr-nav-grupo h2 {
  background: none !important; color: #8fb0b9 !important; padding: 0 !important;
  font-size: .68rem !important; letter-spacing: .09em; text-transform: uppercase;
  margin: 8px 10px 6px; font-weight: 600;
}
.frr-nav-grupo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.frr-nav-grupo li { list-style: none; padding: 0; }
.frr-nav-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 6px;
  color: #d6e4e8 !important; text-decoration: none !important; font-size: .8125rem;
  transition: background-color .15s ease, color .15s ease;
}
.frr-nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff !important; }
.frr-nav-item[aria-current="page"] { background: #fff; color: #0a3742 !important; font-weight: 600; }
.frr-nav-item[aria-current="page"] .ico { color: #0f4c5c; }
.frr-sidebar .ico { width: 18px; height: 18px; flex: none; }
.frr-sidebar .ico-sm { width: 15px; height: 15px; }
.frr-sidebar-pie { margin-top: auto; padding: 14px 20px; font-size: .72rem; color: #8fb0b9;
  border-top: 1px solid rgba(255, 255, 255, .08); }

#header.frr-topbar {
  position: sticky; top: 0; z-index: 900; display: flex; align-items: center; gap: 16px;
  min-height: 60px; padding: 8px 24px; background: var(--body-bg); color: var(--body-fg);
  border-bottom: 1px solid var(--hairline-color); box-shadow: none; flex-wrap: wrap;
  flex-direction: row; justify-content: flex-start; text-align: left; height: auto; overflow: visible; flex-shrink: 0;
}
.frr-topbar .ico { width: 15px; height: 15px; vertical-align: -2px; }
.frr-migas { flex: 1; min-width: 0; }
.frr-migas ol.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
  background: none; color: var(--body-quiet-color); font-size: .8125rem; }
.frr-migas ol.breadcrumbs li { list-style: none; padding: 0; }
.frr-migas ol.breadcrumbs li + li::before { margin: 0 6px 0 0; }
.frr-migas a { color: var(--body-quiet-color) !important; text-decoration: none; }
.frr-migas a:hover { color: var(--link-fg) !important; text-decoration: underline; }
.frr-migas [aria-current] { color: var(--body-loud-color); font-weight: 600; }
.frr-usuario { display: flex; align-items: center; gap: 10px; font-size: .8125rem; }
.frr-usuario form { display: inline; margin: 0; }
.frr-boton-sec {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 6px;
  border: 1px solid var(--border-color); color: var(--body-fg) !important; text-decoration: none; font-weight: 600;
}
.frr-boton-sec:hover { border-color: var(--primary); color: var(--link-fg) !important; }
.frr-enlace {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 4px 6px;
  color: var(--body-quiet-color) !important; font: inherit; cursor: pointer; text-decoration: none;
  text-transform: none !important; letter-spacing: 0 !important; font-size: .8125rem !important;
}
.frr-enlace:hover { color: var(--link-fg) !important; text-decoration: underline; }
.frr-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--selected-bg); color: var(--link-fg); font-weight: 700; font-size: .8rem; }
.frr-topbar .theme-toggle svg { fill: var(--body-quiet-color); }
.frr-boton-menu { display: none; }
.frr-velo { display: none; }

body.frr-layout .main { display: block; }
body.frr-layout #content { padding: 24px; max-width: 1320px; }
body.frr-layout #footer { display: none; }
/* Tablas anchas (inlines, listados) se desplazan dentro de su caja, no la página. */
body.frr-layout .inline-related.tabular, body.frr-layout #changelist .results { overflow-x: auto; max-width: 100%; }
body.frr-layout .submit-row { display: flex; flex-wrap: wrap; gap: 8px; }
body.frr-layout #content-main, body.frr-layout .colM { min-width: 0; max-width: 100%; }
body.frr-layout fieldset, body.frr-layout .inline-group { min-width: 0; max-width: 100%; }

@media (max-width: 1024px) {
  body.frr-layout { padding-left: 0; }
  .frr-sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
  body.frr-menu-abierto .frr-sidebar { transform: none; }
  body.frr-menu-abierto .frr-velo { display: block; position: fixed; inset: 0; background: rgba(10, 20, 30, .4); z-index: 950; }
  .frr-boton-menu {
    display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 6px;
    border: 1px solid var(--border-color); background: var(--body-bg); color: var(--body-fg); cursor: pointer;
  }
  .frr-boton-menu .ico { width: 18px; height: 18px; }
  /* Nada debe ensanchar la página: las tablas se desplazan dentro de su tarjeta. */
  body.frr-layout #content, body.frr-layout #content-main, body.frr-layout #content-related,
  body.frr-layout .module { max-width: 100%; min-width: 0; float: none; width: auto; }
  body.frr-layout .module table, body.frr-layout #changelist .results table,
  body.frr-layout .inline-related.tabular table { display: block; overflow-x: auto; max-width: 100%; }
  body.frr-layout #changelist-filter { position: static; width: auto; margin: 0 0 16px; }
  body.frr-layout #changelist .changelist-form-container { display: block; }
}
@media (max-width: 640px) {
  #header.frr-topbar { padding: 8px 16px; }
  .frr-usuario { margin-left: auto; gap: 6px; }
  .frr-usuario .frr-texto { display: none; }
  .frr-boton-sec { padding: 7px 9px; }
  .frr-migas { order: 5; flex-basis: 100%; }
  body.frr-layout #content { padding: 16px; }
}