/* ==============================================
   Overrides visuales ACOTADOS
   - Negro solo en el canvas exterior
   - Admin y Access en estilo oscuro
   - Formularios, Históricos, Mediciones y CFE
     conservan su estilo original interno
   ============================================== */

:root{
  --chrome-bg:#02060b;
  --chrome-bg-2:#07101a;
  --panel-dark:#0b1220;
  --panel-dark-2:#0f172a;
  --panel-line:rgba(148,163,184,.18);
  --panel-line-2:rgba(148,163,184,.12);
  --panel-text:#e5eef9;
  --panel-muted:#94a3b8;
}

html,
body{
  background: linear-gradient(180deg, var(--chrome-bg-2) 0%, var(--chrome-bg) 100%) !important;
  min-height:100%;
}

/* Solo el exterior. NO oscurecer pantallas internas. */
#screenAdmin,
#screenAccess,
#formWrapper,
#screenHistoricos,
#screenHistoricosMed,
#screenMediciones,
#screenCfe{
  background: transparent !important;
}

/* El menú ya tiene su propia piel visual */
#screenMenu{ background: transparent !important; }

/* ============================
   ADMINISTRACIÓN / ACCESO OSCURO
   ============================ */
#screenAdmin > .panel,
#screenAccess > .panel{
  background: linear-gradient(180deg, rgba(11,18,32,.96), rgba(7,12,22,.98)) !important;
  border: 1px solid var(--panel-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.32) !important;
  color: var(--panel-text) !important;
  padding: 18px !important;
}

#screenAdmin h3,
#screenAccess h3{
  color: #f8fbff;
  font-size: 24px;
  letter-spacing: .3px;
  margin-top: 4px;
}

#screenAdmin h4,
#screenAccess h4,
#screenAdmin label,
#screenAccess label{
  color: var(--panel-text) !important;
}

#screenAdmin .status .alert,
#screenAccess .status .alert{
  border-radius: 12px;
}

#screenAdmin .table,
#screenAccess .table,
#screenAdmin table,
#screenAccess table{
  width:100%;
  border-collapse: collapse;
  background: rgba(2,6,11,.72) !important;
  color: var(--panel-text) !important;
  border-radius: 14px;
  overflow: hidden;
}

#screenAdmin th,
#screenAccess th,
#screenAdmin td,
#screenAccess td{
  border: 1px solid var(--panel-line-2) !important;
}

#screenAdmin th,
#screenAccess th{
  background: rgba(15,23,42,.96) !important;
  color: #cbd5e1 !important;
  font-weight: 700;
}

#screenAdmin td,
#screenAccess td{
  background: rgba(3,7,18,.72) !important;
  color: var(--panel-text) !important;
}

#screenAdmin input,
#screenAdmin select,
#screenAdmin textarea,
#screenAccess input,
#screenAccess select,
#screenAccess textarea{
  background: rgba(2,6,11,.95) !important;
  color: #f8fbff !important;
  border: 1px solid rgba(59,130,246,.22) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
#screenAdmin input::placeholder,
#screenAdmin textarea::placeholder,
#screenAccess input::placeholder,
#screenAccess textarea::placeholder{
  color:#7c8aa0 !important;
}

#screenAdmin .btn.gray,
#screenAccess .btn.gray{
  background: rgba(255,255,255,.06) !important;
  color: #e5eef9 !important;
  border:1px solid rgba(148,163,184,.2) !important;
}
#screenAdmin .btn.blue,
#screenAccess .btn.blue{
  background: linear-gradient(180deg,#2388ff,#0d6efd) !important;
  color:#fff !important;
}

/* =============================================
   RESTAURACIÓN EXPLÍCITA DE PANTALLAS INTERNAS
   (para neutralizar cualquier override viejo)
   ============================================= */

/* Formulario principal */
#formWrapper,
#formWrapper .wrapper{
  background: transparent !important;
}
#formWrapper table{
  background:#fff !important;
}
#formWrapper th{
  background:#e9e9e9 !important;
  color:#000 !important;
}
#formWrapper td{
  background:#fff !important;
  color:#000 !important;
}
#formWrapper input,
#formWrapper select,
#formWrapper textarea{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #aaa !important;
}

/* Históricos formato */
#screenHistoricos .card,
#screenHistoricos .table,
#screenHistoricos .table-card,
#screenHistoricos .sheet,
#screenHistoricos .header{
  background:#fff !important;
  color:#111827 !important;
}
#screenHistoricos th,
#screenHistoricos .title,
#screenHistoricos .meta th{
  background:#efefef !important;
  color:#111827 !important;
}
#screenHistoricos td,
#screenHistoricos .meta td{
  background:#fff !important;
  color:#111827 !important;
}
#screenHistoricos input,
#screenHistoricos select,
#screenHistoricos textarea{
  background:#fff !important;
  color:#111827 !important;
  border:1px solid #cfd8dc !important;
}

/* Históricos mediciones mensual y diario */
#screenHistoricosMed .card,
#screenHistoricosMed .table-card,
#screenHistoricosMed .header,
#screenHistoricosMed .sheet,
#screenHistoricosMedDia .card,
#screenHistoricosMedDia .table-card,
#screenHistoricosMedDia .header,
#screenHistoricosMedDia .sheet{
  background:#fff !important;
  color:#111827 !important;
}
#screenHistoricosMed th,
#screenHistoricosMed .title,
#screenHistoricosMed .meta th,
#screenHistoricosMedDia th,
#screenHistoricosMedDia .title,
#screenHistoricosMedDia .meta th{
  background:#efefef !important;
  color:#111827 !important;
}
#screenHistoricosMed td,
#screenHistoricosMed .meta td,
#screenHistoricosMedDia td,
#screenHistoricosMedDia .meta td{
  background:#fff !important;
  color:#111827 !important;
}
#screenHistoricosMed input,
#screenHistoricosMed select,
#screenHistoricosMed textarea,
#screenHistoricosMedDia input,
#screenHistoricosMedDia select,
#screenHistoricosMedDia textarea{
  background:#fff !important;
  color:#111827 !important;
  border:1px solid #cfd8dc !important;
}

/* Mediciones */
#screenMediciones .card,
#screenMediciones .table-card,
#screenMediciones .sheet,
#screenMediciones .header,
#screenMediciones .table{
  background:#fff !important;
  color:#111827 !important;
}
#screenMediciones th,
#screenMediciones .title,
#screenMediciones .meta th{
  background:#efefef !important;
  color:#111827 !important;
}
#screenMediciones td,
#screenMediciones .meta td{
  background:#fff !important;
  color:#111827 !important;
}
#screenMediciones input,
#screenMediciones select,
#screenMediciones textarea{
  background:#fff !important;
  color:#111827 !important;
  border:1px solid #cfd8dc !important;
}

/* CFE */
#screenCfe .card,
#screenCfe .table,
#screenCfe .table-card,
#screenCfe .sheet,
#screenCfe .header,
#screenCfe .panel,
#screenCfe .upload-box,
#screenCfe .preview-wrap{
  background:#fff !important;
  color:#111827 !important;
}
#screenCfe th,
#screenCfe .title,
#screenCfe .meta th,
#screenCfe .section-head{
  background:#efefef !important;
  color:#111827 !important;
}
#screenCfe td,
#screenCfe .meta td{
  background:#fff !important;
  color:#111827 !important;
}
#screenCfe input,
#screenCfe select,
#screenCfe textarea{
  background:#fff !important;
  color:#111827 !important;
  border:1px solid #cfd8dc !important;
}

/* Evita heredar texto oscuro en el menú */
#screenMenu, #screenMenu *{
  color: unset;
}

/* ==========================================
   ACCESS SCREEN – BLOQUE LIMPIO DEFINITIVO
   ========================================== */

#screenAccess #accessBlock{
  background: linear-gradient(180deg, rgba(7,16,28,.96), rgba(8,20,36,.94)) !important;
  border: 1px solid rgba(120,160,255,.18) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.28) !important;
  color: #f5f7ff !important;
}

/* aviso superior */
#screenAccess .access-note-box,
#screenAccess #accessStatus,
#screenAccess #accessStatus .alert,
#screenAccess #accessStatus:not(:empty){
  background: rgba(11,18,32,.92) !important;
  border: 1px solid rgba(59,130,246,.22) !important;
  color: #e8eefc !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

#screenAccess #accessStatus *,
#screenAccess .access-note-box *{
  color: #e8eefc !important;
}

/* usuario */
#screenAccess .access-user-row{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  max-width: 420px !important;
}

#screenAccess .access-user-select,
#screenAccess #accessUserSelect{
  width: 100% !important;
  min-width: 0 !important;
}

/* botones */
#screenAccess #btnAccessLoad,
#screenAccess .access-pill-btn{
  all: unset;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 12px 26px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,#2b8cff,#0d6efd) !important;
  color: #fff !important;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37,99,235,.25);
}

#screenAccess #btnAccessSave,
#screenAccess .access-save-btn{
  all: unset;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,#22c55e,#16a34a) !important;
  color: #fff !important;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(34,197,94,.18);
}

#screenAccess #btnAccessAddPair,
#screenAccess .access-add-btn{
  all: unset;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,#14b8a6,#0f766e) !important;
  color: #fff !important;
  font-weight: 800;
  cursor: pointer;
}

/* switch allow all */
#screenAccess .access-allowall-row{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin:12px 0 18px !important;
  color:#f8fbff !important;
  font-weight:600 !important;
  position: relative;
}

#screenAccess .access-allowall-row input[type="checkbox"]{
  position:absolute !important;
  opacity:0 !important;
  width:1px !important;
  height:1px !important;
}

#screenAccess .access-allowall-row::before{
  content:"";
  width:52px;
  height:30px;
  border-radius:999px;
  background: rgba(15,23,42,.95);
  border:1px solid rgba(148,163,184,.22);
  display:inline-block;
  box-sizing:border-box;
  transition:all .18s ease;
  flex: 0 0 auto;
}

#screenAccess .access-allowall-row::after{
  content:"";
  width:22px;
  height:22px;
  border-radius:50%;
  background:#f8fbff;
  position:absolute;
  left:4px;
  top:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
  transition:all .18s ease;
}

#screenAccess .access-allowall-row:has(#chkAllowAll:checked)::before{
  background: linear-gradient(135deg,#22c55e,#16a34a);
  border-color: rgba(34,197,94,.65);
}

#screenAccess .access-allowall-row:has(#chkAllowAll:checked)::after{
  transform: translateX(22px);
}

/* editor de pares */
#screenAccess #accessPairsEditor,
#screenAccess .access-pairs-editor{
  display:grid !important;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px !important;
  max-width: 980px !important;
  align-items:end !important;
  background: rgba(5,10,18,.42) !important;
  border: 1px dashed rgba(59,130,246,.12) !important;
  border-radius: 16px !important;
  padding: 14px !important;
}

/* tabla */
#screenAccess .access-table,
#screenAccess table{
  margin-top: 8px;
}

#screenAccess #accessPairsTbody td button{
  border-radius: 10px !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border: 1px solid rgba(148,163,184,.2) !important;
  padding: 8px 14px !important;
}

@media (max-width: 820px){
  #screenAccess #accessPairsEditor,
  #screenAccess .access-pairs-editor{
    grid-template-columns: 1fr !important;
  }

  #screenAccess #btnAccessAddPair,
  #screenAccess .access-add-btn{
    width: 100% !important;
  }
}