@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; padding: 0;
  font-family: 'Inter', Verdana, Helvetica, sans-serif;
  font-size: 13px; background: #f0f4fb; color: #1a1a2e;
}
html, body { height: 100%; }
body, td, th, input, select, textarea {
  margin: 0px; font-family: 'Inter', Verdana, Helvetica, sans-serif; font-size: 12px;
}
form { margin: 0; }
A { font-weight: 500; color: #355fb5; text-decoration: none; }
A:hover { color: #4f82c1; text-decoration: none; }

/* ===== HEADER ===== */
#header_container {
  background: #f8faff; border-bottom: 1px solid #e5e7eb;
  height: 56px; left: 0; position: fixed; width: 100%; top: 0;
  padding: 0 16px; z-index: 20; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
#header { line-height: 56px; margin: 0 auto; width: 100%; display: flex; align-items: center; }

/* ===== LAYOUT ===== */
#container { margin: 0 auto; overflow: auto; padding-top: 64px; padding-bottom: 50px; width: 100%; z-index: 10; }
#content { margin-top: 8px; margin-left: 8px; }

/* ===== FOOTER ===== */
#footer_container { background: #ffffff; border-top: 1px solid #e5e7eb; bottom: 0; height: 40px; left: 0; position: fixed; width: 100%; }
#footer { line-height: 40px; margin: 0 auto; width: 100%; }

/* ===== MESSAGES ===== */
.c_mensajes { padding: 8px 12px; border: 1px solid #fca5a5; border-radius: 8px; font-size: 11px; color: #dc2626; background: #fef2f2; margin-top: 6px; }
.label.valid { padding: 3px; border: 1px solid #cccccc; color: red; }

/* ===== FORM STATES ===== */
input.success, select.success { border: 1px solid #22c55e !important; background: #f0fdf4 !important; }
input.error, select.error, textarea.error { border: 1px solid #ef4444 !important; background: #fef2f2 !important; }

/* ===== INPUTS GLOBAL ===== */
input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea {
  border: 1px solid #d1d5db; border-radius: 6px; padding: 5px 8px;
  font-family: 'Inter', Verdana, sans-serif; font-size: 12px; color: #1a1a2e;
  background: #ffffff; transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  border-color: #355fb5; box-shadow: 0 0 0 3px rgba(53,95,181,0.1);
}
input[type="submit"], input[type="button"], button {
  background: #355fb5; color: #ffffff; border: none; border-radius: 6px;
  padding: 6px 14px; font-family: 'Inter', Verdana, sans-serif; font-size: 12px;
  font-weight: 500; cursor: pointer; transition: background 0.15s, transform 0.1s;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover { background: #2d51a0; }
input[type="submit"]:active, input[type="button"]:active, button:active { transform: scale(0.98); }

/* ===== BOTONERA ===== */
.botonera { background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 8px; height: 100%; width: 70px; text-align: center; }
.botonera TD { border-bottom: 1px solid #e5e7eb; padding: 4px; }
.botonera2 { border: none; text-align: center; }
.botonera2 TD { padding: 4px 6px; border-right: 1px solid #e5e7eb; }
.botonera2 TD:last-child { border-right: none; }

/* ===== PANTALLA BASE ===== */
.pantalla_base { background: #ffffff; border: 1.5px solid #c7d2e8; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.pantalla_base table { background: #ffffff; padding: 4px; }
.pantalla_base td { padding: 5px 8px; font-size: 12px; color: #374151; }
.pantalla_base th { font-size: 13px; font-weight: 600; text-align: left; color: #ffffff; padding: 10px 14px; background: #355fb5; letter-spacing: 0.2px; }
.pantalla_base2 { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.pantalla_base2 table { background: #ffffff; padding: 4px; }
.pantalla_base2 td { padding: 5px 8px; font-size: 12px; color: #374151; }
.pantalla_base2 th { font-size: 13px; font-weight: 600; text-align: left; color: #ffffff; padding: 10px 14px; background: #4f82c1; }

/* ===== PANTALLA DATOS ===== */
.pantalla_datos { }
.pantalla_datos table { margin-top: 4px; border: 1.5px solid #c7d2e8; border-radius: 10px; overflow: hidden; border-collapse: separate; border-spacing: 0; width: 100%; box-shadow: 0 2px 8px rgba(53,95,181,0.08); }
.pantalla_datos th { padding: 11px 14px; border-bottom: 2px solid #2a4f9f; font-size: 11px; font-weight: 700; color: #ffffff; background: #2d52a3; text-transform: uppercase; letter-spacing: 0.7px; white-space: nowrap; }
.pantalla_datos td { font-size: 12px; padding: 10px 14px; border-bottom: 1px solid #dde3ef; color: #1e293b; }
.pantalla_datos tbody tr:nth-child(even) { background-color: #eef2fb !important; }
.pantalla_datos tbody tr:nth-child(odd)  { background-color: #ffffff !important; }
.pantalla_datos table tbody tr:hover { background-color: #dbeafe !important; cursor: pointer; }
.pantalla_datos table tbody tr:hover td { color: #1e3a8a; }
.pantalla_datos table tbody tr:hover a  { color: #1d4ed8; }

/* ===== ITEM SELECCIONADO ===== */
.item_seleccionado td { background-color: #355fb5 !important; color: #ffffff !important; }
.item_seleccionado a { background-color: #355fb5; color: #ffffff; }

/* ===== DIALOG / MODAL ===== */
.ui-dialog .ui-dialog-content { padding: 0; }
.ui-dialog .ui-dialog-titlebar { background: #355fb5; color: #ffffff; font-weight: 600; border-radius: 8px 8px 0 0; padding: 10px 14px; font-size: 13px; }
.ui-dialog { border-radius: 10px !important; border: 1px solid #e5e7eb !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; overflow: hidden; }

/* ===== MENU ===== */
#menu_principal ul { display: none; }
#menu_principal { font-family: 'Inter', Verdana, sans-serif; font-size: 13px; }
#menu_principal > li > a { background: #355fb5; border: 1px solid #2d52a3; border-radius: 6px; padding: 6px 16px; color: #ffffff; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
#menu_principal > li > a:hover { background: #2d52a3; color: #ffffff; }

/* ===== MISC ===== */
.cnoti td { padding-right: 5px; }
.search { text-indent: 20px; margin: 0; border: 1px solid #d1d5db; border-radius: 6px; width: 220px; background: url('../images/search.png') no-repeat 6px center #fff; padding: 5px 8px; }
.ui-autocomplete { max-height: 200px; overflow-y: scroll; overflow-x: hidden; }
.ui-menu { width: 200px; }
.ui-autocomplete-loading { background: white url('../images/loading.gif') right center no-repeat; }
#contenedor_principal { padding: 0; background: none; border-width: 0; }
#contenedor_principal .ui-tabs-nav { background: transparent; border-width: 0 0 1px 0; border-radius: 0; }
#contenedor_principal .ui-tabs-panel { margin: -0.4em 0.1em 0.2em -0.8em; }
#contenedor_principal li .ui-icon-close { float: left; margin: 1px 1px 0 0; cursor: pointer; }
.coval_tip { cursor: pointer; }

/* ===== IMAGEN USUARIO ===== */
.imgRedonda { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #e5e7eb; object-fit: cover; }
.func_rapidas img { cursor: pointer; }
.func_rapidas td img { padding: 3px; }

/* ===== TABS ===== */
.ui-tabs { border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #ffffff !important; padding: 0 !important; }
.ui-tabs .ui-tabs-nav { background: #f9fafb !important; border-bottom: 1px solid #e5e7eb !important; border-radius: 8px 8px 0 0 !important; padding: 6px 8px 0 !important; }
.ui-tabs .ui-tabs-nav li { border-radius: 6px 6px 0 0 !important; border: 1px solid transparent !important; border-bottom: none !important; margin-bottom: -1px !important; }
.ui-tabs .ui-tabs-nav li a { font-size: 12px !important; font-weight: 500 !important; color: #6b7280 !important; padding: 7px 14px !important; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { background: #ffffff !important; border-color: #e5e7eb !important; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: #355fb5 !important; }
.ui-tabs .ui-tabs-panel { padding: 12px !important; }

/* ===== PASSWORD STRENGTH ===== */
#pwindicator { margin-top: 4px; width: 150px; }
.bar { height: 3px; border-radius: 2px; }
.pw-very-weak .bar  { background: #ef4444; width: 20px; } .pw-very-weak .label { color: #ef4444; }
.pw-weak .bar        { background: #f97316; width: 40px; } .pw-weak .label      { color: #f97316; }
.pw-mediocre .bar    { background: #f59e0b; width: 60px; } .pw-mediocre .label  { color: #f59e0b; }
.pw-strong .bar      { background: #84cc16; width: 80px; } .pw-strong .label    { color: #84cc16; }
.pw-very-strong .bar { background: #22c55e; width: 100px; } .pw-very-strong .label { color: #22c55e; }

/* ===== SELECT2 ===== */
.select2-container--default .select2-selection--single { border: 1px solid #d1d5db !important; border-radius: 6px !important; height: 28px !important; line-height: 26px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #374151 !important; font-size: 12px !important; line-height: 26px !important; }

/* ===== CALENDAR ===== */
a.dp-choose-date { float: left; width: 16px; height: 16px; padding: 0; margin: 5px 3px 0; text-indent: -2000px; overflow: hidden; background: url(../images/b_calendar.png) no-repeat; }
a.dp-choose-date.dp-disabled { background-position: 0 -20px; cursor: default; }

/* ===== PANT TITULO ===== */
.pant_titulo { font-size: 14px; font-weight: 600; color: #1a1a2e; }

/* ===== ESTADO BADGES ===== */
font[style*="color:red"]    { background: #fef2f2; color: #dc2626 !important; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
font[style*="color:darkblue"] { background: #eff6ff; color: #1d4ed8 !important; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
font[style*="color:green"]  { background: #16a34a; color: #ffffff !important; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
font[style*="color:blue"]   { background: #eff6ff; color: #2563eb !important; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
font[style*="color:orange"] { background: #fff7ed; color: #ea580c !important; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
font[style*="color:magenta"]{ background: #fdf4ff; color: #a21caf !important; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }

/* ===== AUTOCOMPLETE LOCALIDAD ===== */
#p121__cont_cod_loc_comp { width: 100% !important; box-sizing: border-box; }
#p121__cont_cod_loc_comp + img, #p121__cont_cod_loc_comp ~ img { display: none !important; }
.frm121 .inp td:has(#p121__cont_cod_loc_comp), .frm121 td:has(#p121__cont_cod_loc_comp) { width: 100%; }
.frm121 .inp .select2-container { width: 100% !important; }
.frm121 .inp > table { width: 100%; }
.frm121 .inp > table td:first-child { width: 100%; }
.frm121 .inp > table td { vertical-align: middle; padding: 0; }

/* ===== VALIDATION ERROR DARK MODE ===== */
body.dark-mode input.error, body.dark-mode select.error, body.dark-mode textarea.error { background: #2d1515 !important; border-color: #ef4444 !important; color: #e2e8f0 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.2) !important; }
body.dark-mode label.error { background: rgba(220,50,50,0.2) !important; border: 1px solid rgba(220,50,50,0.4) !important; color: #ff8080 !important; border-radius: 6px; padding: 3px 8px; font-size: 11px; display: block; margin-top: 3px; }

/* ===== TIENDANUBE / MANUAL ICONS DARK MODE ===== */
body.dark-mode img[src*="tn.png"] { filter: invert(1) brightness(2); }
body.dark-mode img[src*="t24.png"] { filter: invert(1) brightness(2); }
body.dark-mode img[src*="copy.png"], body.dark-mode img[src*="track.png"] { filter: invert(1) brightness(2); }

/* ===== MAS DATOS DARK MODE ===== */
body.dark-mode #dmasdatos121 { background: #1e3a6e; border-color: #4f82c1 !important; color: #93c5fd; font-weight: 500; }
body.dark-mode #dmasdatos121:hover { background: #2d52a3; color: #ffffff; }

/* ===== INPUT ERROR ===== */
label.error { display: block; font-size: 11px; color: #ff6b6b !important; background: rgba(220,50,50,0.15) !important; border: 1px solid rgba(220,50,50,0.3) !important; border-radius: 6px; padding: 4px 8px; margin-top: 3px; }
input.error, select.error, textarea.error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important; }

/* ===== DARK MODE ===== */
body.dark-mode { background: #0f1721; color: #e2e8f0; }
body.dark-mode #header_container { background: #1a2332; border-bottom: 1px solid #2d3f55; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
body.dark-mode #container { background: #0f1721; }
body.dark-mode .pantalla_base, body.dark-mode .pantalla_base2 { background: #1a2332; border-color: #2d3f55; }
body.dark-mode .pantalla_base table, body.dark-mode .pantalla_base2 table { background: #1a2332; }
body.dark-mode .pantalla_base td, body.dark-mode .pantalla_base2 td { color: #cbd5e1; }
body.dark-mode .pantalla_base th { background: #1e3a6e; }
body.dark-mode .pantalla_base2 th { background: #1e3a6e; }
body.dark-mode .pantalla_datos table { border-color: #2d3f55; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
body.dark-mode .pantalla_datos th { background: #1e3a6e; border-bottom-color: #2d52a3; }
body.dark-mode .pantalla_datos td { color: #cbd5e1; border-bottom-color: #1e2d42; }
body.dark-mode .pantalla_datos tbody tr:nth-child(even) { background-color: #162030 !important; }
body.dark-mode .pantalla_datos tbody tr:nth-child(odd)  { background-color: #1a2332 !important; }
body.dark-mode .pantalla_datos table tbody tr:hover { background-color: #1e3a6e !important; }
body.dark-mode .pantalla_datos table tbody tr:hover td { color: #93c5fd; }
body.dark-mode .pantalla_datos table tbody tr:hover a  { color: #60a5fa; }
body.dark-mode input[type="text"], body.dark-mode input[type="password"], body.dark-mode input[type="number"], body.dark-mode input[type="email"], body.dark-mode select, body.dark-mode textarea { background: #1a2332; border-color: #2d3f55; color: #e2e8f0; }
body.dark-mode input[type="text"]:focus, body.dark-mode input[type="password"]:focus, body.dark-mode input[type="number"]:focus, body.dark-mode select:focus, body.dark-mode textarea:focus { border-color: #4f82c1; box-shadow: 0 0 0 3px rgba(79,130,193,0.2); }
body.dark-mode .ui-dialog { background: #1a2332 !important; border-color: #2d3f55 !important; }
body.dark-mode .ui-dialog .ui-dialog-content { background: #1a2332; color: #e2e8f0; }
body.dark-mode .ui-tabs { background: #1a2332 !important; border-color: #2d3f55 !important; }
body.dark-mode .ui-tabs .ui-tabs-nav { background: #162030 !important; border-bottom-color: #2d3f55 !important; }
body.dark-mode .ui-tabs .ui-tabs-nav li.ui-tabs-active { background: #1a2332 !important; border-color: #2d3f55 !important; }
body.dark-mode .ui-tabs .ui-tabs-nav li a { color: #94a3b8 !important; }
body.dark-mode .ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: #60a5fa !important; }
body.dark-mode label, body.dark-mode td, body.dark-mode th { color: #cbd5e1; }
body.dark-mode A { color: #60a5fa; }
body.dark-mode A:hover { color: #93c5fd; }
body.dark-mode .item_seleccionado td { background-color: #1e3a6e !important; color: #93c5fd !important; }
body.dark-mode .c_mensajes { background: #2d1515; border-color: #7f1d1d; color: #fca5a5; }

/* ===== DARK TOGGLE ===== */
#dark-toggle { background: none; border: 1.5px solid #d1d5db; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; padding: 0; flex-shrink: 0; transition: background 0.2s; line-height: 1; }
#dark-toggle:hover { background: #f0f4fb; border-color: #355fb5; transform: none; box-shadow: none; }
body.dark-mode #dark-toggle { background: #1a2332; border-color: #2d3f55; }
body.dark-mode #dark-toggle:hover { background: #243044; }

/* ===== DASHBOARD ===== */
.dash-wrap { max-width: 900px; margin: 0 auto; padding: 8px 8px 16px; }
.dash-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.dash-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-card-metric { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
body.dark-mode .dash-card-metric { background: #1a2332; border-color: #2d3f55; }
.dash-card-metric .lbl { font-size: 12px; color: #6b7280; margin: 0 0 4px; }
body.dark-mode .dash-card-metric .lbl { color: #94a3b8; }
.dash-card-metric .val { font-size: 28px; font-weight: 500; margin: 0 0 3px; color: #1a1a2e; }
body.dark-mode .dash-card-metric .val { color: #e2e8f0; }
.dash-card-metric .sub { font-size: 11px; color: #6b7280; margin: 0; }
body.dark-mode .dash-card-metric .sub { color: #94a3b8; }
.dash-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
body.dark-mode .dash-card { background: #1a2332; border-color: #2d3f55; }
.dash-card-title { font-size: 13px; font-weight: 500; color: #1a1a2e; margin: 0 0 12px; }
body.dark-mode .dash-card-title { color: #e2e8f0; }
.dash-trans-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dash-trans-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; flex-shrink: 0; }
.dash-trans-icon.ca { background: #E6F1FB; color: #185FA5; }
body.dark-mode .dash-trans-icon.ca { background: #1e3a6e; color: #93c5fd; }
.dash-trans-icon.mo { background: #EAF3DE; color: #3B6D11; }
body.dark-mode .dash-trans-icon.mo { background: #1a3a1a; color: #86efac; }
.dash-trans-lbl { font-size: 12px; color: #6b7280; margin: 0 0 3px; }
body.dark-mode .dash-trans-lbl { color: #94a3b8; }
.dash-bar { height: 6px; background: #f0f4fb; border-radius: 20px; overflow: hidden; }
body.dark-mode .dash-bar { background: #162030; }
.dash-trans-num { font-size: 15px; font-weight: 500; color: #1a1a2e; min-width: 32px; text-align: right; }
body.dark-mode .dash-trans-num { color: #e2e8f0; }
.dash-lote-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: #f0f4fb; border-radius: 8px; margin-bottom: 8px; }
body.dark-mode .dash-lote-row { background: #162030; }
.dash-lote-row:last-child { margin-bottom: 0; }
.dash-lote-name { font-size: 13px; font-weight: 500; color: #1a1a2e; margin: 0; }
body.dark-mode .dash-lote-name { color: #e2e8f0; }
.dash-lote-sub { font-size: 11px; color: #6b7280; margin: 2px 0 0; }
body.dark-mode .dash-lote-sub { color: #94a3b8; }
.dash-lote-num { font-size: 20px; font-weight: 500; margin: 0; }
.dash-lote-num-lbl { font-size: 11px; color: #6b7280; margin: 0; text-align: right; }
body.dark-mode .dash-lote-num-lbl { color: #94a3b8; }
.dash-up { color: #3B6D11; }
body.dark-mode .dash-up { color: #86efac; }
.dash-down { color: #A32D2D; }
body.dark-mode .dash-down { color: #fca5a5; }