/* ═══════════════════════════════════════════════════════════════
   SICOP WEB — app.css
   Sistema Integral de Control de Compras y Pagos · UTM
   v0.3.27 — Institutional redesign
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. CUSTOM PROPERTIES ─── */
:root {
  /* Core palette */
  --bg:          #f0f4f6;
  --bg-soft:     #f7f9fb;
  --ink:         #1a2740;
  --ink-light:   #2d3d56;
  --muted:       #5e6d82;
  --green:       #0b563f;
  --green-light: #e8f3ef;
  --line:       #d4dee8;
  --line-light: #e6ecf2;
  --card:       #ffffff;
  --gold:       #b8872f;
  --gold-light: #fdf6e8;
  --red:        #a93d32;
  --red-light:  #fae9e7;
  --blue:       #1a5f8f;
  --blue-light: #e6f0f8;

  /* Institutional palette */
  --vino:        #8c1f3f;
  --vino2:       #b33a4b;
  --maya-gold:   #c99a38;
  --utm:         #0a9f78;

  /* Typography */
  --font-sans:  'Segoe UI', Arial, Helvetica, sans-serif;
  --font-mono:  'Consolas', 'Courier New', monospace;

  /* Spacing scale (reducido ~20%) */
  --sp-1: 3px;  --sp-2: 6px;  --sp-3: 10px;  --sp-4: 13px;
  --sp-5: 16px; --sp-6: 19px; --sp-7: 26px;  --sp-8: 32px;

  /* Radii (reducido ~20%) */
  --r-sm: 5px; --r-md: 8px; --r-lg: 11px; --r-xl: 14px; --r-full: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(10,20,40,.04);
  --shadow-md:  0 4px 14px rgba(10,20,40,.06);
  --shadow-lg:  0 10px 30px rgba(10,20,40,.1);
  --shadow-xl:  0 18px 48px rgba(0,0,0,.15);

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --fast: .15s var(--ease);
  --med:  .25s var(--ease);

  /* Layout */
  --top-h: 48px;
  --header-h: 56px;
  --wrap-max: 1340px;

  /* Sidebar */
  --sidebar-w: 256px;
  --sidebar-collapsed-w: 72px;
}

/* ─── 2. RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Repositorio anual de comités */
.comite-repos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}.comite-repos-card{display:block;padding:18px;border:1px solid var(--line-light);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm);color:inherit;text-decoration:none}.comite-repos-card:hover,.comite-repos-card.active{border-color:#9fcbb5;box-shadow:var(--shadow-md)}.comite-repos-card h2{font-size:18px;margin:12px 0 8px}.comite-repos-card div{font-size:12px;color:var(--muted)}.comite-repos-card div strong{font-size:16px;color:var(--ink)}.comite-repos-card div span{padding:0 6px;color:#a4b1ad}.context-strip{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:12px 16px;margin-bottom:14px;border:1px solid #c9dfd1;border-radius:var(--r-lg);background:#f2faf5;color:var(--muted);font-size:12px}.context-strip strong{color:var(--ink)}.context-strip .btn{margin-left:auto}.comite-tabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px;border-bottom:1px solid var(--line-light)}.comite-tabs a{display:block;white-space:nowrap;padding:10px 12px;border-radius:8px 8px 0 0;color:var(--muted);text-decoration:none;font-size:12px;font-weight:700}.comite-tabs a:hover,.comite-tabs a.active{background:#e9f6ef;color:var(--utm);border-bottom:2px solid var(--utm)}.requirements-table small,.requirements-table .muted{display:block;margin-top:4px}.req-actions{display:flex;gap:5px;flex-wrap:wrap}.req-actions form{display:flex;gap:4px;align-items:center}.req-actions input{max-width:145px;font-size:11px}.requirements-table td{vertical-align:top}.comites-annual-hero{margin-bottom:16px}@media(max-width:700px){.comite-repos-grid{grid-template-columns:1fr}.context-strip .btn{margin-left:0}.comite-tabs a{font-size:11px;padding:9px 8px}}
.annual-determination-card{margin-bottom:16px}.annual-determination-form{padding-top:0}.annual-ranges{overflow:hidden;border:1px solid var(--line-light);border-radius:var(--r-md)}.annual-range-head,.annual-range-row{display:grid;grid-template-columns:minmax(260px,1.15fr) minmax(180px,1fr) minmax(180px,1fr);gap:24px;align-items:center;padding:12px}.annual-range-head{background:#eef5f4;color:var(--ink);font-size:11px;text-transform:uppercase}.annual-range-row{min-height:68px;border-top:1px solid var(--line-light)}.annual-range-row:first-of-type{border-top:0}.annual-range-row:nth-child(4){background:#f4faf7}.annual-range-row>strong{font-size:12px}.annual-range-row input{width:100%;min-height:42px}.annual-rule-highlight{display:grid;grid-template-columns:minmax(260px,1.15fr) minmax(0,2fr);gap:24px;align-items:start;margin-top:14px;padding:15px;border:1px solid #cce4db;border-radius:var(--r-md);background:#f5fbf8}.annual-rule-highlight>label{padding-top:11px;font-weight:700}.annual-rule-highlight>div{display:grid;grid-template-columns:auto minmax(170px,320px);gap:8px;align-items:center}.annual-rule-highlight>div>span{font-weight:800}.annual-rule-highlight input{width:100%}.annual-rule-highlight small{grid-column:1/-1;color:var(--muted)}.annual-current{display:flex;justify-content:space-between;gap:18px;align-items:center;margin:18px 20px 0;padding:14px 16px;border:1px solid #b8dacb;border-radius:var(--r-md);background:#f2faf5}.annual-current strong,.annual-current span{display:block}.annual-current span{margin-top:3px;color:var(--muted);font-size:12px}.annual-summary{margin-top:14px}.annual-summary th:nth-child(n+2),.annual-summary td:nth-child(n+2){text-align:right}@media(max-width:760px){.annual-range-head{display:none}.annual-range-row{grid-template-columns:1fr;gap:10px}.annual-range-row input{width:100%}.annual-rule-highlight{grid-template-columns:1fr;gap:5px}.annual-current{align-items:flex-start;flex-direction:column}.annual-summary{display:block;overflow-x:auto}}
.annual-history{margin:14px 20px 20px;padding:12px 14px;border:1px solid var(--line-light);border-radius:var(--r-md)}.annual-history summary{cursor:pointer;font-weight:700}.annual-history div{display:grid;gap:8px;margin-top:10px}.annual-history a{display:flex;justify-content:space-between;gap:16px;padding:10px;border-radius:8px;background:#f7faf8;color:inherit;text-decoration:none}.annual-history span{color:var(--muted);font-size:12px}@media(max-width:760px){.annual-history a{flex-direction:column;gap:3px}}
.repo-scope-tabs{margin:0 0 12px}.repo-overview{margin-bottom:16px}.repo-overview tr.is-current td{background:#f1faf6}.repo-overview td,.repo-overview th{vertical-align:middle}.annual-determination-card .annual-summary{margin:0}.annual-determination-card .annual-history{margin-left:0;margin-right:0}.annual-range-row .muted{font-size:12px;color:var(--muted)}
.member-roster-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line-light)}.member-roster-row span{display:flex;flex-direction:column;gap:2px}.member-roster-row small{color:var(--muted)}.subsection-title{font-size:12px;margin:14px 0 7px;color:var(--green)}.check-field{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.check-field input{width:auto}.stack-list{display:flex;flex-direction:column;gap:7px}.list-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line-light);border-radius:9px;color:inherit;text-decoration:none;background:#fff}.list-row:hover,.list-row.active{border-color:var(--green);background:#f2f8f5}.list-row span:first-child{display:flex;flex-direction:column;gap:2px;flex:1}.list-row small{color:var(--muted)}
.comite-members-session-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px;padding:20px;border:1px solid #c9dfd1;border-radius:var(--r-lg);background:linear-gradient(135deg,#f7fcf8,#eef8f2)}.comite-members-session-head h1{margin:4px 0 5px;font-size:25px}.comite-members-session-head p{color:var(--muted)}.comite-padron-session-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.comite-padron-session-card{padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm)}.comite-padron-session-card.is-added{border-color:#a8d7bf;background:#fbfefc}.comite-padron-session-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.comite-padron-check{display:grid;place-items:center;width:28px;height:28px;border:2px solid #b8c8c1;border-radius:50%;font-size:19px;font-weight:800;color:#fff}.comite-padron-check.is-added{border-color:var(--utm);background:var(--utm)}.comite-padron-session-card h2{font-size:16px;margin-bottom:4px}.comite-padron-session-card>p{min-height:38px;color:var(--muted)}.comite-padron-session-meta{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.comite-padron-session-meta span{padding:5px 8px;border-radius:999px;background:#edf7f1;color:var(--green);font-size:11px;font-weight:700}.comite-padron-session-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-light)}.comite-member-modal{width:min(620px,calc(100vw - 30px));padding:0;border:0;border-radius:14px;box-shadow:var(--shadow-xl)}.comite-member-modal::backdrop{background:rgba(6,25,42,.58)}.comite-member-modal form{display:flex;flex-direction:column;gap:10px;padding:22px}.comite-member-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:5px}.comite-member-modal h2{font-size:20px;margin-top:3px}.comite-member-modal .btn{align-self:flex-start;margin-top:7px}@media(max-width:760px){.comite-members-session-head{align-items:flex-start;flex-direction:column}.comite-padron-session-grid{grid-template-columns:1fr}.comite-padron-session-actions{align-items:flex-start;flex-direction:column}}
.comite-master-person-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.comite-master-person-card{padding:16px;border:1px solid var(--line-light);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-sm)}.comite-master-person-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.comite-master-person-card h2{font-size:15px;margin-bottom:4px}.comite-master-person-card>p{min-height:38px;color:var(--muted);font-size:12px}.comite-membership-list{display:flex;flex-direction:column;gap:8px}.comite-membership-list .list-row{align-items:center}.comite-membership-list form{margin:0}@media(max-width:1020px){.comite-master-person-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.comite-master-person-grid{grid-template-columns:1fr}.comite-membership-list .list-row{align-items:flex-start;flex-direction:column}}
.comite-member-modal{position:fixed;top:50%;left:50%;margin:0;transform:translate(-50%,-50%);width:min(590px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;background:var(--card);border:1px solid rgba(12,82,62,.12);border-radius:18px}.comite-member-modal form{gap:0;padding:0}.comite-member-modal-head{align-items:center;margin:0;padding:22px 26px 16px;border-bottom:1px solid var(--line-light);background:linear-gradient(135deg,#fbfefd,#f1f8f4)}.comite-member-modal-head .btn{margin:0;white-space:nowrap}.comite-member-modal form>label,.comite-member-modal .form-row label{display:block;margin:16px 0 6px;color:var(--ink);font-size:13px;font-weight:700}.comite-member-modal form>input:not([type="hidden"]),.comite-member-modal form>select,.comite-member-modal .form-row select,.comite-member-modal .form-row input{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit}.comite-member-modal form>input:disabled{background:#f1f5f3;color:var(--muted);opacity:1}.comite-member-modal form>p{margin:16px 26px 0;line-height:1.55}.comite-member-modal form>input[type="hidden"]+label{margin-top:18px}.comite-member-modal form>label,.comite-member-modal form>input:not([type="hidden"]),.comite-member-modal form>select,.comite-member-modal form>.form-row{margin-left:26px;margin-right:26px;width:calc(100% - 52px)}.comite-member-modal .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:0}.comite-member-modal .form-row>div{min-width:0}.comite-member-modal .form-row select,.comite-member-modal .form-row input{margin:0}.comite-member-modal form>button[type="submit"]{align-self:flex-end;margin:24px 26px 26px;padding:12px 18px;box-shadow:0 4px 12px rgba(11,86,63,.16)}.comite-member-modal form input:focus,.comite-member-modal form select:focus{outline:none;border-color:var(--utm);box-shadow:0 0 0 3px rgba(10,159,120,.14)}.comite-member-modal::backdrop{background:rgba(6,25,42,.62);backdrop-filter:blur(2px)}@media(max-width:620px){.comite-member-modal{width:calc(100vw - 20px);max-height:calc(100vh - 20px)}.comite-member-modal-head{padding:18px}.comite-member-modal form>p{margin:14px 18px 0}.comite-member-modal form>label,.comite-member-modal form>input:not([type="hidden"]),.comite-member-modal form>select,.comite-member-modal form>.form-row{margin-left:18px;margin-right:18px;width:calc(100% - 36px)}.comite-member-modal form>button[type="submit"]{align-self:stretch;margin:20px 18px}.comite-member-modal .form-row{grid-template-columns:1fr}}
.comite-bulk-add{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:12px 15px;border:1px solid #c9dfd1;border-radius:var(--r-lg);background:#fff}.comite-bulk-add .check-field{font-weight:700;color:var(--ink)}.comite-bulk-add .btn{margin-left:auto}.comite-card-select{display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;color:var(--green);font-size:12px;font-weight:700}.comite-card-select input{width:18px;height:18px;accent-color:var(--utm)}.comite-member-modal #datosSuplente{margin:16px 26px 0}.comite-member-modal #datosSuplente label{display:block;margin:12px 0 6px;color:var(--ink);font-size:13px;font-weight:700}.comite-member-modal #datosSuplente input{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit}@media(max-width:620px){.comite-bulk-add{align-items:stretch}.comite-bulk-add .btn{margin-left:0}.comite-member-modal #datosSuplente{margin-left:18px;margin-right:18px}}
.comite-expediente-layout.upload-modal{grid-template-columns:1fr}.comite-digital-upload-modal .comite-upload-card{position:static;margin:0;padding:0;border:0;box-shadow:none;background:transparent}.comite-digital-upload-modal .comite-upload-card .module-head{display:none}.comite-digital-upload-modal .comite-upload-card .form{padding:0}.comite-digital-upload-modal .comite-upload-card .form label,.comite-digital-upload-modal .comite-upload-card .form input,.comite-digital-upload-modal .comite-upload-card .form select,.comite-digital-upload-modal .comite-upload-card .form textarea{margin-left:26px;margin-right:26px;width:calc(100% - 52px)}.comite-digital-upload-modal .comite-upload-card .form button{margin-left:26px;margin-bottom:26px}@media(max-width:620px){.comite-digital-upload-modal .comite-upload-card .form label,.comite-digital-upload-modal .comite-upload-card .form input,.comite-digital-upload-modal .comite-upload-card .form select,.comite-digital-upload-modal .comite-upload-card .form textarea{margin-left:18px;margin-right:18px;width:calc(100% - 36px)}.comite-digital-upload-modal .comite-upload-card .form button{margin-left:18px}}
.comite-expediente-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px;padding:20px;border:1px solid #c9dfd1;border-radius:var(--r-lg);background:linear-gradient(135deg,#f7fcf8,#eef8f2)}.comite-expediente-head h2{margin:4px 0 6px}.comite-expediente-head p{max-width:700px;color:var(--muted)}.comite-expediente-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:16px;align-items:start}.comite-document-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.comite-document-card{min-height:184px;padding:16px;border:1px solid var(--line-light);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm)}.comite-document-card.complementary{grid-column:1/-1}.comite-document-card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.comite-document-card h3{margin:9px 0 2px;font-size:15px}.comite-document-card p{font-size:12px;color:var(--muted)}.comite-document-empty{margin-top:20px;padding:12px;border-radius:8px;background:#f7faf8;color:var(--muted)}.comite-document-files{display:flex;flex-direction:column;gap:8px;margin-top:13px}.comite-file-item{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:10px;border:1px solid #dce9e1;border-radius:9px;background:#fbfefd}.comite-file-item strong{display:block;word-break:break-word;font-size:12px}.comite-file-item small{display:block;margin-top:3px;color:var(--muted);font-size:11px}.comite-file-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.comite-upload-card{position:sticky;top:14px}.comite-pdf-modal{width:min(1100px,94vw);height:min(790px,90vh);padding:0;border:0;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.36)}.comite-pdf-modal::backdrop{background:rgba(6,25,42,.6)}.comite-pdf-modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-light)}.comite-pdf-modal iframe{display:block;width:100%;height:calc(100% - 58px);border:0;background:#eef2f4}@media(max-width:900px){.comite-expediente-layout{grid-template-columns:1fr}.comite-document-grid{grid-template-columns:1fr}.comite-upload-card{position:static}.comite-expediente-head{flex-direction:column}.comite-file-item{flex-direction:column}.comite-file-actions{justify-content:flex-start}}
body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; transition: color var(--fast); }
a:hover { color: var(--green); opacity: .85; }
strong { font-weight: 700; }
table { width: 100%; border-collapse: collapse; }

/* ─── 3. FOCUS / ACCESSIBILITY ─── */
:focus-visible {
  outline: 2px solid var(--utm);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--utm);
  outline-offset: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   4. LAYOUT — Institutional header + top nav + wrap
   ═══════════════════════════════════════════════════════════════ */
.institutional-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
/* Como topbar dentro de main-area: quita el sticky para que scrollee con el contenido y no choque con el sidebar fixed */
.main-area .institutional-header { position: relative; z-index: 10; }
.institutional-strip {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-6);
  background: var(--card);
  flex-wrap: wrap;
}
.inst-logos {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.inst-logos img {
  display: block;
  max-height: 38px;
  width: auto;
  object-fit: contain;
}
.inst-logos .utm-logo { max-height: 34px; }
.logo-divider {
  height: 34px;
  width: 1px;
  background: var(--line-light);
}
.inst-system {
  text-align: right;
  color: var(--ink-light);
}
.inst-system strong {
  display: block;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink);
}
.inst-system span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

/* Top navigation bar */
.top {
  min-height: var(--top-h);
  padding: var(--sp-2) var(--sp-6);
  background: linear-gradient(135deg, #0a4d3b 0%, #0d684e 100%);
  color: #fff;
}
.top .brand { display: flex; align-items: center; gap: var(--sp-2); }
.top .brand .mark {
  width: 30px; height: 30px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.2);
  color: #fff;
  font-weight: 900;
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: background var(--fast);
}
.top .brand:hover .mark { background: rgba(255,255,255,.3); }
.top .brand strong { font-size: 13px; color: #fff; }
.top .brand span { font-size: 11px; color: rgba(255,255,255,.72); }

.top nav {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}
.top nav a {
  color: rgba(255,255,255,.9);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  padding: var(--sp-1) 0;
  border-bottom: 2px solid transparent;
  transition: all var(--fast);
}
.top nav a:hover {
  color: #fff;
  opacity: 1;
  border-bottom-color: rgba(255,255,255,.5);
  text-decoration: none;
}
.nav-user {
  color: rgba(255,255,255,.65);
  font-size: 11px;
  font-weight: 600;
  border-left: 1px solid rgba(255,255,255,.25);
  padding-left: var(--sp-2);
  margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   4b. APP SHELL + SIDEBAR LATERAL (v0.4.0)
   ═══════════════════════════════════════════════════════════════ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #0a4d3b 0%, #084232 100%);
  color: #fff;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  transition: width var(--med);
  overflow: hidden;
}
.sidebar.collapsed { width: var(--sidebar-collapsed-w); }

.sidebar-head {
  padding: var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 64px;
  flex-shrink: 0;
}
.sidebar-logo {
  width: 126px; height: 38px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}
.sidebar.collapsed .sidebar-logo { width: 40px; object-position: left center; }
.sidebar-title { transition: opacity var(--fast); white-space: nowrap; }
.sidebar-title strong { display: block; font-size: 15px; letter-spacing: .02em; }
.sidebar-title span { display: block; font-size: 10px; color: rgba(255,255,255,.55); }
.sidebar.collapsed .sidebar-title { opacity: 0; }

.sidebar-nav { flex: 1; padding: var(--sp-3) var(--sp-2); overflow-y: auto; overflow-x: hidden; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.4);
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  white-space: nowrap;
  transition: opacity var(--fast);
}
.sidebar.collapsed .nav-section-label { opacity: 0; height: var(--sp-2); padding: var(--sp-2) 0; overflow: hidden; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  transition: all var(--fast);
  position: relative;
  white-space: nowrap;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; opacity: 1; text-decoration: none; }
.nav-item.active { background: rgba(255,255,255,.12); color: #fff; }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--maya-gold);
  border-radius: 0 3px 3px 0;
}
.nav-item .nav-icon { width: 22px; font-size: 17px; text-align: center; flex-shrink: 0; }
.nav-item .nav-label { transition: opacity var(--fast); }
.sidebar.collapsed .nav-item .nav-label { opacity: 0; }
.sidebar.collapsed .nav-item { justify-content: center; padding: var(--sp-3) 0; }
.sidebar.collapsed .nav-item::after {
  content: attr(data-label);
  position: absolute;
  left: 100%; margin-left: var(--sp-3);
  background: var(--ink);
  color: #fff;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fast);
  z-index: 100;
}
.sidebar.collapsed .nav-item:hover::after { opacity: 1; }

.sidebar-foot { border-top: 1px solid rgba(255,255,255,.1); padding: var(--sp-3); flex-shrink: 0; }
.toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: all var(--fast);
}
.toggle-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.toggle-btn .toggle-icon { display: inline-block; transition: transform var(--med); font-size: 16px; }
.sidebar.collapsed .toggle-btn .toggle-icon { transform: rotate(180deg); }
.toggle-btn .toggle-text { transition: opacity var(--fast); }
.sidebar.collapsed .toggle-btn .toggle-text { display: none; }

/* Main area — se desplaza al lado del sidebar */
.main-area {
  flex: 1;
  margin-left: var(--sidebar-w);
  transition: margin-left var(--med);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}
.sidebar.collapsed ~ .main-area { margin-left: var(--sidebar-collapsed-w); }

/* Cuando NO hay sidebar (login, error 403), main-area ocupa todo */
.app-shell > .main-area:first-child { margin-left: 0; }

/* Overlay móvil */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 40;
}

/* Hamburger (móvil) */
.hamburger { display: none; font-size: 22px; color: var(--ink); padding: var(--sp-2); cursor: pointer; }

/* Topbar user area */
.topbar-user { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.topbar-profile { display:flex; align-items:center; gap:10px; min-width:0; color:var(--ink); text-decoration:none; padding:5px 8px; border:1px solid transparent; border-radius:var(--r-lg); transition:background var(--fast),border-color var(--fast); }
.topbar-profile:hover { background:var(--surface-soft); border-color:var(--line); }
.topbar-profile-copy { min-width:0; display:grid; gap:1px; line-height:1.15; }
.topbar-profile-copy strong { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--ink); }
.topbar-profile-copy small { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:var(--muted); }
.user-avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--green) 0%, var(--utm) 100%);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
  text-transform: uppercase;
}
.btn-logout {
  color: var(--muted);
  font-size: 16px;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  transition: all var(--fast);
  text-decoration: none;
}
.btn-logout:hover { color: var(--red); background: var(--red-light); }

/* Wrap — main content area */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-6);
  flex: 1;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   5. HERO & PAGE HEADINGS
   ═══════════════════════════════════════════════════════════════ */
.hero {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-bottom: var(--sp-5);
}
.hero h1 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--sp-1);
}
.hero p {
  font-size: 14px;
  color: var(--muted);
  max-width: 680px;
  line-height: 1.5;
}
.section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.section-title h2 { margin-bottom: 2px; }
.section-title p { margin: 0; }

/* Dashboard stats bar */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.dash-stat {
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--fast);
}
.dash-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dash-stat-num {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--green);
  line-height: 1.1;
}
.dash-stat-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: var(--sp-1);
  font-weight: 600;
}

/* Module coming soon */
.module-coming { opacity: .7; }
.module-coming:hover { opacity: .85; }

/* ═══ DASHBOARD v0.4.7 — Stats estéticas + buscador + pendientes ═══ */
.dash-search {
  margin-bottom: var(--sp-5);
}
.dash-search input {
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  font-size: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: all var(--fast);
}
.dash-search input:focus {
  border-color: var(--utm);
  box-shadow: 0 0 0 4px rgba(10,159,120,.1), var(--shadow-md);
  outline: none;
}

/* Stats row estéticas */
.stats-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-xs);
  transition: all var(--fast);
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  opacity: .06;
  transform: translate(20px, -20px);
}
.stat-card.s-green::after { background: var(--green); }
.stat-card.s-blue::after { background: var(--blue); }
.stat-card.s-gold::after { background: var(--gold); }
.stat-card.s-vino::after { background: var(--vino); }
.stat-card.s-teal::after { background: var(--utm); }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card .stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 22px;
  margin-bottom: var(--sp-3);
}
.stat-card.s-green .stat-icon { background: var(--green-light); color: var(--green); }
.stat-card.s-blue .stat-icon { background: var(--blue-light); color: var(--blue); }
.stat-card.s-gold .stat-icon { background: var(--gold-light); color: var(--gold); }
.stat-card.s-vino .stat-icon { background: #fce8ed; color: var(--vino); }
.stat-card.s-teal .stat-icon { background: #e0f5f0; color: var(--utm); }
.stat-card .stat-num { font-size: 32px; font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: var(--sp-1); }
.stat-card .stat-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.dashboard-summary-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); }
.dashboard-summary-row .stat-card { min-height: 116px; padding: var(--sp-3); border-radius: var(--r-md); }
.dashboard-summary-row .stat-card::after { width: 46px; height: 46px; transform: translate(15px, -15px); }
.dashboard-summary-row .stat-icon { width: 36px; height: 36px; font-size: 18px; margin-bottom: var(--sp-2); }
.dashboard-summary-row .stat-num { font-size: 27px; }
.dashboard-summary-row .stat-label { font-size: 11px; white-space: nowrap; }

/* Pendientes grid */
.pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.pending-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  transition: all var(--fast);
  text-decoration: none;
  color: var(--ink);
}
.pending-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
  background: var(--gold-light);
  text-decoration: none;
}
.pending-card .pending-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.pending-card strong {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.pending-card span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Section head reutilizable */
.section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.section-head h2 { font-size: 18px; font-weight: 700; white-space: nowrap; }
.section-head .section-line { flex: 1; height: 1px; background: var(--line); }
.section-head .btn { white-space: nowrap; }

.badge.blue { background: var(--blue-light); color: var(--blue); }

/* ═══════════════════════════════════════════════════════════════
   6. GRID SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.detail {
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: var(--sp-4);
}
.detail.equal { grid-template-columns: 1fr 1fr; }
.section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* ═══════════════════════════════════════════════════════════════
   7. CARDS & PANELS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--fast);
}
.card:hover { box-shadow: var(--shadow-md); }
.card h2 { font-size: 14px; margin-bottom: var(--sp-2); }
.module { min-height: 138px; }
.module h2 { margin-bottom: var(--sp-2); font-size: 18px; }
.module p { margin-bottom: var(--sp-3); color: var(--muted); line-height: 1.45; }

.module-card {
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--fast);
}
.module-card[data-module-panel][hidden] { display: none; }
.module-card[data-module-panel].active { display: block; }
.module-context {
  background: var(--bg-soft);
  padding: var(--sp-3);
  border-radius: var(--r-md);
}
.module-context .module-head { margin-bottom: var(--sp-2); }
.module-context .module-head h2 { font-size: 14px; }
.module-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.module-head h2 { margin-top: 2px; font-size: 16px; }
.module-head p { margin-top: var(--sp-1); }
.module-kicker {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.module-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.field-card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  background: var(--bg-soft);
}
.field-card strong { display: block; font-size: 12px; color: var(--muted); margin-bottom: var(--sp-1); }
.field-card span { font-size: 13px; color: var(--ink-light); }

/* ═══════════════════════════════════════════════════════════════
   8. BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--fast);
  line-height: 1.3;
}
.btn:hover {
  background: #084232;
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.btn:active { transform: translateY(0); }
.btn.secondary {
  background: var(--card);
  color: var(--green);
  border: 1px solid var(--line);
}
.btn.secondary:hover {
  background: var(--green-light);
  border-color: var(--green);
}
.btn.warn { background: var(--gold); }
.btn.warn:hover { background: #9a7228; }
.btn.small { padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm); font-size: 12px; }
.btn[disabled], .btn.disabled {
  opacity: .5;
  cursor: not-allowed;
  position: relative;
  transform: none !important;
  box-shadow: none !important;
}
.btn[disabled]:hover, .btn.disabled:hover { opacity: .6; }

/* Icon button (close modal, etc.) */
.icon-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-light);
  border-radius: var(--r-md);
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-weight: 900;
  font-size: 16px;
  transition: all var(--fast);
}
.icon-btn:hover { background: var(--red-light); border-color: var(--red); color: var(--red); }

/* Action buttons row */
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.mini-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-link {
  display: inline-block;
  margin-top: var(--sp-1);
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.mini-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   9. BADGES / PILLS / CHIPS
   ═══════════════════════════════════════════════════════════════ */
.badge, .pill {
  display: inline-block;
  border-radius: var(--r-full);
  padding: 3px 9px;
  background: var(--green-light);
  color: var(--green);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .01em;
}
.badge.gray, .pill { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line-light); }
.badge.red { background: var(--red-light); color: var(--red); }
.badge.gold { background: var(--gold-light); color: #8a641d; }
.badge.green { background: var(--green-light); color: #086345; }
.badge.teal { background: #e0f5f0; color: var(--utm); }
.badge.vino { background: #fce8ed; color: var(--vino); }
.pill.green { background: var(--green-light); color: var(--green); }
.auto-chip {
  border: 1px solid #d4e6dc;
  background: var(--green-light);
  color: var(--green);
  border-radius: var(--r-full);
  padding: 5px 9px;
  font-weight: 700;
  font-size: 11px;
}
.auto-chip.off { background: var(--bg-soft); color: var(--muted); border-color: var(--line); }
.auto-chip.warn { background: var(--gold-light); color: #8a5a00; border-color: #f2d9a4; }
.next-action {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9e9e2;
  background: #f6fbf8;
  color: var(--green);
  border-radius: var(--r-full);
  padding: 4px 9px;
  font-weight: 700;
  font-size: 10.5px;
  margin-top: var(--sp-1);
}
.document-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #d7e8e0;
  background: #f4fbf8;
  border-radius: var(--r-full);
  padding: 4px 8px;
  color: var(--green);
  font-weight: 700;
  font-size: 11px;
  text-decoration: none;
}
.muted { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   10. TABLES
   ═══════════════════════════════════════════════════════════════ */
.table-card {
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-light);
}
.table-head h2 { margin: 0; font-size: 14px; }
th, td {
  padding: var(--sp-3) 9px;
  border-bottom: 1px solid var(--line-light);
  vertical-align: top;
  text-align: left;
}
th {
  background: var(--bg-soft);
  color: var(--ink-light);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
td { font-size: 12px; color: var(--ink); }
tr:hover td { background: rgba(11,86,63,.02); }

/* ═══════════════════════════════════════════════════════════════
   11. TABS & FILTERS
   ═══════════════════════════════════════════════════════════════ */
.tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.tab {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  transition: all var(--fast);
}
.tab:hover {
  background: var(--green-light);
  border-color: var(--green);
  text-decoration: none;
}
.tab.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.tabs-compact { gap: 6px; margin-bottom: var(--sp-3); }
.tabs-compact .tab { padding: 7px 10px; font-size: 11.5px; }
.sticky-tabs {
  position: sticky;
  top: calc(var(--top-h) + var(--header-h));
  z-index: 4;
  background: var(--bg);
  padding: var(--sp-2) 0;
}

.filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.filters input, .filters select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: 14px;
  background: var(--card);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.filters input:focus, .filters select:focus {
  border-color: var(--utm);
  box-shadow: 0 0 0 3px rgba(10,159,120,.12);
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   12. FORMS
   ═══════════════════════════════════════════════════════════════ */
.form label {
  display: block;
  font-weight: 700;
  margin: var(--sp-2) 0 5px;
  color: var(--ink-light);
  font-size: 13px;
}
.form small { display: block; margin: -2px 0 var(--sp-3); color: var(--muted); font-size: 12px; }
.form input, .form select, .form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--card);
  color: var(--ink);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--utm);
  box-shadow: 0 0 0 3px rgba(10,159,120,.12);
  outline: none;
}
.form input::placeholder, .form textarea::placeholder { color: var(--muted); opacity: .6; }
.stack input { margin-bottom: var(--sp-3); }

/* Inline forms for users */
.inline-user-form, .inline-password-form {
  display: grid;
  gap: var(--sp-2);
  min-width: 230px;
}
.inline-user-form input, .inline-user-form select,
.inline-password-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-2) 9px;
  font-size: 12px;
  background: var(--card);
  transition: border-color var(--fast);
}
.inline-user-form input:focus, .inline-user-form select:focus,
.inline-password-form input:focus {
  border-color: var(--utm);
  box-shadow: 0 0 0 3px rgba(10,159,120,.12);
  outline: none;
}
.inline-password-form { min-width: 170px; }
.inline-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink-light);
  font-size: 12px;
}
.inline-check input { width: auto; }

/* Required asterisks */
.js-importe-box.required label::after,
.js-periodo-box.required label::after {
  content: ' *';
  color: var(--vino);
  font-weight: 900;
}

/* ═══════════════════════════════════════════════════════════════
   13. NOTICE / ALERT MESSAGES
   ═══════════════════════════════════════════════════════════════ */
.notice {
  background: var(--gold-light);
  border: 1px solid #ead494;
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  color: #5f4b16;
  margin-bottom: var(--sp-3);
  font-size: 13px;
  line-height: 1.5;
}
.notice.error {
  background: var(--red-light);
  border-color: #e2aaa4;
  color: #7c241c;
}

/* Institutional note */
.institutional-note {
  border-left: 4px solid var(--vino);
  background: var(--card);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  color: var(--ink-light);
  font-size: 13px;
  line-height: 1.5;
}
.text-vino { color: var(--vino); }

/* Locked / blocked notes */
.locked-note {
  border: 1px dashed var(--line);
  background: var(--bg-soft);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  color: var(--muted);
  font-size: 13px;
  margin-bottom: var(--sp-3);
}
.action-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed #d9c89a;
  background: var(--gold-light);
  color: #8a641d;
  border-radius: var(--r-md);
  padding: 5px 9px;
  font-size: 11.5px;
  font-weight: 700;
  max-width: 340px;
  vertical-align: middle;
}
.action-hint::before { content: "⚠"; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════
   14. KEY-VALUE PAIRS
   ═══════════════════════════════════════════════════════════════ */
.kv {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 7px var(--sp-3);
}
.kv strong { color: var(--ink-light); font-size: 13px; }
.kv.wide { grid-template-columns: 220px 1fr; }

/* Context strip (expediente) */
.context-strip {
  display: grid;
  grid-template-columns: 1.25fr .55fr .9fr .45fr .45fr .65fr;
  gap: var(--sp-2);
}
.context-strip > div {
  min-width: 0;
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: var(--card);
  padding: 7px 9px;
}
.context-strip strong { display: block; color: var(--muted); font-size: 10.5px; margin-bottom: 2px; }
.context-strip span { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.context-concept {
  margin-top: var(--sp-2);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  padding: var(--sp-2) 9px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Summary strip */
.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
}
.summary-strip > div {
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.summary-strip strong {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.summary-strip span { font-weight: 700; color: var(--ink); font-size: 14px; }

/* Stat cards */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.stat {
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--fast);
}
.stat:hover { box-shadow: var(--shadow-md); }
.stat strong { display: block; font-size: 18px; color: var(--ink); }
.stat span { color: var(--muted); font-size: 11px; }

/* Divider */
.divider { height: 1px; background: var(--line-light); margin: var(--sp-3) 0; }

/* ═══════════════════════════════════════════════════════════════
   15. TIMELINE / STEPS
   ═══════════════════════════════════════════════════════════════ */
.timeline {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.step {
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  min-height: 88px;
  transition: all var(--fast);
}
.step .dot {
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--bg-soft);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-weight: 900;
  margin-bottom: 7px;
  font-size: 12px;
}
.step.done { border-color: #b8d7ca; background: #f7fbf9; }
.step.done .dot { background: var(--green); color: #fff; }
.step.current { border-color: #e7ca87; background: var(--gold-light); }
.step strong { display: block; margin-bottom: 3px; font-size: 13px; }
.step span { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; }

/* ═══════════════════════════════════════════════════════════════
   16. REQUISITION LIST ITEMS
   ═══════════════════════════════════════════════════════════════ */
.req-list { display: grid; gap: var(--sp-3); }
.req-item {
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: 1.05fr 1.45fr .86fr .65fr auto;
  gap: var(--sp-3);
  align-items: start;
  transition: box-shadow var(--fast);
}
.req-item:hover { box-shadow: var(--shadow-md); }
.req-item h3 { font-size: 14px; margin-bottom: var(--sp-1); }
.req-meta { font-size: 11.5px; color: var(--muted); }
.req-desc { font-size: 12.5px; color: var(--ink-light); margin-top: var(--sp-1); }
.req-status { display: flex; flex-direction: column; gap: 5px; }
.req-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 210px;
}
.req-actions button { font-family: inherit; }
.req-actions .btn { white-space: nowrap; }

/* State row */
.state-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   17. MODALS & DRAWERS
   ═══════════════════════════════════════════════════════════════ */
.modal, .drawer {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(13,28,45,.46);
  backdrop-filter: blur(2px);
  z-index: 60;
}
.modal.open, .drawer.open { display: block; }

.modal-panel {
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  margin: 24px auto;
  animation: modalIn .2s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header, .drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line-light);
  background: var(--bg-soft);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.modal-header h3, .drawer-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.modal-header p, .drawer-header p { margin: var(--sp-1) 0 0; color: var(--muted); font-size: 12px; }
.modal-body, .drawer-body { padding: var(--sp-4); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line-light);
  background: var(--bg-soft);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* Modal form overrides */
.modal .form input, .modal .form select, .modal .form textarea {
  font-size: 13px;
  padding: 9px 10px;
  border-radius: var(--r-md);
}

/* Drawer */
.drawer-panel {
  width: min(560px, calc(100vw - 32px));
  height: 100%;
  margin-left: auto;
  background: var(--card);
  box-shadow: -10px 0 40px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform .2s var(--ease);
}
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-body { overflow: auto; flex: 1; }
.drawer-section {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  background: var(--bg-soft);
}
.drawer-section h4 { margin: 0 0 var(--sp-2); font-size: 13px; color: var(--ink-light); font-weight: 700; }
.drawer-actions {
  position: sticky;
  bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--line-light);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.drawer-actions .btn { white-space: nowrap; }

/* Quick grid (drawer fields) */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.quick-field {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: var(--card);
  padding: var(--sp-2);
}
.quick-field strong { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.quick-field span { font-size: 12px; color: var(--ink); overflow-wrap: anywhere; }

/* Toast notification */
.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  background: var(--green);
  color: #fff;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  font-weight: 700;
  font-size: 13px;
  transform: translateY(16px);
  opacity: 0;
  transition: all var(--med);
  z-index: 100;
  max-width: 380px;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   18. PROCEDURE MODAL
   ═══════════════════════════════════════════════════════════════ */
.procedure-modal { width: min(1120px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
.procedure-modal .modal-body { padding: 15px 18px; }
.procedure-form .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.procedure-form label { font-size: 12px; }
.procedure-form input, .procedure-form select, .procedure-form textarea { font-size: 12.5px; }

.conditional-box {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
  transition: opacity var(--fast);
}
.conditional-box.disabled { opacity: .55; background: var(--bg); }
.conditional-box.disabled select, .conditional-box.disabled input {
  pointer-events: none;
  background: #eef2f4;
  color: #7a8795;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
}
.check-grid label {
  display: flex !important;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--r-md);
  padding: 9px;
  margin: 0 !important;
  font-weight: 600 !important;
  color: var(--ink-light) !important;
  font-size: 12px !important;
  cursor: pointer;
  transition: all var(--fast);
}
.check-grid label:hover { border-color: var(--green); background: var(--green-light); }
.check-grid input { width: auto !important; margin: 0 !important; }

.auto-requirements { display: flex; flex-wrap: wrap; gap: 7px; margin: 7px 0 6px; }
.contract-summary {
  margin-top: var(--sp-2);
  border-left: 4px solid var(--maya-gold);
  background: var(--card);
  padding: 9px 10px;
  border-radius: var(--r-md);
  color: var(--ink-light);
  font-size: 12px;
}
.contract-summary strong { color: var(--ink); }
.route-guide { font-size: 12.5px; }
.route-result {
  border: 1px solid #d9e9e2;
  background: #f6fbf8;
  border-radius: var(--r-md);
  padding: 9px 10px;
  margin: var(--sp-2) 0;
  color: var(--ink-light);
  font-size: 12px;
}
.route-result strong { color: var(--green); }

/* ═══════════════════════════════════════════════════════════════
   19. QUOTES & AUTHORIZATION
   ═══════════════════════════════════════════════════════════════ */
.quote-modal, .auth-modal {
  width: min(1040px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
}
.auth-modal { display: flex; flex-direction: column; overflow: hidden; }
.auth-modal .auth-form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.auth-modal .modal-body { overflow: auto; }
.auth-modal .modal-actions { flex: 0 0 auto; position: sticky; bottom: 0; z-index: 3; }
.quote-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.quote-modal .quote-form { display: flex; flex-direction: column; min-height: 0; }
.quote-modal .modal-body { overflow: auto; }
.quote-modal .modal-actions { position: sticky; bottom: 0; z-index: 3; }
.quote-validation { margin: 0 0 var(--sp-3); }
.quote-validation[hidden] { display: none; }
.quote-form .form-row, .auth-form .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

.quote-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.quote-slot {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: var(--card);
  padding: var(--sp-3);
  min-height: 96px;
  transition: border-color var(--fast);
}
.quote-slot:hover { border-color: #b8d7ca; }
.quote-slot strong { display: block; font-size: 12px; color: var(--ink-light); margin-bottom: 6px; }
.quote-slot span, .quote-slot em, .quote-slot small { display: block; }
.quote-slot span { font-size: 12.5px; color: var(--ink-light); }
.quote-slot em { font-style: normal; font-weight: 700; color: var(--green); margin-top: 4px; }
.quote-slot small { color: var(--green); font-weight: 700; margin-top: 4px; }
.quote-slot.empty { background: var(--bg-soft); border-style: dashed; }
.quote-slot.empty span { color: var(--muted); margin-bottom: var(--sp-2); }
.quote-slot.winner { background: #f4fbf8; border-color: #b8d7ca; }

.quote-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.quote-tab {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-light);
  border-radius: var(--r-md);
  padding: 9px 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--fast);
}
.quote-tab:hover { border-color: var(--green); }
.quote-tab.active { background: var(--green); border-color: var(--green); color: #fff; }

.comparison-table { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.comparison-table table { margin: 0; }
.comparison-table th { white-space: nowrap; }
.comparison-table td { vertical-align: middle; }
.comparison-table small { color: var(--muted); }
.selected-row { background: #f4fbf8; }
.inline-form { margin: 0; }
.inline-form .btn { white-space: nowrap; }

/* Authorization */
.authorization-stage {
  display: grid;
  grid-template-columns: 1.2fr .75fr .85fr .85fr;
  gap: var(--sp-3);
}
.auth-summary-card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  padding: var(--sp-3);
  min-height: 104px;
}
.auth-summary-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: var(--sp-2);
}
.auth-summary-card strong { display: block; font-size: 17px; color: var(--ink); line-height: 1.15; }
.auth-summary-card small { display: block; color: var(--muted); font-size: 12px; margin-top: var(--sp-2); }
.auth-summary-card.amount { background: #f6fbf8; border-color: #b8d7ca; }
.auth-summary-card.amount strong { color: var(--green); }
.auth-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.auth-path-step {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: var(--card);
  padding: var(--sp-3);
}
.auth-path-step strong { display: block; font-size: 12px; color: var(--ink-light); }
.auth-path-step span { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.auth-path-step.done { background: #f6fbf8; border-color: #b8d7ca; }
.auth-path-step.current { background: var(--gold-light); border-color: #e7ca87; }

/* ═══════════════════════════════════════════════════════════════
   20. FLOW STEPS (Expediente)
   ═══════════════════════════════════════════════════════════════ */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.flow-step {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: var(--card);
  padding: var(--sp-2);
  min-height: 76px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--fast);
}
.flow-step:hover { border-color: #b8d7ca; box-shadow: var(--shadow-sm); }
.flow-step:focus-visible { outline: 3px solid rgba(11,86,63,.22); outline-offset: 2px; }
.flow-step .flow-num {
  width: 22px; height: 22px;
  border-radius: var(--r-full);
  background: var(--bg-soft);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 11px;
  margin-bottom: 5px;
}
.flow-step strong { display: block; font-size: 11.5px; color: var(--ink-light); line-height: 1.2; }
.flow-step small { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.25; margin-top: 3px; }
.flow-step.done { background: #f6fbf8; border-color: #b8d7ca; }
.flow-step.done .flow-num { background: var(--green); color: #fff; }
.flow-step.current, .flow-step.active { background: var(--gold-light); border-color: #e7ca87; }
.flow-step.current .flow-num, .flow-step.active .flow-num { background: var(--maya-gold); color: #fff; }
.flow-step.manual-active { background: #eef7fb; border-color: #7bb8ca; }
.flow-step.manual-active .flow-num { background: #2a7890; color: #fff; }
.flow-step.locked { opacity: .55; cursor: not-allowed; }
.flow-step.locked:hover { border-color: var(--line); box-shadow: none; }
.flow-step.locked[disabled] { pointer-events: none; }
.flow-lock-note { font-size: 11.5px; margin: var(--sp-2) 0 0; }

/* ═══════════════════════════════════════════════════════════════
   21. LOTES (Purchase lots)
   ═══════════════════════════════════════════════════════════════ */
.lot-list { display: grid; gap: var(--sp-3); }
.lot-card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
  padding: var(--sp-3);
}
.lot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.lot-head h3 { margin-top: 2px; font-size: 15px; }
.lot-head p { margin-top: var(--sp-1); }
.lot-strip { grid-template-columns: .55fr 1fr .65fr 1fr .7fr .45fr; margin-bottom: var(--sp-3); }

/* ═══════════════════════════════════════════════════════════════
   22. ORDEN DE COMPRA (OC)
   ═══════════════════════════════════════════════════════════════ */
.oc-modal {
  width: min(1120px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.oc-modal .oc-form { display: flex; flex-direction: column; min-height: 0; }
.oc-modal .modal-body { overflow: auto; }
.oc-modal .modal-actions { position: sticky; bottom: 0; z-index: 4; pointer-events: auto; }
.oc-modal .modal-actions .btn { pointer-events: auto; }

.oc-lot-list { display: grid; gap: 9px; margin-top: var(--sp-3); }
.oc-lot-card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  padding: 10px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.oc-lot-card strong { display: block; font-size: 13px; color: var(--ink); }
.oc-lot-card small { display: block; color: var(--muted); margin-top: 3px; }

.oc-items { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
.oc-item-row {
  display: grid;
  grid-template-columns: .5fr .7fr 2fr .85fr auto;
  gap: var(--sp-2);
  align-items: center;
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  padding: var(--sp-2);
}
.oc-item-row input { margin: 0 !important; }
.totals-row { margin-top: var(--sp-3); }
.oc-total-box {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  flex-wrap: wrap;
  border: 1px solid #d9e9e2;
  background: #f6fbf8;
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-3);
}
.oc-total-box span { color: var(--muted); font-weight: 700; }
.oc-total-box strong { color: var(--green); }

/* ═══════════════════════════════════════════════════════════════
   23. OC DOCUMENT (Printable)
   ═══════════════════════════════════════════════════════════════ */
.oc-document {
  max-width: 816px;
  min-height: 1056px;
  margin: 0 auto var(--sp-6);
  background: var(--card);
  color: #111;
  border: 1px solid #d7dde4;
  border-radius: 4px;
  padding: 28px 34px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.25;
  box-shadow: var(--shadow-lg);
}
.oc-template-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: var(--sp-2);
}
.oc-template-head img:first-child { width: 245px; height: auto; }
.oc-template-head img:last-child { width: 245px; height: auto; }
.oc-template-title {
  text-align: center;
  font-size: 18px;
  margin: 4px 0 6px;
  font-weight: 800;
  letter-spacing: .02em;
}
.oc-template-folio { text-align: center; font-size: 11.5px; margin: 0 0 var(--sp-2); }
.oc-template-meta, .oc-template-provider, .oc-template-items, .oc-template-extras {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-2);
  table-layout: fixed;
}
.oc-template-meta td, .oc-template-provider td,
.oc-template-items th, .oc-template-items td,
.oc-template-extras td {
  border: 1px solid #111;
  padding: 5px 6px;
  vertical-align: middle;
}
.oc-template-meta td { width: 33.33%; height: 28px; }
.oc-template-band {
  margin: var(--sp-2) 0 0;
  border: 1px solid #111;
  border-bottom: 0;
  padding: 5px 7px;
  font-size: 11.5px;
  font-weight: 800;
  background: var(--card);
}
.oc-template-band.center { text-align: center; border-bottom: 1px solid #111; margin-top: 7px; }
.oc-template-provider { margin-bottom: 9px; }
.oc-template-notice { text-align: center; font-weight: 800; margin: var(--sp-2) 0 7px; font-size: 11px; }
.oc-template-items th { font-weight: 800; text-align: center; background: #f5f5f5; }
.oc-template-items th:nth-child(1) { width: 10%; }
.oc-template-items th:nth-child(2) { width: 43%; }
.oc-template-items th:nth-child(3) { width: 15%; }
.oc-template-items th:nth-child(4), .oc-template-items th:nth-child(5) { width: 16%; }
.oc-template-items td:nth-child(1), .oc-template-items td:nth-child(3),
.oc-template-items td:nth-child(4), .oc-template-items td:nth-child(5) { text-align: center; }
.oc-template-items td:nth-child(2) { text-align: left; }
.oc-template-extras td { min-height: 36px; }
.oc-template-totals { width: 310px; margin: var(--sp-2) 0 var(--sp-2) auto; }
.oc-template-totals h3 { font-size: 12px; margin: 0 0 4px; }
.oc-template-totals p { margin: 0 0 5px; text-align: left; }
.oc-template-totals .grand { font-size: 12px; }
.oc-template-signature { width: 300px; margin: 34px auto var(--sp-3); text-align: center; }
.oc-template-signature p { margin: 0 0 26px; }
.signature-line { border-top: 1px solid #111; margin-bottom: 5px; }
.oc-template-signature strong { display: block; text-transform: none; }
.oc-template-signature span { display: block; }
.oc-template-reception { display: block; padding: 0; margin-top: 18px; text-align: center; }
.oc-template-reception p { font-size: 20px; font-weight: 800; margin: 0 0 var(--sp-2); }
.oc-template-reception span { color: #555; }
.oc-template-meta strong, .oc-template-provider strong, .oc-template-extras strong { font-weight: 800; }

/* Reception stamp / signature overlays */
.reception-modal { width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
.oc-reception-stamp { display: block; width: 520px; max-width: 92%; height: auto; margin: 0 auto var(--sp-2); }
.oc-reception-stamp-firma { display: block; width: 520px; max-width: 92%; height: auto; margin: 0 auto var(--sp-2); }
.oc-reception-stamp-izquierda { display: block; width: 360px; max-width: 70%; height: auto; margin: 0 auto var(--sp-2) 0; }
.oc-reception-stamp-derecha { display: block; width: 360px; max-width: 70%; height: auto; margin: 0 0 var(--sp-2) auto; }
.oc-reception-stamp-arriba { display: block; width: 480px; max-width: 88%; height: auto; margin: 0 auto var(--sp-2); }
.oc-reception-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; text-align: left; }
.oc-reception-grid span { border: 1px solid #111; padding: 5px 6px; color: #111; }
.oc-reception-observations { border: 1px solid #111; margin-top: 7px; padding: 6px; text-align: left; }

/* Factura info in printable OC */
.oc-template-factura-info { margin: var(--sp-4) 0; padding: var(--sp-3); border: 1px solid #ddd; border-radius: 4px; }
.oc-template-factura-info h3 { margin: 0 0 var(--sp-2); font-size: 13px; }
.oc-template-factura-info td { font-size: 11px; padding: 3px 8px; }

/* ═══════════════════════════════════════════════════════════════
   24. ORDEN DE PAGO (OP)
   ═══════════════════════════════════════════════════════════════ */
.op-modal { width: min(1040px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
.op-fieldset {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
}
.op-fieldset legend { font-weight: 700; color: var(--green); font-size: 12px; padding: 0 var(--sp-2); }
.op-card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  padding: 10px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.op-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: var(--sp-3);
}
.op-card-head strong { font-size: 13px; color: var(--ink); }
.op-card-head small { color: var(--muted); }

/* OP Diagnostic */
.op-diagnostic {
  border: 1px solid #e2aaa4;
  background: #fdf6f4;
  border-radius: var(--r-md);
  padding: 10px var(--sp-3);
  font-size: 12px;
  margin: var(--sp-2) 0;
}
.op-diagnostic p { margin: 0 0 6px; color: #7c241c; }
.op-diagnostic ul { margin: 0; padding-left: 18px; color: #555; }
.op-diagnostic li { margin-bottom: 3px; }

/* OP type summary */
.op-type-summary {
  border-left: 4px solid var(--maya-gold);
  background: var(--gold-light);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: 11.5px;
  color: #5f4b16;
  margin: var(--sp-2) 0;
}
.op-type-summary[hidden] { display: none; }
.op-contrato-summary { font-size: 11.5px; margin-top: 6px; }

/* Output sections */
.output-section {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.output-section h4 {
  margin: 0 0 var(--sp-2);
  font-size: 12px;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.output-section h4 .badge { font-size: 10px; text-transform: none; }
.output-section.completed { border-color: #b8d7ca; background: #f6fbf8; }
.output-section.pending { border-color: #e7ca87; background: var(--gold-light); }
.output-section.empty { border-style: dashed; opacity: .85; }

/* ═══════════════════════════════════════════════════════════════
   25. CONTABILIDAD (Accounting)
   ═══════════════════════════════════════════════════════════════ */
.doc-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.doc-checklist li { font-size: 12.5px; color: var(--ink-light); padding: 4px 6px; border-radius: var(--r-sm); background: var(--bg-soft); }
.doc-checklist-form {
  display: grid;
  gap: var(--sp-2);
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  background: var(--bg-soft);
}
.doc-check-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2);
  align-items: center;
}
.doc-check-item .doc-check-label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.doc-check-item input[type=text] { width: 100%; }
.doc-check-item:last-child { grid-template-columns: auto 1fr 1fr; }

/* Recepción documental */
.reception-modal { width: min(780px, calc(100vw - 28px)); }
.reception-modal-header { background: linear-gradient(115deg, #f6fbf9, #eef7f4); }
.reception-modal-header h3 { margin-top: 3px; }
.reception-modal-body { display: grid; gap: var(--sp-4); }
.reception-context { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.reception-context > div { min-width: 0; padding: 10px 11px; border: 1px solid #cfe4da; border-radius: var(--r-md); background: #f8fcfa; }
.reception-context span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.reception-context strong { display: block; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reception-section { padding: var(--sp-3); border: 1px solid var(--line-light); border-radius: var(--r-lg); background: var(--bg-soft); }
.reception-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.reception-section h4 { margin: 0; font-size: 14px; }
.reception-section p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.reception-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); padding: 0; border: 0; background: transparent; }
.reception-checklist .doc-check-label { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 10px; border: 1px solid var(--line-light); border-radius: var(--r-md); background: var(--card); cursor: pointer; transition: border-color var(--fast), background var(--fast), box-shadow var(--fast); }
.reception-checklist .doc-check-label:hover { border-color: #91c7b3; background: #f5fbf8; }
.reception-checklist .doc-check-label:has(input:checked) { border-color: #6db397; background: #edf8f2; box-shadow: inset 0 0 0 1px #d1eadc; }
.reception-checklist input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--green); }
.doc-check-index { display: grid; flex: 0 0 auto; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--bg-soft); color: var(--muted); font-size: 10px; font-weight: 800; }
.reception-checklist strong { color: var(--ink); font-size: 12px; line-height: 1.3; }
.reception-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.reception-fields > div { min-width: 0; }
.reception-modal-actions { align-items: center; justify-content: space-between; }
.reception-modal-actions p { margin: 0; color: var(--muted); font-size: 11.5px; }
.reception-modal-actions > div { display: flex; gap: var(--sp-2); }
@media (max-width: 680px) { .reception-context, .reception-checklist, .reception-fields { grid-template-columns: 1fr; } .reception-modal-actions { align-items: stretch; flex-direction: column; } .reception-modal-actions > div { justify-content: flex-end; } }

/* ═══════════════════════════════════════════════════════════════
   26. OP DOCUMENT (Printable)
   ═══════════════════════════════════════════════════════════════ */
.op-document {
  max-width: 816px;
  min-height: 1056px;
  margin: 0 auto var(--sp-6);
  background: var(--card);
  color: #111;
  border: 1px solid #d7dde4;
  border-radius: 4px;
  padding: 28px 34px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
}
.op-template-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px;
  padding-bottom: var(--sp-2);
}
.op-template-head img:first-child { width: 245px; height: auto; }
.op-template-head img:last-child { width: 245px; height: auto; }
.op-template-addressee { margin: 0 0 var(--sp-4); font-size: 11px; line-height: 1.5; }
.op-template-addressee strong { display: inline-block; font-size: 11.5px; }
.op-template-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) 10px;
  background: #f6fbf8;
  border: 1px solid #b8d7ca;
  border-radius: 6px;
  margin-bottom: var(--sp-3);
  font-size: 11px;
}
.op-template-folio-label strong, .op-template-date strong { color: var(--green); font-size: 12px; }
.op-template-meta, .op-template-provider, .op-template-payment {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-3); table-layout: fixed;
}
.op-template-meta td, .op-template-provider td, .op-template-payment td {
  border: 1px solid #111; padding: 6px 8px; vertical-align: middle; font-size: 11px;
}
.op-template-meta td { width: 33.33%; min-height: 28px; }
.op-template-meta .op-template-detalle { min-height: 60px; vertical-align: top; line-height: 1.5; }
.op-template-meta .op-template-detalle strong { display: block; margin-bottom: 4px; }
.op-template-section-title {
  margin: var(--sp-4) 0 6px;
  border: 1px solid #111;
  border-bottom: 0;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 800;
  background: #f6fbf8;
  color: var(--green);
}
.op-template-provider td:first-child { width: 50%; }
.op-template-payment td { width: 50%; min-height: 28px; }
.op-template-totals { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0 var(--sp-3); }
.op-template-totals th, .op-template-totals td { border: 1px solid #111; padding: 7px 10px; font-size: 11.5px; text-align: left; }
.op-template-totals th { width: 60%; font-weight: 800; background: #f8fafb; }
.op-template-totals td { text-align: right; }
.op-template-grand-total th { background: var(--green) !important; color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }
.op-template-grand-total td { background: #f6fbf8; color: var(--green); font-weight: 800; font-size: 14px; }
.op-template-observations {
  margin: var(--sp-3) 0 0; padding: var(--sp-2) 10px; border: 1px solid #ccc; border-radius: 4px;
  font-size: 10.5px; line-height: 1.5; background: var(--bg-soft); min-height: 36px;
}
.op-template-signature-block { width: 280px; margin: 48px auto 18px; text-align: center; }
.op-template-signature-label { margin: 0 0 30px; font-size: 11px; font-weight: 700; }
.op-template-signature-line { border-top: 1.5px solid #111; margin-bottom: 6px; }
.op-template-signature-name { display: block; font-size: 11.5px; font-weight: 800; }
.op-template-signature-role { display: block; font-size: 10.5px; color: #555; margin-top: 2px; }
.op-template-ccpp { margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid #ddd; font-size: 10.5px; line-height: 1.7; color: #444; }
.op-template-ccpp p { margin: 0 0 3px; }
.op-template-foot-note { margin-top: var(--sp-4); text-align: center; font-size: 9.5px; color: #888; }

/* ═══════════════════════════════════════════════════════════════
   27. USERS & ROLES
   ═══════════════════════════════════════════════════════════════ */
.role-list { display: grid; gap: var(--sp-2); }
.role-row {
  border: 1px solid var(--line-light);
  background: var(--bg-soft);
  border-radius: var(--r-md);
  padding: 9px 10px;
}
.role-row strong { display: block; font-size: 12px; color: var(--green); }
.role-row span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.user-table { margin-top: var(--sp-4); }
.user-form .btn { margin-top: var(--sp-1); }

/* ═══════════════════════════════════════════════════════════════
   28. ACTIVITY LOG
   ═══════════════════════════════════════════════════════════════ */
.activity-list { display: grid; gap: var(--sp-2); }
.activity {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  background: var(--bg-soft);
}
.activity-top { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: 4px; }
.activity strong { font-size: 13px; }
.activity p { margin: 0; color: var(--ink-light); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════
   29. FILE VIEWER
   ═══════════════════════════════════════════════════════════════ */
.history-modal { width: min(760px, calc(100vw - 28px)); }
.viewer-modal {
  width: min(1120px, calc(100vw - 24px));
  height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.viewer-modal .modal-body { padding: 0; }
.viewer-modal .viewer-fallback { padding: var(--sp-6); text-align: center; color: var(--muted); }
.viewer-modal .modal-actions { justify-content: space-between; }
.viewer-body { position: relative; flex: 1; min-height: 0; padding: 0; }
.file-viewer-frame { display: block; width: 100%; height: 100%; min-height: calc(100vh - 132px); border: 0; background: var(--card); }
.viewer-fallback { display: none; }

/* ═══════════════════════════════════════════════════════════════
   30. LOOP CODEX — Visual categories
   ═══════════════════════════════════════════════════════════════ */
.sicop-fuente { color: var(--muted); font-size: 11px; margin-top: var(--sp-1); }
.sicop-fuente small { color: var(--muted); }
.sicop-requisito {
  background: var(--gold-light);
  border-left: 3px solid #e7ca87;
  padding: 6px 10px;
  margin: 4px 0;
  font-size: 12px;
}
.sicop-requisito small { font-size: 11px; }
.sicop-alerta { color: #9a3412; font-size: 12px; margin-bottom: var(--sp-1); }
.sicop-accion {
  background: #e6f9ee;
  border-left: 3px solid #1a7a2e;
  padding: 6px 10px;
  margin: 4px 0;
  font-size: 12px;
}
.sicop-accion strong { color: #1a7a2e; }

/* ═══════════════════════════════════════════════════════════════
   31. LOGIN
   ═══════════════════════════════════════════════════════════════ */
.login {
  max-width: 420px;
  margin: var(--sp-8) auto;
}
.login h1 { margin-top: 0; }

/* Enhanced login card */
.login-card {
  max-width: 440px;
  margin: var(--sp-6) auto var(--sp-8);
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.login-branding {
  text-align: center;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: linear-gradient(135deg, #0a4d3b 0%, #0d684e 100%);
  color: #fff;
}
.login-branding img {
  display: block;
  margin: 0 auto var(--sp-4);
  width: min(223px, 100%);
  height: auto;
  max-height: 54px;
  object-fit: contain;
}
.login-branding h1 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 var(--sp-1);
  color: #fff;
  letter-spacing: .03em;
}
.login-branding p {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  margin: 0;
}
.login-version {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: 10px;
  background: rgba(255,255,255,.15);
  padding: 2px 8px;
  border-radius: var(--r-full);
  color: rgba(255,255,255,.6);
}
.login-form-wrapper {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}
.login-btn {
  width: 100%;
  padding: var(--sp-3);
  font-size: 14px;
  margin-top: var(--sp-2);
  border-radius: var(--r-md);
}
.login-hint {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: var(--sp-4);
}

/* ═══════════════════════════════════════════════════════════════
   32. LOGIN (ver sección 31) — PAGINATION en sección 33
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   33. PAGINATION & FOOTER
   ═══════════════════════════════════════════════════════════════ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line-light);
}
.pag-info {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
.pag-controls {
  display: flex;
  align-items: center;
  gap: 3px;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 var(--sp-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--fast);
  line-height: 1;
}
.page-btn:hover:not(.disabled):not(.active) {
  background: var(--green-light);
  border-color: var(--green);
  color: var(--green);
}
.page-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.page-btn.disabled {
  opacity: .35;
  cursor: not-allowed;
}
.page-dots {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
}
.pag-per {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.pag-per label {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
.pag-per select {
  padding: 4px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}

/* Institutional footer */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.55);
  font-size: 11.5px;
  margin-top: var(--sp-8);
}
.site-footer-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.site-footer-right { font-size: 11px; color: rgba(255,255,255,.35); }

/* No print utility */
.no-print { }

/* ═══════════════════════════════════════════════════════════════
   33a. MODALES (overlay) + FORM GRIDS
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,20,40,.55);
  z-index: 100;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-3);
}
.modal-box {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  max-width: 640px;
  width: 100%;
  margin: auto;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-light);
}
.modal-head h2 { margin: 0; font-size: 15px; color: var(--ink); }
.modal-close {
  background: none;
  border: 0;
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  transition: all var(--fast);
}
.modal-close:hover { background: var(--red-light); color: var(--red); }

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.form-field { display: flex; flex-direction: column; }
.form-field label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-light);
  margin-bottom: 3px;
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13px;
  font-family: inherit;
  background: var(--card);
  color: var(--ink);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-light);
}

/* Sugerencias de proveedor (autocompletar) */
.prov-sugerencias {
  display: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--sp-2);
  max-height: 260px;
  overflow-y: auto;
  z-index: 50;
}
.prov-item {
  padding: var(--sp-2) var(--sp-3);
  font-size: 12.5px;
  border-bottom: 1px solid var(--line-light);
  transition: background var(--fast);
}
.prov-item:last-child { border-bottom: 0; }
.prov-item:hover { background: var(--green-light); }
.prov-item-action { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.prov-item-action > div { min-width: 0; }
.prov-item-action strong, .prov-item-action span { display: block; }
.prov-item-action span { margin-top: 2px; color: var(--ink-muted); font-size: 11.5px; }
.btn-provider-use { flex: 0 0 auto; padding: 6px 11px; font-size: 12px; }
.provider-picker { padding: var(--sp-3); margin-bottom: var(--sp-3); border: 1px solid var(--green-line); border-radius: var(--r-md); background: var(--green-light); }
.provider-picker > label { display: block; margin-bottom: 6px; }
.provider-picker > small { display: block; margin-top: 6px; }
.provider-picker .prov-sugerencias { margin: var(--sp-2) 0 0; }
@media(max-width:560px) { .prov-item-action { align-items: flex-start; } .btn-provider-use { padding: 5px 9px; } }
.prov-no-encontrado {
  padding: var(--sp-2) var(--sp-3);
  font-size: 12.5px;
  color: var(--gold);
  background: var(--gold-light);
  border-radius: var(--r-sm);
}
.prov-no-encontrado a { font-weight: 700; color: var(--green); }
.auth-form div:has(> label + select[name="ambito_autorizacion_legacy"]), .auth-form div:has(> label + input[name="partida_especifica_autorizacion_legacy"]){ display:none; }
.auth-partida { margin: var(--sp-3) 0; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-soft); }
.auth-partida summary { cursor:pointer; color:var(--ink); }

/* ═══════════════════════════════════════════════════════════════
   33. RESPONSIVE — Desktop large (≤1100px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:1100px) {
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .req-item { grid-template-columns: 1fr; }
  .req-actions { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   34. RESPONSIVE — Tablet (≤900px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:900px) {
  /* Layout */
  .grid, .filters, .detail, .detail.equal, .section-grid,
  .form-row, .quick-grid {
    grid-template-columns: 1fr;
  }

  /* Sidebar → off-canvas en móvil */
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar.collapsed { width: var(--sidebar-w) !important; }
  .sidebar.mobile-open ~ .sidebar-overlay { display: block; }
  .main-area { margin-left: 0 !important; }
  .hamburger { display: block; }

  .institutional-strip { align-items: flex-start; flex-direction: column; }
  .inst-system { text-align: left; }
  .inst-logos { flex-wrap: wrap; }
  .top { padding: 9px var(--sp-4); }
  .wrap { padding: var(--sp-4); }
  .hero { display: block; }
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .actions, .hero > div:last-child { margin-top: var(--sp-3); }
  .kv, .kv.wide { grid-template-columns: 1fr; }
  .sticky-tabs { position: static; }

  /* Nav */
  .nav-user { border-left: 0; padding-left: 0; }
  .topbar-user .nav-user, .topbar-profile-copy { display: none; }

  /* Tables → cards on mobile */
  .user-table table, .user-table thead, .user-table tbody,
  .user-table th, .user-table td, .user-table tr { display: block; }
  .user-table thead { display: none; }
  .user-table td { border-bottom: 0; padding: var(--sp-2) 11px; }
  .user-table tr { border-bottom: 1px solid var(--line-light); padding: var(--sp-2) 0; }
  .inline-user-form, .inline-password-form { min-width: 0; }

  /* Requisitions */
  .req-item { grid-template-columns: 1fr; }

  /* Modals */
  .drawer-panel { width: 100%; }
  .modal-panel { margin: 14px auto; max-height: calc(100vh - 28px); }
  .procedure-modal { width: min(100%, calc(100vw - 16px)); max-height: calc(100vh - 16px); }
  .procedure-form .form-row { grid-template-columns: 1fr; }
  .quote-form .form-row, .auth-form .form-row { grid-template-columns: 1fr; }
  .quote-modal, .auth-modal { width: min(100%, calc(100vw - 16px)); }

  /* Flow steps & context */
  .flow-steps, .quote-slots, .context-strip,
  .authorization-stage, .auth-path { grid-template-columns: 1fr; }
  .context-concept { white-space: normal; }

  /* Lots */
  .lot-head { display: block; }
  .lot-head .module-actions { justify-content: flex-start; margin-top: var(--sp-2); }
  .lot-strip { grid-template-columns: 1fr; }

  /* OC */
  .oc-lot-card { display: block; }
  .oc-lot-card .module-actions { justify-content: flex-start; margin-top: var(--sp-2); }
  .oc-item-row { grid-template-columns: 1fr; }
  .oc-total-box { justify-content: flex-start; }

  /* OP cards */
  .op-card-head { display: block; }
  .op-card-head .module-actions { justify-content: flex-start; margin-top: var(--sp-2); }

  /* OC/OP documents */
  .oc-document { max-width: 100%; min-height: 0; padding: 18px 14px; }
  .oc-template-head { display: block; }
  .oc-template-head img { display: block !important; width: min(260px, 100%) !important; margin: 0 auto var(--sp-2); }
  .oc-template-meta, .oc-template-provider, .oc-template-items, .oc-template-extras { font-size: 10.5px; }
  .oc-template-totals { width: 100%; }

  .op-document { max-width: 100%; min-height: 0; padding: 18px 14px; }
  .op-template-head { display: block; }
  .op-template-head img { display: block !important; width: min(260px, 100%) !important; margin: 0 auto var(--sp-2); }
  .op-template-title-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .op-template-meta td, .op-template-provider td, .op-template-payment td { font-size: 10.5px; }
  .op-template-totals th, .op-template-totals td { font-size: 10.5px; padding: 5px 7px; }
}

/* ═══════════════════════════════════════════════════════════════
   35. RESPONSIVE — Small tablet (≤700px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:700px) {
  .timeline, .summary-strip, .stat-cards, .check-grid {
    grid-template-columns: 1fr;
  }
  .procedure-modal { width: min(100%, calc(100vw - 20px)); }
}

/* ═══════════════════════════════════════════════════════════════
   36. RESPONSIVE — Mobile (≤480px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:480px) {
  :root { --sp-6: 16px; --sp-4: 12px; }
  body { font-size: 13px; }

  .institutional-strip { padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); }
  .inst-system { font-size: 10px; }
  .inst-system strong { font-size: 12px; }
  .top nav { gap: var(--sp-2); }
  .top nav a { font-size: 12px; }
  .wrap { padding: var(--sp-3) var(--sp-4); }

  .hero h1 { font-size: 22px; }
  .card { padding: var(--sp-3); border-radius: var(--r-lg); }
  .btn { padding: var(--sp-2); font-size: 12px; }
  .stat strong { font-size: 16px; }
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-stat-num { font-size: 22px; }
  .dash-stat { padding: var(--sp-2) var(--sp-3); }

  .req-item { padding: var(--sp-3); border-radius: var(--r-lg); }
  .req-actions { min-width: 0; }

  .filters { grid-template-columns: 1fr; }

  /* Summary strip to 2 cols on very small screens */
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Footer */
  .site-footer-inner { flex-direction: column; text-align: center; gap: var(--sp-1); }

  /* Make tables horizontally scrollable */
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 500px; }

  .modal-panel { margin: 8px auto; border-radius: var(--r-lg); }
}

/* ═══════════════════════════════════════════════════════════════
   37. RESPONSIVE — Very small mobile (≤360px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:360px) {
  .hero h1 { font-size: 20px; }
  .top .brand .mark { width: 26px; height: 26px; font-size: 14px; }
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   38. PRINT STYLES
   ═══════════════════════════════════════════════════════════════ */
@media print {
  @page { size: letter; margin: .45in; }

  /* Hide non-printable elements */
  .institutional-header,
  .sidebar,
  .sidebar-overlay,
  .site-footer,
  .no-print,
  .toast { display: none !important; }

  body { background: #fff; }
  .app-shell { display: block; }
  .main-area { margin-left: 0 !important; }
  .wrap { max-width: none; padding: 0; }

  /* OC Document */
  .oc-document {
    border: 0; border-radius: 0; margin: 0;
    max-width: none; padding: 0; box-shadow: none;
  }
  .oc-doc-head, .oc-doc-section, .oc-doc-bottom, .oc-doc-signatures { break-inside: avoid; }
  .oc-doc-table th, .oc-doc-table td { border-color: #999; }
  .oc-doc-grid > div { background: #fff; }

  /* OC Template */
  .oc-template-head,
  .oc-template-meta, .oc-template-provider,
  .oc-template-items, .oc-template-extras,
  .oc-template-totals, .oc-template-signature,
  .oc-template-factura-info { break-inside: avoid; }
  .oc-document { width: auto; min-height: 0; border: 0; border-radius: 0; margin: 0; box-shadow: none; padding: 0; font-size: 10.5px; }
  .oc-template-head img:first-child, .oc-template-head img:last-child { width: 230px; }
  .oc-template-items th, .oc-template-items td { padding: 4px 5px; }

  /* OP Document */
  .op-document {
    width: auto; min-height: 0; border: 0; border-radius: 0;
    margin: 0; box-shadow: none; padding: 0; font-size: 10.5px;
  }
  .op-template-head, .op-template-meta, .op-template-provider,
  .op-template-payment, .op-template-totals,
  .op-template-signature-block, .op-template-ccpp { break-inside: avoid; }
  .op-template-head img:first-child, .op-template-head img:last-child { width: 230px; }
  .op-template-totals th, .op-template-totals td { padding: 5px 7px; }
  .op-template-section-title {
    background: #fff !important; color: #111 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .op-template-grand-total th {
    background: #0b563f !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* LOOP CODEX */
  .sicop-fuente, .sicop-requisito, .sicop-alerta, .sicop-accion,
  .oc-template-factura-info { break-inside: avoid; }
}

/* Bodega: paneles de captura guiada, centrados y con jerarquía institucional. */
.modal#modal-articulo,.modal#modal-entrada,.modal#modal-salida-directa,.modal#modal-arqueo,.modal[id^="modal-preparar-"],.modal[id^="modal-bodega-solicitud-"]{display:none;place-items:center;padding:20px;overflow:auto;background:rgba(7,28,37,.60);backdrop-filter:blur(5px)}
.modal#modal-articulo.open,.modal#modal-entrada.open,.modal#modal-salida-directa.open,.modal#modal-arqueo.open,.modal[id^="modal-preparar-"].open,.modal[id^="modal-bodega-solicitud-"].open{display:grid}
.modal#modal-articulo .modal-panel,.modal#modal-entrada .modal-panel,.modal#modal-salida-directa .modal-panel,.modal#modal-arqueo .modal-panel,.modal[id^="modal-preparar-"] .modal-panel,.modal[id^="modal-bodega-solicitud-"] .modal-panel{width:min(930px,calc(100vw - 40px));max-height:calc(100dvh - 40px);margin:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid #c6ded5;border-radius:22px;background:#f7faf8;box-shadow:0 28px 80px rgba(2,30,40,.34)}
.modal#modal-articulo .modal-header,.modal#modal-entrada .modal-header,.modal#modal-salida-directa .modal-header,.modal#modal-arqueo .modal-header,.modal[id^="modal-preparar-"] .modal-header,.modal[id^="modal-bodega-solicitud-"] .modal-header{position:relative;align-items:center;padding:22px 26px 18px;border:0;border-bottom:1px solid #d8e7e1;background:linear-gradient(125deg,#e7f4ee 0%,#f8fcfa 62%,#fff 100%)}
.modal#modal-articulo .modal-header:before,.modal#modal-entrada .modal-header:before,.modal#modal-salida-directa .modal-header:before,.modal#modal-arqueo .modal-header:before,.modal[id^="modal-preparar-"] .modal-header:before,.modal[id^="modal-bodega-solicitud-"] .modal-header:before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(#0b8066,#b8892f)}
.modal#modal-articulo .modal-header>div,.modal#modal-entrada .modal-header>div,.modal#modal-salida-directa .modal-header>div,.modal#modal-arqueo .modal-header>div,.modal[id^="modal-preparar-"] .modal-header>div,.modal[id^="modal-bodega-solicitud-"] .modal-header>div{padding-left:8px}.modal#modal-articulo .modal-header h3,.modal#modal-entrada .modal-header h3,.modal#modal-salida-directa .modal-header h3,.modal#modal-arqueo .modal-header h3,.modal[id^="modal-preparar-"] .modal-header h3,.modal[id^="modal-bodega-solicitud-"] .modal-header h3{margin:3px 0 0;color:#073d35;font-size:21px;letter-spacing:-.025em}.modal#modal-articulo .modal-header p,.modal#modal-entrada .modal-header p,.modal#modal-salida-directa .modal-header p,.modal#modal-arqueo .modal-header p,.modal[id^="modal-preparar-"] .modal-header p,.modal[id^="modal-bodega-solicitud-"] .modal-header p{max-width:690px;margin-top:5px;font-size:13px;line-height:1.45}
.modal#modal-entrada .modal-header:after,.modal#modal-salida-directa .modal-header:after,.modal#modal-arqueo .modal-header:after,.modal[id^="modal-preparar-"] .modal-header:after,.modal[id^="modal-bodega-solicitud-"] .modal-header:after{display:block;margin:12px 0 0 8px;color:#54736b;font-size:10px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.modal#modal-entrada .modal-header:after{content:"1 · Origen y referencia  —  2 · Materiales  —  3 · Confirmar entrada"}.modal#modal-salida-directa .modal-header:after{content:"1 · Entrega  —  2 · Materiales  —  3 · Enviar a autorización"}.modal[id^="modal-preparar-"] .modal-header:after{content:"1 · Receptor  —  2 · Material surtido  —  3 · Dejar lista para entrega"}.modal#modal-arqueo .modal-header:after{content:"1 · Datos del conteo  —  2 · Existencia física  —  3 · Registrar arqueo"}.modal[id^="modal-bodega-solicitud-"] .modal-header:after{content:"1 · Datos de entrega  —  2 · Enviar a Bodega  —  3 · Preparar y emitir orden"}
.modal#modal-articulo .icon-btn,.modal#modal-entrada .icon-btn,.modal#modal-salida-directa .icon-btn,.modal#modal-arqueo .icon-btn,.modal[id^="modal-preparar-"] .icon-btn,.modal[id^="modal-bodega-solicitud-"] .icon-btn{width:36px;height:36px;border:1px solid #c7ded6;border-radius:11px;background:#fff;color:#0b6858;font-size:22px;line-height:1;transition:.16s}.modal#modal-articulo .icon-btn:hover,.modal#modal-entrada .icon-btn:hover,.modal#modal-salida-directa .icon-btn:hover,.modal#modal-arqueo .icon-btn:hover,.modal[id^="modal-preparar-"] .icon-btn:hover,.modal[id^="modal-bodega-solicitud-"] .icon-btn:hover{border-color:#0a7a63;background:#e7f5ef;transform:rotate(90deg)}
.modal#modal-articulo form,.modal#modal-entrada form,.modal#modal-salida-directa form,.modal#modal-arqueo form,.modal[id^="modal-preparar-"] form,.modal[id^="modal-bodega-solicitud-"] form{display:flex;min-height:0;flex:1;flex-direction:column}.modal#modal-articulo .modal-body,.modal#modal-entrada .modal-body,.modal#modal-salida-directa .modal-body,.modal#modal-arqueo .modal-body,.modal[id^="modal-preparar-"] .modal-body,.modal[id^="modal-bodega-solicitud-"] .modal-body{display:grid;flex:1;gap:14px;overflow:auto;padding:22px 26px;background:linear-gradient(180deg,#fbfdfc 0%,#f5f9f7 100%)}
.modal#modal-articulo .modal-body>label,.modal#modal-entrada .modal-body>label,.modal#modal-salida-directa .modal-body>label,.modal#modal-arqueo .modal-body>label,.modal[id^="modal-preparar-"] .modal-body>label,.modal[id^="modal-bodega-solicitud-"] .modal-body>label,.modal#modal-articulo .modal-body .form-row>div>label,.modal#modal-entrada .modal-body .form-row>div>label,.modal#modal-salida-directa .modal-body .form-row>div>label,.modal#modal-arqueo .modal-body .form-row>div>label,.modal[id^="modal-preparar-"] .modal-body .form-row>div>label,.modal[id^="modal-bodega-solicitud-"] .modal-body .form-row>div>label{display:grid;gap:6px;padding:11px 12px;border:1px solid #d8e5df;border-radius:12px;background:#fff;color:#294b44;font-size:11px;font-weight:800;letter-spacing:.015em;box-shadow:0 2px 5px rgba(13,62,48,.025)}
.modal#modal-articulo input,.modal#modal-articulo select,.modal#modal-articulo textarea,.modal#modal-entrada input,.modal#modal-entrada select,.modal#modal-entrada textarea,.modal#modal-salida-directa input,.modal#modal-salida-directa select,.modal#modal-salida-directa textarea,.modal#modal-arqueo input,.modal#modal-arqueo select,.modal#modal-arqueo textarea,.modal[id^="modal-preparar-"] input,.modal[id^="modal-preparar-"] select,.modal[id^="modal-preparar-"] textarea,.modal[id^="modal-bodega-solicitud-"] input,.modal[id^="modal-bodega-solicitud-"] select,.modal[id^="modal-bodega-solicitud-"] textarea{min-height:42px;border:1px solid #bcd5cc;border-radius:8px;background:#fff;color:#173c35;font-size:13px;box-shadow:none}.modal#modal-articulo textarea,.modal#modal-entrada textarea,.modal#modal-salida-directa textarea,.modal#modal-arqueo textarea,.modal[id^="modal-preparar-"] textarea,.modal[id^="modal-bodega-solicitud-"] textarea{min-height:68px;resize:vertical}
.modal#modal-entrada .quick-grid,.modal[id^="modal-preparar-"] .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}.modal#modal-entrada .quick-field,.modal[id^="modal-preparar-"] .quick-field{min-height:70px;padding:12px;border:1px solid #b9d9cc;border-radius:12px;background:linear-gradient(145deg,#edf8f2,#fff)}.modal#modal-entrada .quick-field strong,.modal[id^="modal-preparar-"] .quick-field strong{display:block;color:#08725d;font-size:10px;letter-spacing:.06em;text-transform:uppercase}.modal#modal-entrada .quick-field span,.modal[id^="modal-preparar-"] .quick-field span{display:block;margin-top:6px;color:#163f36;font-size:13px;font-weight:800}
.modal#modal-entrada .institutional-note,.modal#modal-salida-directa .institutional-note,.modal[id^="modal-preparar-"] .institutional-note,.modal[id^="modal-bodega-solicitud-"] .institutional-note{margin:0;padding:13px 14px;border:1px solid #c5ded4;border-left:4px solid #b8892f;border-radius:11px;background:#fffdf6;color:#5e5944;font-size:12px;line-height:1.5}.modal#modal-entrada .bod-item-row,.modal#modal-salida-directa .bod-item-row,.modal#modal-arqueo .bod-item-row,.modal[id^="modal-preparar-"] .bod-item-row{position:relative;padding:12px;border:1px solid #b8dbce;border-radius:14px;background:#edf8f2;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}.modal#modal-entrada .bod-item-row:before,.modal#modal-salida-directa .bod-item-row:before,.modal#modal-arqueo .bod-item-row:before,.modal[id^="modal-preparar-"] .bod-item-row:before{content:"Material a registrar";position:absolute;top:-8px;left:12px;padding:0 6px;background:#edf8f2;color:#08725d;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.modal#modal-entrada .js-bod-add-target,.modal#modal-salida-directa .js-bod-add-target,.modal#modal-arqueo .js-bod-add-target,.modal[id^="modal-preparar-"] .js-bod-add-target{display:grid;gap:10px}.modal#modal-entrada .js-bod-add-row,.modal#modal-salida-directa .js-bod-add-row,.modal#modal-arqueo .js-bod-add-row,.modal[id^="modal-preparar-"] .js-bod-add-row{justify-self:start;min-height:36px;border-color:#8ebbaa;background:#fff;color:#08725d}
.modal#modal-articulo .modal-actions,.modal#modal-entrada .modal-actions,.modal#modal-salida-directa .modal-actions,.modal#modal-arqueo .modal-actions,.modal[id^="modal-preparar-"] .modal-actions,.modal[id^="modal-bodega-solicitud-"] .modal-actions{position:sticky;bottom:0;z-index:2;align-items:center;justify-content:space-between;padding:15px 26px;border-top:1px solid #d3e3dc;border-radius:0;background:#fff;box-shadow:0 -8px 18px rgba(22,65,52,.06)}.modal#modal-articulo .modal-actions:before,.modal#modal-entrada .modal-actions:before,.modal#modal-salida-directa .modal-actions:before,.modal#modal-arqueo .modal-actions:before,.modal[id^="modal-preparar-"] .modal-actions:before,.modal[id^="modal-bodega-solicitud-"] .modal-actions:before{content:"Revisa los datos antes de confirmar; el movimiento quedará trazable.";color:#59726b;font-size:11px;line-height:1.35}.modal#modal-articulo .modal-actions .btn,.modal#modal-entrada .modal-actions .btn,.modal#modal-salida-directa .modal-actions .btn,.modal#modal-arqueo .modal-actions .btn,.modal[id^="modal-preparar-"] .modal-actions .btn,.modal[id^="modal-bodega-solicitud-"] .modal-actions .btn{min-height:42px;padding-inline:17px}
.modal#modal-articulo .modal-panel,.modal[id^="modal-bodega-solicitud-"] .modal-panel{width:min(760px,calc(100vw - 40px))}
.bod-picker{display:grid;gap:7px}.bod-picker .js-bod-picker-search{width:100%}.js-bod-picker-results{display:grid;gap:5px;max-height:190px;overflow:auto}.bod-picker-result{display:grid;gap:3px;padding:9px 10px;border:1px solid #c8ded4;border-radius:9px;background:#f9fdfb;color:#16483d;text-align:left;cursor:pointer}.bod-picker-result:hover,.bod-picker.is-selected .js-bod-picker-search{border-color:#0b8066;background:#edf8f2}.bod-picker-result strong{font-size:12px}.bod-picker-result small,.js-bod-picker-selection,.bod-picker-empty{margin:0;color:#58736b;font-size:11px;line-height:1.35}.bod-picker-empty{padding:8px;border:1px dashed #c8ded4;border-radius:8px;background:#fff}
.bod-existencias-search{display:block;max-width:430px;margin:2px 0 14px}.bod-existencias-search input{margin-top:6px}
.exp-conta-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;padding:16px 18px;border:1px solid #bad9cf;border-left:5px solid #0b8066;border-radius:14px;background:linear-gradient(110deg,#edf8f4,#fff)}.exp-conta-strip strong,.exp-conta-strip p{display:block;margin:4px 0 0}.exp-conta-strip p{color:#526b64;font-size:13px}@media(max-width:680px){.exp-conta-strip{align-items:stretch;flex-direction:column}.exp-conta-strip .btn{width:100%}}
@media(max-width:680px){.modal#modal-articulo,.modal#modal-entrada,.modal#modal-salida-directa,.modal#modal-arqueo,.modal[id^="modal-preparar-"],.modal[id^="modal-bodega-solicitud-"]{padding:10px}.modal#modal-articulo .modal-panel,.modal#modal-entrada .modal-panel,.modal#modal-salida-directa .modal-panel,.modal#modal-arqueo .modal-panel,.modal[id^="modal-preparar-"] .modal-panel,.modal[id^="modal-bodega-solicitud-"] .modal-panel{width:100%;max-height:calc(100dvh - 20px);border-radius:16px}.modal#modal-articulo .modal-header,.modal#modal-entrada .modal-header,.modal#modal-salida-directa .modal-header,.modal#modal-arqueo .modal-header,.modal[id^="modal-preparar-"] .modal-header,.modal[id^="modal-bodega-solicitud-"] .modal-header{padding:18px}.modal#modal-articulo .modal-body,.modal#modal-entrada .modal-body,.modal#modal-salida-directa .modal-body,.modal#modal-arqueo .modal-body,.modal[id^="modal-preparar-"] .modal-body,.modal[id^="modal-bodega-solicitud-"] .modal-body{padding:16px 18px}.modal#modal-entrada .quick-grid,.modal[id^="modal-preparar-"] .quick-grid,.modal#modal-articulo .form-row,.modal#modal-entrada .form-row,.modal#modal-salida-directa .form-row,.modal#modal-arqueo .form-row,.modal[id^="modal-preparar-"] .form-row,.modal[id^="modal-bodega-solicitud-"] .form-row{grid-template-columns:1fr}.modal#modal-articulo .modal-actions,.modal#modal-entrada .modal-actions,.modal#modal-salida-directa .modal-actions,.modal#modal-arqueo .modal-actions,.modal[id^="modal-preparar-"] .modal-actions,.modal[id^="modal-bodega-solicitud-"] .modal-actions{align-items:stretch;flex-direction:column;padding:13px 18px}.modal#modal-articulo .modal-actions .btn,.modal#modal-entrada .modal-actions .btn,.modal#modal-salida-directa .modal-actions .btn,.modal#modal-arqueo .modal-actions .btn,.modal[id^="modal-preparar-"] .modal-actions .btn,.modal[id^="modal-bodega-solicitud-"] .modal-actions .btn{width:100%}}

/* Despliegues compactos de datos generales */
.disclosure-card{overflow:hidden}.disclosure-card>summary{list-style:none}.disclosure-card>summary::-webkit-details-marker{display:none}.disclosure-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:92px;padding:18px 22px;cursor:pointer;background:linear-gradient(120deg,#f1faf6,#fff);transition:background .16s ease}.disclosure-summary:hover{background:#edf8f3}.disclosure-summary h2{margin:3px 0 0;font-size:18px}.disclosure-summary p{margin:4px 0 0;color:var(--muted);font-size:12px}.disclosure-summary-facts{display:flex;align-items:center;justify-content:flex-end;gap:10px}.disclosure-summary-facts>span{display:grid;min-width:92px;gap:3px;padding:9px 11px;border:1px solid #cfe2da;border-radius:11px;background:#fff}.disclosure-summary-facts small{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.disclosure-summary-facts strong{color:var(--ink);font-size:12px}.disclosure-summary i{width:10px;height:10px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg);transition:transform .18s ease}.disclosure-card[open] .disclosure-summary i{transform:rotate(225deg)}.disclosure-body{border-top:1px solid var(--line-light);padding-top:16px}.disclosure-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 var(--sp-4) var(--sp-3)}.disclosure-toolbar p{margin:0}

/* Modal institucional para elementos dialog nativos */
dialog.sicop-dialog{inset:50% auto auto 50%;width:min(680px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 40px);margin:0;padding:0;border:1px solid #c8ded6;border-radius:20px;background:#f8fbf9;color:var(--ink);font-family:var(--font-sans);font-size:14px;transform:translate(-50%,-50%);overflow:hidden;box-shadow:0 30px 90px rgba(4,32,38,.36)}dialog.sicop-dialog[open]{display:flex;flex-direction:column}dialog.sicop-dialog::backdrop{background:rgba(7,28,37,.60);backdrop-filter:blur(5px)}dialog.sicop-dialog>.modal-header{flex:0 0 auto;padding:20px 24px 17px;border-bottom:1px solid #d5e5df;background:linear-gradient(125deg,#e7f4ee,#fbfdfc 68%,#fff)}dialog.sicop-dialog>.modal-header h3{margin:3px 0 0;color:var(--ink);font-family:inherit;font-size:18px;font-weight:800;letter-spacing:-.015em}dialog.sicop-dialog>.modal-header p{max-width:540px;margin-top:5px;font-size:12.5px;line-height:1.45}dialog.sicop-dialog>.modal-header .icon-btn{width:36px;height:36px;border:1px solid #c7ded6;border-radius:11px;background:#fff;color:var(--green);font-family:inherit;font-size:22px}dialog.sicop-dialog>form{display:flex;min-height:0;flex:1;flex-direction:column;font-family:inherit}dialog.sicop-dialog .modal-body{display:grid;flex:1;gap:10px;max-height:none;padding:20px 24px;overflow:auto;background:linear-gradient(180deg,#fbfdfc,#f5f9f7)}dialog.sicop-dialog .form label{display:grid;gap:6px;margin:0;color:#294b44;font-size:11.5px;font-weight:800}dialog.sicop-dialog .form input,dialog.sicop-dialog .form select,dialog.sicop-dialog .form textarea{min-height:43px;margin:0;border-color:#bcd5cc;border-radius:9px;background:#fff;color:var(--ink);font-family:inherit;font-size:13.5px}dialog.sicop-dialog .form textarea{min-height:82px;resize:vertical}dialog.sicop-dialog .modal-actions{position:sticky;bottom:0;flex:0 0 auto;justify-content:flex-end;padding:14px 24px;border-top:1px solid #d3e3dc;background:#fff;box-shadow:0 -8px 18px rgba(22,65,52,.06)}dialog.sicop-dialog .modal-actions .btn{min-height:42px;font-family:inherit}
@media(max-width:760px){.disclosure-summary{align-items:stretch;flex-direction:column}.disclosure-summary-facts{justify-content:stretch}.disclosure-summary-facts>span{flex:1;min-width:0}.disclosure-toolbar{align-items:stretch;flex-direction:column}dialog.sicop-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:16px}dialog.sicop-dialog>.modal-header,dialog.sicop-dialog .modal-body{padding:16px 18px}dialog.sicop-dialog .modal-actions{align-items:stretch;flex-direction:column;padding:13px 18px}dialog.sicop-dialog .modal-actions .btn{width:100%}}
@media(max-width:520px){.disclosure-summary-facts{display:grid;grid-template-columns:1fr 1fr}.disclosure-summary-facts>span:first-child{grid-column:1/-1}}

/* Compras / Expediente v1: capa visual aislada. No modifica reglas globales. */
.compras-hero,.expediente-hero{border:1px solid var(--line-light);border-radius:var(--r-lg);background:linear-gradient(120deg,#fff 0%,#f7fbf8 100%);box-shadow:var(--shadow-sm);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.compras-hero h1,.expediente-hero h1{letter-spacing:-.035em}.compras-hero p,.expediente-hero p{max-width:850px;color:var(--muted);line-height:1.55}.compras-hero .actions,.expediente-hero .actions{gap:8px}
.module-action-callout{display:flex;align-items:center;gap:14px;margin:0 0 var(--sp-4);padding:14px 18px;border:1px solid transparent;border-radius:var(--r-lg);color:#fff;box-shadow:0 10px 24px rgba(9,59,52,.16)}.module-action-callout--compras{border-color:#057461;background:linear-gradient(112deg,#006c58,#009179)}.module-action-callout--contabilidad{border-color:#1d5f94;background:linear-gradient(112deg,#174f7e,#287fa7)}.module-action-callout-orb{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:#ffd76a;color:#16423a;font-size:23px;font-weight:900;box-shadow:inset 0 0 0 4px rgba(255,255,255,.22),0 5px 12px rgba(0,0,0,.18)}.module-action-callout-label{display:block;margin-bottom:3px;color:#dff9ef;font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.module-action-callout strong{display:block;font-size:15px;letter-spacing:-.01em}.module-action-callout p{margin:3px 0 0;color:rgba(255,255,255,.88);font-size:12px;line-height:1.4}
.compras-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2);margin:var(--sp-4) 0}.compras-stats .stat{border:1px solid var(--line-light);border-radius:var(--r-md);background:var(--card);padding:var(--sp-3);min-height:92px;box-shadow:0 2px 7px rgba(20,55,39,.035);transition:transform .18s ease,box-shadow .18s ease}.compras-stats .stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.compras-stats .stat strong{font-size:25px;color:var(--green);line-height:1}.compras-stats .stat span{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-top:8px;line-height:1.25}
.compras-stage-tabs{background:var(--card);border:1px solid var(--line-light);border-radius:var(--r-md);padding:6px;gap:4px;overflow:auto;box-shadow:var(--shadow-sm)}.compras-stage-tabs .tab{white-space:nowrap;border-radius:8px;padding:8px 11px;font-size:12px}.compras-stage-tabs .tab.active{background:var(--green);color:#fff;box-shadow:0 3px 8px rgba(11,86,63,.16)}
.compras-filters{display:grid;grid-template-columns:minmax(240px,2fr) minmax(180px,1fr) auto;gap:9px;align-items:center;background:var(--card);border:1px solid var(--line-light);border-radius:var(--r-md);padding:11px;margin:var(--sp-3) 0}.compras-filters input,.compras-filters select{min-height:40px}.compras-filters .btn{min-height:40px}
.compras-list-card{border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}.compras-list-card .table-head{padding:15px 18px;background:#f8fbf9;border-bottom:1px solid var(--line-light)}.compras-list-card .req-list{padding:0!important}.compras-list-card .req-item{border:0;border-top:1px solid var(--line-light);padding:16px 18px;transition:background .16s ease}.compras-list-card .req-item:hover{background:#fbfefc}.compras-list-card .req-item h3{color:var(--green);font-size:14px}.compras-list-card .req-status{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.compras-list-card .req-actions{display:flex;justify-content:flex-end}.compras-list-card .req-actions .btn{min-width:92px}.compras-list-card .document-chip{display:inline-flex;margin-top:6px}
.expediente-hero{display:block;padding:0;overflow:hidden}.expediente-hero>.hero{margin:0;padding:var(--sp-5);border:0;box-shadow:none;background:transparent}.expediente-hero .actions{margin-top:10px}.expediente-flow{margin:var(--sp-3) 0}.expediente-flow .flow-step{min-height:84px}.expediente-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}.expediente-workspace>.module-card{border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}.expediente-workspace>.module-context{border-color:#c9dfd1;background:#fbfefc}.expediente-workspace>.module-context .module-head{background:#f2faf5}.expediente-workspace .module-head{padding:var(--sp-3) var(--sp-4)}.expediente-workspace .module-head h2{letter-spacing:-.02em}.expediente-workspace .field-card,.expediente-workspace .auth-summary-card{transition:border-color .16s ease,box-shadow .16s ease}.expediente-workspace .field-card:hover,.expediente-workspace .auth-summary-card:hover{border-color:#b8d7ca;box-shadow:var(--shadow-sm)}.expediente-workspace .module-card[hidden]{display:none}.expediente-workspace .lot-card{background:#f8fbf9}.expediente-workspace .comparison-table{border-radius:var(--r-md);overflow:auto}
.solicitud-capturada{scroll-margin-top:18px}.solicitud-generales{padding:0 var(--sp-4);margin-bottom:var(--sp-3)}.solicitud-textos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);padding:0 var(--sp-4) var(--sp-3)}.solicitud-textos article{border:1px solid var(--line-light);border-radius:var(--r-md);background:#fff;padding:var(--sp-3)}.solicitud-textos article strong{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}.solicitud-textos article p{margin:0;color:var(--ink-light);font-size:13px;line-height:1.55}.solicitud-textos .solicitud-texto-completo{grid-column:1/-1}.solicitud-renglones{border-top:1px solid var(--line-light);padding:var(--sp-3) var(--sp-4) var(--sp-4)}.subsection-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-2)}.subsection-head h3{font-size:15px;margin-top:2px}.solicitud-renglones td{vertical-align:top}.solicitud-renglones td:nth-child(1),.solicitud-renglones td:nth-child(2),.solicitud-renglones td:nth-child(3){white-space:nowrap}
.solicitud-documentos{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);border-top:1px solid var(--line-light);padding:var(--sp-3) var(--sp-4);background:#f8fbf9}.solicitud-documentos strong,.solicitud-documentos small{display:block}.solicitud-documentos strong{margin-top:3px;font-size:13px}.solicitud-documentos small{margin-top:3px;color:var(--muted);font-size:11px}.solicitud-documentos .inline-form{display:inline-flex}
 .expediente-decision-strip{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(2,minmax(120px,.65fr)) auto;gap:10px;align-items:center;margin:var(--sp-3) 0;padding:14px 16px;border:1px solid #e6ca82;border-radius:var(--r-lg);background:linear-gradient(110deg,#fff9e9,#fff);box-shadow:var(--shadow-sm)}.decision-strip-main strong{display:block;font-size:17px;color:#73500e}.decision-strip-main p{font-size:12px;color:#806d49;margin-top:3px}.decision-strip-fact{border-left:1px solid #eadfbf;padding-left:14px}.decision-strip-fact small{display:block;color:#887751;font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.05em}.decision-strip-fact strong{display:block;margin-top:4px}.decision-strip-action{display:flex;justify-content:flex-end}.decision-strip-action .btn{white-space:nowrap}.expediente-hero + .expediente-decision-strip{margin-top:0}
@media(max-width:900px){.compras-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.compras-filters{grid-template-columns:1fr 1fr}.compras-filters input{grid-column:1/-1}.compras-filters .btn{width:100%}.compras-list-card .req-item{grid-template-columns:1fr 1fr}.compras-list-card .req-item>div:nth-child(3){grid-column:1/-1}.compras-list-card .req-actions{justify-content:flex-start}.expediente-hero>.hero{display:block}.expediente-hero .actions{justify-content:flex-start}.expediente-decision-strip{grid-template-columns:1fr 1fr}.decision-strip-main{grid-column:1/-1}.decision-strip-action{justify-content:flex-start}}
@media(max-width:700px){.module-action-callout{align-items:flex-start;padding:13px 14px}.module-action-callout-orb{flex-basis:38px;width:38px;height:38px;font-size:20px}.module-action-callout strong{font-size:14px}.solicitud-textos{grid-template-columns:1fr}.solicitud-textos .solicitud-texto-completo{grid-column:auto}.solicitud-generales{grid-template-columns:1fr}.subsection-head,.solicitud-documentos{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.compras-stats{grid-template-columns:1fr 1fr}.compras-filters{grid-template-columns:1fr}.compras-filters input{grid-column:auto}.compras-list-card .req-item{grid-template-columns:1fr}.compras-list-card .req-item>div:nth-child(3){grid-column:auto}.compras-list-card .req-actions .btn{width:100%}.expediente-flow{grid-template-columns:1fr 1fr}.expediente-hero>.hero{padding:var(--sp-3)}.expediente-hero .actions>*{flex:1;text-align:center}.expediente-decision-strip{grid-template-columns:1fr}.decision-strip-main{grid-column:auto}.decision-strip-fact{border-left:0;border-top:1px solid #eadfbf;padding:8px 0 0}.decision-strip-action{justify-content:stretch}.decision-strip-action>*{width:100%;text-align:center}}
.req-partida-search-hint{display:flex;align-items:center;gap:8px;margin-bottom:10px}.req-partida-search-hint small{color:var(--muted);font-size:11px}.pp-search-results{display:grid;gap:8px;max-height:52vh;overflow:auto;margin-top:12px}.pp-result{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line-light);border-radius:var(--r-md);background:#fbfefc}.pp-result>div{min-width:0}.pp-result strong,.pp-result span,.pp-result small{display:block}.pp-result strong{color:var(--green);font-size:13px}.pp-result span{font-weight:700;margin-top:2px}.pp-result small{color:var(--muted);margin-top:3px}.pp-result .btn{flex:0 0 auto}

/* Campos de contraseña: mostrar u ocultar sin alterar el valor. */
.password-field{position:relative;display:block}.password-field>input{width:100%;padding-right:48px}.password-toggle{position:absolute;top:50%;right:8px;display:grid;place-items:center;width:34px;height:34px;transform:translateY(-50%);border:0;border-radius:8px;background:transparent;color:#527168;font-size:17px;cursor:pointer}.password-toggle:hover,.password-toggle:focus-visible,.password-toggle.is-visible{background:#e7f4ee;color:#075648;outline:none}.password-toggle:focus-visible{box-shadow:0 0 0 3px rgba(10,115,95,.18)}