/* Control Web unificado F1.1 · Solo afecta #webControl */
#webControl {
  padding: 16px 0;
  color: #19324d;
}

#webControl * { box-sizing: border-box; }

#webControl .web-modern {
  max-width: 1560px;
  margin: auto;
}

#webControl .web-title {
  font-size: 1.65rem;
  font-weight: 750;
  margin: 0 0 12px;
}

#webControl .web-banner {
  background: #eaf3ff;
  border: 1px solid #bdd8f4;
  border-radius: 12px;
  padding: 13px;
  margin-bottom: 18px;
}

#webControl .web-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr);
  gap: 16px;
  align-items: start;
}

#webControl .web-panel {
  background: #fff;
  border: 1px solid #d2e0ed;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 3px 12px rgba(20,50,80,.06);
  min-width: 0;
}

#webControl .web-panel h3 {
  font-size: 1.14rem;
  margin: 0 0 12px;
}

#webControl .web-sidebar {
  display: grid;
  gap: 16px;
}

#webControl .web-help {
  color: #536a82;
  font-size: .88rem;
}

#webControl .web-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin: 14px 0;
}

#webControl button {
  border-radius: 9px;
  padding: 10px 12px;
  cursor: pointer;
}

#webControl input,
#webControl select {
  max-width: 100%;
  padding: 9px;
  border: 1px solid #bacddd;
  border-radius: 8px;
}

#webControl input[type=checkbox] {
  width: auto;
  padding: 0;
}

#webControl .web-search {
  width: min(260px, 100%);
  margin: 5px 0 12px;
}

#webControl .web-range {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

#webControl .web-range label {
  display: grid;
  gap: 4px;
  font-size: .86rem;
  font-weight: 650;
}

#webControl .web-range input { width: 85px; }

#webControl .web-count {
  display: block;
  background: #f0f5fb;
  padding: 12px;
  border-radius: 9px;
  font-weight: 700;
}

#webControl .web-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 9px;
  max-height: 620px;
  overflow-y: auto;
  padding: 4px;
}

#webControl .web-pc {
  border: 1px solid #d3e0ec;
  border-left: 6px solid #8999a9;
  background: #f8fbff;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
}

#webControl .web-pc.chosen {
  outline: 2px solid #e49b24;
  background: #fff9ec;
}

#webControl .web-pc[hidden] { display: none; }

#webControl .web-pc small {
  color: #536b81;
  font-size: .78rem;
}

#webControl .web-sites {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

#webControl .web-site {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid #d8e3ef;
  border-radius: 9px;
  background: #f5f9fd;
  overflow-wrap: anywhere;
}

#webControl .web-result {
  background: #f4f7fb;
  padding: 12px;
  border-radius: 9px;
  margin-top: 12px;
  overflow-wrap: anywhere;
}

#webControl .web-allowed,
#webControl .web-blocked {
  padding: 10px;
  border-radius: 8px;
  margin: 7px 0;
}

#webControl .web-allowed {
  background: #dcf3e6;
  color: #146b41;
}

#webControl .web-blocked {
  background: #fce4e9;
  color: #a3233a;
}

#webControl .web-footnote {
  font-size: .78rem;
  color: #526a80;
}

@media (max-width: 950px) {
  #webControl .web-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 550px) {
  #webControl .web-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* CINFORMA_SUPERVISION_13LY */
#webControl .web-presence-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
}

#webControl .web-presence-stat {
  background: #f3f7fc;
  border: 1px solid #d3e1ee;
  border-radius: 11px;
  padding: 12px;
  min-width: 0;
}

#webControl .web-presence-stat strong {
  display: block;
  font-size: 1.5rem;
  line-height: 1.2;
}

#webControl .web-presence-stat span {
  display: block;
  margin-top: 5px;
  font-size: .78rem;
  color: #4d657d;
}

#webControl .web-presence-stat.online strong {
  color: #16764a;
}

#webControl .web-presence-stat.offline strong {
  color: #97672c;
}

#webControl .web-presence-stat.missing strong {
  color: #627082;
}

@media (max-width: 600px) {
  #webControl .web-presence-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* CINFORMA_UX_13MA - Cuadrícula compacta */
#webControl .web-grid {
  grid-template-columns:
    repeat(auto-fill, minmax(100px, 1fr));
  gap: 7px;
  max-height: 520px;
}

#webControl .web-pc {
  padding: 9px;
  gap: 4px;
  min-height: 76px;
}

#webControl .web-pc strong {
  font-size: .87rem;
}

#webControl .web-pc small {
  font-size: .75rem;
}

#webControl .web-panel {
  padding: 16px;
}

#webControl .web-result {
  font-size: .9rem;
  line-height: 1.45;
}

@media (max-width: 550px) {
  #webControl .web-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* CINFORMA_WEB_LIBRARY_UI_13MI */

.web-library-panel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(120,130,145,.3);
}

.web-library-panel h3 {
  margin: 0 0 8px;
}

.web-library-panel h4 {
  margin: 16px 0 8px;
  font-size: .95rem;
}

.web-library-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 9px 0;
}

.web-library-form input,
.web-library-form select {
  min-width: 0;
  flex: 1 1 125px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid #b9c3d0;
}

.web-library-form button,
.web-library-panel > button {
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.web-library-form button:disabled,
.web-library-panel > button:disabled {
  opacity: .55;
  cursor: wait;
}

.web-library-sites {
  display: grid;
  gap: 7px;
  max-height: 225px;
  overflow-y: auto;
}

.web-library-site {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(120,130,145,.25);
  border-radius: 9px;
  cursor: pointer;
}

.web-library-site span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.web-library-site small {
  overflow-wrap: anywhere;
  opacity: .75;
}

.web-library-selection,
.web-library-status {
  margin: 10px 0;
  font-size: .85rem;
}

.web-library-error {
  color: #b42318;
}

.web-library-panel .web-footnote {
  margin-top: 12px;
}



/* CINFORMA_WEB_UNIFIED_13ML */

.web-library-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.web-library-panel h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}

.web-library-site {
  transition: background .15s, border-color .15s;
}

.web-library-site:has(input:checked) {
  background: #e9f5ec;
  border-color: #8dc5a1;
}

.web-library-site:has(input:not(:checked)) {
  background: #fff1f1;
  border-color: #e0b3b3;
}

.web-library-site input {
  accent-color: #26764e;
}

.web-library-site small {
  font-size: .75rem;
}

.web-library-status {
  overflow-wrap: anywhere;
}