/* ========================================
   === BASE ===
   ======================================== */
.scs-form{display:grid;gap:12px}
.scs-row-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.scs-label{font-weight:600}
.scs-select,.scs-input{padding:8px 10px;border:1px solid #e5e7eb;border-radius:10px}
.scs-btnbar{display:flex;flex-wrap:wrap;gap:8px}
.scs-btnbar .button{padding:6px 12px!important}
.scs-preview{border:1px solid #e5e7eb;border-radius:10px;padding:12px;background:#fff;max-height:420px;overflow:auto}
.scs-hidden{display:none;}

/* Editor toolbar (Quicktags/TinyMCE) */
#scs-content-editor-toolbar,
.wp-editor-tools,
.quicktags-toolbar{display:flex!important;flex-wrap:wrap!important;gap:4px!important;padding:8px!important;background:#f9fafb!important;border:1px solid #e5e7eb!important;border-bottom:0!important;border-radius:10px 10px 0 0!important}
.quicktags-toolbar input[type="button"],
.wp-editor-toolbar button,
#wp-scs-content-media-buttons button{display:inline-block!important;width:auto!important;padding:4px 8px!important;margin:0!important;font-size:12px!important;line-height:1.4!important;min-height:auto!important;border:1px solid #d1d5db!important;background:#fff!important;border-radius:4px!important;cursor:pointer!important}
.quicktags-toolbar input[type="button"]:hover,
.wp-editor-toolbar button:hover,
#wp-scs-content-media-buttons button:hover{background:#f3f4f6!important;border-color:#9ca3af!important}
.wp-editor-container{border:1px solid #e5e7eb!important;border-radius:0 0 10px 10px!important;overflow:hidden}
.wp-editor-area,
#scs-content{width:100%!important;min-height:200px!important;padding:12px!important;border:0!important;border-radius:0!important}

/* Botones Visual/Código - Un solo botón que alterna */
.wp-editor-tabs{
  display:flex!important;
  gap:4px!important;
  margin:0!important;
  padding:0!important;
}

/* Ocultar botones nativos de WordPress */
#scs-content-html,
#scs-content-tmce{
  display:none!important;
}

/* Botón único toggle */
#scs-editor-toggle{
  display:inline-block!important;
  width:auto!important;
  padding:4px 8px!important;
  margin:0!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.4!important;
  min-height:auto!important;
  border:1px solid #d1d5db!important;
  background:#fff!important;
  border-radius:4px!important;
  cursor:pointer!important;
  color:#2271b1!important;
  text-decoration:none!important;
  transition:all 0.2s ease!important;
  vertical-align:middle!important;
}

#scs-editor-toggle:hover{
  background:#f3f4f6!important;
  border-color:#9ca3af!important;
  color:#2271b1!important;
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

/* Ocultar el botón inactivo - solo mostrar el activo */
#wp-scs-content-wrap.tmce-active #scs-content-html,
.wp-editor-wrap.tmce-active #scs-content-html{
  display:none!important;
}
#wp-scs-content-wrap.html-active #scs-content-tmce,
.wp-editor-wrap.html-active #scs-content-tmce{
  display:none!important;
}

/* Ocultar Quicktags cuando está en modo Visual */
.wp-editor-wrap.html-active .quicktags-toolbar{display:flex!important}
.wp-editor-wrap.tmce-active .quicktags-toolbar{display:none!important}

/* Alertas */
.scs-alert{border-radius:10px;padding:10px 12px;margin:10px 0;border:1px solid;display:block}
.scs-alert-info{border-color:#c7d2fe;background:#eef2ff;color:#1e3a8a}
.scs-alert-success{border-color:#bbf7d0;background:#ecfdf5;color:#065f46}
.scs-alert-warn{border-color:#fde68a;background:#fffbeb;color:#92400e}
.scs-alert-error{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.scs-muted{color:#6b7280}

/* Acciones en línea (responsive y compactas) */
.scs-actions{display:flex!important;align-items:center;gap:6px;flex-wrap:wrap!important;white-space:normal!important}
.scs-actions .button,.scs-actions a.button{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;padding:4px 8px!important;font-size:12px!important;line-height:1.3!important;margin:0!important;flex:0 0 auto;min-height:28px!important}
.scs-icon-btn{display:inline-flex!important;align-items:center;justify-content:center;padding:4px 6px!important}
.scs-icon{width:16px!important;height:16px!important;display:block}
.scs-actions-col{white-space:normal!important;width:auto!important}
/* En pantallas pequeñas, los botones pueden envolverse */
@media (max-width:1024px){
  .scs-actions{flex-wrap:wrap!important;gap:4px}
  .scs-actions .button,.scs-actions a.button{padding:4px 6px!important;font-size:11px!important}
}

/* Botón "Distribuir" (verde suave) */
.scs-btn--distribute{background:rgb(236,253,245)!important;border:1px solid rgb(134,239,172)!important;color:#065f46!important}
.scs-btn--distribute:hover,.scs-btn--distribute:focus{background:rgb(209,250,229)!important;border-color:rgb(110,231,183)!important}

/* ========================================
   === MODALES ===
   ======================================== */
.scs-modal-backdrop{position:fixed;inset:0;display:none;background:rgba(0,0,0,.35);z-index:10000}
.scs-modal{
  display:none;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(900px,95vw);
  max-height:90vh;
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  box-shadow:0 16px 48px rgba(0,0,0,.20),0 2px 8px rgba(0,0,0,.08);
  z-index:10001;
  overflow:hidden;
  flex-direction:column;
}
.scs-modal[style*="display: block"],
.scs-modal[style*="display:flex"],
.scs-modal[style*="display: block;"]{
  display:flex !important;
}
.scs-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #e5e7eb;background:#f5f6f7;cursor:move;user-select:none;flex-shrink:0}
.scs-modal-body{padding:16px;overflow-y:auto;flex:1;min-height:0}
.scs-modal-foot{padding:12px 16px;border-top:1px solid #eee;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;flex-shrink:0}
.scs-modal-msg{
  margin-bottom:12px;
}
.scs-modal-foot .button{
  padding:6px 14px !important;
  font-size:14px !important;
  line-height:1.4 !important;
  min-height:32px;
}
.scs-modal-foot .button.button-primary{
  padding:6px 16px !important;
}
.scs-modal-close{color:#6b7280;transition:color 0.2s ease}
.scs-modal-close:hover{color:#111827}

/* ========================================
   === CARDS Y COMPONENTES ===
   ======================================== */
.scs-card{border:1px solid #e5e7eb;border-radius:12px;background:#fff;margin-bottom:16px;}
.scs-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid #e5e7eb;}
.scs-card-body{padding:16px;}
.scs-card-empty{padding:16px;color:#6b7280;}
.scs-card-head .scs-icon-btn{flex:0 0 auto}

/* Badges */
.scs-badge {
  display:inline-block;
  padding:2px 6px;
  font-size:12px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  color:#374151;
  line-height:1;
}
.scs-badge-green { background:rgb(236,253,245); border-color:rgb(134,239,172); color:#065f46; }
.scs-badge-sent {
  background:#f3f4f6;
  border-color:#e5e7eb;
  color:#374151;
  font-weight:500;
}

/* Chips */
.scs-health { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
.scs-chip-container{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.scs-chip { 
  display:inline-block; 
  padding:2px 6px; 
  border-radius:999px; 
  font-size:12px; 
  line-height:1.4; 
  border:1px solid #e5e7eb; 
  background:#fff; 
}
.scs-chip-green  { border-color:#86efac; background:#ecfdf5; }
.scs-chip-blue   { border-color:#93c5fd; background:#eff6ff; }
.scs-chip-amber  { border-color:#fcd34d; background:#fffbeb; }
.scs-chip-purple { border-color:#c4b5fd; background:#f5f3ff; }
.scs-chip-gray   { border-color:#e5e7eb; background:#f9fafb; color:#6b7280; }

/* ========================================
   === SITIOS ===
   ======================================== */
.scs-sites-list{display:grid;gap:8px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:600px){.scs-sites-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.scs-site-item{border:1px solid #e5e7eb;border-radius:10px;padding:10px;display:flex;align-items:flex-start;gap:10px}
.scs-site-item input{margin-top:4px}
.scs-site-item--sent { background: #e8fbe8; }
.scs-site-item--sent .scs-site-name::before {
  content: "✅";
  margin-right: 6px;
}
.scs-site-item--installed-inactive { background: #f0f9f0; }
.scs-site-item--installed-inactive .scs-site-name::before {
  content: "✓";
  margin-right: 6px;
  color: #6b7280;
  opacity: 0.6;
}
.scs-site-name { 
  font-weight: 600; 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  flex-wrap: wrap; 
  min-width: 0; 
  max-width: 100%;
}
.scs-site-name > span {
  white-space: nowrap;
  flex-shrink: 0;
}
.scs-setting-days-badge {
  display: inline-block;
  background: #10b981;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.scs-site-item > div:not(:first-child) {
  flex: 1;
  min-width: 0;
}

/* Vistas Grid/Lista para Sitios */
.scs-site-card-list{
  display:none;
}
.scs-sites-grid.view-list{
  display:flex !important;
  flex-direction:column;
  gap:8px;
}
.scs-sites-grid.view-list .scs-site-card{
  padding:12px 16px !important;
  border-radius:8px;
  flex-direction:row !important;
  align-items:center;
}
.scs-sites-grid.view-list .scs-site-card-grid{
  display:none !important;
}
.scs-sites-grid.view-list .scs-site-card-list{
  display:flex !important;
  width:100%;
}
.scs-sites-grid:not(.view-list) .scs-site-card-grid{
  display:block;
}
.scs-sites-grid:not(.view-list) .scs-site-card-list{
  display:none !important;
}
.scs-sites-view-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.scs-sites-view-toggle input[type="radio"]{
  margin:0;
}

/* ========================================
   === COMPOSER ===
   ======================================== */
/* Contenedor de la tabla con scroll horizontal si es necesario */
.scs-card{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
.scs-card > div{min-width:0}
.scs-table{width:100%;border-collapse:collapse;border-spacing:0;table-layout:auto}
.scs-table.scs-table--composer{min-width:100%}
.scs-table.scs-table--composer th,
.scs-table.scs-table--composer td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid #e5e7eb}
.scs-table.scs-table--composer th{font-weight:600;background:#f9fafb}
.scs-table.scs-table--composer tbody tr:hover{background:#f9fafb}
/* Columna de acciones: permite que crezca según el contenido pero sin forzar ancho mínimo excesivo */
.scs-table.scs-table--composer .scs-actions-col{white-space:normal;min-width:280px}
/* Tabla responsive estilo "card" en móvil */
@media (max-width:780px){
  .scs-table.scs-table--composer thead{display:none}
  .scs-table.scs-table--composer,
  .scs-table.scs-table--composer tbody,
  .scs-table.scs-table--composer tr,
  .scs-table.scs-table--composer td{display:block!important;width:100%!important}
  .scs-table.scs-table--composer tr{border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fff}
  .scs-table.scs-table--composer td{border:0!important;padding:6px 0!important}
  .scs-table.scs-table--composer td::before{content:attr(data-label);display:inline-block;min-width:120px;font-weight:600;color:#374151;margin-right:8px}
  .scs-table.scs-table--composer td.scs-actions{display:flex!important;align-items:center;gap:4px;flex-wrap:wrap!important;padding-top:8px!important}
  .scs-table.scs-table--composer td.scs-actions::before{flex:0 0 100%;margin-bottom:6px;margin-right:0}
  .scs-table.scs-table--composer td.scs-actions .button,
  .scs-table.scs-table--composer td.scs-actions a.button{flex:1 1 auto;min-width:calc(50% - 2px);white-space:normal;font-size:11px!important;padding:4px 6px!important}
}

/* ========================================
   === PLUGINS ===
   ======================================== */
.scs-plugins-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:12px;
}
.scs-plugins-grid.view-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.scs-plugins-grid.view-list .scs-plugin-card{
  padding:12px 16px;
}
.scs-plugin-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px;
  background:#fff;
  transition:box-shadow .2s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}
.scs-plugin-card:hover{
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.scs-plugin-layout{display:flex;align-items:flex-start;gap:16px;}
.scs-plugin-icon{
  width:64px;
  height:64px;
  border-radius:12px;
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.scs-plugin-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.scs-plugin-icon-fallback{
  font-size:22px;
}
.scs-theme-release-notes-btn{
  transition:all 0.2s ease;
}
.scs-theme-release-notes-btn:hover{
  background:#2563eb !important;
  transform:scale(1.1);
  box-shadow:0 4px 8px rgba(0,0,0,0.3) !important;
}
.scs-theme-release-notes-btn.scs-hidden{
  display:none !important;
}
.scs-theme-release-notes-btn:not(.scs-hidden){
  display:flex !important;
}
.scs-plugin-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.scs-plugins-grid:not(.view-list) .scs-plugin-layout{
  flex-direction:column;
  flex:1;
}
.scs-plugins-grid:not(.view-list) .scs-plugin-actions{
  width:100%;
  justify-content:space-between;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #f3f4f6;
}
.scs-plugins-grid:not(.view-list) .scs-plugin-icon{
  align-self:flex-start;
}
.scs-plugin-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.scs-plugins-grid:not(.view-list) .scs-plugin-body{
  width:100%;
  min-height:60px;
}
.scs-plugins-grid:not(.view-list) .scs-plugin-actions label{
  font-size:13px;
}
.scs-plugins-grid.view-list .scs-plugin-layout{
  flex-direction:row;
  align-items:center;
  gap:12px;
}
.scs-plugins-grid.view-list .scs-plugin-icon{
  width:40px;
  height:40px;
  border-radius:8px;
}
.scs-plugins-grid.view-list .scs-plugin-body{
  flex:1;
  min-width:0;
}
.scs-plugins-grid.view-list .scs-plugin-desc{
  font-size:12px;
}
.scs-plugins-grid.view-list .scs-plugin-actions{
  margin-left:auto;
  flex-shrink:0;
  border-top:0;
  padding-top:0;
}
.scs-plugins-toolbar{
  gap:12px;
}
.scs-plugins-view-toggle input[type="radio"]{
  margin:0;
}

/* Typography & spacing refinements for plugin/theme UIs */
#scs-plugins,
#scs-plugins *:not(button),
#scs-themes,
#scs-themes *:not(button) {
  font-size:14px !important;
  line-height:1.55 !important;
}
#scs-plug-modal .scs-modal-body,
#scs-plug-modal .scs-modal-body *:not(button),
#scs-theme-modal .scs-modal-body,
#scs-theme-modal .scs-modal-body *:not(button) {
  font-size:14px !important;
  line-height:1.6 !important;
}
.scs-modal-msg{
  margin-bottom:12px;
}
.scs-plugin-card,
.scs-plugin-card *:not(button),
.scs-plugins-grid.view-list .scs-plugin-desc,
.scs-themes-grid .scs-plugin-card,
.scs-themes-grid .scs-plugin-card *:not(button) {
  font-size:14px !important;
  line-height:1.55 !important;
}
.scs-plugin-title,
.scs-themes-grid .scs-plugin-title {
  font-size:16px !important;
  line-height:1.4 !important;
  font-weight:600;
}
.scs-plugin-desc,
.scs-plugins-grid.view-list .scs-plugin-desc,
.scs-themes-grid .scs-plugin-desc {
  font-size:14px !important;
  line-height:1.6 !important;
  margin:0;
  color:#4b5563;
}
.scs-plugin-actions label,
.scs-plugin-meta span,
.scs-plugins-view-toggle span,
.scs-plugins-view-toggle label,
.scs-plugins-toolbar label,
.scs-themes-grid .scs-plugin-actions span {
  font-size:14px !important;
}
#scs-plug-changelog-content,
#scs-theme-changelog-content {
  font-size:14px !important;
  line-height:1.65 !important;
  color:#374151;
}

.scs-plugins-toolbar,
.scs-themes-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.scs-flex-spacer{flex:1;}
.scs-select-all-toggle{
  display:inline-flex;
  gap:6px;
  align-items:center;
  font-weight:500;
}
#scs-sett-all-wrap{
  margin-top:16px;
}
.scs-settings-config-section{
  margin-bottom:16px;
}
.scs-select-all-toggle--item{
  font-weight:400;
}

.scs-view-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.scs-view-toggle span{
  font-size:14px;
  color:#6b7280;
}
.scs-view-toggle label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:14px;
}

.scs-btn-manage,
#scs-plugins-install-selected,
.scs-theme-manage-btn{
  padding:6px 14px !important;
  font-size:14px !important;
}

/* ========================================
   === THEMES ===
   ======================================== */
/* (Los estilos de themes comparten muchos con plugins, ver sección Plugins) */

/* ========================================
   === LICENCIAS ===
   ======================================== */
.scs-license-section{
  margin-bottom:16px;
  padding:12px;
  border-radius:8px;
  border:1px solid transparent;
  display:none;
}
.scs-section-title{
  margin:0 0 8px 0;
  font-weight:600;
  font-size:14px;
  color:#111827;
}
.scs-section-title--warning{
  color:#856404;
}
.scs-license-section--warning{
  background:#fff3cd;
  border-color:#ffc107;
}
.scs-license-note{
  margin:0 0 12px 0;
  font-size:12px;
}
.scs-license-actions{
  display:flex;
  gap:8px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.scs-license-actions input{
  flex:1;
  padding:8px 12px;
  border:1px solid #ddd;
  border-radius:4px;
}
.scs-license-buttons{
  display:flex;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}
.scs-license-state{
  margin-top:8px;
  padding:8px;
  border-radius:4px;
  font-size:13px;
  background:#f3f4f6;
  color:#1f2937;
}
.scs-changelog{
  margin-top:12px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#f9fafb;
  display:none;
}
.scs-changelog-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.scs-changelog-toggle{
  background:none;
  border:none;
  cursor:pointer;
  font-size:18px;
  color:#6b7280;
}
.scs-changelog-content{
  max-height:300px;
  overflow-y:auto;
}

.scs-selected-list{
  margin-bottom:16px;
  padding:12px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:8px;
}