/* ── GC Salud Admin — Paleta Marino & Coral ──────────────────────────────── */

:root {
  /* ── Custom tokens ────────────────────────────────────────────────────── */
  --gc-primary:       #2B7A7E;
  --gc-primary-dark:  #1C2B2E;
  --gc-accent:        #4DB8D4;
  --gc-cta:           #E8724A;
  --gc-cta-hover:     #d4633d;
  --gc-danger:        #C0472A;
  --gc-bg:            #F4F9FA;
  --gc-border:        #D1E8EB;
  --gc-text-muted:    #3D5A5E;
  --gc-accent-light:  #7ABCC7;

  /* ── Override Django admin's own CSS variables ────────────────────────── */
  --primary:               #2B7A7E;
  --accent:                #1C2B2E;
  --secondary:             #4DB8D4;
  --primary-fg:            #fff;
  --body-fg:               #1f2937;
  --body-bg:               #fff;
  --body-quiet-color:      #3D5A5E;
  --body-loud-color:       #1C2B2E;
  --header-color:          #fff;
  --header-branding-color: #fff;
  --header-bg:             #2B7A7E;
  --header-link-color:     #fff;
  --breadcrumbs-fg:        #D1E8EB;
  --breadcrumbs-link-fg:   #fff;
  --breadcrumbs-bg:        #2B7A7E;
  --link-fg:               #2B7A7E;
  --link-hover-color:      #E8724A;
  --link-selected-fg:      #4DB8D4;
  --hairline-color:        #D1E8EB;
  --border-color:          #D1E8EB;
  --error-fg:              #C0472A;
  --darkened-bg:           #F4F9FA;
  --selected-bg:           #EEF7F8;
  --selected-row:          #FEF3EE;
  --button-fg:             #fff;
  --button-bg:             #2B7A7E;
  --button-hover-bg:       #1C2B2E;
  --default-button-bg:     #E8724A;
  --default-button-hover-bg: #d4633d;
  --close-button-bg:       #7ABCC7;
  --close-button-hover-bg: #2B7A7E;
  --delete-button-bg:      #C0472A;
  --delete-button-hover-bg:#a83922;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
/* ── Checkboxes — accent color ───────────────────────────────────────────── */
input[type="checkbox"] {
  accent-color: var(--gc-primary);
  cursor: pointer;
}

body.app-admin {
  background-color: var(--gc-bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
#header {
  background: linear-gradient(90deg, #1C2B2E 0%, #2B7A7E 55%, #4DB8D4 100%);
  box-shadow: 0 2px 8px rgba(28, 43, 46, 0.4);
}

#header #branding h1.gc-admin-branding {
  font-weight: 700;
  letter-spacing: 0.03em;
}

#header #branding h1.gc-admin-branding a {
  color: #f9fafb;
  text-decoration: none;
}

#header #branding h1.gc-admin-branding span {
  font-weight: 400;
  opacity: 0.85;
}

/* ── Topbar extras ───────────────────────────────────────────────────────── */
.gc-admin-topbar-extra {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 12px;
}

.gc-admin-topbar-link {
  color: #D1E8EB;
  text-decoration: none;
}

.gc-admin-topbar-link:hover {
  text-decoration: underline;
  color: #fff;
}

.gc-admin-topbar-env {
  padding: 2px 10px;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #e5e7eb;
  font-size: 11px;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
body.app-admin #container {
  display: flex;
  align-items: stretch;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
body.app-admin #nav-sidebar {
  display: block !important;
  width: 240px;
  background-color: #ffffff;
  border-right: 1px solid var(--gc-border);
  padding-top: 8px;
  padding-bottom: 8px;
}

body.app-admin #nav-sidebar .app-gc-sidebar {
  padding-inline: 14px;
  font-size: 13px;
}

.app-gc-sidebar-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gc-accent-light);
  font-weight: 700;
  margin-bottom: 8px;
  padding: 6px 8px 0;
}

.app-gc-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-gc-sidebar-list li a {
  display: block;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--gc-text-muted);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.12s, color 0.12s;
}

.app-gc-sidebar-list li a:hover {
  background-color: #EEF7F8;
  color: var(--gc-primary);
}

/* ── Main content card ───────────────────────────────────────────────────── */
body.app-admin #content {
  flex: 1;
  background-color: white;
  margin: 16px;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(28, 43, 46, 0.08);
}

/* ── Content header (title + add button row) ─────────────────────────────── */
#content-title h1,
body.app-admin h1 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gc-primary-dark);
}

/* ── Object-tools (AGREGAR button) ───────────────────────────────────────── */
ul.object-tools {
  margin-top: 0;
  margin-bottom: 0;
}

ul.object-tools li a,
ul.object-tools a.addlink {
  background-color: var(--gc-cta) !important;
  border-radius: 8px !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 16px !important;
  color: #fff !important;
  text-decoration: none;
  border: none;
  transition: background 0.15s;
}

ul.object-tools li a:hover,
ul.object-tools a.addlink:hover {
  background-color: var(--gc-cta-hover) !important;
}

/* ── Search toolbar ──────────────────────────────────────────────────────── */
#toolbar {
  background: var(--gc-bg);
  border: 1px solid var(--gc-border);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

#toolbar form #searchbar {
  border: 1px solid var(--gc-border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--gc-primary-dark);
  background: #fff;
}

#toolbar form #searchbar:focus {
  outline: none;
  border-color: var(--gc-accent);
  box-shadow: 0 0 0 3px rgba(77, 184, 212, 0.2);
}

#toolbar form input[type=submit] {
  background-color: var(--gc-primary) !important;
  border-color: var(--gc-primary) !important;
  border-radius: 6px !important;
  padding: 5px 14px !important;
  font-size: 12px;
  color: #fff !important;
}

#toolbar form input[type=submit]:hover {
  background-color: var(--gc-primary-dark) !important;
  border-color: var(--gc-primary-dark) !important;
}

/* ── Actions bar ─────────────────────────────────────────────────────────── */
.changelist-form-container .actions {
  background: #EEF7F8;
  border: 1px solid var(--gc-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.changelist-form-container .actions select {
  border: 1px solid var(--gc-border);
  border-radius: 6px;
  font-size: 12px;
  padding: 4px 8px;
}

/* ── Changelist table ────────────────────────────────────────────────────── */
#result_list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--gc-border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13px;
}

#result_list thead th,
#result_list thead td {
  background: linear-gradient(135deg, var(--gc-primary-dark) 0%, var(--gc-primary) 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 11px 14px;
  border-bottom: none;
  white-space: nowrap;
}

#result_list thead th a,
#result_list thead th a:visited {
  color: #D1E8EB;
  text-decoration: none;
}

#result_list thead th a:hover {
  color: #fff;
}

/* Sort indicator */
#result_list thead th.sorted a {
  color: #fff;
}

#result_list thead th.sorted .sortedascending,
#result_list thead th.sorted .sorteddescending {
  color: var(--gc-cta);
}

/* Row styles */
#result_list tbody tr {
  transition: background 0.1s;
}

#result_list tbody tr:nth-child(odd) {
  background-color: #FAFCFD;
}

#result_list tbody tr:nth-child(even) {
  background-color: #ffffff;
}

#result_list tbody tr:hover {
  background-color: #EEF7F8;
}

#result_list tbody td,
#result_list tbody th {
  padding: 10px 14px;
  border-bottom: 1px solid #EDF4F5;
  color: #1f2937;
  vertical-align: middle;
}

#result_list tbody tr:last-child td,
#result_list tbody tr:last-child th {
  border-bottom: none;
}

/* Links in table */
#result_list tbody td a,
#result_list tbody th a {
  color: var(--gc-primary);
  text-decoration: none;
  font-weight: 500;
}

#result_list tbody td a:hover,
#result_list tbody th a:hover {
  color: var(--gc-cta);
  text-decoration: underline;
}

/* Checkbox column */
#result_list thead th#action-checkbox-column,
#result_list tbody td.action-checkbox {
  width: 32px;
  text-align: center;
  padding-inline: 10px;
}

/* ── Filter sidebar ──────────────────────────────────────────────────────── */
#changelist-filter {
  background: #fff;
  border: 1px solid var(--gc-border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13px;
  margin-left: 16px;
}

#changelist-filter h2 {
  background: linear-gradient(90deg, var(--gc-primary-dark), var(--gc-primary));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 14px;
  margin: 0;
}

#changelist-filter h3 {
  font-size: 11px;
  font-weight: 700;
  color: var(--gc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px 4px;
  margin: 0;
  border-top: 1px solid var(--gc-border);
}

#changelist-filter ul {
  padding: 4px 14px 10px;
  margin: 0;
  list-style: none;
}

#changelist-filter ul li {
  padding: 2px 0;
}

#changelist-filter ul li a {
  color: var(--gc-text-muted);
  text-decoration: none;
  font-size: 12px;
}

#changelist-filter ul li a:hover {
  color: var(--gc-primary);
}

#changelist-filter ul li.selected a {
  color: var(--gc-cta);
  font-weight: 600;
}

/* ── Paginator ───────────────────────────────────────────────────────────── */
.paginator {
  font-size: 12px;
  color: var(--gc-text-muted);
  padding: 10px 0 0;
}

.paginator a, .paginator a:visited {
  color: var(--gc-primary);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid var(--gc-border);
  border-radius: 5px;
  font-weight: 600;
}

.paginator a:hover {
  background: var(--gc-primary);
  color: #fff;
  border-color: var(--gc-primary);
}

.paginator .this-page {
  background: var(--gc-primary);
  color: #fff;
  padding: 3px 8px;
  border-radius: 5px;
  font-weight: 700;
}

/* ── Buttons global ──────────────────────────────────────────────────────── */
.button,
input[type=submit],
input[type=button],
.submit-row input.default {
  background-color: var(--gc-primary) !important;
  border-color: var(--gc-primary) !important;
  border-radius: 7px !important;
  padding: 7px 16px !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.button:hover,
input[type=submit]:hover,
input[type=button]:hover,
.submit-row input.default:hover {
  background-color: var(--gc-primary-dark) !important;
  border-color: var(--gc-primary-dark) !important;
}

.button.default, .submit-row input.default {
  background-color: var(--gc-cta) !important;
  border-color: var(--gc-cta) !important;
}

.button.default:hover, .submit-row input.default:hover {
  background-color: var(--gc-cta-hover) !important;
  border-color: var(--gc-cta-hover) !important;
}

/* Delete button */
.deletelink,
.submit-row a.deletelink {
  background: var(--gc-danger) !important;
  border-color: var(--gc-danger) !important;
  border-radius: 7px !important;
  padding: 7px 16px !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
div.breadcrumbs {
  background: #EEF7F8;
  border-bottom: 1px solid var(--gc-border);
  padding: 8px 16px;
  font-size: 12px;
  color: var(--gc-text-muted);
}

div.breadcrumbs a {
  color: var(--gc-primary);
  text-decoration: none;
  font-weight: 500;
}

div.breadcrumbs a:hover {
  color: var(--gc-cta);
}

/* ── Module captions ─────────────────────────────────────────────────────── */
.module caption {
  background-color: transparent;
  color: var(--gc-primary-dark);
  font-weight: 700;
  font-size: 13px;
}

/* ── Change form — fieldsets & rows ──────────────────────────────────────── */
fieldset.module {
  background: #fff !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
  overflow: hidden;
  padding: 0 !important;
}

fieldset.module h2 {
  background: linear-gradient(90deg, var(--gc-primary-dark), var(--gc-primary)) !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 16px !important;
  margin: 0 !important;
}

.form-row {
  background: #fff !important;
  border-bottom: 1px solid #EDF4F5 !important;
  padding: 12px 16px !important;
}

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

.form-row:nth-child(even) {
  background: #FAFCFD !important;
}

.form-row label {
  color: var(--gc-text-muted) !important;
  font-size: 13px;
  font-weight: 600;
}

/* Inputs inside forms */
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password],
.form-row input[type=number],
.form-row input[type=date],
.form-row input[type=time],
.form-row input[type=datetime-local],
.form-row textarea,
.form-row select,
.vTextField,
.vDateField,
.vTimeField,
.vForeignKeyRawIdAdminField {
  border: 1px solid var(--gc-border) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  color: #1f2937 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.vTextField:focus {
  border-color: var(--gc-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(77, 184, 212, 0.2) !important;
}

/* ── Submit row ──────────────────────────────────────────────────────────── */
.submit-row {
  background: #EEF7F8 !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-top: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── Login ───────────────────────────────────────────────────────────────── */
.login #container {
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(28, 43, 46, 0.2);
}

.login #header {
  background: linear-gradient(135deg, #1C2B2E 0%, #2B7A7E 55%, #4DB8D4 100%);
}

.login #header h1 a {
  color: #f9fafb;
}