/* ================================================================
   GEOSYS — Modern Theme  (Nivel 1 Demo)
   Cargado después de style.css y DHTMLSuite — solo overrides CSS.
   Sin cambios a JS, PHP ni estructura HTML.
   ================================================================ */

/* ── Google Font (closest open alternative to Century Gothic) ───── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Palette — color corporativo RGB(0,159,162) */
  --teal:           #009fa2;
  --teal-dark:      #007b7d;
  --teal-mid:       #00b4b7;
  --teal-light:     #cceeed;
  --teal-xlight:    #f0fafa;

  /* Alias semánticos (usados en el resto del archivo) */
  --navy:           var(--teal);
  --navy-mid:       var(--teal-dark);
  --blue:           var(--teal);
  --blue-hover:     var(--teal-dark);
  --blue-light:     var(--teal-light);
  --blue-xlight:    var(--teal-xlight);

  --bg:             #f1f5f5;
  --surface:        #ffffff;
  --border:         #b8d4d4;
  --border-light:   #d6eded;

  --text:           #0f1f1f;
  --text-muted:     #5a7878;

  --green:          #059669;
  --green-bg:       #d1fae5;
  --red:            #dc2626;
  --red-bg:         #fee2e2;
  --amber-bg:       #fef3c7;

  --radius:         5px;
  --radius-sm:      3px;
  --shadow-sm:      0 1px 2px rgba(0,0,0,.06);
  --shadow:         0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:      0 4px 8px rgba(0,0,0,.10);

  --font:           'Nunito', 'Century Gothic', 'Trebuchet MS', system-ui, Arial, sans-serif;
  --ease:           140ms ease;
}

/* ── Base ──────────────────────────────────────────────────────── */
body {
  font-family:  var(--font);
  font-size:    0.875rem;
  color:        var(--text);
  background:   var(--bg);
  line-height:  1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Links ─────────────────────────────────────────────────────── */
a {
  color: var(--teal);
  text-decoration: none;
}
a:hover { color: var(--teal-dark); text-decoration: underline; }

.linkGeneral {
  color: var(--teal);
  text-decoration: underline;
  cursor: pointer;
}
.linkGeneral:hover { color: var(--teal-dark); }

.link:hover { border-bottom: 1px solid var(--teal); }

.linkCalendario { color: var(--text); }

/* ── Buttons ───────────────────────────────────────────────────── */
.boton,
.botonBusqueda,
input[type="button"],
input[type="submit"],
button {
  font-family:  var(--font);
  font-size:    0.8rem;
  font-weight:  600;
  padding:      3px 11px;
  border:       1px solid var(--border);
  border-radius: var(--radius-sm);
  background:   var(--surface);
  color:        var(--text);
  cursor:       pointer;
  line-height:  1.6;
  box-shadow:   var(--shadow-sm);
  transition:   background var(--ease), border-color var(--ease), box-shadow var(--ease);
  white-space:  nowrap;
}
.boton:hover,
.botonBusqueda:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
  background:     var(--teal-xlight);
  border-color:   var(--teal);
  box-shadow:     var(--shadow);
}
.boton:active, input[type="button"]:active { transform: translateY(1px); }

input[type="button"].fecha {
  background: url(../images/calendario.png) center/contain no-repeat var(--surface);
  width:   22px;
  height:  22px;
  padding: 0;
  min-width: unset;
  border-radius: var(--radius-sm);
  box-shadow:    var(--shadow-sm);
}

/* ── Forms ─────────────────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
select,
textarea {
  font-family:  var(--font);
  font-size:    0.875rem;
  color:        var(--text);
  background:   var(--surface);
  border:       1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:      3px 7px;
  outline:      none;
  box-sizing:   border-box;
  transition:   border-color var(--ease), box-shadow var(--ease);
}
textarea {
  max-width: 100%;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  box-shadow:   0 0 0 3px rgba(0,159,162,.18);
}

.disabledInput {
  background:   var(--bg);
  color:        var(--text-muted);
  border:       1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

fieldset {
  border:         1px solid var(--border-light);
  border-radius:  var(--radius);
  padding:        8px 12px 10px;
  margin-bottom:  8px;
  box-shadow:     var(--shadow-sm);
  background:     var(--surface);
}
legend {
  font-weight:    700;
  font-size:      0.78rem;
  color:          var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding:        0 6px;
}

/* ── Tables ────────────────────────────────────────────────────── */
/* Nunito es más ancha que Segoe UI: reducimos padding y tamaño
   para que el contenido no salte a 2 líneas */
table.tabla {
  border-collapse: collapse;
  width: 100%;
}
table.tabla thead td,
table.tabla thead th {
  background:     var(--teal-light);
  color:          var(--teal-dark);
  font-weight:    700;
  font-size:      0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding:        5px 6px;
  border-bottom:  2px solid var(--teal-mid);
  white-space:    nowrap;
}
table.tabla tbody td {
  padding:        3px 5px;
  font-size:      0.78rem;
  border-bottom:  1px solid var(--border-light);
}
table.tabla tbody tr:hover {
  background: var(--teal-xlight);
}

thead.cabeceraBusqueda td {
  background:     var(--teal-light);
  color:          var(--teal-dark);
  font-weight:    700;
  font-size:      0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding:        4px 6px;
  border-bottom:  2px solid var(--teal-mid);
  white-space:    nowrap;
}

tr.busqueda:hover { background: var(--teal-xlight); }

/* ── Alternating rows ──────────────────────────────────────────── */
div.lnPar   { background-color: var(--bg); }
div.lnImpar { background-color: var(--surface); }

/* ── List icon buttons (SO, PR, PY, OF, IF, etc.) — neutralize global padding ── */
input.SO, input.PR, input.asignar, input.correo, input.enviado,
input.revisar, input.editar, input.nuevo, input.revisado,
input.inicio, input.anterior, input.anteriorD,
input.siguiente, input.siguienteD, input.final,
input.PY, input.OF, input.IF, input.enviar,
input.rapido, input.detallado {
  padding:          0 !important;
  line-height:      1 !important;
  box-sizing:       border-box !important;
  border:           none !important;
  box-shadow:       none !important;
  background-color: transparent !important;
}

/* ── Directorio list icon buttons ── */
input.rapido, input.detallado {
  width:               16px;
  height:              16px;
  background-repeat:   no-repeat;
  background-position: center center;
  cursor:              pointer;
  vertical-align:      middle;
}
input.rapido    { background-image: url('/images/rapido.png'); }
input.detallado { background-image: url('/images/detallado.png'); }

/* ── Pagination icon buttons (shared across all modules) ── */
input.inicio, input.anterior, input.anteriorD,
input.siguiente, input.siguienteD, input.final {
  width:               16px;
  height:              16px;
  background-repeat:   no-repeat;
  background-position: center center;
  vertical-align:      middle;
}
input.inicio     { background-image: url('/images/inicio.png');     cursor: pointer; }
input.anterior   { background-image: url('/images/anterior.png');   cursor: pointer; }
input.anteriorD  { background-image: url('/images/anteriorD.png');  cursor: default; }
input.siguiente  { background-image: url('/images/siguiente.png');  cursor: pointer; }
input.siguienteD { background-image: url('/images/siguienteD.png'); cursor: default; }
input.final      { background-image: url('/images/final.png');      cursor: pointer; }

/* ── Oferta form row action buttons (small 13px icon buttons) ── */
input.bajar, input.bajarD, input.borrar, input.subir, input.subirD {
  width:               13px !important;
  height:              22px !important;
  padding:             0 !important;
  line-height:         1 !important;
  border:              1px solid #999 !important;
  box-shadow:          none !important;
  background-color:    #ddd !important;
  background-repeat:   no-repeat;
  background-position: center center;
  cursor:              pointer;
  box-sizing:          border-box !important;
}
input.bajar  { background-image: url('/images/bajar.png'); }
input.bajarD { cursor: default; }
input.subir  { background-image: url('/images/subir.png'); }
input.subirD { cursor: default; }
input.borrar { background-image: url('/images/borrar.png'); }

/* revisar — selector was .revisar (low specificity) in module CSS, override here */
input.revisar {
  background-image: url('/images/ejecucion/oferta/revisar.png') !important;
}

/* ── Feedback ──────────────────────────────────────────────────── */
.error {
  background:   var(--red-bg);
  color:        var(--red);
  border:       1px solid #fca5a5;
  border-radius: var(--radius-sm);
  padding:      2px 7px;
  font-weight:  500;
}
.mensaje {
  background:   var(--teal-light);
  color:        var(--teal-dark);
  border:       1px solid var(--teal-mid);
  border-radius: var(--radius);
  padding:      7px 14px;
  font-weight:  500;
  text-align:   center;
}
span.busqueda {
  background:   var(--amber-bg);
  color:        #92400e;
  border-radius: 2px;
  padding:      0 3px;
}

/* ── Section headers (divCabecera) ─────────────────────────────── */
div.divCabecera,
div.divCabeceraOculto {
  background:     var(--teal-light);
  background-image: none !important;
  color:          var(--teal-dark);
  font-weight:    600;
  font-size:      0.8rem;
  padding:        4px 8px;
  border-left:    3px solid var(--teal);
  border-radius:  0 var(--radius-sm) var(--radius-sm) 0;
  cursor:         pointer;
}

/* ── Comments ──────────────────────────────────────────────────── */
div.comentarioUsuario {
  background:     var(--teal-xlight);
  border-left:    3px solid var(--teal);
  border-radius:  0 var(--radius-sm) var(--radius-sm) 0;
  padding:        2px 8px;
  margin:         2px 0;
}
div.comentarioNoConf {
  background:     var(--red-bg);
  border-left:    3px solid var(--red);
  border-radius:  0 var(--radius-sm) var(--radius-sm) 0;
  padding:        2px 8px;
  margin:         2px 0;
}
div.comentarioLog:hover,
div.comentarioUsuario:hover,
div.comentarioNoConf:hover { filter: brightness(0.97); }

/* ── Directory list ────────────────────────────────────────────── */
div.lista { border-radius: var(--radius-sm); }
div.lista:hover { background: var(--teal-xlight); }

/* ── Project title — truncate long names with ellipsis ─────────── */
/* Override absolute positioning with flexbox so controles never
   gets overlapped regardless of how long the project name is */
div.tituloProyecto {
  display:     flex !important;
  align-items: center !important;
  height:      auto !important;
  min-height:  25px;
}
div.tituloProyecto div.nombre {
  position:  static !important;
  flex:      1 1 0;
  min-width: 0;           /* critical: allows flex child to shrink below content size */
  overflow:  hidden;
}
div.tituloProyecto div.controles {
  position:    static !important;
  flex-shrink: 0;
  white-space: nowrap;
  padding-left: 8px;
}
div.tituloProyecto div.nombre table {
  table-layout: auto;
  width:        100%;
}
div.tituloProyecto div.nombre table td:first-child {
  white-space: nowrap;   /* keep "PY6439 - " on one line, natural width */
}
div.tituloProyecto div.nombre table td:last-child {
  width:     100%;
  max-width: 0;          /* forces the cell to yield space to first-child */
  overflow:  hidden;
}
div[id^="prycnmbr_"] {
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
  cursor:        text;
}

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #7ec8c9; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal-dark); }

/* ═══════════════════════════════════════════════════════════════
   DHTMLSuite OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* ── Body/pane background ──────────────────────────────────────── */
body { background-color: var(--bg) !important; }

.DHTMLSuite_pane {
  background-color: var(--surface) !important;
  border-left:  1px solid var(--border-light) !important;
  border-right: 1px solid var(--border-light) !important;
}
#DHTMLSuite_pane_north {
  background-color: var(--surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── Menu bar (north bar) ──────────────────────────────────────── */
#menuContainer {
  background-image: none !important;
  background:       var(--teal);
  box-shadow:       0 2px 6px rgba(0,0,0,.25);
}

.Geosys_menuBar_top {
  background-image: none !important;
  background:       transparent;
  font-family:      var(--font);
  font-size:        0.875rem;
  color:            rgba(255,255,255,.95);
}

/* Top-level menu items */
.DHTMLSuite_menuItem_top_regular {
  color:          rgba(255,255,255,.90);
  border-radius:  var(--radius-sm);
  transition:     background var(--ease), color var(--ease);
}
.DHTMLSuite_menuItem_top_regular div { color: inherit; }

.DHTMLSuite_menuItem_top_over,
.DHTMLSuite_menuItem_top_active,
.DHTMLSuite_menuItem_top_click {
  background-color: rgba(255,255,255,.20) !important;
  border:           1px solid rgba(255,255,255,.30) !important;
  color:            #fff;
  border-radius:    var(--radius-sm);
}
.DHTMLSuite_menuItem_top_over div,
.DHTMLSuite_menuItem_top_active div,
.DHTMLSuite_menuItem_top_click div { color: #fff; }

/* Sub-menu dropdown */
.Geosys_menuBar_sub {
  background-image: none !important;
  background:       var(--surface) !important;
  border:           none !important;
  border-radius:    var(--radius) !important;
  box-shadow:       var(--shadow-md) !important;
  overflow:         hidden;
}

/* Sub-menu items */
.DHTMLSuite_menuItem_sub_regular {
  color:        var(--text);
  border-radius: var(--radius-sm);
  font-size:    0.85rem;
}
.DHTMLSuite_menuItem_sub_over,
.DHTMLSuite_menuItem_sub_active {
  background-color: var(--teal-xlight) !important;
  border:           1px solid var(--teal-light) !important;
  color:            var(--teal-dark);
  border-radius:    var(--radius-sm) !important;
}
.DHTMLSuite_menuItem_sub_click {
  background-color: var(--teal-light) !important;
}
.DHTMLSuite_menuItem_separator_sub {
  background-color: var(--border-light);
  height: 1px;
}

/* ── Pane header (title bar of each pane) ──────────────────────── */
.DHTMLSuite_paneHeader {
  background-image: none !important;
  background:       var(--teal) !important;
  height:           24px;
  line-height:      24px;
}
.DHTMLSuite_paneHeader .paneTitle {
  color:      rgba(255,255,255,.95);
  font-size:  0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.DHTMLSuite_paneHeader .DHTMLSuite_paneHeader_buttonDiv .closeButtonOver,
.collapseButtonHorizontalOver,
.expandButtonHorizontalOver,
.collapseButtonVerticalOver,
.refreshButtonOver,
.expandButtonVerticalOver {
  background-color: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.35);
}

/* ── Pane tabs (bottom tab bar) ────────────────────────────────── */
.DHTMLSuite_paneTabs {
  background:     #e0f4f4 !important;
  border-top:     1px solid var(--border) !important;
  height:         25px;
  line-height:    25px;
}

.DHTMLSuite_paneTabs div {
  font-family:  var(--font);
  font-size:    0.78rem;
  font-weight:  700;
}

/* Active tab */
.paneSplitterActiveTab {
  background-image: none !important;
  background:       var(--surface) !important;
  border-top:       2px solid var(--teal) !important;
  border-radius:    var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow:       0 -1px 3px rgba(0,0,0,.06);
  height:           23px !important;
}
.paneSplitterActiveTab a {
  color: var(--teal-dark) !important;
}
.paneSplitterActiveTab span {
  background-image: none !important;
}

/* Inactive tabs */
.paneSplitterInactiveTab {
  background-image: none !important;
  background:       #c8e6e6 !important;
  border-top:       1px solid var(--border) !important;
  border-radius:    var(--radius-sm) var(--radius-sm) 0 0;
  height:           22px !important;
  transition:       background var(--ease);
}
.paneSplitterInactiveTab:hover {
  background: #b5dcdc !important;
}
.paneSplitterInactiveTab a {
  color: var(--text-muted) !important;
}
.paneSplitterInactiveTab span {
  background-image: none !important;
}

/* ── Resize splitter handles ────────────────────────────────────── */
.DHTMLSuite_paneSplitter_vertical {
  background-color: var(--border-light);
  background-image: none;
  border-right:     1px solid var(--border);
  transition:       background var(--ease);
}
.DHTMLSuite_paneSplitter_vertical:hover { background-color: var(--teal-light); }

.DHTMLSuite_paneSplitter_horizontal {
  background-color: var(--border-light);
  background-image: none;
  border-top:       1px solid var(--border);
}

/* ── Collapsed pane states ─────────────────────────────────────── */
.DHTMLSuite_pane_collapsed_west,
.DHTMLSuite_pane_collapsed_east,
.DHTMLSuite_pane_collapsed_south,
.DHTMLSuite_pane_collapsed_north {
  background-color: var(--bg);
}
.DHTMLSuite_pane_collapsedInnerOver {
  background-color: var(--teal-xlight);
  cursor: pointer;
}

/* ── Marquesina ────────────────────────────────────────────────── */
#marquesinaDiv {
  width:     700px !important;
  max-width: 700px !important;
  min-width: 700px !important;
}
#marquesina {
  white-space: nowrap;
}

/* ── App header bar (northContent) ────────────────────────────── */
#northContent {
  background:     var(--surface);
  border-bottom:  1px solid var(--border);
}

#bienvenidaDiv,
#bienvenidaDiv label#lblHola {
  color:      rgba(255,255,255,.92);
  font-size:  0.82rem;
  font-weight: 600;
}

#iconsDiv .icono {
  height: 20px;
  margin: 3px;
  border-radius: var(--radius-sm);
  transition: background var(--ease);
}
.icono:hover {
  background-color: rgba(255,255,255,.20);
}

/* ── Login page — neutralizar reglas globales, login.css maneja el diseño ── */
.divLogin fieldset {
  background:  transparent !important;
  box-shadow:  none !important;
  border:      none !important;
  padding:     0 !important;
  margin:      0 !important;
}