/* ==========================================================================
   DACARS — El panel

   El admin de Django se tematiza por variables CSS, así que casi todo esto es
   redefinirlas con la paleta de la marca. Lo que sigue después son unos pocos
   retoques de forma: el encabezado con el logotipo, los bordes redondeados y
   la pantalla de entrada.

   Las variables se declaran en los cuatro selectores de tema (`:root` más los
   tres `data-theme`) a propósito. Django define la versión clara y la oscura
   con la misma especificidad; como esta hoja carga después, gana la nuestra en
   los tres modos. El resultado: el panel se ve igual siempre, que es lo que se
   quiere de una herramienta de trabajo.
   ========================================================================== */

:root,
html[data-theme="auto"],
html[data-theme="light"],
html[data-theme="dark"] {
  /* --- Paleta de marca (las mismas de style.css) --- */
  --dc-ink:      #04060c;
  --dc-ink-2:    #070b14;
  --dc-panel:    #0a1020;
  --dc-panel-2:  #0d1526;
  --dc-line:     rgba(122, 163, 255, .14);
  --dc-line-hi:  rgba(122, 163, 255, .28);
  --dc-blue:     #0a5cff;
  --dc-blue-hi:  #3d8bff;
  --dc-cyan:     #00c8ff;
  --dc-text:     #e9eef8;
  --dc-muted:    #93a0b8;
  --dc-muted-2:  #6c7a93;

  /* Señales. Más claras que las del sitio: acá van sobre fondo oscuro. */
  --dc-ok:       #3ddc84;
  --dc-ojo:      #ffb74d;
  --dc-mal:      #ff7a8f;

  /* --- Variables del admin --- */
  --primary:     var(--dc-blue-hi);
  --secondary:   var(--dc-panel);
  --accent:      var(--dc-cyan);
  --primary-fg:  #ffffff;

  --body-fg:          var(--dc-text);
  --body-bg:          var(--dc-ink);
  --body-quiet-color: var(--dc-muted);
  --body-loud-color:  #ffffff;

  --header-color:          var(--dc-muted);
  --header-branding-color: var(--dc-text);
  --header-bg:             var(--dc-ink-2);
  --header-link-color:     var(--dc-text);

  --breadcrumbs-fg:      var(--dc-muted-2);
  --breadcrumbs-link-fg: var(--dc-muted);
  --breadcrumbs-bg:      var(--dc-ink-2);

  --link-fg:          var(--dc-blue-hi);
  --link-hover-color: var(--dc-cyan);
  --link-selected-fg: var(--dc-cyan);

  --hairline-color: var(--dc-line);
  --border-color:   var(--dc-line-hi);

  --error-fg: var(--dc-mal);

  --message-success-bg: rgba(20, 70, 45, .55);
  --message-warning-bg: rgba(75, 55, 15, .55);
  --message-error-bg:   rgba(75, 22, 32, .55);

  --darkened-bg:  var(--dc-ink-2);
  --selected-bg:  var(--dc-panel-2);
  --selected-row: rgba(61, 139, 255, .14);

  --button-fg:              #ffffff;
  --button-bg:              var(--dc-blue);
  --button-hover-bg:        var(--dc-blue-hi);
  --default-button-bg:      var(--dc-blue);
  --default-button-hover-bg: var(--dc-blue-hi);
  --close-button-bg:        #1a2338;
  --close-button-hover-bg:  #27324d;
  --delete-button-bg:       #a3213a;
  --delete-button-hover-bg: #c22a48;

  --object-tools-fg:       var(--dc-text);
  --object-tools-bg:       #1a2338;
  --object-tools-hover-bg: var(--dc-blue);

  --font-family-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --dc-display: 'Saira', 'Arial Narrow', system-ui, sans-serif;
  --dc-r: 12px;
}

/* El selector de tema claro/oscuro se esconde: el panel tiene un solo aspecto
   y ofrecer un cambio que no cambia nada solo confunde. Para devolverlo,
   borrá esta regla. */
.theme-toggle { display: none !important; }

body {
  background:
    radial-gradient(90% 55% at 50% -10%, #0a1327 0%, transparent 70%),
    var(--dc-ink);
  background-attachment: fixed;
}

/* --- Encabezado ------------------------------------------------------- */
#header {
  border-bottom: 1px solid var(--dc-line);
  padding: 12px 40px;
}
#branding h1 { font-weight: 700; letter-spacing: .01em }
#branding h1 a:link, #branding h1 a:visited { color: var(--dc-text) }
.dc-logo { height: 26px; width: auto; display: block }

#user-tools { font-size: 12.5px; color: var(--dc-muted-2); text-transform: none; letter-spacing: 0 }
#user-tools a { border-bottom: 0; color: var(--dc-muted) }
#user-tools a:hover { color: var(--dc-cyan) }

div.breadcrumbs { border-bottom: 1px solid var(--dc-line); padding: 11px 40px; font-size: 12.5px }

/* --- Módulos y tablas -------------------------------------------------- */
.module {
  background: linear-gradient(180deg, var(--dc-panel), var(--dc-panel-2));
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r);
  overflow: hidden;
}
.module caption,
.module h2,
.inline-group h2 {
  background: rgba(61, 139, 255, .09);
  color: var(--dc-text);
  border-bottom: 1px solid var(--dc-line);
  font-family: var(--dc-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 13px;
}
#content-main .module tbody tr:hover { background: rgba(61, 139, 255, .07) }
thead th { background: transparent; border-bottom: 1px solid var(--dc-line-hi) }
thead th a:link, thead th a:visited { color: var(--dc-muted) }
td, th { border-bottom: 1px solid var(--dc-line) }

/* --- Campos ------------------------------------------------------------ */
input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], textarea, select, .vTextField {
  background: rgba(4, 6, 12, .6);
  border: 1px solid var(--dc-line-hi);
  border-radius: 9px;
  color: var(--dc-text);
  padding: 9px 11px;
  transition: border-color .18s, box-shadow .18s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--dc-blue-hi);
  box-shadow: 0 0 0 3px rgba(61, 139, 255, .16);
  outline: none;
}
.help, .helptext, div.help { color: var(--dc-muted-2); font-size: 12.3px; line-height: 1.5 }
fieldset.collapsed .form-row { display: none }
.form-row { border-bottom: 1px solid var(--dc-line) }
label { color: var(--dc-muted) }

/* --- Botones ------------------------------------------------------------ */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 9px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 0;
  transition: background .18s, transform .12s;
}
.button:active, input[type=submit]:active { transform: translateY(1px) }
.submit-row { background: var(--dc-ink-2); border: 1px solid var(--dc-line); border-radius: var(--dc-r) }
.object-tools a { border-radius: 999px; font-weight: 600; letter-spacing: .04em }

/* --- Barra lateral ------------------------------------------------------ */
#nav-sidebar { border-right: 1px solid var(--dc-line) }
#nav-sidebar .current-model { background: rgba(61, 139, 255, .16) }
.sticky { backdrop-filter: blur(6px) }

/* --- Paginación y mensajes ---------------------------------------------- */
.paginator { border-top: 1px solid var(--dc-line); color: var(--dc-muted-2) }
.paginator a:link, .paginator a:visited { background: #1a2338; border-radius: 7px; color: var(--dc-text) }
.paginator .this-page { background: var(--dc-blue); border-radius: 7px; padding: 2px 8px; color: #fff }
ul.messagelist li { border-radius: 9px; border: 1px solid var(--dc-line-hi); color: var(--dc-text) }

/* ==========================================================================
   El tablero de entrada
   ========================================================================== */
.dc-tablero { margin: 0 0 28px }
.dc-titulo {
  margin: 0 0 14px;
  font-family: var(--dc-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 19px;
  color: var(--dc-text);
}
.dc-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 12px }
.dc-ficha {
  display: block;
  padding: 16px 17px;
  border-radius: var(--dc-r);
  text-decoration: none;
  border: 1px solid var(--dc-line);
  background: linear-gradient(180deg, var(--dc-panel), var(--dc-panel-2));
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.dc-ficha:hover {
  transform: translateY(-3px);
  border-color: rgba(61, 139, 255, .45);
  box-shadow: 0 16px 34px -20px rgba(10, 92, 255, .8);
}
.dc-ficha b {
  display: block;
  font-family: var(--dc-display);
  font-style: italic;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  margin-bottom: 4px;
  color: var(--dc-text);
}
.dc-ficha span { display: block; font-size: 12.4px; color: var(--dc-muted); line-height: 1.45 }
.dc-ficha--mal  { border-color: rgba(255, 122, 143, .38) }
.dc-ficha--mal b  { color: var(--dc-mal) }
.dc-ficha--ojo  { border-color: rgba(255, 183, 77, .38) }
.dc-ficha--ojo b  { color: var(--dc-ojo) }
.dc-ficha--bien { border-color: rgba(61, 220, 132, .38) }
.dc-ficha--bien b { color: var(--dc-ok) }
.dc-ficha--azul { border-color: rgba(61, 139, 255, .45) }
.dc-ficha--azul b { color: var(--dc-blue-hi) }

.dc-calma {
  padding: 17px 19px;
  border-radius: var(--dc-r);
  border: 1px solid rgba(61, 220, 132, .32);
  background: rgba(20, 70, 45, .3);
  color: #a8f0c6;
  font-size: 14px;
}
.dc-atajos { margin: 17px 0 0; display: flex; gap: 9px; flex-wrap: wrap }
.dc-atajos a {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--dc-muted);
  border: 1px solid var(--dc-line-hi);
  background: rgba(10, 16, 32, .6);
  transition: all .2s;
}
.dc-atajos a:hover { border-color: var(--dc-blue-hi); color: var(--dc-text) }
.dc-ayuda { margin: 12px 0 0; font-size: 12.4px; color: var(--dc-muted-2); line-height: 1.6 }

/* ==========================================================================
   Entrar
   ========================================================================== */
body.login {
  background:
    radial-gradient(75% 60% at 50% 38%, #0a1327 0%, #04060c 72%);
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 32px 20px;
  margin: 0;
}
body.login #container { width: 100%; max-width: 408px; margin: 0 }

.dc-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dc-muted-2);
  text-decoration: none;
  transition: color .2s, gap .2s;
}
.dc-volver:hover { color: var(--dc-cyan); gap: 12px }

.dc-entrar__logo { height: 34px; width: auto; margin-bottom: 26px; display: block }
.dc-entrar__titulo {
  margin: 0 0 8px;
  font-family: var(--dc-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.04;
  font-size: 33px;
  color: var(--dc-text);
}
.dc-entrar__bajada { margin: 0 0 30px; font-size: 14.5px; color: var(--dc-muted); line-height: 1.6 }

.dc-campo { margin-bottom: 19px }
.dc-campo > label {
  display: block;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dc-muted-2);
}
.dc-campo input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 15px;
  font-size: 15px;
  border-radius: 11px;
  background: rgba(10, 16, 32, .78);
  border: 1px solid var(--dc-line-hi);
  color: var(--dc-text);
}
.dc-campo input::placeholder { color: #55627a }

.dc-clave { position: relative }
.dc-clave input { padding-right: 50px }
.dc-ojo {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--dc-muted-2);
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.dc-ojo:hover { color: var(--dc-text); background: rgba(61, 139, 255, .12) }
.dc-ojo svg { width: 19px; height: 19px }

.dc-entrar__boton {
  width: 100%;
  margin-top: 8px;
  padding: 15px;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  font-family: var(--dc-display);
  font-style: italic;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--dc-blue), #0846c4);
  box-shadow: 0 10px 26px -12px rgba(10, 92, 255, .95);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.dc-entrar__boton:hover { filter: brightness(1.12); box-shadow: 0 14px 32px -12px rgba(10, 92, 255, 1) }
.dc-entrar__boton:active { transform: translateY(1px) }

.dc-entrar__error {
  margin: 0 0 22px;
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid rgba(255, 122, 143, .42);
  background: rgba(75, 22, 32, .42);
  color: #ffc2cc;
  font-size: 13.8px;
  line-height: 1.55;
}

.dc-entrar__pie {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--dc-line);
  font-size: 13px;
  color: var(--dc-muted-2);
  text-align: center;
}
.dc-entrar__pie a { color: var(--dc-blue-hi); font-weight: 600; text-decoration: none }
.dc-entrar__pie a:hover { color: var(--dc-cyan) }

@media (max-width: 767px) {
  #header { padding: 12px 20px }
  div.breadcrumbs { padding: 11px 20px }
  .dc-entrar__titulo { font-size: 28px }
}