/* Tema oscuro en escala de grises con fondos degradados. Se carga después de
   moderno.css. No depende del modo claro/oscuro del sistema: es uno de los temas
   que el usuario puede elegir (ver selector_tema.html). */

:root,
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="auto"] {
  color-scheme: dark;
  --primary: #d4d4d8;
  --secondary: #3f3f46;
  --accent: #e4e4e7;
  --primary-fg: #ffffff;

  --body-fg: #fafafa;
  --body-bg: #27272c;
  --body-quiet-color: #c4c4cc;
  --body-medium-color: #e4e4e7;
  --body-loud-color: #ffffff;

  --header-color: #d4d4d8;
  --header-branding-color: #ffffff;
  --header-bg: transparent;
  --header-link-color: #e4e4e7;

  --breadcrumbs-fg: #a1a1aa;
  --breadcrumbs-link-fg: #e4e4e7;
  --breadcrumbs-bg: transparent;

  --link-fg: #d4d4d8;
  --link-hover-color: #ffffff;
  --link-selected-fg: #ffffff;

  --hairline-color: rgba(255, 255, 255, .14);
  --border-color: rgba(255, 255, 255, .30);

  --error-fg: #fca5a5;
  --message-debug-bg: #2b2b30;
  --message-info-bg: #26333f;
  --message-success-bg: #1f3a2e;
  --message-warning-bg: #40371c;
  --message-error-bg: #452427;

  --darkened-bg: #1f1f23;
  --selected-bg: #2f2f35;
  --selected-row: #2f2f35;
  --close-button-bg: #52525b;
  --close-button-hover-bg: #63636c;
  --button-fg: #ffffff;
  --button-bg: #3f3f46;
  --button-hover-bg: #52525b;
  --default-button-bg: #52525b;
  --default-button-hover-bg: #63636c;
  --object-tools-fg: #ffffff;
  --object-tools-bg: rgba(255, 255, 255, .10);
  --object-tools-hover-bg: rgba(255, 255, 255, .20);
  --linea: rgba(255, 255, 255, .15);
  --superficie: transparent;
  --anillo: rgba(244, 244, 245, .40);
  --sombra-suave: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 26px rgba(0, 0, 0, .35);
}

/* Fondo degradado con brillos suaves */
html {
  min-height: 100%;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(255, 255, 255, .14), transparent 60%),
    radial-gradient(760px 520px at -6% 108%, rgba(255, 255, 255, .09), transparent 58%),
    linear-gradient(135deg, #26262b 0%, #38383f 48%, #55555e 100%);
  background-attachment: fixed;
}
html body, html body #container, html body .main, html body #content, html body #content-start { background: transparent; color: var(--body-fg); }

/* Cabecera y migas */
html body #header {
  background: linear-gradient(90deg, rgba(24, 24, 27, .96), rgba(39, 39, 44, .94));
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
html body #header a:link, html body #header a:visited { color: #e4e4e7; }
html body #site-name a { color: #fff; }
html body div.breadcrumbs, html body nav[aria-label] .breadcrumbs, html body .breadcrumbs {
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--linea);
  color: var(--breadcrumbs-fg);
}
html body .breadcrumbs a { color: #e4e4e7; }

/* Tarjetas de cristal */
html body .module {
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html body .module h2, html body .module caption, html body .inline-group h2 {
  background: linear-gradient(90deg, #18181b, #2f2f35);
  color: #fff;
}
html body .module h3, html body fieldset.module h3 { color: var(--body-medium-color); }

/* Campos */
html body input[type=text], html body input[type=password], html body input[type=email],
html body input[type=url], html body input[type=number], html body input[type=search],
html body input[type=date], html body input[type=time], html body select, html body textarea {
  background: rgba(0, 0, 0, .45);
  color: #ffffff;
  border-color: rgba(255, 255, 255, .32);
}
html body input::placeholder, html body textarea::placeholder { color: #a1a1aa; }
html body select option { background: #27272c; color: var(--body-fg); }
html body input[type=file]::file-selector-button {
  background: rgba(255, 255, 255, .10); color: #e4e4e7; border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px; padding: 5px 10px; margin-right: 8px; cursor: pointer;
}
html body form .form-row { border-bottom-color: rgba(255, 255, 255, .13); }
html body form .form-row label { color: #d4d4d8; }
html body form .form-row label.required { color: #ffffff; }
html body .help, html body form div.help { color: #b4b4bc; }

/* Botones: el principal en gris claro con texto oscuro */
html body .button.default, html body input[type=submit].default, html body .submit-row input.default,
html body .object-tools a.addlink {
  background: linear-gradient(135deg, #f4f4f5, #a1a1aa);
  color: #18181b;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
html body .submit-row input:not(.default), html body .submit-row a.button, html body .button:not(.default) {
  background: rgba(255, 255, 255, .10);
  color: #fafafa;
  border-color: rgba(255, 255, 255, .40);
}
html body .object-tools a { background: rgba(255, 255, 255, .16); color: #ffffff; }
html body .object-tools a.addlink { background: linear-gradient(135deg, #f4f4f5, #a1a1aa); color: #18181b; }
html body .object-tools a:hover { background: rgba(255, 255, 255, .20); }
html body .object-tools a.addlink:hover { background: linear-gradient(135deg, #ffffff, #b4b4bb); }
html body .submit-row a.deletelink, html body .submit-row .deletelink-box a {
  background: rgba(239, 68, 68, .14); color: #fca5a5; border-color: rgba(239, 68, 68, .4);
}

/* Barra de guardado */
html body .submit-row {
  background: rgba(28, 28, 32, .92);
  border-color: rgba(255, 255, 255, .20);
  box-shadow: 0 -8px 26px rgba(0, 0, 0, .45);
}

/* Listados */
html body #changelist { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(10px); }
html body #changelist thead th, html body table thead th { background: rgba(0, 0, 0, .28); color: #d4d4d8; border-bottom-color: rgba(255, 255, 255, .20); }
html body #changelist tbody tr, html body tr.row1, html body tr.row2 { background: transparent; }
html body #changelist tbody tr:nth-child(even) { background: rgba(255, 255, 255, .04); }
html body #changelist tbody td, html body #changelist tbody th { border-bottom-color: rgba(255, 255, 255, .11); color: var(--body-fg); }
html body #changelist tbody tr:hover td, html body #changelist tbody tr:hover th { background: rgba(255, 255, 255, .13); }
html body #changelist tr.selected td, html body #changelist tr.selected th { background: rgba(255, 255, 255, .20); }
html body #changelist-filter { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(10px); }
html body #changelist-filter h2 { background: linear-gradient(90deg, #18181b, #2f2f35); color: #fff; }
html body #changelist-filter a { color: #e4e4e7; }
html body #changelist-filter li.selected a { color: #fff; font-weight: 600; }
html body #toolbar, html body .paginator, html body .actions { background: transparent; color: var(--body-medium-color); border-color: transparent; }
html body .paginator a:link, html body .paginator a:visited { background: rgba(255, 255, 255, .08); color: #d4d4d8; border-radius: 6px; }
html body .paginator .this-page { background: #d4d4d8; color: #18181b; border-radius: 6px; }

/* Menú lateral */
html body #nav-sidebar { background: rgba(20, 20, 23, .62); backdrop-filter: blur(12px); border-right-color: rgba(255, 255, 255, .16); }
html body #nav-sidebar .module, html body #nav-sidebar .module table { background: transparent; }
html body #nav-sidebar .module caption { background: transparent; }
html body #nav-sidebar .module caption a, html body #nav-sidebar .module caption a:link { color: #d4d4d8; }
html body #nav-sidebar tr.current-model th a, html body #nav-sidebar .current-app .section:link { color: #fff; }
html body #nav-sidebar tr th, html body #nav-sidebar tr td { border-color: rgba(255, 255, 255, .06); }
html body #nav-sidebar tr:hover { background: rgba(255, 255, 255, .07); }
html body .toggle-nav-sidebar { background: rgba(9, 9, 11, .6); border-color: rgba(255, 255, 255, .10); color: #d4d4d8; }
html body #nav-filter { background: rgba(0, 0, 0, .35); }

/* Mensajes */
html body ul.messagelist li { color: #e4e4e7; border-color: rgba(255, 255, 255, .12); }
html body ul.messagelist li.success { background: #1f3a2e; }
html body ul.messagelist li.warning { background: #40371c; }
html body ul.messagelist li.error { background: #452427; }

/* Pantalla de acceso */
html body.login { background: transparent; }
html body.login #container {
  background: rgba(24, 24, 27, .75);
  backdrop-filter: blur(14px);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
html body.login #header { background: linear-gradient(90deg, #3f3f46, #52525b); box-shadow: none; }
html body.login .submit-row input { background: linear-gradient(135deg, #f4f4f5, #a1a1aa); color: #18181b; }

/* Íconos de acciones con su color (+ verde, lápiz amarillo, ojo azul) y algo más de brillo sobre el fondo oscuro */
html body #nav-sidebar a.addlink, html body .related-widget-wrapper-link img { filter: brightness(1.25) saturate(1.2); }

/* Recuadros embebidos: sin fondo propio, se ve el de la tarjeta que los contiene */
html.en-iframe { background: transparent; }
html.en-iframe body .module { background: transparent; backdrop-filter: none; }
html.en-iframe body #changelist { background: transparent; backdrop-filter: none; }
html.en-iframe body .submit-row { background: rgba(255, 255, 255, .04); box-shadow: none; }