MediaWiki:Common.css

Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.

• Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
• Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
• Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5

/* SHIBUSEN-PORTAL-V2.1:START */
/* Colores accesibles: modo claro, oscuro y automatico de Citizen 3.x. */
.swx-portal {
  --swx-hero-bg: #edf6fa;
  --swx-guides-bg: #e8f5fa;
  --swx-patch-bg: #fff5e8;
  --swx-card-bg: #ffffff;
  --swx-bottom-bg: #eaf2f7;
  --swx-heading: #14263a;
  --swx-muted: #52667a;
  --swx-accent: #0a618b;
  --swx-primary: #17668d;
  --swx-border: #cbdce7;
  --swx-link: #075c89;
  --swx-input-bg: #ffffff;
  --swx-input-border: #a6c2d4;
  --swx-on-primary: #ffffff;
  --swx-soft-hover: #f1f8fc;
  --swx-shadow: rgba(19, 58, 84, .06);
  color: var(--swx-heading);
  line-height: 1.55;
}
html.skin-theme-clientpref-night .swx-portal {
  --swx-hero-bg: #102332;
  --swx-guides-bg: #112b39;
  --swx-patch-bg: #242933;
  --swx-card-bg: #161f2a;
  --swx-bottom-bg: #132331;
  --swx-heading: #e7f1fa;
  --swx-muted: #b5c6d6;
  --swx-accent: #89d0ef;
  --swx-primary: #29749b;
  --swx-border: #344b5d;
  --swx-link: #8acfee;
  --swx-input-bg: #0b1925;
  --swx-input-border: #456277;
  --swx-on-primary: #ffffff;
  --swx-soft-hover: #1d3242;
  --swx-shadow: rgba(0,0,0,.18);
}
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .swx-portal {
    --swx-hero-bg: #102332;
    --swx-guides-bg: #112b39;
    --swx-patch-bg: #242933;
    --swx-card-bg: #161f2a;
    --swx-bottom-bg: #132331;
    --swx-heading: #e7f1fa;
    --swx-muted: #b5c6d6;
    --swx-accent: #89d0ef;
    --swx-primary: #29749b;
    --swx-border: #344b5d;
    --swx-link: #8acfee;
    --swx-input-bg: #0b1925;
    --swx-input-border: #456277;
    --swx-on-primary: #ffffff;
    --swx-soft-hover: #1d3242;
    --swx-shadow: rgba(0,0,0,.18);
  }
}
.swx-portal,.swx-portal * { box-sizing: border-box; }
.swx-portal .swx-hero {
  background: var(--swx-hero-bg) !important;
  border: 1px solid var(--swx-border) !important;
  box-shadow: 0 10px 34px var(--swx-shadow);
}
.swx-portal .swx-hero-title {
  color: var(--swx-heading) !important;
  text-wrap: balance;
}
.swx-portal .swx-eyebrow,
.swx-portal .swx-card-icon,
.swx-portal .swx-tag { color: var(--swx-accent) !important; }
.swx-portal .swx-hero-description,
.swx-portal .swx-side,
.swx-portal .swx-section-aside,
.swx-portal .swx-card-desc,
.swx-portal .swx-bottom p,
.swx-portal .swx-feature p { color: var(--swx-muted) !important; }
.swx-portal .swx-section-heading,
.swx-portal .swx-card-title,
.swx-portal .swx-feature > div:nth-child(2),
.swx-portal .swx-bottom > div > div:nth-child(2) { color: var(--swx-heading) !important; }
.swx-portal .swx-side { border-left-color: var(--swx-border) !important; }
.swx-portal .swx-feature,
.swx-portal .swx-card,
.swx-portal .swx-bottom { border-color: var(--swx-border) !important; }
.swx-portal .swx-feature-guides { background: var(--swx-guides-bg) !important; }
.swx-portal .swx-feature-patch { background: var(--swx-patch-bg) !important; }
.swx-portal .swx-card { background: var(--swx-card-bg) !important; }
.swx-portal .swx-bottom { background: var(--swx-bottom-bg) !important; }
.swx-portal .swx-card-title {
  font-size: 19px;
  font-weight: 780;
  line-height: 1.25;
  margin: 0 0 11px;
}
.swx-portal .swx-card-desc {
  font-size: 14px;
  line-height: 1.6;
  min-height: 47px;
  margin: 0 0 17px;
}
.swx-portal .swx-card-icon {
  font-size: 11px;
  letter-spacing: 1.15px;
  font-weight: 740;
  margin-bottom: 23px;
}
.swx-portal .swx-card,
.swx-portal .swx-feature {
  display: flex;
  flex-direction: column;
  transition: background .15s ease,border-color .15s ease,transform .15s ease;
}
.swx-portal .swx-card:hover {
  background: var(--swx-soft-hover) !important;
  border-color: var(--swx-accent) !important;
  transform: translateY(-2px);
}
.swx-portal .swx-feature:hover {
  border-color: var(--swx-accent) !important;
  transform: translateY(-2px);
}
.swx-portal .swx-card-link { margin-top: auto; font-size: 14px; font-weight: 750; }
.swx-portal .swx-card-link a,
.swx-portal .swx-card-link a.new,
.swx-portal .swx-side-link a,
.swx-portal .swx-side-link a.new,
.swx-portal .swx-credits a,
.swx-portal .swx-credits a.new {
  color: var(--swx-link) !important;
  text-decoration: none !important;
}
.swx-portal .swx-card-link a:hover,
.swx-portal .swx-side-link a:hover,
.swx-portal .swx-credits a:hover { text-decoration: underline !important; }
.swx-portal .swx-hero-actions .swx-action-primary {
  background: var(--swx-primary) !important;
}
.swx-portal .swx-hero-actions .swx-action-secondary,
.swx-portal .swx-bottom .swx-action-secondary {
  background: transparent !important;
  border-color: var(--swx-border) !important;
}
.swx-portal .swx-hero-actions .swx-action-primary a,
.swx-portal .swx-hero-actions .swx-action-primary a.new {
  color: var(--swx-on-primary) !important;
  text-decoration: none !important;
}
.swx-portal .swx-hero-actions .swx-action-secondary a,
.swx-portal .swx-hero-actions .swx-action-secondary a.new,
.swx-portal .swx-bottom .swx-action-secondary a,
.swx-portal .swx-bottom .swx-action-secondary a.new {
  color: var(--swx-link) !important;
  text-decoration: none !important;
}
.swx-portal .swx-search .mw-inputbox-form,
.swx-portal .swx-search form {
  display: flex !important;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 9px;
  max-width: 730px;
  margin: 0;
}
.swx-portal .swx-search input[type="text"],
.swx-portal .swx-search input[type="search"] {
  flex: 1 1 290px;
  min-width: 200px;
  max-width: 580px;
  width: 100% !important;
  height: 49px;
  padding: 11px 16px;
  border: 1px solid var(--swx-input-border) !important;
  border-radius: 9px;
  background: var(--swx-input-bg) !important;
  color: var(--swx-heading) !important;
  font-size: 15px;
  box-sizing: border-box;
}
.swx-portal .swx-search input[type="text"]::placeholder,
.swx-portal .swx-search input[type="search"]::placeholder {
  color: var(--swx-muted) !important;
  opacity: 1;
}
.swx-portal .swx-search input[type="submit"] {
  height: 49px;
  padding: 0 20px;
  border: 1px solid var(--swx-primary) !important;
  border-radius: 9px;
  background: var(--swx-primary) !important;
  color: var(--swx-on-primary) !important;
  font-weight: 700;
  cursor: pointer;
}
.swx-portal .swx-search input[type="submit"]:hover { filter: brightness(1.12); }
.swx-portal .swx-search-fallback a {
  display: inline-flex;
  padding: 12px 20px;
  border-radius: 9px;
  background: var(--swx-primary);
  color: var(--swx-on-primary) !important;
  font-weight: 700;
  text-decoration: none;
}
.swx-portal .swx-credits {
  font-size: 12px;
  color: var(--swx-muted);
  margin: 18px 4px 0;
  text-align: right;
}
@media (max-width:840px) {
  .swx-portal .swx-hero { padding: 26px !important; }
  .swx-portal .swx-side { display: none !important; }
  .swx-portal .swx-feature { flex-basis: 100% !important; }
}
@media (max-width:580px) {
  .swx-portal .swx-hero { padding: 20px !important; }
  .swx-portal .swx-hero-title { font-size: 32px !important; }
  .swx-portal .swx-hero-description { font-size: 15px !important; }
  .swx-portal .swx-card { min-width: 100% !important; }
  .swx-portal .swx-search input[type="submit"] { width: 100%; }
  .swx-portal .swx-feature { padding: 21px !important; }
}
/* SHIBUSEN-PORTAL-V2.1:END */

/* SHIBUSEN-CATEGORY-INDEX-V1:START */
/* Compartido por todas las categorias. Colores adaptativos al tema Citizen. */
.swcat-index {
  --sc-bg: #f0f6fa;
  --sc-card: #ffffff;
  --sc-elevated: #e9f2f8;
  --sc-line: #d3e1e9;
  --sc-text: #172a3a;
  --sc-muted: #52697d;
  --sc-accent: #176f98;
  --sc-accent-soft: #e7f3fa;
  --sc-field: #ffffff;
  box-sizing: border-box;
  color: var(--sc-text);
  margin: 0 0 2.5rem;
  max-width: 1220px;
  font-size: 15px;
}
html.skin-theme-clientpref-night .swcat-index {
  --sc-bg: #102332;
  --sc-card: #151e29;
  --sc-elevated: #1a3040;
  --sc-line: #34495a;
  --sc-text: #e7eff8;
  --sc-muted: #adc0d0;
  --sc-accent: #86cbea;
  --sc-accent-soft: #1c3546;
  --sc-field: #0e1925;
}
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .swcat-index {
    --sc-bg: #102332;
    --sc-card: #151e29;
    --sc-elevated: #1a3040;
    --sc-line: #34495a;
    --sc-text: #e7eff8;
    --sc-muted: #adc0d0;
    --sc-accent: #86cbea;
    --sc-accent-soft: #1c3546;
    --sc-field: #0e1925;
  }
}
.swcat-index * {box-sizing: border-box;}
.swcat-hero {
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:30px 35px; border-radius:18px; border:1px solid var(--sc-line);
  background:var(--sc-bg); margin:0 0 22px;
}
.swcat-hero-copy {flex:1 1 500px; min-width:0;}
.swcat-eyebrow {
  color:var(--sc-accent); font-size:11px; font-weight:750;
  letter-spacing:1.65px; margin-bottom:12px;
}
.swcat-title {font-size:clamp(27px,3.4vw,39px);font-weight:790;letter-spacing:-.9px;line-height:1.16;margin:0 0 11px;color:var(--sc-text);}
.swcat-description {font-size:15px;line-height:1.65;color:var(--sc-muted);margin:0;max-width:680px;}
.swcat-stat {flex:0 0 162px;border-left:1px solid var(--sc-line);padding-left:27px;color:var(--sc-muted);font-size:12px;}
.swcat-stat-number {display:block;font-size:36px;font-weight:790;color:var(--sc-text);letter-spacing:-.6px;line-height:1.1;margin-bottom:6px;}
.swcat-toolbar {display:flex;gap:13px;align-items:center;justify-content:space-between;margin:0 0 16px;}
.swcat-search {display:flex;flex:1 1 500px;align-items:center;gap:9px;padding:0 14px;min-width:0;height:48px;background:var(--sc-field);border:1px solid var(--sc-line);border-radius:11px;}
.swcat-search:focus-within {border-color:var(--sc-accent);outline:2px solid var(--sc-accent-soft);outline-offset:1px;}
.swcat-search-icon {color:var(--sc-accent);font-size:23px;line-height:1;}
.swcat-search-field {width:100%;height:44px;padding:0;color:var(--sc-text);background:transparent;border:0 !important;outline:0 !important;box-shadow:none !important;font:inherit;}
.swcat-search-field::placeholder {color:var(--sc-muted);opacity:1;}
.swcat-sort {display:flex;gap:10px;align-items:center;color:var(--sc-muted);font-size:13px;white-space:nowrap;}
.swcat-sort-select {height:46px;border:1px solid var(--sc-line);border-radius:10px;background:var(--sc-field);color:var(--sc-text);padding:0 13px;cursor:pointer;}
.swcat-letters {display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px;}
.swcat-letter {min-width:29px;height:32px;padding:0 7px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--sc-muted);font-size:12px;font-weight:650;cursor:pointer;}
.swcat-letter:hover {background:var(--sc-accent-soft);color:var(--sc-text);}
.swcat-letter[aria-pressed="true"] {background:var(--sc-accent-soft);color:var(--sc-accent);border-color:var(--sc-line);}
.swcat-result-bar {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 13px;padding:0 2px;}
.swcat-count {font-size:14px;font-weight:750;color:var(--sc-text);}
.swcat-live {font-size:12px;color:var(--sc-muted);}
.swcat-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.swcat-item {display:flex;align-items:center;gap:8px;min-width:0;min-height:58px;padding:13px 16px;background:var(--sc-card);border:1px solid var(--sc-line);border-radius:11px;color:var(--sc-text) !important;text-decoration:none !important;transition:border-color .15s,transform .15s,background .15s;}
.swcat-item:hover {background:var(--sc-elevated);border-color:var(--sc-accent);transform:translateY(-1px);}
.swcat-item-name {flex:1;min-width:0;font-weight:650;overflow-wrap:anywhere;line-height:1.35;}
.swcat-item-tag {font-size:10px;color:var(--sc-muted);border:1px solid var(--sc-line);border-radius:5px;padding:3px 5px;}
.swcat-item-arrow {font-size:22px;line-height:1;color:var(--sc-accent);}
.swcat-pager {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;margin:23px 0 7px;}
.swcat-pager-button {border-radius:8px;border:1px solid var(--sc-line);background:var(--sc-card);color:var(--sc-text);padding:10px 15px;font-weight:650;cursor:pointer;}
.swcat-pager-button:hover:not(:disabled){border-color:var(--sc-accent);background:var(--sc-elevated);}
.swcat-pager-button:disabled{opacity:.4;cursor:not-allowed;}
.swcat-page-label {color:var(--sc-muted);font-size:13px;}
.swcat-empty {grid-column:1/-1;border:1px dashed var(--sc-line);border-radius:11px;padding:26px;text-align:center;color:var(--sc-muted);}
.swcat-source-details{margin-top:26px;border-top:1px solid var(--sc-line);padding-top:18px;color:var(--sc-muted);font-size:12px;line-height:1.5;}
.swcat-source-details summary {cursor:pointer;font-weight:650;color:var(--sc-muted);}
.swcat-source-details .mw-parser-output {padding-top:12px;}
body.swcat-index-ready .mw-category-generated {display:none !important;}
/* Mejora progresiva: lista nativa legible si JS no carga. */
body.ns-14:not(.swcat-index-ready) .mw-category-generated .mw-category {
  column-count:3;column-gap:30px;
}
body.ns-14:not(.swcat-index-ready) .mw-category-generated .mw-category-group {
  break-inside:avoid;padding:12px 15px;margin:0 0 12px;border:1px solid var(--border-color-base,#3b4b59);border-radius:10px;
}
@media (max-width:860px) {
  .swcat-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .swcat-hero {padding:25px;}
  body.ns-14:not(.swcat-index-ready) .mw-category-generated .mw-category {column-count:2;}
}
@media (max-width:580px) {
  .swcat-hero {padding:22px;flex-direction:column;align-items:stretch;gap:16px;}
  .swcat-stat {flex:auto;padding:14px 0 0;border:0;border-top:1px solid var(--sc-line);}
  .swcat-stat-number {font-size:27px;display:inline;margin-right:7px;}
  .swcat-toolbar {flex-direction:column;align-items:stretch;}
  .swcat-search,.swcat-sort{width:100%;}
  .swcat-grid {grid-template-columns:1fr;}
  .swcat-live{display:none;}
  body.ns-14:not(.swcat-index-ready) .mw-category-generated .mw-category {column-count:1;}
}
/* SHIBUSEN-CATEGORY-INDEX-V1:END */