/* Paleta */
:root{
  --hp-primary:#4C1D95;   /* violeta profundo */
  --hp-secondary:#1E3A8A; /* azul cobalto */
  --hp-add:#10B981;       /* esmeralda */
  --hp-edit:#D4AF37;      /* dorado suave */
  --hp-bg:#F8FAFC;        /* gris claro */
}

/* Fondo general sin romper layout */
body{ background: var(--hp-bg); }

/* Header */
#header{
  background: linear-gradient(135deg,var(--hp-secondary),var(--hp-primary));
}
#header a:link,#header a:visited{ color:#fff; }
#user-tools, #user-tools a{ color:#fff; }

/* Títulos de módulos */
.module caption, .module h2{
  background: var(--hp-primary);
}

/* Links */
a:link, a:visited{ color: var(--hp-secondary); }
a:hover{ color: var(--hp-primary); }

/* Botones (mantener look Django, solo color) */
.button, input[type=submit], .submit-row input{
  background: var(--hp-secondary);
  border-color: transparent;
}
.button:hover, input[type=submit]:hover, .submit-row input:hover{
  background: var(--hp-primary);
}

/* Acción Agregar / Cambiar */
.addlink{ color: var(--hp-add) !important; font-weight:600; }
.changelink{ color: var(--hp-edit) !important; font-weight:600; }

/* =========================
   RESPONSIVE (MOBILE/TABLET)
   ========================= */

@media (max-width: 1024px){
  #content { padding: 16px !important; }
  .dashboard .module { margin-bottom: 16px; }
}

/* Header apilable + herramientas de usuario */
@media (max-width: 820px){
  #header{
    display:flex;
    flex-direction: column;
    align-items:flex-start;
    gap:10px;
    padding:12px 14px;
  }
  #site-name{ margin:0; }
  #user-tools{
    float:none !important;
    text-align:left !important;
    margin:0 !important;
  }
}

/* Evitar tablas rotas: scroll horizontal */
@media (max-width: 900px){
  .results, .results table, #result_list{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
  }
  .results table{ min-width: 720px; }
}

/* Formularios: apilar campos */
@media (max-width: 900px){
  .form-row{
    display:block !important;
  }
  .form-row > div{
    float:none !important;
    width:100% !important;
    padding-right:0 !important;
  }
  .aligned label{
    width:auto !important;
    float:none !important;
    display:block !important;
    margin-bottom:6px;
  }
  .aligned .form-row .help{
    margin-left:0 !important;
  }
}

/* Sidebar de filtros debajo (changelist) */
@media (max-width: 900px){
  #changelist{
    display:block !important;
  }
  #changelist-filter{
    width:auto !important;
    float:none !important;
    margin: 12px 0 0 0 !important;
  }
}

/* Botonera de acciones (submit-row) más cómoda */
@media (max-width: 600px){
  .submit-row{
    display:flex;
    flex-direction: column;
    gap:10px;
  }
  .submit-row input, .submit-row a{
    width:100% !important;
    box-sizing:border-box;
  }
}