/* ================================================================
   ALTIUS TERRA — Admin UI Makeover
   Tema moderno, limpio, profesional
   ================================================================ */

/* ------ VARIABLES ------*/
:root {
    --adm-gold:       #0891b2;
    --adm-gold-light: #38bdf8;
    --adm-dark:       #1a1a1a;
    --adm-mid:        #2d2d2d;
    --adm-blue:       #3d3d3d;
    --adm-accent:     #0e7490;
    --adm-surface:    #f8f9fa;
    --adm-border:     #e0e0e0;
    --adm-text:       #2c3e50;
    --adm-muted:      #6c757d;
    --adm-radius:     10px;
    --adm-shadow:     0 2px 12px rgba(0,0,0,0.08);
    --adm-shadow-lg:  0 8px 30px rgba(0,0,0,0.12);
    /* Override Django admin default primary blue */
    --primary:        #0891b2;
    --secondary:      #1a1a1a;
    --accent:         #38bdf8;
    --primary-fg:     #ffffff;
    --link-fg:        #0369a1;
    --link-hover-color: #0891b2;
    --link-selected-fg: #0891b2;
    --selected-bg:    #f0f9ff;
    --selected-row:   #e0f2fe;
}

/* ------ HEADER / NAVBAR ------ */
#header {
    background: linear-gradient(135deg, var(--adm-dark) 0%, var(--adm-blue) 100%) !important;
    border-bottom: 3px solid var(--adm-gold) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

#header a:link, #header a:visited {
    color: var(--adm-gold) !important;
    font-weight: 600;
}

#branding h1, #branding h1 a:link, #branding h1 a:visited {
    color: #ffffff !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
}

#user-tools {
    color: rgba(255,255,255,0.85) !important;
}

#user-tools a {
    color: var(--adm-gold-light) !important;
    border: 1px solid rgba(201,169,97,0.4) !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    transition: all 0.2s !important;
}

#user-tools a:hover {
    background: var(--adm-gold) !important;
    color: var(--adm-dark) !important;
}

/* ------ BREADCRUMBS ------ */
div.breadcrumbs {
    background: var(--adm-surface) !important;
    border-bottom: 1px solid var(--adm-border) !important;
    padding: 10px 20px !important;
    color: var(--adm-muted) !important;
    font-size: 13px !important;
}

div.breadcrumbs a {
    color: var(--adm-blue) !important;
    font-weight: 500;
}

div.breadcrumbs a:hover {
    color: var(--adm-gold) !important;
}

/* ------ SIDEBAR ------ */
#nav-sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--adm-border) !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.05) !important;
    min-width: 220px !important;
}

/* Asegurar que el contenido no se superponga al sidebar expandido */
#main.shifted {
    padding-left: 0 !important;
}

/* Items del sidebar sin comprimir */
#nav-sidebar .module {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    margin-bottom: 0 !important;
}

#nav-sidebar .module caption {
    padding: 10px 14px !important;
    font-size: 11px !important;
}

#nav-sidebar th {
    padding: 7px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

#nav-sidebar th a {
    color: var(--adm-text) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

#nav-sidebar th a:hover {
    color: var(--adm-gold) !important;
}

.toggle-nav-sidebar-icon::before,
.toggle-nav-sidebar-icon::after {
    background: var(--adm-gold) !important;
}

/* ------ CONTENT AREA ------ */
#content {
    background: #f5f6fa !important;
}

/* ------ MODULES / CARDS ------ */
.module {
    background: #ffffff !important;
    border-radius: var(--adm-radius) !important;
    border: 1px solid var(--adm-border) !important;
    box-shadow: var(--adm-shadow) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.module h2, .module caption, .inline-group h2 {
    background: linear-gradient(135deg, var(--adm-dark) 0%, var(--adm-blue) 100%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid var(--adm-gold) !important;
    text-transform: uppercase !important;
}

/* ------ FIELDSETS ------ */
fieldset {
    background: #ffffff !important;
    border: 1px solid var(--adm-border) !important;
    border-radius: var(--adm-radius) !important;
    box-shadow: var(--adm-shadow) !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

fieldset h2 {
    background: linear-gradient(135deg, var(--adm-dark), var(--adm-blue)) !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 11px 18px !important;
    border-bottom: 2px solid var(--adm-gold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

fieldset .form-row, fieldset .form-group {
    padding: 14px 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

fieldset .form-row:last-child, fieldset .form-group:last-child {
    border-bottom: none !important;
}

.fieldset-description, .help {
    font-size: 12px !important;
    color: var(--adm-muted) !important;
    font-style: italic;
    padding: 8px 20px !important;
    background: #fffbf0 !important;
    border-bottom: 1px solid #f0e8d0 !important;
}

/* ------ LABELS ------ */
label {
    color: var(--adm-text) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* ------ INPUTS ------ */
input[type="text"], input[type="email"], input[type="url"],
input[type="number"], input[type="password"], input[type="tel"],
textarea, select {
    border: 1.5px solid var(--adm-border) !important;
    border-radius: 7px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--adm-text) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    background: #fff !important;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus,
input[type="number"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
    border-color: var(--adm-gold) !important;
    box-shadow: 0 0 0 3px rgba(201,169,97,0.15) !important;
    outline: none !important;
}

input[type="color"] {
    border-radius: 6px !important;
    cursor: pointer;
    border: 2px solid var(--adm-border) !important;
    padding: 2px !important;
}

/* ------ SUBMIT BUTTONS ------ */
.submit-row {
    background: var(--adm-surface) !important;
    border-top: 2px solid var(--adm-border) !important;
    padding: 14px 20px !important;
    border-radius: 0 0 var(--adm-radius) var(--adm-radius) !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06) !important;
}

input[type="submit"], .button, .default, a.button {
    background: linear-gradient(135deg, var(--adm-gold) 0%, var(--adm-gold-light) 100%) !important;
    color: var(--adm-dark) !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 9px 20px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    box-shadow: 0 2px 8px rgba(201,169,97,0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

input[type="submit"]:hover, .button:hover, .default:hover {
    background: linear-gradient(135deg, var(--adm-gold-light) 0%, var(--adm-gold) 100%) !important;
    box-shadow: 0 4px 15px rgba(201,169,97,0.5) !important;
    transform: translateY(-1px) !important;
}

input[type="submit"].default {
    background: linear-gradient(135deg, #2d6a4f 0%, #40916c 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(45,106,79,0.3) !important;
}

.deletelink, a.deletelink {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%) !important;
    color: white !important;
    border-radius: 7px !important;
    padding: 9px 20px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ------ LIST VIEW TABLE ------ */
#result_list {
    border-radius: var(--adm-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--adm-shadow) !important;
    border: none !important;
    background: #fff !important;
}

#result_list thead th {
    background: linear-gradient(135deg, var(--adm-dark), var(--adm-blue)) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border: none !important;
}

#result_list thead th a {
    color: var(--adm-gold-light) !important;
}

#result_list thead th.sorted a {
    color: var(--adm-gold) !important;
}

#result_list tbody tr:hover {
    background: #e0f2fe !important;
}

#result_list tbody td {
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: var(--adm-text) !important;
    vertical-align: middle !important;
}

#result_list tr.selected td {
    background: rgba(201,169,97,0.1) !important;
}

/* Zebra stripes */
#result_list tr.row1 { background: #fff; }
#result_list tr.row2 { background: #fafafa; }

/* ------ ACTIONS / FILTERS BAR ------ */
#changelist-filter {
    background: #ffffff !important;
    border-radius: var(--adm-radius) !important;
    border: 1px solid var(--adm-border) !important;
    box-shadow: var(--adm-shadow) !important;
    overflow: hidden !important;
}

#changelist-filter h2 {
    background: linear-gradient(135deg, var(--adm-dark), var(--adm-blue)) !important;
    color: #fff !important;
    font-size: 12px !important;
    padding: 10px 14px !important;
    border-bottom: 2px solid var(--adm-gold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#changelist-filter h3 {
    font-size: 11px !important;
    color: var(--adm-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 14px 4px !important;
    margin: 0 !important;
}

#changelist-filter ul { padding: 0 14px 10px !important; }

#changelist-filter li a {
    color: var(--adm-text) !important;
    font-size: 13px !important;
    padding: 3px 0 !important;
    display: block !important;
    transition: color 0.15s !important;
}

#changelist-filter li.selected a, #changelist-filter li a:hover {
    color: var(--adm-gold) !important;
    font-weight: 600 !important;
}

/* ------ SEARCH ------ */
#toolbar {
    background: #ffffff !important;
    border-radius: var(--adm-radius) !important;
    border: 1px solid var(--adm-border) !important;
    margin-bottom: 16px !important;
    padding: 12px 16px !important;
    box-shadow: var(--adm-shadow) !important;
}

#searchbar {
    border: 1.5px solid var(--adm-border) !important;
    border-radius: 7px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
}

#searchbar:focus {
    border-color: var(--adm-gold) !important;
    box-shadow: 0 0 0 3px rgba(201,169,97,0.15) !important;
}

/* ------ INLINE GROUPS ------ */
.inline-group {
    background: #fff !important;
    border-radius: var(--adm-radius) !important;
    border: 1px solid var(--adm-border) !important;
    box-shadow: var(--adm-shadow) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.inline-group .tabular tbody tr {
    border-bottom: 1px solid #f0f0f0 !important;
}

.inline-group .tabular tbody tr:hover {
    background: #e0f2fe !important;
}

.inline-group thead th {
    background: linear-gradient(135deg, var(--adm-dark), var(--adm-blue)) !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 12px !important;
}

.add-row a {
    color: var(--adm-gold) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.add-row a:before { content: '+ ' !important; }

/* ------ MESSAGES ------ */
ul.messagelist li {
    border-radius: 8px !important;
    padding: 12px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    border-left: 4px solid transparent !important;
}

ul.messagelist li.success {
    background: #d4edda !important;
    color: #155724 !important;
    border-left-color: #28a745 !important;
}

ul.messagelist li.error {
    background: #f8d7da !important;
    color: #721c24 !important;
    border-left-color: #dc3545 !important;
}

ul.messagelist li.warning {
    background: #fff3cd !important;
    color: #856404 !important;
    border-left-color: #ffc107 !important;
}

/* ------ DASHBOARD / INDEX ------ */
.app-landing { }
.model-configuracionsitio a { font-weight: 700; }

/* ------ CLEARABLE FILE INPUT ------ */
.clearablefileinput label[for*="-clear_id"],
.clearablefileinput input[type="checkbox"][id*="-clear_id"],
.clearablefileinput input[name*="-clear"],
.clearablefileinput label:has(input[type="checkbox"]),
.inline-group .clearablefileinput label,
.inline-group .clearablefileinput input[type="checkbox"] {
    display: none !important;
}

.clearablefileinput br { display: none !important; }

.clearablefileinput a {
    font-size: 11px;
    color: var(--adm-blue);
    font-weight: 600;
}

/* ------ PALETA SELECT ------ */
select[name="paleta_preset"] {
    font-size: 14px !important;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, #fffbf0, #fff8e6) !important;
    border: 2px solid var(--adm-gold) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    min-width: 320px !important;
}

#paleta-preview-swatches {
    margin-top: 10px;
    padding: 10px 14px;
    background: #fffbf2;
    border: 1px solid #f0e0b0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ------ VIDEO PREVIEW ------ */
.video-preview-container video {
    max-width: 360px;
    border-radius: 8px;
    border: 2px solid var(--adm-border);
}

/* ------ PAGINATION ------ */
.paginator {
    background: #fff !important;
    border-radius: 8px !important;
    border: 1px solid var(--adm-border) !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
}

.paginator a {
    color: var(--adm-blue) !important;
    padding: 4px 8px !important;
    border-radius: 5px !important;
    font-weight: 500 !important;
}

.paginator a:hover, .paginator .this-page {
    background: var(--adm-gold) !important;
    color: var(--adm-dark) !important;
}

/* ------ HELP TEXT ------ */
.help, p.help {
    color: var(--adm-muted) !important;
    font-size: 11.5px !important;
    font-style: italic;
    margin-top: 4px !important;
}

/* ------ COLLAPSE TOGGLE ------ */
.collapse-toggle {
    color: var(--adm-gold) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* ------ RELATED WIDGET ------ */
.related-widget-wrapper-link {
    color: var(--adm-gold) !important;
}

/* Ocultar botones de acción en campos ForeignKey (editar/agregar/borrar/ver relacionado) */
a.change-related,
a.add-related,
a.delete-related,
a.view-related {
    display: none !important;
}

/* ------ DATE/TIME ------ */
.datetimeshortcuts a {
    color: var(--adm-gold) !important;
}

/* ------ OBJECT TOOLS ------ */
ul.object-tools li a {
    background: linear-gradient(135deg, var(--adm-gold), var(--adm-gold-light)) !important;
    color: var(--adm-dark) !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

ul.object-tools li a.viewsitelink,
ul.object-tools li a.addlink {
    background: linear-gradient(135deg, var(--adm-dark), var(--adm-mid)) !important;
    color: var(--adm-gold) !important;
}

/* ------ RESPONSIVE: MOBILE ------ */
@media (max-width: 767px) {
    #header { padding: 10px 14px !important; }
    #content { padding: 12px !important; }
    .submit-row { flex-direction: column; gap: 8px; }
    #result_list { font-size: 12px; }
}