/* Shared visual system for the Django templates. */
:root {
  --ink: #1e3430;
  --muted: #5f706b;
  --green: #17654f;
  --line: #dfe7e2;
  --bg: #f4f7f5;
  --red: #ae352d;
  --shadow: 0 4px 20px rgb(25 56 43 / 4%);
}
body {font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;}
::selection {background: #c8eadd; color: #14392b;}
:focus-visible {outline: 3px solid #57a78a; outline-offset: 3px;}
.skip-link {position: fixed; top: -90px; left: 16px; z-index: 10; padding: 12px 20px; background: white; border-radius: 8px;}
.skip-link:focus {top: 12px;}
.sidebar {width: 242px; padding: 32px 20px; background: #143c32; border: 0; color: white;}
.brand {color: #fff; font-size: 32px;}
.brand-icon {background: #d9eee2; color: #174d3d; border-radius: 11px;}
.brand-dot {color: #84c6a6;}
.sidebar-caption {color: #a8c6b9; font-size: 12px; margin-bottom: 35px;}
.nav-item {color: #c7dbd1; padding: 13px 14px; font-size: 15px; border: 1px solid transparent;}
.nav-item.active, .nav-item:hover {color: #fff; background: #285346; border-color: #416958;}
.sidebar-bottom, .local-note, .sidebar .text-button {color: #bfd2c8;}
.local-note {border-color: #3a5b4e;}
.local-note small {font-size: 13px;}
.sidebar .avatar {background: #37634f; color: #e4f3e9; width: 36px; height: 36px;}
.main {margin-left: 242px; min-width: 0;}
.topbar {height: 68px; background: #fff; padding-inline: 40px; font-size: 14px; color: var(--muted);}
.version {background: #edf5f0; padding: 5px 10px; border-radius: 20px; color: #3d6c56; font-weight: 600; letter-spacing: 1px;}
.content {padding: 36px 40px 48px; margin: 0 auto; max-width: 1600px;}
.heading {margin-bottom: 28px;}
h1 {font-size: clamp(28px, 2.7vw, 38px); font-weight: 700; letter-spacing: -1.2px; margin-bottom: 10px;}
h2 {font-size: 20px; font-weight: 650;}
h3 {font-size: 18px;}
.eyebrow {color: #527565; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 9px;}
.lead {font-size: 16px; line-height: 1.7; max-width: 750px;}
.muted, .back {font-size: 15px; color: var(--muted);}
.back {display: inline-block; margin-bottom: 20px;}
.button {min-height: 44px; padding: 11px 19px; font-size: 15px; border-radius: 9px; transition: background .15s, box-shadow .15s;}
.button:hover {background: #104b3b; box-shadow: 0 3px 8px rgb(20 60 44 / 12%);}
.button.secondary {background: white; border-color: #cad9d0; color: #255c47;}
.button.secondary:hover {background: #eef6f1;}
.button.small {min-height: 38px; font-size: 14px; padding: 8px 14px;}
.button:disabled {background: #e6ece8; border-color: #dbe4dd; color: #6b7d73; opacity: 1; box-shadow: none;}
.button.danger {background: #b23b32; border-color: #b23b32;}
.button.danger:hover {background: #902b24;}
.text-button, .row-actions {font-size: 14px;}
.error-text {color: var(--red);}
.actions {flex-wrap: wrap;}
.card {border-radius: 14px; box-shadow: var(--shadow);}
.panel {padding: 28px; margin-block: 20px;}
.panel > ul {padding-left: 20px; margin: 0;}
.panel li {padding-block: 8px; overflow-wrap: anywhere;}
.stats {gap: 18px; margin-bottom: 28px;}
.stat {background: white; padding: 22px 25px; border-radius: 12px; box-shadow: var(--shadow); position: relative;}
.stat::before {content: ''; position: absolute; top: 22px; right: 22px; width: 9px; height: 9px; border-radius: 50%; background: #6cad91;}
.stat:nth-child(2)::before {background: #d1a453;}
.stat>span {font-size: 15px; color: var(--muted);}
.stat strong {font-size: 36px; font-weight: 650; letter-spacing: -1px; line-height: 1.5; font-variant-numeric: tabular-nums;}
.stat small {font-size: 14px; color: var(--muted);}
.client-search {width: min(100%, 580px); margin-bottom: 26px; gap: 10px;}
.client-search input {flex: 1; min-width: 0;}
.client-folder {padding: 0; overflow: hidden; margin-bottom: 14px; border-radius: 10px; transition: border-color .15s;}
.client-folder:hover {border-color: #b9cec0;}
.client-folder[open] {border-color: #a9c6b5;}
.client-summary {display: flex; align-items: center; padding: 20px 24px; min-height: 86px; gap: 20px; cursor: pointer; list-style: none;}
.client-summary::-webkit-details-marker {display: none;}
.client-summary::marker {content: ''; font-size: 0;}
.client-summary:hover {background: #f9fcfa;}
.client-chevron {display: block; width: 20px; height: 20px; flex-shrink: 0; border-radius: 0; background: transparent; color: #60796b; transition: transform .15s;}
.client-folder[open]>.client-summary .client-chevron {transform: rotate(90deg);}
.client-name {display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0;}
.client-name strong {display: block; font-size: 19px; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere;}
.client-name small {font-size: 14px; color: var(--muted);}
.client-review-count {font-size: 14px; line-height: 1.5; padding: 5px 10px; background: #f2f5f2; border: 1px solid #e3e9e3; border-radius: 6px; color: #5b6d60; white-space: nowrap;}
.client-summary>.muted {font-size: 14px; color: #426750;}
.client-content {padding: 0 24px 16px;}
.client-tools {padding-block: 20px; justify-content: space-between;}
.client-rename summary {font-size: 14px; padding-block: 8px;}
.client-rename input {width: min(280px, 100%);}
.client-folder table {min-width: 760px;}
table {font-size: 15px;}
th {font-size: 13px; font-weight: 650; color: #52675b; background: #f2f6f3; padding-block: 14px;}
td {padding-block: 18px; border-bottom-color: #e8eee9;}
tbody tr:hover {background: #f6faf7;}
.incomplete, .incomplete:hover {background: #fff8e9;}
.file-name {font-size: 15px; font-weight: 600;}
.client-folder td small {font-size: 13px; color: var(--muted);}
.row-actions {gap: 14px;}
.row-actions a {padding-block: 8px; font-weight: 500;}
.badge {font-size: 13px; font-weight: 550; padding: 5px 9px; border-radius: 6px;}
.badge.review {background: #fff1cf; color: #806016;}
.badge.ready {background: #e2f2e8; color: #2e6846;}
.badge.failed {background: #fce9e5; color: #9a352c;}
.badge.processing, .badge.queued {background: #e7effa; color: #355c86;}
.table-footer {padding: 20px 0 4px; flex-wrap: wrap; gap: 12px;}
.table-footer>.muted {flex: 1 1 240px;}
.table-footer select {width: auto; max-width: 100%; min-width: 210px;}
.card:not(.client-folder)>.table-footer {padding: 20px 24px;}
input:not([type=checkbox]), select, textarea {min-height: 44px; border-radius: 8px; border-color: #ccd9d1; color: #243e31; font-size: 16px; padding: 11px 13px;}
input::placeholder, textarea::placeholder {color: #7c8b82;}
input:focus, select:focus, textarea:focus {outline: 3px solid #d2e9dc; border-color: #428667;}
input[type=checkbox], td input[type=checkbox] {width: 18px; height: 18px; accent-color: var(--green); cursor: pointer;}
input[type=checkbox]:disabled {cursor: not-allowed;}
label, .field label {font-size: 15px; font-weight: 600; color: #354e40;}
.field small, .helptext {font-size: 14px; color: var(--muted); line-height: 1.6;}
.form-card {padding: 28px;}
.form-grid {gap: 22px 24px;}
.form-grid:first-child {margin-top: 0;}
.form-actions {gap: 20px; padding-top: 24px;}
.dropzone {padding: 32px 20px; border-radius: 12px; border-color: #aac7b5; background: #f4faf6;}
.dropzone h2 {font-size: 20px;}
.dropzone p, .dropzone small, #file-list {font-size: 14px; color: #547360;}
.dropzone input::file-selector-button {border: 1px solid #c3d7ca; background: white; color: #275d43; border-radius: 7px; padding: 9px 12px; margin-right: 12px; cursor: pointer;}
.upload-guide {padding: 20px; background: #eaf2ed; border: 1px solid #dce8df; border-radius: 12px; align-self: start;}
.upload-guide h3, .steps strong {font-size: 16px;}
.steps p, .soft-note {font-size: 14px; color: #58705d;}
.confirm-box {background: #eff7f1; border-color: #cbdfd0; border-radius: 12px; padding: 26px; align-items: center;}
.checkbox-label {font-size: 15px; color: #425f49; line-height: 1.7; gap: 12px; margin-bottom: 0;}
.checkbox-label input {margin-top: 3px;}
.notice, .message {border-radius: 10px; font-size: 15px; line-height: 1.7; padding: 17px 20px;}
.notice {background: #fff8e9; color: #785a21; border-color: #ebdcb5;}
.notice summary {font-size: 15px; color: #72521a;}
.errorlist {font-size: 14px; color: var(--red);}
.review-toolbar {font-size: 15px; padding-block: 6px;}
.description strong, .description small {font-size: 14px;}
.description strong {color: #42715a;}
.original {margin-top: 28px;}
.raw-text pre {border: 1px solid var(--line); background: #f7f9f7; border-radius: 8px; font-size: 14px; line-height: 1.8;}
.auth-wrap {max-width: 550px; margin: 24px auto;}
.auth-wrap h1 {font-size: 40px; letter-spacing: -1.3px;}
.auth-card {padding: 32px; margin-top: 28px;}
.auth-card ul, .auth-card>p {font-size: 14px; color: var(--muted);}
.auth-card label {margin-top: 20px;}
.auth-card button {margin-top: 18px;}
.empty p {font-size: 16px; color: var(--muted);}
footer {font-size: 13px; color: #6d8172; padding: 12px 40px 24px;}
@media (max-width: 1100px) {
  .sidebar {width: 205px; padding-inline: 16px;}
  .main {margin-left: 205px;}
  .content {padding: 28px 24px;}
  .topbar {padding-inline: 24px;}
  .upload-guide {max-width: none;}
  .table-footer>.button {margin-left: auto;}
}
@media (max-width: 720px) {
  .sidebar {width: 100%; flex-wrap: wrap; padding: 16px; gap: 16px;}
  .sidebar nav {width: 100%; margin: 0; gap: 6px;}
  .nav-item {flex: 1; justify-content: center; font-size: 14px; padding: 10px 6px; gap: 6px;}
  .nav-item span {display: none;}
  .main {margin-left: 0;}
  .topbar {padding-inline: 18px; height: 48px;}
  .content {padding: 24px 16px;}
  .heading {gap: 18px;}
  h1, .auth-wrap h1 {font-size: 32px;}
  .lead {font-size: 15px;}
  .stats {gap: 8px;}
  .stat {padding: 14px 12px;}
  .stat::before {display: none;}
  .stat>span {font-size: 13px;}
  .stat strong {font-size: 30px;}
  .client-summary {padding: 18px 16px; gap: 12px; min-height: 84px; flex-wrap: wrap;}
  .client-name {flex-basis: calc(100% - 44px); order: 0;}
  .client-name strong {font-size: 18px;}
  .client-chevron {order: 1;}
  .client-review-count {order: 2;}
  .client-content {padding-inline: 12px;}
  .client-tools {gap: 10px;}
  .client-tools>.button {width: 100%;}
  .table-footer select, .table-footer>.button {width: 100%; margin: 0;}
  .table-footer>.muted {flex-basis: auto;}
  .panel, .form-card, .auth-card {padding: 22px 18px;}
  .confirm-box {padding: 20px; align-items: stretch; gap: 20px;}
  .form-actions {flex-wrap: wrap;}
  .form-actions .button {max-width: 100%; white-space: normal;}
  .auth-wrap {margin-top: 10px;}
  footer {padding-inline: 18px;}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important;}
}


/* Brea Solans & Asociados — identidad visual */
:root{
  --ink:#173f66;
  --muted:#667b8f;
  --green:#164f7d;
  --pale:#eaf1f7;
  --line:#dbe4ec;
  --bg:#f5f8fb;
  --white:#fff;
  --amber:#b28a43;
  --red:#aa4338;
}
body{background:var(--bg);color:#233f59}
a{color:#164f7d}
.sidebar{background:#fff;border-right:1px solid #d9e4ed;padding-top:24px}
.breasolans-brand{display:block;width:100%;padding:0 0 15px;border-bottom:1px solid #e1e8ef}
.breasolans-brand img{display:block;width:100%;height:auto;max-height:64px;object-fit:contain;object-position:left center}
.product-name{font-size:25px;font-weight:700;color:#123f6d;letter-spacing:-.5px;margin:17px 0 0}
.sidebar-caption{color:#71869a;margin-top:2px;margin-bottom:32px;letter-spacing:1.5px}
.nav-item{color:#61778b}
.nav-item.active,.nav-item:hover{background:#eaf2f8;color:#123f6d}
.topbar{background:#123f6d;color:#fff;border-bottom:0;text-transform:uppercase;letter-spacing:1.2px}
.topbar .version{color:#dbe8f2}
.button{background:#164f7d;border-color:#164f7d}
.button:hover{background:#0e3b62}
.button.secondary{color:#164f7d;border-color:#b9cad9;background:#fff}
.button.secondary:hover{background:#eef5fa}
.card,.stat{border-color:#dbe4ec}
.stat::before{background:#2f6f9f}
.client-folder:hover,.client-folder[open]{border-color:#aac1d3}
.client-summary:hover{background:#f6f9fc}
th{color:#49667e;background:#f1f6fa}
tbody tr:hover{background:#f6f9fc}
input:focus,select:focus,textarea:focus{outline-color:#d5e5f1;border-color:#4d7fa5}
input[type=checkbox],td input[type=checkbox]{accent-color:#164f7d}
.dropzone{border-color:#a8c0d2;background:#f4f8fb}
.upload-guide{background:#edf4f8;border-color:#dce8f0}
.confirm-box{background:#eef5f9;border-color:#cfdee9}
footer{color:#61798e;border-top:1px solid #e1e8ef;background:#fff}
footer strong{color:#123f6d}

/* Ajustes finales BreaSolans: logo oficial y legibilidad */
.breasolans-brand{min-height:92px;display:flex;align-items:center;padding:8px 0 20px}
.breasolans-brand img{width:100%;max-width:250px;max-height:92px;object-fit:contain;object-position:left center}
.sidebar-bottom>p{color:#526f86!important;font-size:15px!important;font-weight:600;line-height:1.55!important;opacity:1!important}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;font-weight:700;min-height:62px;padding-top:0;padding-bottom:0}
.topbar-slogan{color:#fff!important;font-size:14px;letter-spacing:2px;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.15)}
.topbar .version{color:#fff!important;font-size:13px;font-weight:700;letter-spacing:1.35px;opacity:1!important;white-space:nowrap}
@media(max-width:720px){.breasolans-brand{min-height:auto}.breasolans-brand img{max-width:210px}.topbar{gap:10px}.topbar-slogan{font-size:11px;letter-spacing:1px}.topbar .version{font-size:10px}}


/* BreaSolans 2026: blue corporate header + collapsible navigation */
:root{--bs-navy:#07477d;--bs-blue:#0b568f;--bs-soft:#eaf4fb;--bs-gray:#a9abb0}
.sidebar{width:260px;padding:26px 18px 24px;background:#fff;color:#123f69;border-right:1px solid #dce7ef;transition:width .22s ease,padding .22s ease;overflow:hidden}
.main{margin-left:260px;transition:margin-left .22s ease}
.breasolans-brand{min-height:104px!important;padding:6px 4px 20px!important;border-bottom:1px solid #dce7ef!important}
.breasolans-brand .brand-full{width:100%!important;max-width:220px!important;max-height:90px!important;object-fit:contain;object-position:left center}
.brand-mini{display:none;width:38px!important;height:38px!important;object-fit:contain;border-radius:4px}
.product-name{color:#07477d;font-size:25px;font-weight:800;line-height:1.15;margin:18px 4px 0}
.sidebar-caption{color:#6f8799!important;margin:4px 4px 26px!important;font-size:11px!important;font-weight:700;letter-spacing:1.5px}
.sidebar nav{gap:7px}
.sidebar .nav-item{color:#245477;padding:12px 13px;border-radius:9px;white-space:nowrap}
.sidebar .nav-item.active,.sidebar .nav-item:hover{background:#e6f2fa;color:#07477d;border-color:#cfe4f2}
.sidebar .nav-item span{min-width:24px;text-align:center;color:#0b568f}
.sidebar-bottom,.sidebar .local-note,.sidebar .text-button{color:#637d90}
.sidebar .local-note{border-color:#dce7ef}
.sidebar .avatar{background:#e6f2fa;color:#07477d}
.sidebar-toggle{position:absolute;right:10px;top:10px;width:31px;height:31px;border:1px solid #d2e2ed;background:#fff;color:#07477d;border-radius:8px;font-size:24px;line-height:24px;display:grid;place-items:center;cursor:pointer;z-index:5}
.sidebar-toggle:hover{background:#eaf4fb}
.topbar{height:62px;background:#07477d!important;border:0!important;justify-content:flex-start!important;padding:0 34px!important;color:#fff!important}
.topbar .version{background:#e9f5f7!important;color:#07477d!important;font-size:12px!important;font-weight:800!important;letter-spacing:1.1px!important;padding:7px 14px!important;border-radius:18px!important}
.topbar-slogan{display:none!important}
/* compressed state */
body.sidebar-collapsed .sidebar{width:78px;padding:54px 12px 20px}
body.sidebar-collapsed .main{margin-left:78px}
body.sidebar-collapsed .sidebar-toggle{right:23px;transform:rotate(180deg)}
body.sidebar-collapsed .breasolans-brand{min-height:62px!important;padding:0 7px 18px!important;justify-content:center;border-bottom:1px solid #dce7ef!important}
body.sidebar-collapsed .brand-full{display:none!important}
body.sidebar-collapsed .brand-mini{display:block!important}
body.sidebar-collapsed .product-name,body.sidebar-collapsed .sidebar-caption{display:none}
body.sidebar-collapsed .sidebar nav{margin-top:20px}
body.sidebar-collapsed .nav-item{width:54px;height:48px;padding:11px 14px;gap:0;font-size:0;justify-content:center}
body.sidebar-collapsed .nav-item span{font-size:23px;min-width:24px}
body.sidebar-collapsed .sidebar-bottom{display:none}
@media(max-width:1100px) and (min-width:721px){.sidebar{width:230px}.main{margin-left:230px}body.sidebar-collapsed .sidebar{width:78px}body.sidebar-collapsed .main{margin-left:78px}}
@media(max-width:720px){.sidebar-toggle{display:none}.brand-mini{display:none!important}.breasolans-brand .brand-full{display:block!important}.topbar{justify-content:flex-start!important}.topbar .version{font-size:9px!important}.sidebar{width:auto!important}.main{margin-left:0!important}}

/* BreaSolans: toggle flotante y marca compacta solo al comprimir */
.sidebar{overflow:visible!important}
.sidebar-toggle{
  position:fixed!important;
  left:242px!important;
  right:auto!important;
  top:72px!important;
  width:30px!important;
  height:30px!important;
  border:1px solid #d4e1e9!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 3px 10px rgba(7,71,125,.16)!important;
  font-size:20px!important;
  line-height:1!important;
  z-index:100!important;
  transition:left .22s ease,transform .22s ease!important;
}
/* Con el menú abierto se muestra únicamente el logo completo. */
body:not(.sidebar-collapsed) .brand-mini{display:none!important}
/* Con el menú cerrado desaparece el logo completo y aparece solo el isotipo. */
body.sidebar-collapsed .sidebar-toggle{left:63px!important;right:auto!important;transform:rotate(180deg)!important}
body.sidebar-collapsed .breasolans-brand{display:flex!important;min-height:54px!important;padding:0 6px 12px!important;border-bottom:1px solid #dce7ef!important;justify-content:center!important}
body.sidebar-collapsed .brand-full{display:none!important}
body.sidebar-collapsed .brand-mini{display:block!important;width:34px!important;height:34px!important;margin:0 auto!important}
@media(max-width:1100px) and (min-width:721px){body:not(.sidebar-collapsed) .sidebar-toggle{left:212px!important}body.sidebar-collapsed .sidebar-toggle{left:63px!important}}
@media(max-width:720px){.sidebar-toggle{display:none!important}}

/* BreaSolans final: centrado exacto del control flotante */
.sidebar-toggle{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  text-align:center!important;
  font-family:Arial,sans-serif!important;
  font-size:20px!important;
  font-weight:400!important;
  line-height:30px!important;
  box-sizing:border-box!important;
  text-indent:0!important;
}

/* Upload: reusable exchange rates above, opening balances below. */
.upload-heading {align-items:flex-start;gap:24px;}
.rate-repository {flex:0 1 350px;background:#f4f8fb;border:1px solid #d5e1e9;border-radius:12px;padding:18px 20px;}
.rate-repository .eyebrow {display:block;margin:0 0 10px;}
.rate-repository .button {display:flex;text-align:center;justify-content:center;white-space:normal;}
.rate-repository p {font-size:15px;line-height:1.5;margin:10px 0 0;color:#556773;}
.opening-inputs {border-top:1px solid #dce4e8;margin-top:28px;padding-top:24px;}
.cell-reference {display:inline-block;margin-left:8px;border-radius:4px;background:#edf3f7;color:#34566e;padding:2px 7px;font-size:13px;vertical-align:middle;}
@media(max-width:900px){.upload-heading{flex-direction:column;align-items:stretch;}.rate-repository{flex:auto;max-width:none;}}
