/*
Theme Name: Press95
Theme URI: https://example.com/press95
Author: Amuki
Author URI: https://amuki.cochambamba.com.bo
Description: Un tema de WordPress inspirado en la estetica retro de Windows 95, creditos a R95-fonts por las fuentes estilizadas.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: press95
*/

/* ==========================================================================
   MS Sans Serif 96dpi (VGA) - R95 Fonts - https://github.com/React95/R95-fonts
   ========================================================================== */
@import url('fonts/ms-sans-serif.css');

/* Mapa de tamaños: Windows usa 12pt como base (96dpi VGA) */
/* 8pt  → UI pequeña, tooltips, barra de tareas               */
/* 10pt → texto cuerpo normal                                  */
/* 12pt → texto principal, títulos de ventana                  */
/* 14pt → encabezados h3, h4                                   */
/* 18pt → encabezados h2                                       */
/* 24pt → encabezados h1                                       */


body {
  background-color: #008080; /* Fondo clásico verde azulado (Teal) */
  color: #222;
  margin: 0;
  padding: 0;
  line-height: 1.4;
  font-size: 11px; /* Tamaño base auténtico de Windows 95/98 */
}

/* ==========================================================================
   FUENTES Y RESET UNIVERSAL (MAX SPECIFICITY & CSS VARIABLES)
   ========================================================================== */
/* Hackear las variables CSS nativas de WordPress que fuerzan las fuentes modernas */
:root, body, #press95-root {
  --r95-font-8pt:  'R95 Sans Serif HiRes 8pt',  Tahoma, Arial, sans-serif;
  --r95-font-10pt: 'R95 Sans Serif HiRes 10pt', Tahoma, Arial, sans-serif;
  --r95-font-12pt: 'R95 Sans Serif HiRes 12pt', Tahoma, Arial, sans-serif;
  --r95-font-14pt: 'R95 Sans Serif HiRes 14pt', Tahoma, Arial, sans-serif;
  --r95-font-18pt: 'R95 Sans Serif HiRes 18pt', Tahoma, Arial, sans-serif;
  --r95-font-24pt: 'R95 Sans Serif HiRes 24pt', Tahoma, Arial, sans-serif;
  --wp--preset--font-family--system-font: 'R95 Sans Serif HiRes 12pt', Tahoma, Arial, sans-serif !important;
  --wp--preset--font-family--sans-serif:  'R95 Sans Serif HiRes 12pt', Tahoma, Arial, sans-serif !important;
  --wp--preset--font-family--default:     'R95 Sans Serif HiRes 12pt', Tahoma, Arial, sans-serif !important;
  --font-family: 'R95 Sans Serif HiRes 12pt', Tahoma, Arial, sans-serif !important;
}

html, body, html body * {
  font-family: 'R95 Sans Serif HiRes 12pt', Tahoma, Arial, sans-serif !important;
  -webkit-font-smoothing: none !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-smooth: never !important;
  font-style: normal !important;
}

/* Restaurar la barra de administración de WordPress a su estado normal */
html body #wpadminbar, html body #wpadminbar * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
  font-smooth: auto !important;
  font-size: 13px !important;
}

/* Forzar estilos de botón retro al botón de publicar comentarios y otros submits de WP */
.comment-form .submit, .search-submit, .form-submit button {
  box-sizing: border-box !important;
  border: none !important;
  color: transparent !important;
  text-shadow: 0 0 #222 !important;
  background: #c0c0c0 !important;
  box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf !important;
  min-width: 75px !important;
  min-height: 23px !important;
  padding: 4px 12px !important;
  font-family: 'R95 Sans Serif HiRes 12pt', Tahoma, Arial, sans-serif !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

.comment-form .submit:active, .search-submit:active, .form-submit button:active {
  box-shadow: inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px #808080 !important;
  padding: 6px 11px 2px 13px !important; /* Desplazamiento visual al presionar */
}

/* Tamaño base heredado correctamente en textos, widgets y meta */
body, .post-content, .post-content p, .title-bar-text, .widget, .comment-content, .comment-author {
  font-size: 12px !important;
}

/* Normalizar encabezados (aumentados ligeramente para compensar el nuevo tamaño base) */
h1, h2, h3, h4, h5, h6, .wp-block-heading, .comments-title {
  font-weight: bold !important;
  line-height: 1.2 !important;
  margin: 10px 0 !important;
}
/* Escalado de fuentes R95 por tamaño: cada nivel usa el corte exacto de la fuente bitmap */
h1 {
  font-size: 24px !important;
  font-family: 'R95 Sans Serif HiRes 24pt', Tahoma, Arial, sans-serif !important;
}
h2 {
  font-size: 18px !important;
  font-family: 'R95 Sans Serif HiRes 18pt', Tahoma, Arial, sans-serif !important;
}
h3 {
  font-size: 14px !important;
  font-family: 'R95 Sans Serif HiRes 14pt', Tahoma, Arial, sans-serif !important;
}
h4, h5, h6 {
  font-size: 12px !important;
  font-family: 'R95 Sans Serif HiRes 12pt', Tahoma, Arial, sans-serif !important;
}

/* Barra de tareas y UI pequeña: 8pt */
.win95-taskbar, .win95-taskbar *, .taskbar-clock, .media-time-current, .media-time-total {
  font-family: 'R95 Sans Serif HiRes 8pt', Tahoma, Arial, sans-serif !important;
}

.site-wrapper {
  max-width: 1000px;
  margin: 20px auto;
  display: flex;
  gap: 20px;
  align-items: flex-start; /* Esto es crucial para que el sticky sidebar funcione */
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.site-sidebar {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Ajustes para elementos de WordPress */
img {
  max-width: 100%;
  height: auto;
}

.post-meta {
  font-size: 12px;
  margin-bottom: 10px;
  color: #555;
}

/* Título del post (h1 en single, h2 en index) */
.post-title {
  color: #000;
  text-decoration: none;
}
.post-title a {
  text-decoration: none;
  color: inherit;
}

.read-more-btn {
  margin-top: 15px;
  display: inline-block;
  text-decoration: none;
  color: black;
}

/* Evitar outline por defecto del navegador en enlaces retro */
a {
  color: #0000ff;
}
a:visited {
  color: #800080;
}

/* Widgets del sidebar */
.widget {
  margin-bottom: 0; /* El gap del flex padre ya gestiona el espaciado */
}

.widget ul {
  list-style: none;
  padding-left: 0;
}
.widget ul li {
  margin-bottom: 5px;
}

/* Header Overlapping Windows */
.site-header {
  max-width: 1000px;
  margin: 20px auto;
  position: relative;
  height: 220px; /* Aumentado para acomodar logo y cascada */
}

.header-windows-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.header-home-window {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 380px;
  z-index: 1; /* Fondo */
}

.header-social-window {
  position: absolute;
  top: 50px; /* Cascada: un poco más abajo */
  left: 360px; /* Superpuesta en el borde derecho de la ventana 'Home' */
  width: auto;
  z-index: 2; /* Frente */
}

.header-logo-window {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 180px;
  z-index: 1;
}

.header-logo-window .custom-logo {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.site-title {
  margin: 0 0 5px 0;
  font-size: 24px;
}
.site-title a {
  text-decoration: none;
  color: black;
}
.site-description {
  margin: 0;
  color: #666;
  font-size: 12px;
}

.social-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}
.social-menu li a {
  text-decoration: none;
  display: inline-block;
  padding: 2px;
  border: 1px solid transparent; /* Evita que el contenedor brinque al hacer hover */
}
.social-menu li a:hover {
  border: 1px dotted #000; /* Efecto retro al pasar el ratón */
}

/* Windows 95 Taskbar */
body {
  padding-bottom: 40px; /* Espacio para que la barra no tape contenido al final */
}

.win95-taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35px;
  background: #c0c0c0;
  border-top: 1px solid #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Mantiene Inicio a la izq y Reloj a la der */
  padding: 0 4px;
  z-index: 9999;
}

.win95-tray {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080;
  padding: 0 8px;
  font-size: 12px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto; /* Empuja a la derecha */
}

.start-btn {
  height: 28px;
  font-weight: bold;
  padding: 0 8px;
  display: flex;
  align-items: center;
}
.start-btn b {
  font-size: 12px;
}
.start-btn.active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  background: #c0c0c0;
}

/* Start Menu Popup */
.start-menu-popup {
  position: absolute;
  bottom: 35px; /* Aparece justo encima del botón start */
  left: 0;
  width: 250px;
  display: flex;
  flex-direction: column;
  padding: 2px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}

.start-menu-popup .window-body {
  margin: 0;
  display: flex;
  flex-direction: row;
  padding: 0;
}

.start-menu-sidebar {
  background: linear-gradient(180deg, #000080, #1084d0);
  width: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 5px;
}
.start-menu-sidebar span {
  color: white;
  font-weight: bold;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  letter-spacing: 1px;
}

.start-menu-content {
  flex: 1;
  padding: 8px;
}

.start-search form {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.start-search input[type="search"] {
  width: 100%;
  box-sizing: border-box;
}

.start-navigation hr {
  margin: 8px 0;
}

.start-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.start-nav-list li {
  margin-bottom: 2px;
}
.start-nav-list li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  text-decoration: none;
  color: black;
}
.start-nav-list li a:hover {
  background: #000080;
  color: white;
}

/* ==========================================================================
   OVERRIDE FINAL PARA COMENTARIOS (Gutenberg/Core Fallback)
   ========================================================================== */
#comments p,
#comments a,
#comments span,
#comments div,
#comments time,
#comments cite,
#comments b,
#comments i,
#comments strong,
#comments em,
#respond p,
#respond a,
#respond span,
#respond div,
p.logged-in-as, 
p.logged-in-as a, 
.comment-content p, 
.comment-body p, 
.reply a,
a.comment-reply-link,
.comment-metadata *,
a.comment-edit-link {
  font-family: 'Pixelated MS Sans Serif', Arial, sans-serif !important;
  font-size: 12px !important;
}

/* ==========================================================================
   ESTILO CMD PARA CAJA DE COMENTARIOS
   ========================================================================== */
#respond textarea#comment,
.comment-form textarea,
.wp-block-post-comments-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background-color: #000 !important;
  color: #fff !important;
  font-family: 'Pixelated MS Sans Serif', 'Courier New', monospace !important;
  padding: 10px !important;
  border: 2px inset #dfdfdf !important;
}

/* ==========================================================================
   ICONOS DEL SYSTEM TRAY
   ========================================================================== */
.tray-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  width: 16px;
  height: 16px;
}
.tray-icon:hover svg rect {
  filter: brightness(1.3);
}

/* Parpadeo de luz de la impresora */
@keyframes printerBlink {
  0%, 100% { fill: #00c000; }
  50% { fill: #808080; }
}
#printer-light {
  animation: printerBlink 1.2s ease-in-out infinite;
}

/* ==========================================================================
   PAGINACIÓN ESTILO WIN95
   ========================================================================== */
.press95-pagination {
  margin-top: 0;
}
.press95-pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  background: #c0c0c0;
  padding: 8px 12px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.press95-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  font-family: 'Pixelated MS Sans Serif', Arial, sans-serif !important;
  font-size: 12px !important;
  text-decoration: none;
  color: #000;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  cursor: pointer;
  border: none;
}
.press95-pagination .page-numbers:hover {
  background: #d4d4d4;
}
.press95-pagination .page-numbers:active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}
/* Página actual */
.press95-pagination .page-numbers.current {
  background: #000080;
  color: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  cursor: default;
}
/* Botones prev/next ya vienen como <button>, resetear */
.press95-pagination a button {
  all: unset;
  cursor: pointer;
  font-family: 'Pixelated MS Sans Serif', Arial, sans-serif !important;
  font-size: 12px !important;
}
.press95-pagination .dots {
  box-shadow: none;
  background: transparent;
  cursor: default;
  min-width: 16px;
}

/* ==========================================================================
   BLOCKQUOTE - ESTILO BLOC DE NOTAS (NOTEPAD)
   ========================================================================== */
blockquote, .wp-block-quote {
  background: #fff;
  border: 2px solid #dfdfdf;
  border-right-color: #0a0a0a;
  border-bottom-color: #0a0a0a;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
  margin: 20px 0;
  position: relative;
  display: block;
  overflow: hidden;
  padding: 50px 0 0 0; /* Espacio superior para la barra de título y el menú */
}

blockquote::before, .wp-block-quote::before {
  content: "Bloc de notas";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #000080, #1084d0); /* Barra de título activa */
  color: white;
  padding: 4px 8px;
  font-weight: bold;
  font-size: 12px;
  height: 16px;
  line-height: 16px;
}

blockquote::after, .wp-block-quote::after {
  content: "Archivo Editar Buscar Ayuda";
  position: absolute;
  top: 24px; /* Justo debajo del título (4+16+4) */
  left: 0;
  right: 0;
  background: #c0c0c0;
  color: black;
  padding: 4px 8px;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px 0 #fff;
  font-size: 12px;
  word-spacing: 15px; /* Separa las palabras para que parezca un menú real */
  height: 16px;
  line-height: 16px;
}

blockquote p, .wp-block-quote p, blockquote cite, .wp-block-quote cite {
  padding: 10px 15px 15px 15px;
  margin: 0;
  font-family: 'Courier New', Courier, monospace !important;
  color: #000;
  font-size: 13px !important;
}

blockquote cite, .wp-block-quote cite {
  display: block;
  text-align: right;
  padding-top: 0;
  font-weight: bold;
}

/* ==========================================================================
   MINESWEEPER STYLES
   ========================================================================== */
.ms-cell {
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: 0 0 20px;
  background: #c0c0c0;
  border: 2px outset #fff;
  border-right-color: #808080;
  border-bottom-color: #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pixelated MS Sans Serif', Arial, sans-serif !important;
  font-weight: bold;
  font-size: 14px !important;
  cursor: pointer;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.ms-cell:active {
  border: 1px solid #808080;
  background: #c0c0c0;
}

.ms-cell.revealed {
  border: 1px solid #808080;
  border-right-color: #dfdfdf;
  border-bottom-color: #dfdfdf;
  background: #c0c0c0;
  cursor: default;
}

.ms-cell[data-num="1"] { color: blue; }
.ms-cell[data-num="2"] { color: green; }
.ms-cell[data-num="3"] { color: red; }
.ms-cell[data-num="4"] { color: darkblue; }
.ms-cell[data-num="5"] { color: darkred; }
.ms-cell[data-num="6"] { color: teal; }
.ms-cell[data-num="7"] { color: black; }
.ms-cell[data-num="8"] { color: gray; }

/* ==========================================================================
   SOLITAIRE STYLES
   ========================================================================== */
#solitaire-app {
  width: auto;
}

#solitaire-board {
  background-color: #008000;
  padding: 10px;
  width: 530px;
  height: 400px;
  position: relative;
  border: 2px inset #dfdfdf;
  box-sizing: border-box;
}

.sol-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.sol-space {
  width: 60px;
  height: 84px;
  border: 1px dashed #004000;
  border-radius: 4px;
  position: relative;
}

.sol-card {
  width: 60px;
  height: 84px;
  border: 1px solid #000;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 1px 1px 0 #000;
  user-select: none;
}

.sol-card.back {
  background-color: #000080;
  background-image: repeating-linear-gradient(45deg, #4040ff 25%, transparent 25%, transparent 75%, #4040ff 75%, #4040ff), repeating-linear-gradient(45deg, #4040ff 25%, #000080 25%, #000080 75%, #4040ff 75%, #4040ff);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
  border: 2px solid #fff;
  border-right-color: #000;
  border-bottom-color: #000;
}

.sol-card.empty {
  background: transparent;
  border: 1px dashed #004000;
  box-shadow: none;
  cursor: default;
}

.card-inner {
  padding: 2px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  font-family: 'Pixelated MS Sans Serif', Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1;
}

.card-inner.red { color: red; }
.card-inner.black { color: black; }

.card-tl {
  position: absolute;
  top: 2px;
  left: 3px;
  text-align: center;
}

.card-br {
  position: absolute;
  bottom: 2px;
  right: 3px;
  text-align: center;
  transform: rotate(180deg);
}

.card-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}

/* ==========================================================================
   MEDIA PLAYER BUTTONS – Win95 Bevel Style
   ========================================================================== */
.win95-media-player .media-btn {
  font-family: 'Pixelated MS Sans Serif', monospace, Arial !important;
  font-size: 11px !important;
  font-weight: bold !important;
  padding: 3px 6px !important;
  background: #c0c0c0 !important;
  color: #000 !important;
  border: none !important;
  cursor: pointer !important;
  min-width: 30px !important;
  /* Win95 inset bevel (outset estado normal) */
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf !important;
}

.win95-media-player .media-btn:active {
  box-shadow:
    inset -1px -1px #ffffff,
    inset  1px  1px #0a0a0a,
    inset -2px -2px #dfdfdf,
    inset  2px  2px #808080 !important;
  padding: 4px 5px 2px 7px !important;
}

.win95-media-player .media-btn:disabled {
  color: #808080 !important;
  cursor: default !important;
}

/* Barra de progreso estilo Win95 */
.win95-media-player .media-progress {
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  background: #fff;
  border: 2px inset #dfdfdf;
  cursor: pointer;
  padding: 0;
}
.win95-media-player .media-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 14px;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset  1px  1px #ffffff,
    inset -2px -2px #808080,
    inset  2px  2px #dfdfdf;
  cursor: pointer;
}
.win95-media-player .media-progress:disabled {
  cursor: default;
  opacity: 0.6;
}