body {
  width: 100%;
  max-width: 750px; /* Evita que el texto sea larguísimo y canse la vista en pantallas de ordenador grandes */
  margin: 0 auto;   /* Centra todo el bloque de texto en el medio de la pantalla */
  padding: 24px;    /* Deja un margen interno elegante en los bordes de la pantalla del móvil */
  box-sizing: border-box; /* Asegura que el padding no rompa el ancho del móvil */
  
  /* TIPOGRAFÍA Y DISEÑO CONFORTABLE PARA LECTURA */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Tipografía limpia y moderna */
  font-size: 17px;    /* Tamaño de letra altamente legible en pantallas móviles de cualquier gama */
  line-height: 1.65;  /* Espaciado óptimo entre líneas para que los ojos no se pierdan al leer */
  color: #1f1911;     /* Un marrón/gris muy oscuro que reduce el cansancio visual */
  background-color: #c3b091; /* Fondo sepia intenso estilo libro viejo */
  
  word-wrap: break-word; /* Evita que enlaces largos o textos rompan el diseño en Android */
}

hr {
  border: none;
  border-top: 1px solid #aaa;
  width: 50%;         /* Ocupa el 50% del ancho */
  margin: 30px auto;  /* El 'auto' en los lados la centra automáticamente */
}

/* ==========================================================================
   TÍTULOS Y TEXTO (MODO DIURNO)
   ========================================================================== */
h1 {
  font-size: 32px;
  line-height: 1.2;
  margin-top: 20px;
  margin-bottom: 24px;
  color: #0f0c08; /* Título principal: un tono casi negro pero cálido */
}

h2 {
  font-size: 24px;
  margin-top: 32px;
  margin-bottom: 16px;
  color: #1f1911; /* Título secundario: igual que el texto base pero resalta por su grosor */
}

p {
  margin-top: 0;
  margin-bottom: 18px; /* Crea una separación automática y natural entre tus párrafos */
  text-align: left;    /* Alineación natural a la izquierda, la más cómoda para móviles */
}

strong {
  color: #000000; /* Hace que las palabras en negrita resalten en color negro puro */
}

/* --- ENLACES PARA EL MODO SEPIA (DIURNO) --- */
a {
    color: #a04000; /* Un tono teja/cobre oscuro, muy legible en sepia */
    text-decoration: underline; /* Mantiene la línea abajo para accesibilidad */
}

a:visited {
    color: #78281f; /* Granate/vino apagado para los enlaces ya visitados */
}

a:hover {
    color: #e59866; /* Se aclara un poco cuando pasas el ratón por encima */
}

/* --- ELEMENTOS MULTIMEDIA --- */
img {
  max-width: 100%;  /* Si metes una foto, jamás se saldrá de la pantalla del móvil */
  height: auto;     /* Mantiene la proporción correcta de las imágenes */
  display: block;
  margin: 20px 0;
  transition: opacity 0.3s ease; /* Transición suave si cambia el modo */
}


/* ==========================================================================
   MODO OSCURO AUTOMÁTICO (ENTORNO NOCTURNO)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  body {
      background-color: #1a1412;
      color: #e5d1b8;
  }

  h1, h2 { color: #f5ebd8; }
  strong { color: #ffffff; }

  a { color: #e59866; }
  a:visited { color: #b9770e; }
  a:hover { color: #f8c471; }
  img { opacity: 0.85; }

  /* --- GOOGLE SEARCH: CAJETÍN EN MODO OSCURO --- */
  input.gsc-input {
      border: 1px solid #3a302a !important;
      background-color: rgba(255, 255, 255, 0.08) !important;
      color: #e5d1b8 !important;
  }

  button.gsc-search-button, input.gsc-search-button {
      background-color: #3a302a !important;
      color: #e5d1b8 !important;
  }

  /* --- GOOGLE SEARCH: VENTANA FLOTANTE Y RESULTADOS (MODO OSCURO) --- */
  
  /* Fondo SÓLIDO (sin transparencia) para el overlay y la caja de resultados */
  .gsc-results-wrapper-overlay,
  .gsc-results-wrapper-visible,
  .gsc-results {
      background-color: #1a1412 !important; /* Fondo opaco oscuro */
      border: 1px solid #3a302a !important;
  }

  /* Títulos de enlaces: Amarillo/Dorado brillante (o Verde Menta #55ff99) para destacar del texto crema */
  .gsc-webResult.gsc-result a.gs-title:link,
  .gsc-webResult.gsc-result a.gs-title:link b,
  .gsc-results .gs-title {
      color: #fcd34d !important; /* Amarillo/Dorado brillante muy legible */
      text-decoration: none !important;
  }

  /* Hover de enlace */
  .gsc-webResult.gsc-result a.gs-title:hover,
  .gsc-webResult.gsc-result a.gs-title:hover b {
      color: #ffffff !important;
      text-decoration: underline !important;
  }

  /* Enlaces visitados */
  .gsc-webResult.gsc-result a.gs-title:visited,
  .gsc-webResult.gsc-result a.gs-title:visited b {
      color: #f59e0b !important; /* Ámbar/Mostaza */
  }

  /* Texto explicativo (Snippet) */
  .gs-bender-result .gs-snippet,
  .gsc-webResult .gs-snippet {
      color: #e5d1b8 !important; /* Sepia/crema */
  }

  /* URL inferior */
  .gsc-url-top, .gs-publisher {
      color: #9ca3af !important; /* Gris claro neutro */
  }

  /* Paginación e información de resultados con fondo opaco */
  .gsc-result-info,
  .gsc-cursor-page {
      color: #e5d1b8 !important;
      background-color: #261e1b !important; /* Fondo ligeramente diferenciado pero sólido */
  }
}

/* ==========================================================================
   ESTILOS BASE DEL BUSCADOR DE GOOGLE (MODO DIURNO / SEPIA)
   ========================================================================== */

/* Fondo SÓLIDO para la ventana flotante en modo diurno (evita transparencia con la web) */
.gsc-results-wrapper-overlay,
.gsc-results-wrapper-visible,
.gsc-results {
  background-color: #c3b091 !important; /* Tu fondo sepia opaco */
  border: 1px solid #1f191133 !important;
}

.gsc-control-cse, .gsc-control-cse * {
  border: none !important;
  padding: 0 !important;
}

/* Enlaces en modo diurno: Azul cobalto intenso de alto contraste sobre sepia */
.gsc-webResult.gsc-result a.gs-title:link,
.gsc-webResult.gsc-result a.gs-title:link b,
.gsc-results .gs-title {
  color: #0d47a1 !important; /* Azul cobalto vivo que contrasta fuerte con el sepia */
  text-decoration: none !important;
}

.gsc-webResult.gsc-result a.gs-title:hover,
.gsc-webResult.gsc-result a.gs-title:hover b {
  color: #002171 !important;
  text-decoration: underline !important;
}

/* Texto de descripción en modo diurno */
.gs-bender-result .gs-snippet,
.gsc-webResult .gs-snippet {
  color: #1f1911 !important;
}

/* Cajetín y botón de búsqueda */
input.gsc-input {
  padding: 4px 8px !important;
  border: 1px solid #1f191133 !important;
  border-radius: 4px !important;
  background-color: rgba(255, 255, 255, 0.4) !important;
  color: #1f1911 !important;
  font-size: 15px !important;
  height: auto !important;
}

button.gsc-search-button, input.gsc-search-button {
  padding: 4px 12px !important;
  border: none !important;
  border-radius: 4px !important;
  background-color: #1f1911 !important;
  color: #c3b091 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  font-weight: bold !important;
  height: auto !important;
}

.gsc-search-button svg {
  display: none !important;
}