/*
 * VegGO · Gestor de contenidos — tema Bootstrap 5.3 (fase BS5, prototipo)
 *
 * Paleta tomada de los CSS existentes del gestor (estilos2.css + <style> de las páginas):
 *   verde Syngenta  #5E7800  (rgba(94,120,0) en modal-header; botones .button1; overlays)
 *   lima            #ABB400  (hover de tablas, bordes de paginación)
 *   azul            #007299 / #4AA8D2  (.btn-fcc y su hover)
 *   neutros         #2E2E2E #565656 #676767 #A2A4A4 #ABABAB #EFEAEA
 *   estados         #F85C5C (rojo) #FDA033 (naranja) #5CB85C (verde) #0275D8 (azul)
 *
 * Orden de carga: bootstrap 5 -> bootstrap-icons -> este fichero -> veggo-bs5-compat.css
 */

@font-face { font-family: "Noto Sans Display"; src: url(../fonts/NotoSansDisplay-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans Display"; src: url(../fonts/NotoSansDisplay-Bold.ttf); font-weight: 700; font-display: swap; }
/* Alias que usan los <style> heredados de las páginas */
@font-face { font-family: notosansregular; src: url(../fonts/NotoSansDisplay-Regular.ttf); }
@font-face { font-family: notosansbold; src: url(../fonts/NotoSansDisplay-Bold.ttf); }

:root {
  --vg-green: #5E7800;
  --vg-green-rgb: 94, 120, 0;
  --vg-green-dark: #4A5F00;
  --vg-green-darker: #3B4C00;
  --vg-lime: #ABB400;
  --vg-lime-rgb: 171, 180, 0;
  --vg-blue: #007299;
  --vg-blue-light: #4AA8D2;
  --vg-ink: #2E2E2E;
  --vg-gray-700: #565656;
  --vg-gray-600: #676767;
  --vg-gray-400: #A2A4A4;
  --vg-gray-300: #ABABAB;
  --vg-line: #EFEAEA;
  --vg-bg: #F6F5F1;
  --vg-red: #F85C5C;
  --vg-orange: #FDA033;
  --vg-ok: #5CB85C;

  --vg-sidebar-w: 248px;
  --vg-topbar-h: 60px;
  --vg-radius: .75rem;

  /* Bootstrap */
  --bs-primary: var(--vg-green);
  --bs-primary-rgb: var(--vg-green-rgb);
  --bs-primary-text-emphasis: var(--vg-green-darker);
  --bs-primary-bg-subtle: #EEF2DE;
  --bs-primary-border-subtle: #CFD9A8;
  --bs-success: var(--vg-ok);
  --bs-danger: var(--vg-red);
  --bs-danger-rgb: 248, 92, 92;
  --bs-warning: var(--vg-orange);
  --bs-info: var(--vg-blue);
  --bs-info-rgb: 0, 114, 153;
  --bs-body-font-family: "Noto Sans Display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-color: var(--vg-ink);
  --bs-body-bg: var(--vg-bg);
  --bs-border-color: #E4E1DA;
  --bs-secondary-color: var(--vg-gray-600);
  --bs-link-color: var(--vg-green);
  --bs-link-color-rgb: var(--vg-green-rgb);
  --bs-link-hover-color: var(--vg-green-darker);
  --bs-link-hover-color-rgb: 59, 76, 0;
  --bs-focus-ring-color: rgba(var(--vg-lime-rgb), .35);
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: var(--vg-radius);
}

/* ---------- Componentes Bootstrap con la paleta ---------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-font-size: .875rem; --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .9rem; --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--vg-lime-rgb), .35); }
.btn-primary {
  --bs-btn-bg: var(--vg-green); --bs-btn-border-color: var(--vg-green);
  --bs-btn-hover-bg: var(--vg-green-dark); --bs-btn-hover-border-color: var(--vg-green-dark);
  --bs-btn-active-bg: var(--vg-green-darker); --bs-btn-active-border-color: var(--vg-green-darker);
  --bs-btn-disabled-bg: var(--vg-green); --bs-btn-disabled-border-color: var(--vg-green);
}
.btn-outline-primary {
  --bs-btn-color: var(--vg-green); --bs-btn-border-color: var(--vg-green);
  --bs-btn-hover-bg: var(--vg-green); --bs-btn-hover-border-color: var(--vg-green);
  --bs-btn-active-bg: var(--vg-green-dark); --bs-btn-active-border-color: var(--vg-green-dark);
}
.btn-accent {
  --bs-btn-color: #fff; --bs-btn-bg: var(--vg-lime); --bs-btn-border-color: var(--vg-lime);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #98A000; --bs-btn-hover-border-color: #98A000;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #878E00; --bs-btn-active-border-color: #878E00;
}
.btn-info {
  --bs-btn-color: #fff; --bs-btn-bg: var(--vg-blue-light); --bs-btn-border-color: var(--vg-blue-light);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--vg-blue); --bs-btn-hover-border-color: var(--vg-blue);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--vg-blue); --bs-btn-active-border-color: var(--vg-blue);
}
.btn-danger {
  --bs-btn-bg: var(--vg-red); --bs-btn-border-color: var(--vg-red);
  --bs-btn-hover-bg: #E54848; --bs-btn-hover-border-color: #E54848;
  --bs-btn-active-bg: #D63C3C; --bs-btn-active-border-color: #D63C3C;
}
.btn-outline-danger {
  --bs-btn-color: #D63C3C; --bs-btn-border-color: #F3B2B2;
  --bs-btn-hover-bg: var(--vg-red); --bs-btn-hover-border-color: var(--vg-red);
  --bs-btn-active-bg: #D63C3C; --bs-btn-active-border-color: #D63C3C;
}
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: #F3F2EC; --bs-btn-hover-border-color: #D9D6CC; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; }
.btn .bi { line-height: 1; }

.form-control, .form-select { border-color: #DCD9D0; }
.form-control:focus, .form-select:focus { border-color: var(--vg-lime); box-shadow: 0 0 0 .25rem rgba(var(--vg-lime-rgb), .25); }
.form-check-input:checked { background-color: var(--vg-green); border-color: var(--vg-green); }
.form-label, .vg-label { font-weight: 600; font-size: .8125rem; color: var(--vg-gray-700); margin-bottom: .3rem; }

.pagination { --bs-pagination-color: var(--vg-green); --bs-pagination-hover-color: var(--vg-green-darker);
  --bs-pagination-active-bg: var(--vg-green); --bs-pagination-active-border-color: var(--vg-green);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--vg-lime-rgb), .3); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--vg-green); }
.badge.text-bg-primary { background-color: var(--vg-green) !important; }
.text-primary { color: var(--vg-green) !important; }
.bg-primary { background-color: var(--vg-green) !important; }

/* ---------- Shell: barra superior + sidebar ---------- */
body.vg-app { min-height: 100vh; }

.vg-topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 1030; height: var(--vg-topbar-h);
  display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
  background: #fff; border-bottom: 1px solid var(--bs-border-color);
}
.vg-topbar .vg-brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: var(--vg-ink); }
.vg-topbar .vg-brand img { height: 30px; width: auto; }
.vg-topbar .vg-brand-sep { width: 1px; height: 26px; background: var(--bs-border-color); }
.vg-topbar .vg-brand-title { font-weight: 700; font-size: .95rem; letter-spacing: .01em; }
.vg-topbar .vg-brand-title small { display: block; font-weight: 400; font-size: .72rem; color: var(--vg-gray-600); letter-spacing: .04em; text-transform: uppercase; }
.vg-user { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem .3rem .3rem; border-radius: 2rem; border: 1px solid transparent; color: var(--vg-ink); text-decoration: none; }
.vg-user:hover, .vg-user[aria-expanded="true"] { border-color: var(--bs-border-color); background: #FAFAF7; color: var(--vg-ink); }
.vg-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff;
  background: linear-gradient(135deg, var(--vg-green), var(--vg-lime)); }
.vg-user-name { font-size: .875rem; font-weight: 600; line-height: 1.1; }
.vg-user-name small { display: block; font-weight: 400; font-size: .72rem; color: var(--vg-gray-600); }

.vg-sidebar {
  --bs-offcanvas-width: var(--vg-sidebar-w);
  --bs-offcanvas-bg: var(--vg-ink);
  /* .offcanvas-lg pone background-color: transparent !important en >=lg: el color va como imagen */
  background-image: linear-gradient(var(--vg-ink), var(--vg-ink));
  color: #D9D9D4;
}
@media (min-width: 992px) {
  .vg-sidebar { position: fixed; top: var(--vg-topbar-h); bottom: 0; left: 0; width: var(--vg-sidebar-w); overflow-y: auto; z-index: 1020; }
  .vg-main { margin-left: var(--vg-sidebar-w); }
}
.vg-sidebar .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.08); }
.vg-sidebar-inner { padding: 1rem .75rem 1.5rem; width: 100%; }
.vg-sidebar-app { display: flex; align-items: center; gap: .7rem; padding: .25rem .6rem 1rem; margin-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.vg-sidebar-app img { width: 38px; height: 38px; border-radius: 50%; }
.vg-sidebar-app strong { color: #fff; font-size: 1rem; display: block; line-height: 1.1; }
.vg-sidebar-app span { font-size: .72rem; color: var(--vg-gray-400); }
.vg-nav-section { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8C8E88; padding: 1rem .75rem .35rem; }
.vg-nav { list-style: none; margin: 0; padding: 0; }
.vg-nav a {
  position: relative; display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; margin: 1px 0;
  border-radius: .5rem; color: #D9D9D4; text-decoration: none; font-size: .9rem;
}
.vg-nav a .bi { font-size: 1.05rem; width: 1.25rem; text-align: center; color: #A9AAA4; }
.vg-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.vg-nav a:hover .bi { color: #fff; }
.vg-nav li.active > a { background: var(--vg-green); color: #fff; font-weight: 600; }
.vg-nav li.active > a .bi { color: #fff; }
.vg-nav li.active > a::before { content: ""; position: absolute; left: -.75rem; top: .45rem; bottom: .45rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--vg-lime); }

.vg-main { padding-top: var(--vg-topbar-h); min-height: 100vh; }
.vg-content { padding: 1.75rem 2rem 3rem; max-width: 1600px; }
@media (max-width: 575.98px) { .vg-content { padding: 1.25rem 1rem 2rem; } }

/* Cabecera de página */
.vg-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.vg-page-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--vg-ink); }
.vg-page-header .vg-subtitle { color: var(--vg-gray-600); font-size: .875rem; margin-top: .2rem; }
.vg-breadcrumb { font-size: .78rem; color: var(--vg-gray-600); margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .06em; }
.vg-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.vg-actions form { margin: 0; }

/* Cards */
.card { --bs-card-border-color: #E8E5DD; --bs-card-border-radius: var(--vg-radius); --bs-card-cap-bg: #fff; box-shadow: 0 1px 2px rgba(46,46,46,.04), 0 2px 8px rgba(46,46,46,.04); }
.card-header { padding: .9rem 1.25rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.card-header .bi { color: var(--vg-green); }
.card-body { padding: 1.25rem; }
.vg-card-title { font-size: 1rem; font-weight: 700; margin: 0; }

/* Tablas */
.table { --bs-table-hover-bg: rgba(var(--vg-lime-rgb), .10); --bs-table-striped-bg: #FAF9F5; margin-bottom: 0; }
.table > thead th {
  background: #F7F6F1; color: var(--vg-gray-700); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid #E4E1DA; white-space: nowrap; padding-top: .7rem; padding-bottom: .7rem;
}
.table > tbody td { vertical-align: middle; border-color: #EFEDE7; }
.table-hover > tbody > tr { cursor: pointer; }
.table-hover > tbody > tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--vg-lime); }

/* DataTables 1.10 (integración BS3: dataTables.bootstrap.js) bajo BS5 */
.dataTables_wrapper { font-size: .875rem; }
.dataTables_wrapper .row { --bs-gutter-x: 0; align-items: center; }
.dataTables_wrapper > .row:first-child, .dataTables_wrapper > .row:last-child { padding: .85rem 1.25rem; }
.dataTables_wrapper > .row:last-child { border-top: 1px solid #EFEDE7; }
div.dataTables_wrapper div.dataTables_length label, div.dataTables_wrapper div.dataTables_filter label { font-weight: 400; color: var(--vg-gray-600); display: inline-flex; align-items: center; gap: .5rem; margin: 0; white-space: nowrap; }
div.dataTables_wrapper div.dataTables_length select { width: auto; display: inline-block; padding: .3rem 2rem .3rem .6rem; background-image: var(--bs-form-select-bg-img); background-repeat: no-repeat; background-position: right .6rem center; background-size: 14px 10px; appearance: none; }
div.dataTables_wrapper div.dataTables_filter input { width: 260px; display: inline-block; padding-left: 2.1rem;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23676767' viewBox='0 0 16 16'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10'/%3e%3c/svg%3e") no-repeat .7rem center; }
div.dataTables_wrapper div.dataTables_filter { text-align: right; }
div.dataTables_wrapper div.dataTables_info { color: var(--vg-gray-600); padding-top: 0; }
div.dataTables_wrapper div.dataTables_paginate { text-align: right; }
div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin: 0; justify-content: flex-end; gap: .25rem; }
.dataTables_wrapper .pagination > li > a {
  display: block; padding: .35rem .7rem; border: 1px solid #E4E1DA; border-radius: .4rem; color: var(--vg-green); background: #fff; text-decoration: none; font-weight: 600; font-size: .8125rem;
}
.dataTables_wrapper .pagination > li > a:hover { background: #F3F2EC; }
.dataTables_wrapper .pagination > li.active > a { background: var(--vg-green); border-color: var(--vg-green); color: #fff; }
.dataTables_wrapper .pagination > li.disabled > a { color: #B5B5AE; pointer-events: none; background: #fff; }
table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; border-collapse: collapse !important; }
table.dataTable.table-bordered { border: 0; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after {
  font-family: "bootstrap-icons" !important; font-size: .7rem; bottom: auto !important; top: 50%; transform: translateY(-50%); }
table.dataTable thead .sorting:after { content: "\f127" !important; opacity: .35; }
table.dataTable thead th:last-child:empty::after { display: none; }
table.dataTable thead .sorting_asc:after { content: "\f57b" !important; opacity: .9; color: var(--vg-green); }
table.dataTable thead .sorting_desc:after { content: "\f575" !important; opacity: .9; color: var(--vg-green); }
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before { background-color: var(--vg-green) !important; box-shadow: none !important; border: 0 !important; top: 50% !important; transform: translateY(-50%); }

/* Estados de fila heredados de los listados BS3 (clase en <tr>, mismos colores que el fondo de antes):
   tabla.vg-estados -> barra de color a la izquierda de la fila; tabla.vg-leyenda -> leyenda con punto de color */
.solicitada { --vg-estado: #47A2E5; }
.pdtedocumentacion { --vg-estado: var(--vg-orange); }
.pdtefirma { --vg-estado: var(--vg-ok); }
.enviadocontratacion { --vg-estado: #666666; }
.pdtedocactspreparatorias { --vg-estado: var(--vg-red); }
.pdtevbactspreparatorias { --vg-estado: #0275D8; }
.vg-estados > tbody > tr > td:first-child { box-shadow: inset 4px 0 0 var(--vg-estado, transparent); }
.vg-leyenda { font-size: .8125rem; color: var(--vg-gray-700); }
.vg-leyenda tr { display: flex; flex-wrap: wrap; row-gap: .35rem; }
.vg-leyenda td { padding: 0 1.5rem 0 0; border: 0; white-space: nowrap; }
.vg-leyenda td::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; vertical-align: -.05rem; background: var(--vg-estado, var(--vg-gray-400)); }

/* Modales */
.modal { --bs-modal-border-radius: var(--vg-radius); --bs-modal-header-padding: 1rem 1.5rem; }
.modal-content { border: 0; box-shadow: 0 20px 50px rgba(30,32,20,.25); }
/* .modal .modal-content > : gana a estilos2.css (.modal-header:not(.cabeceralogin) verde), que inyectan los fragmentos BS3 */
.modal .modal-content > .modal-header { background: #fff; color: var(--vg-ink); border-bottom: 1px solid #ECE9E2; font-family: var(--bs-body-font-family); font-size: 1rem; font-weight: 400; }
.modal-header .modal-title { font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: .6rem; }
.modal-header .modal-title .bi { color: var(--vg-green); }
.modal .modal-content > .modal-header.vg-modal-brand { background: var(--vg-green); color: #fff; border-bottom: 0; }
.modal-header.vg-modal-brand .modal-title .bi { color: #fff; }
.modal-header.vg-modal-brand .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.modal-backdrop { --bs-backdrop-bg: #1E2214; --bs-backdrop-opacity: .55; }

/* Overlay de "cargando" heredado (#fade/#modal, #fadeN/#modalN) */
.vg-loading-fade { display: none; position: fixed; inset: 0; background: rgba(30,34,20,.45); backdrop-filter: blur(2px); z-index: 1101; }
.vg-loading {
  display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1102;
  min-width: 260px; padding: 1.5rem 1.75rem; border-radius: var(--vg-radius); background: #fff; color: var(--vg-ink);
  box-shadow: 0 20px 50px rgba(30,32,20,.3); text-align: center; font-size: .95rem; font-weight: 600;
}
.vg-loading .spinner-border { color: var(--vg-green); width: 2.25rem; height: 2.25rem; margin-top: .9rem; }
.vg-loading progress { width: 100%; height: 8px; margin-top: .9rem; accent-color: var(--vg-green); }
.vg-loading .vg-loading-pct { display: block; font-size: .8rem; color: var(--vg-gray-600); font-weight: 400; margin-top: .35rem; }

/* Aviso flotante heredado (#passwordsNoMatchRegister) */
.vg-flash {
  display: none; position: fixed; top: calc(var(--vg-topbar-h) + 1rem); left: 50%; transform: translateX(-50%); z-index: 7000;
  min-width: 340px; max-width: 90vw; margin: 0; padding: .9rem 1.25rem; border: 0; border-left: 4px solid var(--vg-ok); border-radius: .6rem;
  background: #fff; color: var(--vg-ink); box-shadow: 0 12px 30px rgba(30,32,20,.2);
}
.vg-flash h3 { font-size: 1rem; font-weight: 600; margin: 0; text-align: left !important; }

/* Pantallas sin shell (login, acceso restringido) */
.vg-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: #fff; }
.vg-auth-brand {
  position: relative; overflow: hidden; color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(120% 90% at 20% 15%, #6E8B00 0%, var(--vg-green) 45%, var(--vg-green-darker) 100%);
}
.vg-auth-brand::after { content: ""; position: absolute; right: -18%; bottom: -25%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--vg-lime-rgb), .55), rgba(var(--vg-lime-rgb), 0) 70%); }
.vg-auth-brand img.vg-auth-veggo { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.vg-auth-brand h2 { font-size: 2.1rem; font-weight: 700; line-height: 1.15; margin: 1.5rem 0 .75rem; max-width: 22ch; }
.vg-auth-brand p { color: rgba(255,255,255,.82); max-width: 42ch; margin: 0; }
.vg-auth-brand .vg-auth-foot { position: relative; z-index: 1; font-size: .8rem; color: rgba(255,255,255,.7); }
.vg-auth-form { display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; background: #fff; }
.vg-auth-card { width: 100%; max-width: 410px; }
.vg-auth-card .vg-auth-logo { height: 40px; width: auto; margin-bottom: 2rem; }
.vg-auth-card h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: .35rem; }
.vg-auth-card .vg-auth-lead { color: var(--vg-gray-600); margin-bottom: 1.75rem; }
.vg-auth-card .form-floating > .form-control { height: 3.4rem; background: #fff; }
.vg-auth-card .form-floating > label { color: var(--vg-gray-600); }
@media (max-width: 991.98px) { .vg-auth { grid-template-columns: 1fr; } .vg-auth-brand { display: none; } }

.vg-restricted { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.vg-restricted .card { max-width: 460px; width: 100%; text-align: center; }
.vg-restricted .vg-restricted-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; background: #FDECEC; color: #D63C3C; font-size: 1.75rem; }

/* jQuery UI datepicker dentro del tema */
.ui-datepicker { font-family: var(--bs-body-font-family) !important; font-size: .85rem !important; border-radius: .5rem; z-index: 2000 !important; }
.ui-datepicker .ui-datepicker-header { background: var(--vg-green) !important; border: 0; color: #fff; }