/* =====================================================
   IES RAMÓN Y CAJAL - Hoja de Estilos
   Diseñada con Dreamweaver MX - Marzo 2004
   ===================================================== */

/* IMPORTAR FUENTES (simulando lo que hubieran usado en 2004) */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

/* RESET BÁSICO */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =====================================================
   FONDO Y BODY
   ===================================================== */
body {
  background-color: #c0d8f0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255,255,255,0.15) 10px,
      rgba(255,255,255,0.15) 20px
    );
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 11px;
  color: #222;
  min-width: 800px;
}

/* =====================================================
   MARQUEE / BANNERS
   ===================================================== */
.marquee-wrapper {
  background: #000080;
  color: #ffff00;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 0;
  border-bottom: 2px solid #ffff00;
  letter-spacing: 0.5px;
}

.marquee-bottom {
  background: #800000;
  color: #ff9900;
  border-bottom: none;
  border-top: 2px solid #ff9900;
  margin-top: 4px;
}

/* =====================================================
   CABECERA PRINCIPAL
   ===================================================== */
.header-table {
  background: linear-gradient(180deg, #000080 0%, #1a1aaa 40%, #000060 100%);
  border-bottom: 4px groove #ffff00;
  padding: 10px 0;
}

.header-left,
.header-right {
  width: 80px;
  text-align: center;
  vertical-align: middle;
  padding: 8px;
}

.header-center {
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

.site-title {
  font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
  font-size: 32px;
  font-weight: bold;
  color: #ffff00;
  text-shadow:
    3px 3px 0px #ff6600,
    -1px -1px 0px #000;
  letter-spacing: 2px;
  line-height: 1.1;
}

.site-subtitle {
  font-family: 'Comic Sans MS', cursive;
  font-size: 15px;
  color: #ff9900;
  margin-top: 4px;
  text-shadow: 1px 1px 2px #000;
}

.site-tagline {
  font-family: Verdana, sans-serif;
  font-size: 10px;
  color: #aaddff;
  margin-top: 4px;
  letter-spacing: 3px;
}

/* Estrellas animadas en la cabecera */
.gif-star {
  display: inline-block;
  font-size: 22px;
  color: #ffff00;
  animation: blink-star 0.8s step-start infinite;
  margin: 3px;
}

@keyframes blink-star {
  0%, 100% { opacity: 1; color: #ffff00; }
  50% { opacity: 0.2; color: #ff6600; }
}

/* =====================================================
   BARRA DE NAVEGACIÓN
   ===================================================== */
.navbar {
  background: linear-gradient(180deg, #cc0000, #880000);
  padding: 5px 10px;
  text-align: center;
  border-top: 2px solid #ff4444;
  border-bottom: 3px groove #550000;
  font-size: 11px;
}

.navlink {
  color: #ffffff;
  text-decoration: none;
  font-family: 'Comic Sans MS', cursive;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border: 1px solid transparent;
  display: inline-block;
}

.navlink:hover {
  color: #ffff00;
  background-color: rgba(255,255,255,0.15);
  border: 1px solid #ffff00;
  text-decoration: underline;
}

.nav-sep {
  color: #ff9999;
  margin: 0 3px;
}

/* =====================================================
   LAYOUT PRINCIPAL (tabla de 3 columnas)
   ===================================================== */
.main-layout {
  max-width: 1000px;
  margin: 6px auto;
  background: transparent;
}

/* =====================================================
   SIDEBARS
   ===================================================== */
.sidebar,
.sidebar2 {
  padding: 4px;
}

.sidebar-box {
  background: #f0f0f8;
  border: 2px groove #9999cc;
  padding: 0;
  width: 100%;
}

.sidebar-title {
  background: linear-gradient(90deg, #000080, #3333aa);
  color: #ffff00;
  font-family: 'Comic Sans MS', cursive;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 6px;
  text-align: center;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #ffcc00;
}

.sidebar-content {
  padding: 6px;
  font-size: 10px;
  color: #333;
  line-height: 1.5;
}

.sidebar-content p {
  margin-bottom: 4px;
}

.sidebar-hr {
  border: none;
  border-top: 1px dashed #9999cc;
  margin: 4px 0;
}

.sidebar-link {
  color: #0000cc;
  text-decoration: none;
  font-size: 10px;
  display: block;
  padding: 1px 0;
}

.sidebar-link:hover {
  color: #cc0000;
  text-decoration: underline;
}

/* Contador de visitas */
.counter {
  display: inline-flex;
  gap: 1px;
  background: #000;
  padding: 2px 4px;
  border: 2px inset #444;
  border-radius: 2px;
}

.counter-digit {
  display: inline-block;
  background: #000;
  color: #ff0000;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 18px;
  width: 14px;
  text-align: center;
  line-height: 1.1;
}

/* Calendario */
.cal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}

.cal-month {
  background: #000066;
  color: #ffffff;
  text-align: center;
  padding: 2px;
  font-size: 9px;
}

.cal-days-header th {
  background: #3333aa;
  color: #ffff99;
  text-align: center;
  padding: 2px 1px;
  font-size: 8px;
}

.cal-row td {
  text-align: center;
  padding: 2px 1px;
  color: #333;
  font-size: 9px;
}

.cal-row:hover td {
  background: #dde8ff;
}

.cal-today {
  background: #ff0000 !important;
  color: #ffffff !important;
  font-weight: bold;
  border-radius: 50%;
}

/* Player de música */
.music-player {
  display: inline-block;
  background: #000;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 9px;
  padding: 2px 6px;
  border: 1px solid #006600;
  cursor: pointer;
  margin-top: 4px;
}

.music-player:hover {
  background: #003300;
}

/* Top asignaturas */
.top-item {
  font-size: 10px;
  padding: 2px 0;
  border-bottom: 1px dotted #cccccc;
  color: #333;
}

/* En construcción */
.under-construction {
  text-align: center;
  padding: 8px;
  background: repeating-linear-gradient(
    45deg,
    #ffcc00,
    #ffcc00 8px,
    #000000 8px,
    #000000 16px
  );
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cone {
  font-size: 16px;
  animation: bounce-cone 0.5s ease-in-out infinite alternate;
}

@keyframes bounce-cone {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}

/* Webring */
.webring {
  border: 1px dashed #9999cc;
  padding: 6px;
  background: #f8f8ff;
  font-size: 9px;
}

/* =====================================================
   CONTENIDO PRINCIPAL
   ===================================================== */
.main-content {
  padding: 4px 6px;
}

/* =====================================================
   BLOQUES DE SECCIÓN (asignaturas)
   ===================================================== */
.section-block {
  margin-bottom: 6px;
  border: 2px groove #888;
  background: #ffffff;
}

/* Colores por asignatura */
.section-plastica .section-header   { background: linear-gradient(90deg, #cc6600, #ff9900); }
.section-tic .section-header        { background: linear-gradient(90deg, #006633, #009944); }
.section-japones .section-header    { background: linear-gradient(90deg, #aa0000, #dd3355); }
.section-idiomas .section-header    { background: linear-gradient(90deg, #000099, #0033cc); }
.section-orientacion .section-header{ background: linear-gradient(90deg, #660066, #9900cc); }

.section-header {
  padding: 6px 10px;
  color: #ffffff;
  font-family: 'Comic Sans MS', cursive;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgba(255,255,255,0.3);
}

.section-prof {
  font-size: 9px;
  font-family: Verdana, sans-serif;
  font-weight: normal;
  font-style: italic;
  color: rgba(255,255,255,0.85);
}

.section-body {
  padding: 8px 10px;
  background: #fafafa;
}

/* Caja de deberes */
.deberes-box {
  background: #ffffcc;
  border: 1px dashed #cc9900;
  border-left: 4px solid #ff9900;
  padding: 6px 10px;
  margin-top: 6px;
  font-size: 11px;
  color: #333;
  line-height: 1.5;
}

/* =====================================================
   SUBSECCIONES (Portfolio, Cómic)
   ===================================================== */
.subsection {
  border: 1px solid #ddaa66;
  margin-bottom: 4px;
  background: #fff9f0;
}

.subsection-title {
  background: linear-gradient(90deg, #ee8800, #ffbb44);
  color: #fff;
  font-family: 'Comic Sans MS', cursive;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.subsection-body {
  padding: 8px;
  font-size: 10px;
  color: #555;
}

/* Badge "NUEVO" */
.new-badge {
  background: #ff0000;
  color: #ffff00;
  font-size: 8px;
  font-family: 'Courier New', monospace;
  padding: 1px 4px;
  border-radius: 2px;
  animation: blink-badge 1s step-start infinite;
  font-weight: bold;
  text-transform: uppercase;
}

@keyframes blink-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Caja placeholder de contenido */
.placeholder-box {
  background: #f0f0f0;
  border: 1px dashed #aaaaaa;
  padding: 12px;
  text-align: center;
  color: #888;
  font-size: 10px;
  margin-top: 6px;
  line-height: 1.6;
}

.placeholder-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.placeholder-text {
  color: #888888;
  font-style: italic;
}

/* =====================================================
   SECCIÓN IDIOMAS
   ===================================================== */
.idioma-block {
  border: 2px solid #aaaacc;
  padding: 0;
  height: 100%;
  background: #f8f8ff;
}

.idioma-sueco { border-color: #006aa7; }
.idioma-frances { border-color: #002395; }
.idioma-ruso { border-color: #cc0000; }

.idioma-flag {
  font-size: 28px;
  text-align: center;
  padding: 8px 0 4px 0;
}

.idioma-title {
  font-family: 'Comic Sans MS', cursive;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  color: #000066;
  padding-bottom: 2px;
}

.idioma-prof {
  font-size: 9px;
  color: #666;
  text-align: center;
  font-style: italic;
  padding-bottom: 6px;
  border-bottom: 1px dashed #cccccc;
}

.idioma-deberes {
  padding: 8px;
  font-size: 10px;
  color: #333;
  line-height: 1.5;
  background: #ffffee;
  border-top: 1px solid #eeeecc;
}

/* =====================================================
   SEPARADORES ANIMADOS
   ===================================================== */
.animated-divider {
  text-align: center;
  padding: 2px 0;
  margin: 2px 0;
  overflow: hidden;
}

.animated-divider span {
  display: inline-block;
  color: #0000aa;
  font-size: 13px;
  animation: wave-div 1.5s ease-in-out infinite;
}

.animated-divider span:nth-child(1) { animation-delay: 0s; }
.animated-divider span:nth-child(2) { animation-delay: 0.1s; }
.animated-divider span:nth-child(3) { animation-delay: 0.2s; }
.animated-divider span:nth-child(4) { animation-delay: 0.3s; }
.animated-divider span:nth-child(5) { animation-delay: 0.4s; }
.animated-divider span:nth-child(6) { animation-delay: 0.5s; }
.animated-divider span:nth-child(7) { animation-delay: 0.6s; }
.animated-divider span:nth-child(8) { animation-delay: 0.7s; }
.animated-divider span:nth-child(9) { animation-delay: 0.8s; }
.animated-divider span:nth-child(10) { animation-delay: 0.9s; }
.animated-divider span:nth-child(11) { animation-delay: 1.0s; }
.animated-divider span:nth-child(12) { animation-delay: 1.1s; }
.animated-divider span:nth-child(13) { animation-delay: 1.2s; }
.animated-divider span:nth-child(14) { animation-delay: 1.3s; }
.animated-divider span:nth-child(15) { animation-delay: 1.4s; }

@keyframes wave-div {
  0%, 100% { transform: translateY(0); color: #0000aa; }
  50% { transform: translateY(-4px); color: #cc0000; }
}

/* =====================================================
   PIE DE PÁGINA
   ===================================================== */
.footer {
  background: linear-gradient(180deg, #111155, #000033);
  color: #aaaaff;
  text-align: center;
  padding: 10px 16px;
  border-top: 3px groove #3333aa;
  margin-top: 4px;
}

.footer-line {
  font-family: 'Comic Sans MS', cursive;
  font-size: 12px;
  color: #ffff99;
  margin-bottom: 6px;
}

.footer-links {
  font-size: 10px;
  margin-bottom: 6px;
}

.footer-link {
  color: #aaddff;
  text-decoration: none;
  padding: 0 4px;
}

.footer-link:hover {
  color: #ffff00;
  text-decoration: underline;
}

.footer-badges {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.badge {
  display: inline-block;
  background: #000080;
  color: #ccccff;
  border: 1px solid #4444aa;
  font-family: 'Courier New', monospace;
  font-size: 8px;
  padding: 2px 5px;
  cursor: pointer;
}

.badge:hover {
  background: #0000cc;
  color: #ffffff;
}

/* =====================================================
   ESTILOS GLOBALES DE LINKS
   ===================================================== */
a:link    { color: #0000cc; }
a:visited { color: #660099; }
a:hover   { color: #cc0000; }
a:active  { color: #ff0000; }

/* =====================================================
   SCROLLBAR PERSONALIZADA (IE only en 2004, pero aquí por nostalgia)
   ===================================================== */
::-webkit-scrollbar {
  width: 14px;
}
::-webkit-scrollbar-track {
  background: #dde8ff;
  border: 1px solid #8888cc;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0000aa, #000066);
  border: 1px solid #4444aa;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #0000dd, #000099);
}

/* =====================================================
   SELECCIÓN DE TEXTO
   ===================================================== */
::selection {
  background: #000080;
  color: #ffff00;
}