:root{--navy:#0a2a66;--gold:#d49a00;--ink:#172033;--muted:#667085;--bg:#f4f6f9;--card:#fff;--line:#e5e7eb;--success:#137a4b;--danger:#b42318}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#f7f8fb,#eef2f7)}.login-card{width:min(460px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px;box-shadow:0 18px 60px #0a2a6615}.login-card img{width:260px;max-width:100%;margin:0 auto 28px;display:block}.login-card h1{font-size:25px;margin:0 0 8px;color:var(--navy)}.login-card p{color:var(--muted);margin:0 0 24px}.field{margin:14px 0}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid #d0d5dd;border-radius:9px;background:#fff}.field textarea{min-height:90px;resize:vertical}.btn{border:0;border-radius:9px;padding:10px 15px;background:var(--navy);color:#fff;font-weight:700}.btn.gold{background:var(--gold);color:#172033}.btn.light{background:#eef2f7;color:var(--ink)}.btn.danger{background:#fee4e2;color:var(--danger)}.full{width:100%}.layout{min-height:100vh;display:flex}.side{width:245px;background:var(--navy);color:#fff;padding:22px 15px;position:fixed;inset:0 auto 0 0}.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 24px;border-bottom:1px solid #ffffff22}.brand img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:7px}.brand strong{font-size:15px;line-height:1.2}.brand small{display:block;color:#cbd5e1;margin-top:3px}.nav{padding-top:18px}.nav button{display:flex;width:100%;border:0;background:transparent;color:#dce5f7;padding:11px 12px;border-radius:8px;margin:2px 0;text-align:left}.nav button.active,.nav button:hover{background:#ffffff16;color:#fff}.main{margin-left:245px;flex:1}.top{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:3}.top h1{font-size:22px;margin:0;color:var(--navy)}.user{display:flex;gap:12px;align-items:center;font-size:13px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e8eef8;color:var(--navy);font-weight:800}.content{padding:28px}.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.kpi,.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 3px 12px #10182808}.kpi .label{font-size:13px;color:var(--muted)}.kpi .value{font-size:28px;font-weight:800;color:var(--navy);margin-top:8px}.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-top:18px}.card h2{font-size:17px;margin:0 0 16px;color:var(--navy)}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:13px}.table th,.table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}.table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2f7;font-size:11px;font-weight:700}.badge.gold{background:#fff4d6;color:#8a6100}.badge.green{background:#dcfae6;color:#137a4b}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.toolbar .actions{display:flex;gap:8px;flex-wrap:wrap}.search{max-width:300px}.empty{padding:35px;text-align:center;color:var(--muted)}.modal{position:fixed;inset:0;background:#10182888;display:none;align-items:center;justify-content:center;padding:20px;z-index:20}.modal.open{display:flex}.modal-card{width:min(720px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:24px}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0;color:var(--navy)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}.span2{grid-column:span 2}.items{border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0}.item-row{display:grid;grid-template-columns:2fr .6fr .8fr auto;gap:8px;margin:6px 0}.notice{padding:11px 13px;border-radius:9px;background:#fff4d6;color:#7a5500;margin-bottom:16px;font-size:13px}.error{color:var(--danger);font-size:13px;margin-top:10px}.drop{border:2px dashed #cbd5e1;border-radius:12px;padding:22px;text-align:center;background:#f8fafc}.footer{color:var(--muted);font-size:12px;padding:20px 0}.hamb{display:none;background:none;border:0;font-size:24px}@media(max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}@media(max-width:720px){.side{transform:translateX(-100%);transition:.2s;z-index:10}.side.open{transform:none}.main{margin-left:0}.hamb{display:block}.top{padding:0 15px}.content{padding:16px}.kpis{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}.item-row{grid-template-columns:1fr 1fr 1fr auto}}

/* TASK MODAL VISIBILITY FIX */
#task-module-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  background:rgba(0,0,0,.45) !important;
}

#task-module-modal .modal-card{
  position:relative !important;
  z-index:100000 !important;
  width:min(760px, calc(100vw - 48px)) !important;
  max-height:calc(100vh - 48px) !important;
  overflow:auto !important;
  background:#fff !important;
  border-radius:12px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.25) !important;
}


/* ================================================================
   CONCEPTO FILE MANAGER UI - PATCH 2
   ================================================================ */

.fm-shell{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 3px 12px #10182808;
}

.fm-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px;
  border-bottom:1px solid var(--line);
  background:#fff;
  flex-wrap:wrap;
}

.fm-toolbar-left,
.fm-toolbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.fm-search{
  width:240px;
  max-width:100%;
  padding:10px 12px;
  border:1px solid #d0d5dd;
  border-radius:9px;
}

.fm-breadcrumbs{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:#f8fafc;
}

.fm-breadcrumb-btn{
  border:0;
  background:transparent;
  color:var(--navy);
  font-weight:700;
  cursor:pointer;
  padding:5px 7px;
  border-radius:6px;
}

.fm-breadcrumb-btn:hover{
  background:#e9eef7;
}

.fm-breadcrumb-separator{
  color:var(--muted);
  font-size:16px;
}

.fm-selection-bar{
  min-height:52px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:#fbfcfe;
  flex-wrap:wrap;
}

.fm-selection-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.fm-content{
  min-height:420px;
}

.fm-table tr{
  cursor:pointer;
}

.fm-table tbody tr:hover{
  background:#f8fafc;
}

.fm-selected-row{
  background:#eef4ff !important;
}

.fm-name{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:240px;
}

.fm-item-icon{
  width:28px;
  text-align:center;
  font-size:22px;
  flex:0 0 28px;
}

.fm-empty{
  min-height:420px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  color:var(--muted);
  text-align:center;
}

@media(max-width:720px){

  .fm-toolbar{
    align-items:stretch;
  }

  .fm-toolbar-left,
  .fm-toolbar-right{
    width:100%;
  }

  .fm-search{
    flex:1;
    width:auto;
  }

  .fm-selection-bar{
    align-items:flex-start;
  }

  .fm-name{
    min-width:180px;
  }

}



/* ================================================================
   CONCEPTO EXHIBITFLOW - RESPONSIVE UX ENHANCEMENT
   Preserves desktop layout; improves tablet/mobile behavior.
   ================================================================ */

.mobile-nav-backdrop{
  display:none;
}

@media (max-width:1000px){

  .content{
    padding:22px;
  }

  .toolbar{
    align-items:flex-start;
  }

  .toolbar .actions{
    width:100%;
  }

  .toolbar .search{
    width:100%;
    max-width:none;
  }

  .modal-card{
    width:min(680px,calc(100vw - 32px));
  }

}

@media (max-width:720px){

  body.mobile-nav-open{
    overflow:hidden;
  }

  .mobile-nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.42);
    z-index:9;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }

  .mobile-nav-backdrop.open{
    opacity:1;
    pointer-events:auto;
  }

  .side{
    width:min(285px,86vw);
    padding:18px 12px;
  }

  .brand{
    padding-bottom:18px;
  }

  .nav button{
    min-height:44px;
    padding:11px 13px;
  }

  .main{
    width:100%;
    min-width:0;
  }

  .top{
    height:62px;
    gap:10px;
  }

  .top h1{
    font-size:18px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .top > div:first-child{
    min-width:0;
  }

  .user{
    gap:7px;
    min-width:0;
  }

  .user > span{
    display:none;
  }

  .user .btn{
    padding:8px 10px;
    white-space:nowrap;
  }

  .avatar{
    width:32px;
    height:32px;
    flex:0 0 32px;
  }

  .hamb{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding:0;
    flex:0 0 42px;
    border-radius:9px;
    color:var(--navy);
  }

  .content{
    padding:12px;
    overflow-x:hidden;
  }

  .kpi,
  .card{
    padding:15px;
    border-radius:12px;
  }

  .kpi .value{
    font-size:24px;
  }

  .grid2{
    gap:12px;
    margin-top:12px;
  }

  .toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .toolbar .actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .toolbar .actions .btn{
    width:100%;
    min-height:42px;
  }

  .search{
    width:100%;
    max-width:none;
  }

  .form-grid{
    gap:0 10px;
  }

  .field input,
  .field select,
  .field textarea{
    min-height:44px;
  }

  .modal{
    padding:10px;
    align-items:flex-start;
  }

  .modal-card{
    width:100%;
    max-width:none;
    max-height:calc(100vh - 20px);
    margin-top:10px;
    border-radius:12px;
    padding:16px;
  }

  .modal-head{
    gap:10px;
  }

  .modal-head h2{
    font-size:18px;
  }

  .items{
    overflow-x:auto;
  }

  .item-row{
    min-width:520px;
  }

  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .table{
    min-width:620px;
  }

  .table th,
  .table td{
    padding:10px 8px;
  }

  .fm-shell{
    border-radius:10px;
  }

  .fm-toolbar{
    padding:10px;
  }

  .fm-toolbar-left,
  .fm-toolbar-right{
    width:100%;
  }

  .fm-toolbar-left .btn,
  .fm-toolbar-right .btn{
    min-height:42px;
  }

  .fm-search{
    width:100%;
    min-height:42px;
  }

  .fm-selection-bar{
    padding:10px;
  }

  .fm-selection-actions{
    width:100%;
  }

  .fm-selection-actions .btn{
    min-height:42px;
  }

  .fm-content{
    min-height:300px;
  }

  .fm-table{
    min-width:680px;
  }

  #fm-upload-progress > div > div{
    width:min(520px,calc(100vw - 24px)) !important;
  }

}

@media (max-width:480px){

  .content{
    padding:9px;
  }

  .top{
    padding:0 10px;
  }

  .top h1{
    font-size:17px;
  }

  .user .btn{
    padding:7px 9px;
  }

  .toolbar .actions{
    grid-template-columns:1fr;
  }

  .kpi .value{
    font-size:22px;
  }

  .card h2{
    font-size:16px;
  }

  .modal{
    padding:5px;
  }

  .modal-card{
    max-height:calc(100vh - 10px);
    margin-top:5px;
    padding:13px;
  }

  .fm-breadcrumbs{
    padding:9px 10px;
  }

}


/* ================================================================
   MOBILE PORTRAIT SCROLL / OVERFLOW IMPROVEMENT
   ================================================================ */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.side{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.table-wrap,
.fm-content{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

@media (max-width:720px){

  .toolbar{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }

  .toolbar .actions{
    display:flex;
    flex-wrap:nowrap;
    width:max-content;
  }

  .toolbar .actions .btn{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .fm-toolbar-left,
  .fm-toolbar-right{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
  }

  .fm-toolbar-left > *,
  .fm-toolbar-right > *{
    flex:0 0 auto;
  }

  .fm-selection-actions{
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
  }

  .fm-selection-actions > *{
    flex:0 0 auto;
  }

  .table-wrap{
    width:100%;
  }

  .table{
    min-width:620px;
  }

  .fm-table{
    min-width:680px;
  }

  #fm-upload-progress{
    max-width:100vw;
  }
}

@media (max-width:480px){

  .content{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .toolbar{
    margin-bottom:12px;
  }

  .toolbar .actions{
    padding-bottom:5px;
  }

  .fm-toolbar{
    overflow:hidden;
  }

  .fm-toolbar-left,
  .fm-toolbar-right{
    padding-bottom:5px;
  }
}


/* ================================================================
   THEME & BRANDING
   ================================================================ */

:root{
  --font-scale:1;
  --sidebar-color:var(--navy);
}

.side{
  background:var(--sidebar-color);
}

body{
  font-size:calc(1rem * var(--font-scale));
}

[data-theme="dark"] .light{
  background:#374151;
  color:#f9fafb;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea{
  background:#111827;
  color:#f9fafb;
  border-color:#4b5563;
}

[data-theme="dark"] .top{
  background:var(--card);
}

[data-theme="dark"] .fm-breadcrumbs,
[data-theme="dark"] .fm-selection-bar{
  background:#111827;
}

[data-theme="dark"] .drop{
  background:#111827;
  border-color:#4b5563;
}

[data-theme="compact"] .card,
[data-theme="compact"] .kpi{
  padding:14px;
}

[data-density="compact"] .field{
  margin:9px 0;
}

[data-density="compact"] .table th,
[data-density="compact"] .table td{
  padding:8px;
}

.branding-grid,
.preferences-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 16px;
}

.branding-logo-row{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.branding-logo-row img{
  width:90px;
  height:90px;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:8px;
}

.theme-branding-card{
  margin-top:18px;
}

.preferences-card{
  width:min(620px,100%);
}

@media(max-width:720px){

  .branding-grid,
  .preferences-grid{
    grid-template-columns:1fr;
  }

  .branding-grid .span2{
    grid-column:auto;
  }

  .branding-logo-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .branding-logo-row img{
    width:76px;
    height:76px;
  }

  .preferences-card{
    width:100%;
  }
}

/* CONCEPTO MOBILE BUTTON SIZING PATCH 2026-09-14 */
@media (max-width: 720px) {
  .toolbar .actions {
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .toolbar .actions .btn,
  .toolbar > .btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    padding: 9px 13px;
    font-size: 15px;
    line-height: 1.2;
  }

  .quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .quick-actions .btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    padding: 9px 13px;
    font-size: 15px;
    line-height: 1.2;
    white-space: normal;
  }
}

/* CONCEPTO MOBILE VIEW-ALL FIX 2026-09-14 */
@media (max-width: 720px) {
  /* The existing mobile toolbar was horizontally scrollable.
     That is useful for wide toolbars, but not for the dashboard title + View all pair. */
  .toolbar {
    width: 100%;
    min-width: 0;
    overflow-x: visible !important;
    overflow-y: visible;
  }

  .toolbar h2 {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
  }

  /* Force compact intrinsic sizing for buttons directly inside a toolbar. */
  .toolbar > .btn {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap;
    padding: 9px 14px;
  }

  /* Dashboard task header: keep View all compact and pinned to the right. */
  .card > .toolbar > .btn {
    flex: 0 0 auto !important;
    width: max-content !important;
  }
}

/* CONCEPTO MOBILE TABLE SWIPE FIX 2026-09-14 */
@media (max-width: 720px) {
  /* Keep horizontal scrolling inside the table container only. */
  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  /* Force genuine horizontal overflow on wide data tables. */
  .table-wrap > .table,
  .table-wrap > table {
    min-width: 620px;
    width: 620px;
  }

  /* Preserve the normal mobile page width; do not move the scroll to body. */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
}
/* CONCEPTO DASHBOARD MOBILE FINAL LAYOUT FIX 2026-09-14 */

.dashboard-task-activity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
  min-width: 0;
}

.dashboard-task-activity-grid > .card {
  min-width: 0;
}

.dashboard-task-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  min-width: 0;
}

.dashboard-task-table-wrap > .dashboard-task-table {
  min-width: 680px;
  width: 680px;
  max-width: none;
}

.dashboard-task-table-wrap th,
.dashboard-task-table-wrap td {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .dashboard-task-activity-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .dashboard-task-activity-grid > .card {
    width: 100%;
    min-width: 0;
  }

  .dashboard-task-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    padding-bottom: 8px;
    scrollbar-width: auto;
  }

  .dashboard-task-table-wrap > .dashboard-task-table {
    display: table !important;
    width: 680px !important;
    min-width: 680px !important;
    max-width: none !important;
    table-layout: auto !important;
  }
}