:root {
  --sf-blue: #0176D3;
  --sf-blue-dark: #014486;
  --sf-navy: #16325C;
  --sf-bg: #F3F2F2;
  --sf-border: #DDDBDA;
  --sf-text: #3E3E3C;
  --sf-red: #C23934;
  /* Single place to change the site-wide typeface - update this one line
     (and the matching Google Fonts <link> in templates/base.html if the new
     font isn't a system font) rather than hunting for font-family elsewhere. */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  /* Used only for table row data (see tables.css) - column headers keep
     --font-family instead. */
  --font-family-data: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  font-family: var(--font-family);
  /* White everywhere except the sidebar/header, which stay --sf-bg (see
     layout.css) - matches the reference layout: a grayish nav column with
     a separator line, the rest of the page plain white. */
  background: #fff;
  color: var(--sf-text);
  margin: 0;
  padding: 0;
}
.card {
  background: #fff;
  border: 1px solid var(--sf-border);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: #fff; border: 1px solid var(--sf-border); color: var(--sf-navy);
  cursor: pointer; flex-shrink: 0; text-decoration: none;
}
.icon-button:hover { background: var(--sf-bg); }
.icon-button svg { width: 18px; height: 18px; }
.combo-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--sf-border); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-height: 260px; overflow-y: auto;
}
.combo-dropdown.open { display: block; }
.combo-dropdown-option { padding: 8px 12px; font-size: 0.85rem; cursor: pointer; color: var(--sf-text); }
.combo-dropdown-option:hover { background: var(--sf-bg); }
.combo-dropdown-empty { padding: 8px 12px; font-size: 0.85rem; color: #706E6B; }
.readonly-field { margin-bottom: 14px; }
.readonly-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--sf-navy); margin-bottom: 2px; }
.readonly-field .readonly-value { font-size: 0.95rem; color: var(--sf-text); padding: 4px 0; }

/* Live field-validation UI shared by the register form (login.html) and the
   "Crear usuario" dialog (dialogs.html) - a status dot/check inside the
   input (see ui-helpers.js's setFieldStatus/wireLiveValidation) plus an
   optional "?" help tooltip, grouped into bordered blocks. Kept generic
   (not scoped to one page) so any form can opt in by using these classes. */
.field-group {
  border: 1px solid var(--sf-border); border-radius: 8px;
  padding: 14px 14px 4px; margin-bottom: 14px; background: var(--sf-bg);
}
.field-group .field-wrap:last-child { margin-bottom: 10px; }
.field-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.field-input-wrap { position: relative; flex: 1; min-width: 0; }
.field-input-wrap input, .field-input-wrap select {
  width: 100%; box-sizing: border-box; padding: 8px 34px 8px 10px;
  border: 1px solid var(--sf-border); border-radius: 4px; font-size: 0.9rem; margin: 0;
}
.field-input-wrap input:focus, .field-input-wrap select:focus {
  outline: none; border-color: var(--sf-blue); box-shadow: 0 0 0 1px var(--sf-blue);
}
.field-status-icon { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); pointer-events: none; }
.field-status-icon.invalid { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-red); }
.field-status-icon.valid { color: #2E844A; font-size: 15px; font-weight: 700; line-height: 1; }
.field-status-icon.valid::before { content: "✓"; }
.field-help {
  flex-shrink: 0; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--sf-border); background: none; color: #706E6B;
  font-size: 0.7rem; font-weight: 700; cursor: help; padding: 0;
}
.field-help:hover .field-help-bubble, .field-help:focus .field-help-bubble { display: block; }
.field-help-bubble {
  display: none; position: absolute; bottom: calc(100% + 8px); right: -8px; z-index: 10;
  width: 220px; padding: 8px 10px; border-radius: 6px;
  background: var(--sf-navy); color: #fff; font-size: 0.75rem; font-weight: 400;
  line-height: 1.4; text-align: left; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.password-strength { display: flex; gap: 4px; margin: -6px 0 10px; }
.password-strength-segment { flex: 1; height: 4px; border-radius: 2px; background: var(--sf-border); }
.password-strength-segment.weak { background: var(--sf-red); }
.password-strength-segment.medium { background: #B25400; }
.password-strength-segment.strong { background: #2E844A; }
input.field-invalid, select.field-invalid { border-color: var(--sf-red); }
h2.section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sf-navy);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-header h2.section-title { margin: 0; }
/* Its action button sits at the row's true horizontal center (not just
   centered in the leftover space after the title) - an equal-fr column on
   each side of the auto-sized middle column does that regardless of the
   title's length. */
.section-header-centered-action { display: grid; grid-template-columns: 1fr auto 1fr; }
.section-header-centered-action > :last-child { grid-column: 2; justify-self: center; }
#profileView h2.section-title { text-align: center; }
.sort-indicator { margin-left: 4px; font-size: 0.7rem; }

@keyframes spin { to { transform: rotate(360deg); } }

/* .btn-* classes are also used on <a> tags styled as buttons (e.g. "Mi
   perfil" linking to /perfil) - the element selector alone would miss those,
   leaving them looking unstyled next to a real <button> using the same class. */
button, a.btn-brand, a.btn-neutral, a.btn-destructive-text, a.btn-reset-light {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 9px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.1s ease;
  display: inline-block;
  text-decoration: none;
  box-sizing: border-box;
}
button:disabled { cursor: not-allowed; opacity: 0.5; }

.btn-brand { background: var(--sf-blue); color: #fff; }
.btn-brand:hover:not(:disabled) { background: var(--sf-blue-dark); }

.btn-neutral { background: #fff; color: var(--sf-text); border-color: var(--sf-border); }
.btn-neutral:hover:not(:disabled) { background: #F3F2F2; }

.btn-destructive-text { background: #fff; color: var(--sf-red); border-color: var(--sf-border); }
.btn-destructive-text:hover:not(:disabled) { background: #FDECEA; border-color: var(--sf-red); }

.btn-reset-light { background: #FDECEA; color: var(--sf-red); border-color: #FDECEA; }
.btn-reset-light:hover:not(:disabled) { background: #FBDAD7; border-color: #FBDAD7; }

.btn-mini-spinner {
  display: inline-block; width: 14px; height: 14px; margin-left: 8px;
  border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.6s linear infinite;
  vertical-align: middle;
}