/* Capa visual moderna sobre el admin de Django.
   Usa las variables del tema (--primary, --secondary, --body-bg...), así que
   respeta los colores del hotel activo y el modo oscuro. */

:root {
  --radio: 12px;
  --radio-campo: 8px;
  --sombra-suave: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .07);
  --anillo: color-mix(in srgb, var(--primary) 28%, transparent);
  --superficie: color-mix(in srgb, var(--body-fg) 3.5%, var(--body-bg));
  --linea: color-mix(in srgb, var(--body-fg) 12%, var(--body-bg));
}

html body { background: var(--superficie); }
html body .main > .content, html body #content { background: transparent; }
html body #content { padding-top: 18px; }

/* El contenedor crece con el contenido (en Django mide solo el alto de la ventana y la cabecera fija se iría con el scroll) */
html body { height: auto; min-height: 100vh; }
html body #container { height: auto; min-height: 100vh; }

/* Cabecera fija en la parte superior; el menú lateral se acomoda debajo de ella */
html body #header { position: sticky; top: 0; z-index: 100; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html body .sticky { top: var(--alto-cabecera, 56px); max-height: calc(100vh - var(--alto-cabecera, 56px)); }

/* Cabecera: hotel a la izquierda; a la derecha, usuario y corporativo (logotipo + nombre) */
html body #header { justify-content: flex-start; }
html body #header #user-tools { margin-left: auto; margin-right: 22px; float: none; }
html body #corporativo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, .22);
  color: var(--header-branding-color, #fff);
  font-size: 1.05rem;
  font-weight: 500;
  white-space: nowrap;
}
html body #corporativo img { height: 34px; width: auto; max-width: 120px; object-fit: contain; border-radius: 4px; }
html body #corporativo span { line-height: 1.1; }

/* Selector de tema, junto al nombre del hotel en la cabecera */
html body #branding { align-items: center; }
html body .selector-tema select, html body .selector-idioma select {
  background: rgba(255, 255, 255, .14);
  color: var(--header-branding-color, #fff);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .78rem;
  min-height: auto;
  cursor: pointer;
}
html body .selector-tema select option, html body .selector-idioma select option { color: #111827; }
html body.login #branding { justify-content: center; flex-direction: column; gap: 6px; }

/* Red de seguridad: en alguna pantalla propia de Django que no reescribimos (ej. cambio de
   contraseña voluntario) puede colarse el conmutador claro/oscuro nativo; ya no aplica, tenemos
   nuestro propio selector de tema. */
html body .theme-toggle { display: none !important; }

/* Títulos */
html body #content h1 { font-weight: 600; font-size: 1.45rem; letter-spacing: -.01em; color: var(--body-loud-color); }
html body #content h2.subhead, html body .titles h2 { font-weight: 500; color: var(--body-quiet-color); }

/* Tarjetas: cada bloque del formulario / lista */
html body .module {
  background: var(--body-bg);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
  margin-bottom: 20px;
}
html body .module h2, html body .module caption, html body .inline-group h2 {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 11px 20px;
}

/* Filas de formulario */
html body form .form-row { padding: 14px 20px; border-bottom: 1px solid var(--linea); }
html body form .form-row:last-child { border-bottom: 0; }
html body form .form-row label { font-size: .82rem; font-weight: 600; color: var(--body-quiet-color); letter-spacing: .01em; }
html body form .form-row label.required { color: var(--body-fg); }
html body form .form-row label.required::after { content: " *"; color: var(--error-fg); }
html body form .help, html body form .help-tooltip, html body form div.help { color: var(--body-quiet-color); font-size: .78rem; margin-top: 4px; }
html body form .flex-container.form-multiline { gap: 18px; }

/* 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 {
  border: 1px solid var(--border-color);
  border-radius: var(--radio-campo);
  padding: 9px 12px;
  min-height: 40px;
  background: var(--body-bg);
  color: var(--body-fg);
  transition: border-color .15s, box-shadow .15s;
}
html body textarea { min-height: 84px; line-height: 1.45; }
html body input:focus, html body select:focus, html body textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--anillo);
}
html body input[type=color] { min-height: 40px; border-radius: var(--radio-campo); padding: 3px; }
html body input[type=file] { padding: 6px; }
html body .related-widget-wrapper { display: flex; align-items: center; gap: 6px; }

/* Botones */
html body .button, html body input[type=submit], html body input[type=button], html body .submit-row input,
html body .submit-row a.button {
  border-radius: var(--radio-campo);
  padding: 9px 18px;
  min-height: 40px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: filter .15s, box-shadow .15s, transform .05s;
}
html body .button:hover, html body input[type=submit]:hover, html body input[type=button]:hover { filter: brightness(1.08); }
html body .button:active, html body input[type=submit]:active { transform: translateY(1px); }
html body .button.default, html body input[type=submit].default, html body .submit-row input.default {
  background: var(--secondary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .18);
}
html body .submit-row input:not(.default), html body .submit-row a.button, html body .button:not(.default) {
  background: var(--body-bg);
  color: var(--secondary);
  border-color: var(--secondary);
}
html body .submit-row a.deletelink, html body .submit-row .deletelink-box a {
  border-radius: var(--radio-campo);
  padding: 9px 16px;
  background: color-mix(in srgb, var(--error-fg) 10%, var(--body-bg));
  color: var(--error-fg);
  border: 1px solid color-mix(in srgb, var(--error-fg) 35%, var(--body-bg));
}

/* Barra de guardado fija al pie */
html body .submit-row {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--body-bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: 0 -4px 16px rgba(16, 24, 40, .08);
  padding: 12px 16px;
  margin: 16px 0 0;
}
html body .submit-row input { margin: 0; float: none; }
html body .submit-row .deletelink-box { margin-left: auto; float: none; }

/* Listados */
html body #changelist { background: var(--body-bg); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-suave); overflow: hidden; padding: 14px 16px 6px; }
html body #changelist table { border-collapse: separate; border-spacing: 0; width: 100%; }
html body #changelist thead th { background: var(--superficie); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--body-quiet-color); border-bottom: 1px solid var(--linea); padding: 10px 12px; }
html body #changelist tbody td, html body #changelist tbody th { padding: 11px 12px; border-bottom: 1px solid var(--linea); }
html body #changelist tbody tr:hover td, html body #changelist tbody tr:hover th { background: color-mix(in srgb, var(--primary) 6%, var(--body-bg)); }
html body #changelist tbody tr:last-child td, html body #changelist tbody tr:last-child th { border-bottom: 0; }
html body #changelist #toolbar { background: transparent; border: 0; padding: 0 0 10px; }
html body #changelist-filter { background: var(--body-bg); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-suave); }
html body #changelist-filter h2 { border-radius: var(--radio) var(--radio) 0 0; }
html body .paginator { background: transparent; border: 0; }
html body .actions { background: transparent; }

/* Botones de herramientas (Agregar, Historia...) */
html body .object-tools a { border-radius: 999px; padding: 8px 16px; font-weight: 600; }

/* Mensajes */
html body ul.messagelist li { border-radius: var(--radio-campo); border: 1px solid var(--linea); box-shadow: var(--sombra-suave); }

/* Menú lateral */
html body #nav-sidebar { background: var(--body-bg); border-right: 1px solid var(--linea); }
html body #nav-sidebar .module { box-shadow: none; border: 0; border-radius: 0; background: transparent; margin: 0; }
html body #nav-sidebar .current-model, html body #nav-sidebar tr.current-model th a { font-weight: 600; }

/* Pantalla de acceso */
html body.login #container {
  border-radius: 16px;
  border: 1px solid var(--linea);
  box-shadow: 0 10px 40px rgba(16, 24, 40, .14);
  overflow: hidden;
}
html body.login #content { padding: 24px 28px 28px; }
html body.login .submit-row { position: static; box-shadow: none; border: 0; padding: 0; background: transparent; backdrop-filter: none; }
html body.login .submit-row input { width: 100%; background: var(--secondary); color: #fff; border-color: transparent; }
html body.login .form-row { border-bottom: 0; padding: 8px 0; }
html body.login .form-row input, html body.login .form-row select { width: 100%; box-sizing: border-box; }

/* Dentro del recuadro embebido (iframe) todo sin tarjetas extra */
html.en-iframe body { background: transparent; }
html.en-iframe body .module { box-shadow: none; border: 0; border-radius: 0; margin-bottom: 0; }
html.en-iframe body #changelist { border: 0; box-shadow: none; border-radius: 0; padding: 0; }
html.en-iframe body .submit-row { position: static; box-shadow: none; }