/* ══════════════════════════════════════
   Container Pro v4.0 — styles.css
   Atlantic Container Terminals
══════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:    #1B2A4A;
  --navy2:   #243459;
  --red:     #E8232A;
  --red2:    #C41E24;
  --cyan:    #29B6E8;
  --cyan2:   #1A9FD0;
  --bg:      #F4F6F9;
  --bg2:     #EAEDF2;
  --white:   #FFFFFF;
  --text:    #1B2A4A;
  --text2:   #4A5568;
  --text3:   #8A97AA;
  --border:  #D1D9E6;
  --border2: #B8C4D4;
  --font-body:    'Inter', sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
}

html, body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

.app { min-height: 100vh; }


/* ══════════════════════════════════════
   LOGIN
══════════════════════════════════════ */
#login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.login-topbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.logo-wrap { display: flex; align-items: center; gap: 12px; }
.logo-mark { width: 38px; height: 38px; flex-shrink: 0; }
.logo-text-wrap { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: .04em; color: var(--navy); }
.logo-name span { color: var(--red); }
.logo-tagline { font-size: 10px; color: var(--cyan2); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.topbar-lang { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text2); }
.topbar-lang svg { width: 16px; height: 16px; stroke: var(--text3); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 16px; }

.login-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  width: 440px;
  max-width: 100%;
  padding: 40px 44px;
  box-shadow: 0 4px 24px rgba(27,42,74,.07);
}

.login-card-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.login-logo-mark { width: 52px; height: 52px; flex-shrink: 0; }
.login-card-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: .02em; }
.login-card-title span { color: var(--red); }
.login-card-sub { font-size: 11px; color: var(--cyan2); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }

.login-heading { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--navy); margin-bottom: 24px; }

.lf { margin-bottom: 18px; }
.lf label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.lf input {
  width: 100%; border: 1px solid var(--border2); background: var(--white);
  border-radius: 2px; padding: 11px 14px; font-size: 14px;
  font-family: var(--font-body); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.lf input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(41,182,232,.12); }
.lf input::placeholder { color: var(--text3); }
.lf input.err { border-color: var(--red); box-shadow: 0 0 0 3px rgba(232,35,42,.08); }

.forgot-link { display: inline-block; margin-bottom: 20px; font-size: 13px; font-weight: 600; color: var(--red); cursor: pointer; transition: color .15s; }
.forgot-link:hover { color: var(--red2); }

.login-bottom-row { display: flex; align-items: center; justify-content: space-between; }
.remember-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); cursor: pointer; user-select: none; }
.remember-label input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--red); cursor: pointer; }

.btn-login {
  background: var(--red); color: #fff; border: 1.5px solid var(--red);
  border-radius: 2px; padding: 10px 32px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-login:hover { background: var(--red2); border-color: var(--red2); }

.login-demo-hint { margin-top: 16px; font-size: 11px; color: var(--text3); text-align: center; border-top: 1px solid var(--border); padding-top: 14px; }

.login-footer { background: var(--navy); padding: 12px 32px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.login-footer-left { display: flex; align-items: center; gap: 10px; font-size: 11px; color: rgba(255,255,255,.5); }
.login-footer-left strong { color: rgba(255,255,255,.8); }
.footer-logo-sm { width: 26px; height: 26px; flex-shrink: 0; }
.login-footer-right { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.3); }


/* ══════════════════════════════════════
   MAIN APP
══════════════════════════════════════ */
#main-app { display: none; min-height: 100vh; flex-direction: column; }
#main-app.visible { display: flex; }

.app-header {
  background: var(--white); border-bottom: 1px solid var(--border);
  height: 56px; padding: 0 24px; display: flex; align-items: center;
  flex-shrink: 0; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 8px rgba(27,42,74,.07);
}
.app-brand { display: flex; align-items: center; gap: 10px; padding-right: 24px; margin-right: 8px; border-right: 1px solid var(--border); }
.app-logo-mark { width: 30px; height: 30px; flex-shrink: 0; }
.app-brand-name { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: .04em; color: var(--navy); white-space: nowrap; }
.app-brand-name span { color: var(--red); }

.app-nav { display: flex; flex: 1; }
.anav {
  display: flex; align-items: center; gap: 6px;
  padding: 0 18px; height: 56px; font-size: 13px; font-weight: 500;
  color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent;
  transition: all .15s; user-select: none; white-space: nowrap;
}
.anav svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.anav:hover { color: var(--text); background: var(--bg); }
.anav.active { color: var(--navy); border-bottom-color: var(--red); font-weight: 600; }

.app-header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.status-pill { display: flex; align-items: center; gap: 6px; background: rgba(41,182,232,.1); border: 1px solid rgba(41,182,232,.25); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--cyan2); letter-spacing: .04em; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: blink 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.user-badge { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--border); background: var(--white); border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--text); box-shadow: 0 1px 3px rgba(27,42,74,.06); }
.user-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--navy2), var(--navy)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 10px; font-weight: 700; flex-shrink: 0; box-shadow: 0 1px 3px rgba(27,42,74,.2); }
.btn-signout { background: none; border: none; font-size: 12px; font-weight: 500; color: var(--text3); cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: color .15s; font-family: var(--font-body); }
.btn-signout:hover { color: var(--red); }

.main-layout { display: flex; flex: 1; min-height: calc(100vh - 56px); }

.sidebar { width: 200px; background: var(--white); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 56px; height: calc(100vh - 56px); }
.sidebar-section { padding: 16px 16px 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); }
.sitem { display: flex; align-items: center; gap: 9px; padding: 9px 14px; margin: 1px 8px; font-size: 13px; font-weight: 500; color: var(--text2); cursor: pointer; border-radius: 6px; border-left: 2px solid transparent; transition: all .15s; user-select: none; }
.sitem svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sitem:hover { background: rgba(27,42,74,.05); color: var(--navy); }
.sitem.active { background: rgba(27,42,74,.08); color: var(--navy); border-left-color: var(--red); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.sidebar-bottom { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--border); }
.terminal-info { font-size: 11px; color: var(--text3); line-height: 1.9; }
.terminal-info strong { color: var(--text2); }

.main-content { flex: 1; overflow-y: auto; background: var(--bg); }
.page { display: none; padding: 24px; }
.page.active { display: block; }

.page-header { margin-bottom: 20px; }
.page-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: .02em; display: flex; align-items: center; gap: 10px; }
.page-title::before { content: ''; display: block; width: 4px; height: 22px; background: var(--red); border-radius: 2px; flex-shrink: 0; }
.page-sub { font-size: 12px; color: var(--text3); margin-top: 4px; padding-left: 14px; }

/* Metrics */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.metric-card { background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; padding: 16px 18px; transition: box-shadow .2s, transform .2s; box-shadow: 0 1px 4px rgba(27,42,74,.05); }
.metric-card:hover { box-shadow: 0 4px 16px rgba(27,42,74,.10); transform: translateY(-1px); }
.metric-card.navy { border-left-color: var(--navy); background: linear-gradient(135deg, #fff 60%, rgba(27,42,74,.03)); }
.metric-card.red  { border-left-color: var(--red);  background: linear-gradient(135deg, #fff 60%, rgba(232,35,42,.03)); }
.metric-card.cyan { border-left-color: var(--cyan); background: linear-gradient(135deg, #fff 60%, rgba(41,182,232,.04)); }
.metric-card.gray { border-left-color: var(--text3); }
.metric-label { font-size: 11px; font-weight: 600; color: var(--text3); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.metric-value { font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1; color: var(--navy); }
.metric-value.red  { color: var(--red); }
.metric-value.cyan { color: var(--cyan2); }

/* Cards */
.card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px; overflow: hidden; box-shadow: 0 1px 4px rgba(27,42,74,.06); transition: box-shadow .2s; }
.card:hover { box-shadow: 0 3px 12px rgba(27,42,74,.09); }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--white) 0%, rgba(244,246,249,.5) 100%); }
.card-title { font-size: 12px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; gap: 8px; }
.card-title::before { content: ''; width: 3px; height: 14px; background: var(--cyan); border-radius: 2px; flex-shrink: 0; }

/* Table */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { padding: 9px 14px; text-align: left; font-size: 11px; font-weight: 700; color: var(--text3); letter-spacing: .07em; text-transform: uppercase; background: var(--bg); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 10px 14px; border-bottom: 1px solid var(--bg2); vertical-align: middle; color: var(--text); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #F8FAFE; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-entrada { background: rgba(41,182,232,.1);  color: var(--cyan2); border: 1px solid rgba(41,182,232,.2); }
.badge-salida  { background: rgba(232,35,42,.08);  color: var(--red);   border: 1px solid rgba(232,35,42,.2); }

.chip { font-size: 11px; font-weight: 700; color: var(--navy); background: rgba(27,42,74,.07); padding: 2px 8px; border-radius: 5px; font-family: var(--font-display); letter-spacing: .05em; white-space: nowrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: .03em; cursor: pointer; border: 1px solid var(--border); background: var(--white); color: var(--text); font-family: var(--font-body); transition: all .15s; }
.btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { background: var(--bg); border-color: var(--border2); box-shadow: 0 1px 4px rgba(27,42,74,.08); }
.btn-primary { background: linear-gradient(180deg, #243459 0%, var(--navy) 100%); border-color: var(--navy); color: #fff; box-shadow: 0 1px 3px rgba(27,42,74,.25); }
.btn-primary:hover { background: linear-gradient(180deg, #2a3d6a 0%, var(--navy2) 100%); border-color: var(--navy2); box-shadow: 0 2px 8px rgba(27,42,74,.3); }
.btn-red { background: linear-gradient(180deg, #f0282f 0%, var(--red) 100%); border-color: var(--red); color: #fff; box-shadow: 0 1px 3px rgba(232,35,42,.25); }
.btn-red:hover { background: linear-gradient(180deg, var(--red) 0%, var(--red2) 100%); border-color: var(--red2); box-shadow: 0 2px 8px rgba(232,35,42,.3); }
.btn-sm { padding: 5px 10px; font-size: 11px; border-radius: 5px; }

/* Filter */
.filter-row { display: flex; gap: 8px; margin-bottom: 14px; }
.search-wrap { flex: 1; position: relative; }
.search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; stroke: var(--text3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.search-wrap input { width: 100%; padding: 9px 12px 9px 33px; border: 1px solid var(--border2); background: var(--white); border-radius: 2px; font-size: 13px; font-family: var(--font-body); color: var(--text); transition: border-color .15s, box-shadow .15s; }
.search-wrap input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(41,182,232,.1); }
.search-wrap input::placeholder { color: var(--text3); }
.filter-select { padding: 9px 12px; border: 1px solid var(--border2); background: var(--white); border-radius: 2px; font-size: 13px; font-family: var(--font-body); font-weight: 500; color: var(--text); cursor: pointer; }
.filter-select:focus { outline: none; border-color: var(--cyan); }

.empty-state { text-align: center; padding: 40px; color: var(--text3); font-size: 13px; }


/* ══════════════════════════════════════
   TIR FORM STYLES
══════════════════════════════════════ */
.alert-success { display: none; background: rgba(26,159,111,.1); border: 1px solid rgba(26,159,111,.3); color: #0f6e4a; padding: 10px 16px; font-size: 12px; font-weight: 600; margin-bottom: 12px; border-radius: 2px; }
.alert-success.show { display: block; }

/* TIR Header */
.tir-header { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--red); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 2px; }
.tir-logo-wrap { display: flex; align-items: center; gap: 10px; }
.tir-logo { width: 42px; height: 42px; flex-shrink: 0; }
.tir-company-name { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--navy); line-height: 1.3; }
.tir-company-name span { color: var(--red); }
.tir-company-sub { font-size: 10px; color: var(--cyan2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tir-info-center { font-size: 10px; color: var(--text3); text-align: center; line-height: 1.8; }
.tir-num-box { background: var(--navy); color: #fff; padding: 8px 16px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 2px; min-width: 260px; }
.tir-num-label { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.tir-num-input { background: transparent; border: none; color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 800; width: 240px; text-align: center; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tir-num-input:focus { outline: none; }
.tir-num-input::placeholder { color: rgba(255,255,255,.4); }

/* Type bar */
.tir-type-bar { background: var(--navy); padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.tipo-selector { display: flex; gap: 6px; }
.tipo-btn { padding: 4px 16px; border: 1.5px solid rgba(255,255,255,.3); background: transparent; color: rgba(255,255,255,.6); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: all .15s; border-radius: 2px; }
.tipo-btn:hover { border-color: rgba(255,255,255,.7); color: #fff; }
.tipo-btn.active { background: var(--red); border-color: var(--red); color: #fff; }

/* Date/time row */
.tir-dt-row { background: var(--bg2); border: 1px solid var(--border); border-bottom: none; padding: 8px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tir-dt-row label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.tir-dt-row input[type="date"],
.tir-dt-row input[type="time"] { border: 1px solid var(--border2); padding: 5px 10px; font-size: 13px; font-family: var(--font-body); color: var(--text); background: var(--white); border-radius: 2px; }
.tir-dt-row input:focus { outline: none; border-color: var(--cyan); }

/* TIR sections */
.tir-section { background: var(--white); border: 1px solid var(--border); margin-bottom: 8px; overflow: hidden; }
.tir-section-head { background: var(--navy); color: #fff; padding: 7px 16px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.tir-section-head::before { content: '//'; color: var(--red); font-size: 11px; }
.tir-body { padding: 14px 16px; }

/* Form grid */
.fgrid { display: grid; gap: 10px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
.mb10 { margin-bottom: 10px; }

.frow { display: flex; flex-direction: column; gap: 4px; }
.frow label { font-size: 10px; font-weight: 700; color: var(--text3); letter-spacing: .06em; text-transform: uppercase; }
.frow input, .frow select, .frow textarea {
  border: 1px solid var(--border2); background: var(--white);
  padding: 7px 10px; font-size: 12px; font-family: var(--font-body);
  color: var(--text); border-radius: 2px;
  transition: border-color .15s, box-shadow .15s;
}
.frow input:focus, .frow select:focus, .frow textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(41,182,232,.1); }
.frow input::placeholder, .frow textarea::placeholder { color: var(--text3); }
.frow select option { background: var(--white); color: var(--text); }
.frow textarea { resize: vertical; }

/* Checks / radios */
.check-group { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.check-item { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text2); cursor: pointer; user-select: none; }
.check-item input { width: 14px; height: 14px; accent-color: var(--red); cursor: pointer; }
.radio-item { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--text2); cursor: pointer; user-select: none; }
.radio-item input { width: 14px; height: 14px; accent-color: var(--navy); cursor: pointer; }

/* Daños */
.danios-pregunta { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.danios-label { font-size: 12px; font-weight: 600; color: var(--text2); }
.damage-legend { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; font-size: 11px; color: var(--text2); border: 1px solid var(--border); padding: 8px; background: var(--bg2); margin-bottom: 10px; border-radius: 2px; }
.dl-item { display: flex; gap: 6px; align-items: center; }
.dl-code { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--navy); min-width: 22px; }

.diagram-area { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.diagram-box { border: 1px solid var(--border); background: var(--bg2); padding: 10px; text-align: center; border-radius: 2px; }
.diagram-label { font-size: 10px; font-weight: 700; color: var(--text3); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.diagram-input { width: 100%; margin-top: 6px; border: 1px solid var(--border2); padding: 5px 8px; font-size: 11px; font-family: var(--font-body); color: var(--text); border-radius: 2px; }
.diagram-input:focus { outline: none; border-color: var(--cyan); }

/* Truck inspection */
.truck-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.truck-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); background: var(--bg2); border-radius: 2px; }
.truck-name { font-size: 11px; font-weight: 600; color: var(--text2); flex: 1; }
.truck-radios { display: flex; gap: 10px; flex-shrink: 0; }

/* Signatures */
.sign-disclaimer { font-size: 11px; color: var(--text3); font-style: italic; padding: 6px 16px 4px; }
.sign-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px; }
.sign-box { display: flex; flex-direction: column; gap: 8px; }
.sign-line { border-bottom: 1px solid var(--border2); height: 44px; background: var(--bg2); display: flex; align-items: flex-end; padding: 4px 8px; }
.sign-input { width: 100%; border: none; background: transparent; font-size: 13px; font-family: var(--font-body); color: var(--text); }
.sign-input:focus { outline: none; }
.sign-label { font-size: 10px; font-weight: 700; color: var(--text3); letter-spacing: .06em; text-transform: uppercase; text-align: center; }

/* TIR actions */
.tir-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 0 8px; }

/* Modal */
.overlay { display: none; position: fixed; inset: 0; background: rgba(27,42,74,.45); z-index: 300; align-items: center; justify-content: center; }
.overlay.open { display: flex; }
.modal { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--red); width: 480px; max-width: 95vw; border-radius: 4px; box-shadow: 0 20px 60px rgba(27,42,74,.18); animation: slideUp .2s ease both; overflow: hidden; }
.modal-lg { width: 640px; }
@keyframes slideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.modal-header { padding: 20px 24px 0; }
.modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: .02em; }
.modal-sub { font-size: 12px; color: var(--text3); margin-top: 4px; margin-bottom: 16px; }
.modal-body { padding: 0 24px 20px; max-height: 60vh; overflow-y: auto; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--bg); }

/* Detail table in modal */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; }
.detail-item { display: flex; flex-direction: column; gap: 2px; }
.detail-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.detail-value { color: var(--text); font-weight: 500; }
.detail-section { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); padding: 10px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 8px; grid-column: span 2; }

/* Responsive */
/* ══════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE
══════════════════════════════════════ */

/* ── Hamburger menu button (hidden on desktop) ── */
.btn-hamburger {
  display: none; background: none; border: none; cursor: pointer;
  padding: 6px; color: var(--navy); flex-shrink: 0;
  margin-right: 4px;
}
.btn-hamburger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.5; display: block; }
/* En dark mode el header es oscuro, necesitamos color claro */
body.dark-mode .btn-hamburger { color: rgba(255,255,255,.85); }

/* ── Sidebar overlay (mobile) ── */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 200; opacity: 0; transition: opacity .25s;
}
.sidebar-overlay.visible { opacity: 1; }

/* ── Table wrapper — horizontal scroll on small screens ── */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table { min-width: 600px; }

/* ══ TABLET (≤1024px) ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dash-charts-grid { grid-template-columns: 1fr; }
  .dash-bottom-grid { grid-template-columns: 1fr; }
  .app-nav .anav { padding: 0 12px; font-size: 12px; }
  .tir-num-box { min-width: 200px; }
}

/* ══ MOBILE LARGE (≤768px) ════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Header */
  .app-header { padding: 0 12px; gap: 8px; }
  .btn-hamburger { display: flex; }
  .app-nav { display: none; }
  .app-brand-name { font-size: 14px; }
  .status-pill { display: none; }
  .sb-name-text, #sb-rol { display: none; }
  .user-badge { padding: 4px 8px; gap: 6px; }
  .btn-signout { font-size: 11px; padding: 4px 8px; }
  .btn-dark-toggle { width: 28px; height: 28px; }

  /* Sidebar — slide in from left on mobile */
  .sidebar {
    position: fixed; left: -220px; top: 0; height: 100vh;
    z-index: 300; transition: left .25s ease;
    width: 220px; padding-top: 56px;
    box-shadow: none;
  }
  .sidebar.open { left: 0; box-shadow: 4px 0 20px rgba(0,0,0,.2); }
  .sidebar-overlay { display: block; pointer-events: none; }
  .sidebar-overlay.visible { pointer-events: all; }

  /* Main layout */
  .main-layout { flex-direction: column; }
  .main-content { width: 100%; }

  /* Pages */
  .page { padding: 12px; }
  .page-header { margin-bottom: 14px; }
  .page-title { font-size: 18px; }
  .page-header.dash-header-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dash-header-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }

  /* Metrics */
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
  .metric-card { padding: 12px 14px; }
  .metric-value { font-size: 24px; }
  .metric-label { font-size: 10px; }

  /* Filter row */
  .filter-row { flex-wrap: wrap; gap: 6px; }
  .filter-row .search-wrap { min-width: 0; flex: 1 1 100%; }
  .filter-select { flex: 1 1 calc(50% - 3px); min-width: 0; }

  /* Tables — horizontal scroll */
  .card table, .card > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* TIR form */
  .tir-header { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .tir-logo-wrap { flex: 1; min-width: 0; }
  .tir-num-box { width: 100%; min-width: 0; }
  .tir-num-input { width: 100%; font-size: 11px; }
  .tir-type-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; font-size: 12px; }
  .tir-dt-row { flex-wrap: wrap; gap: 8px; font-size: 12px; padding: 8px 12px; }
  .tir-body { padding: 12px; }
  .tir-actions { padding: 12px; flex-wrap: wrap; gap: 8px; }
  .tir-actions .btn { flex: 1; justify-content: center; }

  /* Form grids */
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .fgrid.g2 { grid-template-columns: 1fr; }
  .fgrid.g3 { grid-template-columns: 1fr; }
  .fgrid.g4 { grid-template-columns: 1fr 1fr; }
  .span2, .span3 { grid-column: span 1; }

  /* Diagram & truck grid */
  .diagram-area { grid-template-columns: 1fr; }
  .truck-grid { grid-template-columns: 1fr; }

  /* Sign row */
  .sign-row { grid-template-columns: 1fr; gap: 12px; padding: 12px; }

  /* Modals */
  .overlay { align-items: flex-end; padding: 0; }
  .modal { width: 100% !important; max-width: 100% !important; border-radius: 12px 12px 0 0; max-height: 92vh; }
  .modal-lg { width: 100% !important; }
  .modal-body { max-height: 55vh; padding: 0 16px 16px; }
  .modal-header { padding: 16px 16px 0; }
  .modal-footer { flex-wrap: wrap; gap: 6px; padding: 12px 16px; }
  .modal-footer .btn { flex: 1; justify-content: center; font-size: 12px; }
  .modal-tabs { overflow-x: auto; white-space: nowrap; padding: 0 12px; }
  .modal-tab { padding: 10px 12px; font-size: 11px; }

  /* Detail grid */
  .detail-grid { grid-template-columns: 1fr; }
  .detail-item { grid-column: span 1 !important; }

  /* Pagination */
  .pagination-row { justify-content: center; }

  /* Patio map */
  .patio-celda { width: 44px; height: 32px; }
  .patio-bloque-body { padding: 10px; }
  .patio-legend { flex-wrap: wrap; gap: 8px; font-size: 10px; }

  /* Alert banner */
  .alerta-item { flex-wrap: wrap; gap: 4px; }

  /* Card body */
  .card-body { padding: 12px; }
  .card-head { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }

  /* Login */
  .login-topbar { padding: 12px 16px; }
  .login-card { padding: 24px 20px; margin: 12px; }
  .login-heading { font-size: 22px; }

  /* Page control header */
  #page-control .page-header { flex-direction: column; align-items: flex-start; }
  #page-control .page-header > div:last-child { width: 100%; justify-content: flex-start; }

  /* Inventario page header */
  #page-inventario .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  #page-inventario .page-header > div { width: 100%; }

  /* Chips wrap in table */
  .chip { white-space: nowrap; }
  table td, table th { padding: 6px 8px; font-size: 11.5px; }
}

/* ══ MOBILE SMALL (≤480px) ════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .app-header { padding: 0 8px; }
  .app-brand-name { display: none; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 6px; }
  .metric-value { font-size: 22px; }
  .page { padding: 8px; }
  .fgrid.g4 { grid-template-columns: 1fr; }
  .check-group { gap: 8px; }
  .check-item, .radio-item { font-size: 12px; }
  .tir-section-head { font-size: 11px; padding: 6px 12px; }
  .btn { font-size: 12px; padding: 6px 10px; }
  .btn-sm { font-size: 11px; padding: 4px 7px; }
  .damage-legend { grid-template-columns: repeat(3, 1fr); }
  .modal-footer .btn { padding: 8px 6px; font-size: 11px; }
  table td, table th { padding: 5px 6px; font-size: 11px; }
  .tir-company-name { font-size: 13px; }
  .tir-company-sub { font-size: 10px; }
}

/* ══════════════════════════════════════
   INVENTORY STYLES
══════════════════════════════════════ */
.days-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.days-chip.ok      { background: rgba(41,182,232,.1);  color: #1A9FD0; border: 1px solid rgba(41,182,232,.2); }
.days-chip.warning { background: rgba(245,163,0,.12);  color: #b07800; border: 1px solid rgba(245,163,0,.25); }
.days-chip.danger  { background: rgba(232,35,42,.08);  color: #E8232A; border: 1px solid rgba(232,35,42,.2); }

.estado-badge { display: inline-block; padding: 2px 9px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.estado-libre      { background: rgba(41,182,232,.1);  color: #1A9FD0; border: 1px solid rgba(41,182,232,.2); }
.estado-en_proceso { background: rgba(245,163,0,.12);  color: #b07800; border: 1px solid rgba(245,163,0,.25); }
.estado-retenido   { background: rgba(232,35,42,.08);  color: #E8232A; border: 1px solid rgba(232,35,42,.2); }

.pos-cell  { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: #1B2A4A; letter-spacing: .05em; }
.pos-empty { color: #8A97AA; font-size: 11px; font-style: italic; }

/* ══════════════════════════════════════
   USERS MODULE STYLES
══════════════════════════════════════ */
.rol-badge { display: inline-block; padding: 2px 9px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.rol-administrador { background: rgba(27,42,74,.1);  color: #1B2A4A; border: 1px solid rgba(27,42,74,.25); }
.rol-chequeador    { background: rgba(41,182,232,.1); color: #1A9FD0; border: 1px solid rgba(41,182,232,.2); }
.rol-despachador   { background: rgba(245,163,0,.12); color: #b07800; border: 1px solid rgba(245,163,0,.25); }
.rol-operador      { background: rgba(100,160,80,.12);color: #3a7a20; border: 1px solid rgba(100,160,80,.25); }
.rol-visor         { background: rgba(138,151,170,.1);color: #5A6E8A; border: 1px solid #D1D9E6; }

.usr-estado-activo   { color: #1A9FD0; font-size:11px; font-weight:600; }
.usr-estado-inactivo { color: #8A97AA; font-size:11px; font-weight:600; }

.admin-only { display: none; }
.admin-only.visible { display: flex; }
.admin-only.visible-block { display: block; }

.role-description { font-size: 11px; color: var(--text3); margin-top: 8px; padding: 8px 12px; background: var(--bg2); border-left: 3px solid var(--cyan); border-radius: 2px; }


/* ══════════════════════════════════════
   MEJORAS v6.1
══════════════════════════════════════ */

/* Dashboard header row */
.dash-header-row { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.dash-header-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.dash-header-actions .btn svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; vertical-align:middle; margin-right:4px; }

/* Charts grid */
.dash-charts-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:900px) { .dash-charts-grid { grid-template-columns:1fr; } }

/* Alertas de permanencia */
.alerta-panel { background:var(--white); border:1px solid var(--border); border-left:4px solid var(--red); border-radius:4px; padding:12px 16px; }
.alerta-panel-title { font-size:11px; font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.alerta-item { display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid var(--border); font-size:12px; }
.alerta-item:last-child { border-bottom:none; }
.alerta-item .alerta-ctn { font-weight:700; font-family:var(--font-display); font-size:13px; color:var(--navy); min-width:120px; }
.alerta-item .alerta-dias { font-weight:700; color:var(--red); min-width:50px; }
.alerta-item .alerta-info { color:var(--text2); }
.alerta-warn .alerta-dias { color:#c47a00; }

/* Modal tabs */
.modal-tabs { display:flex; border-bottom:1px solid var(--border); padding:0 20px; background:var(--bg2); }
.modal-tab { background:none; border:none; padding:10px 16px; font-size:12px; font-weight:600; color:var(--text3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s; font-family:var(--font-body); }
.modal-tab:hover { color:var(--navy); }
.modal-tab.active { color:var(--navy); border-bottom-color:var(--cyan); }

/* Notas internas */
.nota-item { padding:10px 12px; background:var(--bg2); border-radius:4px; margin-bottom:8px; border-left:3px solid var(--cyan); }
.nota-meta { font-size:10px; color:var(--text3); margin-bottom:4px; }
.nota-texto { font-size:13px; color:var(--text); line-height:1.5; }
.nota-empty { color:var(--text3); font-size:12px; font-style:italic; padding:12px 0; text-align:center; }

/* Vinculo entrada/salida */
.vinculo-card { border:1px solid var(--border); border-radius:4px; padding:14px 16px; }
.vinculo-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text3); margin-bottom:8px; }
.vinculo-none { color:var(--text3); font-size:12px; font-style:italic; padding:8px 0; }

/* Print styles */
@media print {
  .app-header, .sidebar, .page-header, .tir-actions, .filter-row,
  .modal, .overlay, #login-page { display:none !important; }
  .main-layout { grid-template-columns:1fr !important; }
  .main-content { padding:0 !important; }
  body { background:white !important; }
  .print-tir { display:block !important; }
}


/* ══════════════════════════════════════
   MEJORAS v6.2
══════════════════════════════════════ */

/* ── Dark mode toggle button ─────────────────────────────────────────────── */
.btn-dark-toggle {
  background: rgba(27,42,74,.08);
  border: 1px solid rgba(27,42,74,.2);
  border-radius: 6px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--navy);
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.btn-dark-toggle:hover { background: rgba(27,42,74,.14); border-color: rgba(27,42,74,.35); }
.btn-dark-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
/* In dark mode the button adapts */
body.dark-mode .btn-dark-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
body.dark-mode .btn-dark-toggle:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ── DARK MODE (body.dark-mode) ─────────────────────────────────────────── */
body.dark-mode {
  --bg:      #0f1623;
  --bg2:     #161f30;
  --bg3:     #1c2840;
  --white:   #1c2840;
  --border:  #2a3a56;
  --border2: #334466;
  --text:    #e8edf5;
  --text2:   #b0bdce;
  --text3:   #7a8fa8;
  --navy:    #e8edf5;
  --navy2:   #c8d4e8;
  --red:     #ff4a50;
  --cyan:    #29B6E8;
  --cyan2:   #56ccf2;
}

/* Header & sidebar keep their dark look */
body.dark-mode .app-header   { background: #0d1520; border-color: #1e2d44; }
body.dark-mode .app-brand    { border-color: #2a3a56; }
body.dark-mode .user-badge   { background: #161f30; border-color: #2a3a56; color: #e8edf5; }
body.dark-mode .btn-signout  { border-color: #2a3a56; color: #b0bdce; }
body.dark-mode .btn-signout:hover { background: #1c2840; color: #e8edf5; }
body.dark-mode .status-pill  { background: rgba(41,182,232,.1); border-color: rgba(41,182,232,.2); }

/* Sidebar */
body.dark-mode .sidebar       { background: #0d1520; border-color: #1e2d44; }
body.dark-mode .sidebar-section { color: #4a6080; }
body.dark-mode .sitem         { color: #7a8fa8; }
body.dark-mode .sitem:hover   { background: rgba(255,255,255,.05); color: #c8d4e8; }
body.dark-mode .sitem.active  { background: rgba(41,182,232,.12); color: #fff; border-color: var(--cyan); box-shadow: none; }
body.dark-mode .terminal-info { color: #4a6080; }
body.dark-mode .terminal-info strong { color: #7a8fa8; }

/* Main content */
body.dark-mode .main-content  { background: #0f1623; }
body.dark-mode .card          { background: #161f30; border-color: #2a3a56; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
body.dark-mode .card:hover    { box-shadow: 0 4px 16px rgba(0,0,0,.3); }
body.dark-mode .card-head     { border-color: #2a3a56; background: linear-gradient(180deg, #1a2540 0%, #161f30 100%); }
body.dark-mode .card-title    { color: #c8d4e8; }
body.dark-mode .card-title::before { background: var(--cyan); }

/* Metrics */
body.dark-mode .metric-card   { background: #161f30; border-color: #2a3a56; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
body.dark-mode .metric-card.navy { background: linear-gradient(135deg, #161f30 60%, rgba(27,42,74,.3)); }
body.dark-mode .metric-card.red  { background: linear-gradient(135deg, #161f30 60%, rgba(232,35,42,.08)); }
body.dark-mode .metric-card.cyan { background: linear-gradient(135deg, #161f30 60%, rgba(41,182,232,.08)); }
body.dark-mode .metric-label  { color: #7a8fa8; }
body.dark-mode .metric-value  { color: #e8edf5; }
body.dark-mode .metric-value.red  { color: #ff4a50; }
body.dark-mode .metric-value.cyan { color: #56ccf2; }

/* Tables */
body.dark-mode table          { border-color: #2a3a56; }
body.dark-mode table th       { background: #1c2840; color: #7a8fa8; border-color: #2a3a56; }
body.dark-mode table td       { border-color: #1e2d44; color: #c8d4e8; }
body.dark-mode table tr:hover td { background: rgba(41,182,232,.04); }

/* Forms */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea       { background: #1c2840; border-color: #2a3a56; color: #e8edf5; }
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(41,182,232,.1); }
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #4a6080; }
body.dark-mode select option  { background: #1c2840; color: #e8edf5; }
body.dark-mode label          { color: #b0bdce; }

/* Page headers */
body.dark-mode .page-title    { color: #e8edf5; }
body.dark-mode .page-title::before { background: var(--red); }
body.dark-mode .page-sub      { color: #7a8fa8; }

/* Filter row */
body.dark-mode .filter-row    { background: #161f30; border-color: #2a3a56; }
body.dark-mode .search-wrap   { background: #1c2840; border-color: #2a3a56; }
body.dark-mode .search-wrap svg { stroke: #4a6080; }
body.dark-mode .filter-select { background: #1c2840; border-color: #2a3a56; color: #e8edf5; }

/* Buttons */
body.dark-mode .btn           { background: #1c2840; border-color: #2a3a56; color: #c8d4e8; }
body.dark-mode .btn:hover     { background: #243050; border-color: #334466; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
body.dark-mode .btn-primary   { background: linear-gradient(180deg, #243459 0%, #1B2A4A 100%); border-color: #29B6E8; color: #fff; }
body.dark-mode .btn-primary:hover { background: #243660; }
body.dark-mode .btn-red       { border-color: rgba(255,74,80,.4); color: #ff4a50; }
body.dark-mode .btn-sm        { background: #1c2840; border-color: #2a3a56; color: #b0bdce; }

/* Chips & badges */
body.dark-mode .chip          { background: rgba(41,182,232,.1); color: #56ccf2; }
body.dark-mode .badge-entrada { background: rgba(41,182,232,.15); color: #56ccf2; border-color: rgba(41,182,232,.3); }
body.dark-mode .badge-salida  { background: rgba(255,74,80,.12); color: #ff6b70; border-color: rgba(255,74,80,.25); }
body.dark-mode .days-chip.ok  { background: rgba(41,182,232,.1); color: #56ccf2; border-color: rgba(41,182,232,.2); }
body.dark-mode .days-chip.warning { background: rgba(245,163,0,.1); color: #f5c842; border-color: rgba(245,163,0,.2); }
body.dark-mode .days-chip.danger  { background: rgba(255,74,80,.1); color: #ff6b70; border-color: rgba(255,74,80,.2); }
body.dark-mode .chip-patio    { background: rgba(46,196,182,.12); color: #2ec4b6; border-color: rgba(46,196,182,.25); }
body.dark-mode .chip-despachado { background: rgba(120,130,150,.1); color: #7a8fa8; border-color: rgba(120,130,150,.2); }
body.dark-mode .estado-badge  { color: #c8d4e8; }

/* TIR form */
body.dark-mode .tir-header    { background: #161f30; border-color: #2a3a56; }
body.dark-mode .tir-company-name { color: #e8edf5; }
body.dark-mode .tir-company-sub  { color: #7a8fa8; }
body.dark-mode .tir-info-center  { color: #7a8fa8; }
body.dark-mode .tir-num-box   { background: #0d1520; }
body.dark-mode .tir-type-bar  { background: #1c2840; border-color: #2a3a56; color: #b0bdce; }
body.dark-mode .tir-dt-row    { background: #161f30; border-color: #2a3a56; color: #b0bdce; }
body.dark-mode .tir-section   { background: #161f30; border-color: #2a3a56; }
body.dark-mode .tir-section-head { background: #1c2840; color: #c8d4e8; border-color: #2a3a56; }
body.dark-mode .tir-body      { background: #161f30; }
body.dark-mode .check-item,
body.dark-mode .radio-item    { color: #b0bdce; }
body.dark-mode .damage-legend { background: #1c2840; border-color: #2a3a56; }
body.dark-mode .dl-code       { background: var(--cyan); color: #0f1623; }
body.dark-mode .truck-item    { border-color: #2a3a56; }
body.dark-mode .truck-name    { color: #b0bdce; }
body.dark-mode .sign-line     { background: #1c2840; border-color: #2a3a56; }
body.dark-mode .sign-label    { color: #7a8fa8; }
body.dark-mode .sign-input    { color: #e8edf5; }
body.dark-mode .sign-disclaimer { color: #7a8fa8; }
body.dark-mode .diagram-box   { background: #1c2840; border-color: #2a3a56; }
body.dark-mode .diagram-label { color: #7a8fa8; }
body.dark-mode .alert-success { background: rgba(20,130,80,.2); border-color: rgba(20,130,80,.4); color: #56d8a0; }

/* Modals */
body.dark-mode .overlay       { background: rgba(0,0,0,.7); }
body.dark-mode .modal         { background: #161f30; border-color: #2a3a56; }
body.dark-mode .modal-header  { background: #0d1520; border-color: #2a3a56; }
body.dark-mode .modal-title   { color: #e8edf5; }
body.dark-mode .modal-sub     { color: #7a8fa8; }
body.dark-mode .modal-tabs    { background: #1c2840; border-color: #2a3a56; }
body.dark-mode .modal-tab     { color: #7a8fa8; }
body.dark-mode .modal-tab:hover { color: #c8d4e8; }
body.dark-mode .modal-tab.active { color: #56ccf2; border-bottom-color: #56ccf2; }
body.dark-mode .modal-body    { background: #161f30; color: #c8d4e8; }
body.dark-mode .modal-footer  { background: #1c2840; border-color: #2a3a56; }
body.dark-mode .detail-section { color: #56ccf2; border-color: #2a3a56; }
body.dark-mode .detail-label  { color: #7a8fa8; }
body.dark-mode .detail-value  { color: #e8edf5; }

/* Alertas & notas */
body.dark-mode .alerta-panel  { background: #161f30; border-color: #2a3a56; }
body.dark-mode .alerta-item   { border-color: #2a3a56; }
body.dark-mode .alerta-info   { color: #7a8fa8; }
body.dark-mode .nota-item     { background: #1c2840; border-color: #334466; }
body.dark-mode .nota-meta     { color: #7a8fa8; }
body.dark-mode .nota-texto    { color: #c8d4e8; }
body.dark-mode .vinculo-card  { background: #1c2840; border-color: #334466; color: #c8d4e8; }
body.dark-mode .hist-num      { color: #e8edf5; }
body.dark-mode .hist-meta     { color: #7a8fa8; }
body.dark-mode .hist-perm     { color: #56ccf2; }

/* Rol badges */
body.dark-mode .rol-badge     { opacity: .85; }
body.dark-mode .role-description { background: #1c2840; border-color: #2a3a56; color: #b0bdce; }

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar-thumb { background: #2a3a56; }

/* ── Estado patio chip in Control ────────────────────────────────────────── */
.chip-patio   { display:inline-block; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:.04em; white-space:nowrap; background:rgba(46,196,182,.15); color:#1a8f82; border:1px solid rgba(46,196,182,.3); }
.chip-despachado { background:rgba(120,130,150,.12); color:var(--text3); border:1px solid rgba(120,130,150,.2); }

/* ── Historial por contenedor ────────────────────────────────────────────── */
.hist-item { display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--border); align-items:flex-start; }
.hist-item:last-child { border-bottom:none; }
.hist-dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.hist-dot.entrada { background:var(--cyan); }
.hist-dot.salida  { background:var(--red); }
.hist-info { flex:1; }
.hist-num  { font-weight:700; font-size:12px; font-family:var(--font-display); color:var(--navy); }
.hist-meta { font-size:11px; color:var(--text3); margin-top:2px; }
.hist-perm { font-size:11px; color:var(--cyan2); font-weight:600; margin-top:2px; }

/* ── Log de acciones ────────────────────────────────────────────────────── */
/* (stored silently, no UI needed beyond backup) */

/* ── Session timeout warning ────────────────────────────────────────────── */
.session-warning {
  position:fixed; bottom:20px; right:20px; z-index:9999;
  background:#c47a00; color:#fff; border-radius:8px;
  padding:12px 18px; font-size:13px; font-weight:600;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  display:flex; align-items:center; gap:10px;
  animation: slideUp .3s ease;
}
@keyframes slideUp { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.session-warning button { background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:4px; padding:4px 10px; cursor:pointer; font-size:12px; }

/* ══════════════════════════════════════
   MEJORAS v6.3
══════════════════════════════════════ */

/* ── Splash screen ───────────────────────────────────────────────────────── */
#splash-screen {
  position: fixed; inset: 0; z-index: 99999;
  background: #0d1520;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity .5s ease, visibility .5s ease;
}
#splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-content { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.splash-logo { width: 72px; height: 72px; animation: splashPulse 1.5s ease-in-out infinite; }
@keyframes splashPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.splash-title { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 800; color: #fff; letter-spacing: .04em; }
.splash-title span { color: #E8232A; }
.splash-sub { font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; }
.splash-bar { width: 200px; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.splash-bar-fill { height: 100%; background: linear-gradient(90deg, #29B6E8, #E8232A); border-radius: 2px; animation: splashLoad 1.4s ease-in-out forwards; }
@keyframes splashLoad { from{width:0} to{width:100%} }
.splash-version { font-size: 10px; color: rgba(255,255,255,.3); letter-spacing: .08em; margin-top: 4px; }

/* ── Page enter animation ────────────────────────────────────────────────── */
.page.active { animation: pageEnter .25s ease forwards; }
@keyframes pageEnter { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.metric-card { animation: fadeUp .3s ease both; }
.metric-card:nth-child(1){animation-delay:.04s}
.metric-card:nth-child(2){animation-delay:.08s}
.metric-card:nth-child(3){animation-delay:.12s}
.metric-card:nth-child(4){animation-delay:.16s}
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }



/* ── Tooltip ─────────────────────────────────────────────────────────────── */
.tooltip {
  position: fixed; z-index: 99000; pointer-events: none;
  background: #1a2540; color: #fff; font-size: 11px;
  padding: 5px 9px; border-radius: 4px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: opacity .12s;
}
.tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: #1a2540;
}
[data-tip] { cursor: pointer; }

/* ── Patio map ───────────────────────────────────────────────────────────── */
#patio-map-container { display: flex; flex-direction: column; gap: 20px; }
.patio-bloque { background: var(--white); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.patio-bloque-head { background: var(--navy); color: #fff; padding: 8px 16px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .06em; display: flex; align-items: center; justify-content: space-between; }
.patio-bloque-head span { font-size: 11px; opacity: .7; font-weight: 400; }
.patio-bloque-body { padding: 16px; }
.patio-fila { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.patio-fila:last-child { margin-bottom: 0; }
.patio-fila-label { font-size: 10px; font-weight: 700; color: var(--text3); width: 30px; text-align: right; flex-shrink: 0; }
.patio-celdas { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.patio-celda {
  width: 52px; height: 36px; border-radius: 4px; border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .12s, box-shadow .12s;
  font-size: 9px; font-weight: 700; position: relative;
}
.patio-celda:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.patio-celda.libre    { background: rgba(46,196,182,.08);  border-color: rgba(46,196,182,.3);  color: #1a8f82; }
.patio-celda.ocupado  { background: rgba(27,42,74,.08);    border-color: rgba(27,42,74,.25);   color: var(--navy); }
.patio-celda.retenido { background: rgba(232,35,42,.08);   border-color: rgba(232,35,42,.3);   color: var(--red); }
.patio-celda.alerta   { background: rgba(245,163,0,.1);    border-color: rgba(245,163,0,.35);  color: #9a6200; }
.patio-celda-pos { font-size: 8px; opacity: .6; }
.patio-celda-ctn { font-size: 8px; font-weight: 800; max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patio-legend { display: flex; gap: 14px; align-items: center; font-size: 11px; color: var(--text2); }
.patio-leg-item { display: flex; align-items: center; gap: 5px; }
.patio-leg-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.patio-leg-dot.libre    { background: rgba(46,196,182,.5); border: 1px solid rgba(46,196,182,.6); }
.patio-leg-dot.ocupado  { background: rgba(27,42,74,.4);   border: 1px solid rgba(27,42,74,.5); }
.patio-leg-dot.retenido { background: rgba(232,35,42,.4);  border: 1px solid rgba(232,35,42,.5); }
.patio-leg-dot.alerta   { background: rgba(245,163,0,.5);  border: 1px solid rgba(245,163,0,.6); }
.patio-empty { text-align: center; padding: 40px 0; color: var(--text3); font-size: 13px; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination-row { display: flex; align-items: center; gap: 6px; padding: 10px 0; flex-wrap: wrap; }
.pg-btn { height: 28px; min-width: 28px; padding: 0 8px; border: 1px solid var(--border); background: var(--white); color: var(--text2); border-radius: 4px; font-size: 12px; cursor: pointer; font-family: var(--font-body); transition: all .12s; display: flex; align-items: center; justify-content: center; }
.pg-btn:hover { background: var(--bg2); border-color: var(--border2); }
.pg-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.pg-btn:disabled { opacity: .35; cursor: default; }
.pg-info { font-size: 11px; color: var(--text3); margin-left: 4px; }
.pg-size { height: 28px; border: 1px solid var(--border); background: var(--white); color: var(--text); border-radius: 4px; font-size: 12px; padding: 0 6px; font-family: var(--font-body); cursor: pointer; }

/* ── Top clientes ────────────────────────────────────────────────────────── */
.dash-bottom-grid { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
@media (max-width: 900px) { .dash-bottom-grid { grid-template-columns: 1fr; } }
.top-cliente-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.top-cliente-item:last-child { border-bottom: none; }
.top-cliente-rank { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--border2); width: 22px; flex-shrink: 0; }
.top-cliente-rank.gold   { color: #f5a623; }
.top-cliente-rank.silver { color: #a8b3c4; }
.top-cliente-rank.bronze { color: #c47a4a; }
.top-cliente-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; color: #fff; }
.top-cliente-info { flex: 1; min-width: 0; }
.top-cliente-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-cliente-count { font-size: 11px; color: var(--text3); }
.top-cliente-bar-wrap { width: 60px; }
.top-cliente-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.top-cliente-bar-fill { height: 100%; background: var(--cyan); border-radius: 2px; transition: width .4s ease; }

/* ── Avatar colors ───────────────────────────────────────────────────────── */
.av-0{background:#1B2A4A} .av-1{background:#E8232A} .av-2{background:#0077b6}
.av-3{background:#2ec4b6} .av-4{background:#6d6875} .av-5{background:#f4a261}
.av-6{background:#457b9d} .av-7{background:#2d6a4f} .av-8{background:#8338ec}
.av-9{background:#c9184a}

/* Dark mode additions for new elements */

body.dark-mode .patio-bloque { background: #161f30; border-color: #2a3a56; }
body.dark-mode .patio-celda  { border-color: #2a3a56; }
body.dark-mode .pg-btn        { background: #1c2840; border-color: #2a3a56; color: #b0bdce; }
body.dark-mode .pg-btn:hover  { background: #243050; }
body.dark-mode .pg-btn.active { background: #1B2A4A; border-color: #29B6E8; color: #fff; }
body.dark-mode .pg-size        { background: #1c2840; border-color: #2a3a56; color: #e8edf5; }
body.dark-mode .top-cliente-item { border-color: #2a3a56; }
body.dark-mode .top-cliente-name  { color: #c8d4e8; }

/* ── Responsive dark mode adjustments ───────────────────────────────────── */
@media (max-width: 768px) {
  body.dark-mode .sidebar { background: #0d1520; border-color: #1e2d44; }
  body.dark-mode .sidebar-overlay { background: rgba(0,0,0,.65); }
  body.dark-mode .modal { background: #161f30; }
}

/* ── Safe area for notched phones (iOS) ──────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .modal-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .tir-actions  { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}


/* ── Tipo de contenedor — selects + checks ───────────────────────────────── */
.tipo-cont-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.tipo-select-wrap { flex: 1; min-width: 140px; }
.tipo-checks-wrap { flex: 1; min-width: 200px; }
@media (max-width: 600px) {
  .tipo-select-wrap { min-width: 100%; }
  .tipo-checks-wrap { min-width: 100%; }
}

/* ══════════════════════════════════════
   BITÁCORA
══════════════════════════════════════ */
.log-accion-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
}
.log-badge-login   { background: rgba(41,182,232,.12); color: #1A9FD0; border: 1px solid rgba(41,182,232,.25); }
.log-badge-logout  { background: rgba(120,130,150,.1);  color: var(--text3); border: 1px solid rgba(120,130,150,.2); }
.log-badge-backup  { background: rgba(27,42,74,.08);    color: var(--navy);  border: 1px solid rgba(27,42,74,.18); }
.log-badge-inv     { background: rgba(46,196,182,.1);   color: #1a8f82;      border: 1px solid rgba(46,196,182,.25); }
.log-badge-usr     { background: rgba(109,104,117,.1);  color: #5a5468;      border: 1px solid rgba(109,104,117,.2); }
.log-badge-usr-del { background: rgba(232,35,42,.08);   color: var(--red);   border: 1px solid rgba(232,35,42,.2); }
.log-badge-rep     { background: rgba(244,162,97,.1);   color: #c06a1a;      border: 1px solid rgba(244,162,97,.25); }
.log-badge-other   { background: var(--bg2); color: var(--text3); border: 1px solid var(--border); }

/* Dark mode */
body.dark-mode .log-badge-login   { background: rgba(41,182,232,.15);  color: #56ccf2; }
body.dark-mode .log-badge-logout  { background: rgba(120,130,150,.12); color: #7a8fa8; }
body.dark-mode .log-badge-backup  { background: rgba(200,212,232,.08); color: #c8d4e8; }
body.dark-mode .log-badge-inv     { background: rgba(46,196,182,.12);  color: #2ec4b6; }
body.dark-mode .log-badge-usr     { background: rgba(200,180,240,.08); color: #c8b4f0; }
body.dark-mode .log-badge-usr-del { background: rgba(255,74,80,.1);    color: #ff6b70; }
body.dark-mode .log-badge-rep     { background: rgba(244,162,97,.1);   color: #f5c842; }

/* ══════════════════════════════════════
   IMPORTAR INVENTARIO
══════════════════════════════════════ */
.import-instructions {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: 14px 16px; margin-bottom: 16px;
}
.import-inst-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.import-inst-title + p { font-size: 12px; color: var(--text2); margin-bottom: 10px; }
.import-columns-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
}
.import-col { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--white); }
.import-col.required { border-color: rgba(41,182,232,.4); background: rgba(41,182,232,.04); }
.import-col-name { font-size: 11px; font-weight: 700; color: var(--text); font-family: var(--font-display); letter-spacing: .03em; }
.import-col-req  { font-size: 9.5px; color: var(--cyan2); font-weight: 600; }
.import-col-opt  { font-size: 9.5px; color: var(--text3); }

.import-dropzone {
  border: 2px dashed var(--border2); border-radius: 8px;
  padding: 32px 20px; text-align: center;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.import-dropzone:hover, .import-dropzone.drag-over {
  border-color: var(--cyan); background: rgba(41,182,232,.04);
}
.import-dz-text { font-size: 13px; color: var(--text2); margin-bottom: 4px; }
.import-dz-sub  { font-size: 11px; color: var(--text3); }

.import-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; flex-wrap: wrap; gap: 6px;
}
.import-preview-head > div { font-size: 12px; color: var(--text2); }

/* Dark mode */
body.dark-mode .import-instructions { background: #1c2840; border-color: #2a3a56; }
body.dark-mode .import-inst-title   { color: #c8d4e8; }
body.dark-mode .import-col          { background: #161f30; border-color: #2a3a56; }
body.dark-mode .import-col.required { background: rgba(41,182,232,.06); border-color: rgba(41,182,232,.3); }
body.dark-mode .import-dropzone     { border-color: #334466; }
body.dark-mode .import-dropzone:hover, body.dark-mode .import-dropzone.drag-over { border-color: var(--cyan); background: rgba(41,182,232,.06); }

/* ══════════════════════════════════════
   NUEVAS MEJORAS v6.4
══════════════════════════════════════ */

/* Quick status select in inventario */
.quick-status-sel {
  font-size: 11px; padding: 3px 6px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--white);
  color: var(--text); cursor: pointer; font-family: var(--font-body);
  font-weight: 600; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A97AA' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center;
  padding-right: 20px;
}
.quick-status-sel:focus { outline: none; border-color: var(--cyan); }

/* Sin posición warning */
.inv-sin-posicion-warn {
  display: flex; align-items: center; gap: 8px;
  background: rgba(245,163,0,.08); border: 1px solid rgba(245,163,0,.3);
  border-left: 3px solid #f5a300; border-radius: 4px;
  padding: 8px 12px; font-size: 12px; color: #9a6200;
  margin-bottom: 10px;
}
body.dark-mode .inv-sin-posicion-warn { background: rgba(245,163,0,.06); color: #f5c842; border-color: rgba(245,163,0,.25); }

/* Sin posición dot indicator */
.sinpos-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: #f5a300; color: #fff; font-size: 9px; font-weight: 900;
  margin-left: 4px; cursor: default; vertical-align: middle;
}
.inv-row-sinpos td:first-child { background: rgba(245,163,0,.04); }

/* Toast notification */
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* Config page */
#page-configuracion .card-body { padding: 16px; }

/* Estadisticas responsive */
@media (max-width: 768px) {
  #page-estadisticas .dash-bottom-grid { grid-template-columns: 1fr; }
  #page-configuracion > div { grid-template-columns: 1fr !important; }
}

/* Dark mode quick status */
body.dark-mode .quick-status-sel { background-color: #1c2840; border-color: #2a3a56; color: #c8d4e8; }

/* ══════════════════════════════════════
   MODAL FOOTER TIR — REDISEÑO
══════════════════════════════════════ */
.modal-footer-tir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  flex-wrap: wrap;
}

/* Cerrar — izquierda, discreto */
.tir-btn-cerrar {
  display: flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--border);
  color: var(--text3); border-radius: 6px;
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: var(--font-body);
  transition: all .15s; white-space: nowrap;
}
.tir-btn-cerrar:hover { border-color: var(--border2); color: var(--text); background: var(--bg); }

/* Grupo central — acciones secundarias */
.tir-btn-group {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 3px;
}

.tir-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; border-radius: 6px;
  padding: 5px 10px; cursor: pointer; font-family: var(--font-body);
  color: var(--text2); transition: background .15s, color .15s;
  min-width: 52px;
}
.tir-action-btn svg {
  width: 14px; height: 14px; stroke: currentColor;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tir-action-btn span { font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.tir-action-btn:hover { background: var(--white); color: var(--navy); }

/* Grupo derecha — PDF + Eliminar */
.tir-btn-primary-group { display: flex; align-items: center; gap: 6px; }

.tir-btn-pdf {
  display: flex; align-items: center; gap: 5px;
  background: var(--navy); color: #fff;
  border: none; border-radius: 6px;
  padding: 7px 14px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font-body);
  transition: background .15s; white-space: nowrap;
}
.tir-btn-pdf svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.tir-btn-pdf:hover { background: var(--navy2); }

.tir-btn-eliminar {
  display: flex; align-items: center; gap: 5px;
  background: none; border: 1px solid rgba(232,35,42,.35);
  color: var(--red); border-radius: 6px;
  padding: 7px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font-body);
  transition: all .15s; white-space: nowrap;
}
.tir-btn-eliminar svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.tir-btn-eliminar:hover { background: rgba(232,35,42,.06); border-color: var(--red); }

/* Dark mode */
body.dark-mode .modal-footer-tir { background: #1c2840; border-color: #2a3a56; }
body.dark-mode .tir-btn-cerrar { border-color: #2a3a56; color: #7a8fa8; }
body.dark-mode .tir-btn-cerrar:hover { background: #243050; color: #c8d4e8; }
body.dark-mode .tir-btn-group { background: #161f30; border-color: #2a3a56; }
body.dark-mode .tir-action-btn { color: #b0bdce; }
body.dark-mode .tir-action-btn:hover { background: #1c2840; color: #e8edf5; }
body.dark-mode .tir-btn-pdf { background: #1B2A4A; border: 1px solid #29B6E8; }
body.dark-mode .tir-btn-pdf:hover { background: #243660; }
body.dark-mode .tir-btn-eliminar { border-color: rgba(255,74,80,.3); color: #ff6b70; }
body.dark-mode .tir-btn-eliminar:hover { background: rgba(255,74,80,.08); }

/* Mobile */
@media (max-width: 600px) {
  .modal-footer-tir { flex-direction: column; align-items: stretch; }
  .tir-btn-group { justify-content: center; }
  .tir-btn-primary-group { justify-content: stretch; }
  .tir-btn-pdf, .tir-btn-eliminar { flex: 1; justify-content: center; }
  .tir-btn-cerrar { justify-content: center; }
}


/* ══════════════════════════════════════
   BÚSQUEDA GLOBAL
══════════════════════════════════════ */
.global-search-wrap {
  position: relative;
  flex: 1;
  max-width: 340px;
}
.global-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  height: 34px;
  transition: border-color .2s, box-shadow .2s;
}
.global-search-box:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(41,182,232,.12);
}
.gs-icon {
  width: 14px; height: 14px;
  stroke: var(--text3); stroke-width: 2.5;
  fill: none; flex-shrink: 0;
}
#global-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--text1);
  outline: none;
  min-width: 0;
}
#global-search-input::placeholder { color: var(--text3); }
.gs-kbd {
  font-size: 9px;
  color: var(--text3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: var(--font-display);
  letter-spacing: .02em;
  flex-shrink: 0;
}
.gs-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(27,42,74,.18), 0 2px 8px rgba(27,42,74,.10);
  z-index: 9999;
  max-height: 360px;
  overflow-y: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.gs-section {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
}
.gs-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: background .15s;
  border-bottom: 1px solid var(--border);
}
.gs-item:last-child { border-bottom: none; }
.gs-item:hover { background: var(--bg2); }
.gs-item strong { color: var(--text1); font-weight: 700; }
.gs-meta { color: var(--text3); font-size: 11px; flex: 1; }
.gs-date { color: var(--text3); font-size: 10px; white-space: nowrap; }
.gs-empty { padding: 16px 12px; font-size: 12px; color: var(--text3); text-align: center; }

/* Dark mode búsqueda */
body.dark-mode .global-search-box { background: #1a2540; border-color: #2a3a56; }
body.dark-mode .gs-results { background: #1a2540; border-color: #2a3a56; box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3); }
body.dark-mode .gs-item:hover { background: #1f2e4a; }

/* Mobile: ocultar en pantallas muy pequeñas */
@media (max-width: 700px) {
  .global-search-wrap { display: none; }
}


/* ══════════════════════════════════════
   BADGE EN PATIO (sidebar)
══════════════════════════════════════ */
.sitem { display: flex; align-items: center; }


/* ══════════════════════════════════════
   INDICADOR DE CONEXIÓN
══════════════════════════════════════ */
.status-pill {
  transition: color .3s;
}
.status-dot {
  transition: background .3s;
}


/* ══════════════════════════════════════
   GUÍA FORMATO CONTENEDOR ISO 6346
══════════════════════════════════════ */
.cont-format-guide {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding: 7px 10px;
  background: var(--bg2);
  border: 1.5px dashed var(--border);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.3;
}
.cfg-blk {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  padding: 2px 6px;
  border-radius: 4px;
}
.cfg-letras  { background: rgba(27,42,74,.12);  color: var(--navy); }
.cfg-digitos { background: rgba(41,182,232,.12); color: #0077b6;    }
.cfg-check   { background: rgba(232,35,42,.12);  color: var(--red); }
.cfg-sep     { color: var(--text3); font-weight: 600; }
.cfg-label   {
  width: 100%;
  font-size: 10px;
  color: var(--text3);
  margin-top: 3px;
  letter-spacing: .01em;
}

/* Validación en tiempo real */
#f-contenedor.iso-ok    { border-color: #1a6f4e !important; background: rgba(26,111,78,.05); }
#f-contenedor.iso-warn  { border-color: var(--red) !important; background: rgba(232,35,42,.04); }

/* Dark mode */
body.dark-mode .cont-format-guide { background: rgba(255,255,255,.04); border-color: #2a3a56; }
body.dark-mode .cfg-letras  { background: rgba(41,182,232,.15); color: #29B6E8; }
body.dark-mode .cfg-digitos { background: rgba(41,182,232,.1);  color: #29B6E8; }
body.dark-mode .cfg-check   { background: rgba(232,35,42,.15);  color: #ff6b70; }