/* docs/css/ragnos_style.css */

/* --- TEMA OSCURO (DARK MODE) --- */
:root {
  /* 1. PALETA DE COLORES - ACTUALIZADA */
  --brand-primary: #ff7043; /* Naranja Ragnos */
  --brand-dark: #151515; /* Sidebar casi negro */
  --brand-accent: #ffab91;

  /* 2. CONFIGURACIÓN BASICA (DARK) */
  --text-main: #e0e0e0;
  --text-muted: #a0a0a0;

  /* Fondos semi-transparentes para ver partículas */
  --bg-body: #0b0c15;
  --bg-content: rgba(30, 30, 30, 0.85); /* Vidrio ahumado */
  --bg-card: rgba(44, 44, 44, 0.9);

  --max-width: 1200px;
}

/* --- ANIMACION DE PARTICULAS (COPIADO DE LOGIN) --- */
body {
  background-color: var(--bg-body);
  font-family: "Lato", sans-serif;
  color: var(--text-main);
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: orangered;
  border-radius: 50%;
  box-shadow: 0 0 8px yellow;
  animation: moveParticle 10s linear infinite;
  pointer-events: none; /* CLICK THROUGH - IMPORTANTE */
  z-index: 1; /* Detrás del contenido principal si es posible, o ajustar transparencia */
  opacity: 0.6;
}

@keyframes moveParticle {
  0% {
    transform: translate(0, 0);
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translate(var(--x), var(--y));
    opacity: 0;
  }
}

/* --- LAYOUT GLOBAL & FONDO --- */
/* Hacer transparente el wrapper de RTD para ver el body */
.wy-nav-content-wrap {
  background: transparent !important;
}

.wy-nav-content {
  background-color: var(--bg-content) !important;
  max-width: var(--max-width) !important;
  margin: 20px auto;
  min-height: 90vh;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px); /* Efecto cristal */
  position: relative;
  z-index: 10; /* Encima de las particulas */
}

/* Sidebar */
.wy-nav-side {
  background-color: var(--brand-dark);
  border-right: 1px solid #333;
  z-index: 20;
}

/* --- RESTO DE ESTILOS --- */
a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
a:hover {
  color: var(--brand-accent);
}

.wy-side-nav-search {
  background-color: #161616; /* Ligeramente más oscuro que el sidebar */
}

/* Items del Menú */
.wy-menu-vertical li.current > a,
.wy-menu-vertical li.on a {
  border-left: 4px solid var(--brand-primary);
  background-color: #333;
  color: #fff;
  font-weight: bold;
}

.wy-menu-vertical a {
  color: #d9d9d9;
}
.wy-menu-vertical a:hover {
  background-color: #2c2c2c;
  color: #fff;
}

/* --- TIPOGRAFÍA Y ENCABEZADOS --- */
h1 {
  font-family: "Roboto Slab", serif;
  color: #ffffff;
  border-bottom: 3px solid var(--brand-primary);
  padding-bottom: 10px;
  margin-bottom: 25px;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto Slab", serif;
  color: var(--brand-accent);
  margin-top: 35px;
}

.rst-content p,
.rst-content ul {
  color: var(--text-main);
  line-height: 1.6;
}

/* --- TABLAS --- */
.rst-content table.docutils {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid #444;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--bg-card);
}

.rst-content table.docutils th {
  background-color: #333;
  color: var(--brand-primary);
  border-bottom: 2px solid var(--brand-primary);
  font-weight: bold;
}

.rst-content table.docutils td {
  border: 1px solid #444;
  background-color: var(--bg-card);
  color: var(--text-main);
}
/* Filas alternas */
.rst-content table.docutils tr:nth-child(even) td {
  background-color: #363636;
}

/* --- BLOQUES DE CÓDIGO --- */
/* Fondo oscuro para bloques de código */
.rst-content pre.literal-block,
.rst-content div[class^="highlight"] {
  background: #1e1e1e;
  border: 1px solid #333;
  color: #f8f8f2;
}

/* Código inline */
code,
.rst-content tt.literal {
  color: #ffccbc; /* Color resaltado suave */
  background: #333;
  border: none;
  padding: 2px 5px;
  font-size: 90%;
}

/* --- ADMONITIONS (CAJAS DE NOTA) --- */
.admonition {
  background-color: #333 !important;
  border: 1px solid #444;
  color: #eee;
}

.admonition.note {
  border-left: 5px solid var(--brand-primary);
  background-color: #2e2624 !important; /* Tono cálido muy oscuro */
}
.admonition.note .admonition-title {
  background-color: var(--brand-primary) !important;
  color: white;
}

.admonition.warning {
  border-left: 5px solid #ff9800;
  background-color: #2e2a20 !important;
}
.admonition.warning .admonition-title {
  background-color: #ff9800 !important;
  color: #000;
}

/* --- BOTONES --- */
.btn,
.rst-content .btn-neutral {
  background-color: var(--brand-primary) !important;
  color: white !important;
  border-radius: 4px;
  transition: all 0.3s;
  border: none;
}

.btn:hover,
.rst-content .btn-neutral:hover {
  background-color: var(--brand-accent) !important;
  box-shadow: 0 0 10px rgba(255, 87, 34, 0.5);
  color: #fff !important;
}

/* --- EXTRAS --- */
/* Logo en el sidebar */
.wy-side-nav-search img {
  width: 160px;
  margin-bottom: 15px;
  background: transparent;
  padding: 10px;
}

/* Migas de pan */
.wy-breadcrumbs li,
.wy-breadcrumbs li a {
  color: var(--text-muted);
}

.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td,
.wy-table-backed,
.wy-table-odd td,
.wy-table-striped tr:nth-child(2n-1) td {
  background-color: var(--bg-card);
}

.col-md-9 img {
  border: none;
  background-color: transparent;
}
.navbar.bg-primary {
  background-image: linear-gradient(#ff7043, #d84315 60%, #521300);
}

.bg-body-tertiary {
  background-color: #1a1a1a !important; /* Fondo oscuro acorde a tu tema */
  border-right: 1px solid #333 !important; /* Separación sutil */
}

.bg-body-tertiary a {
  color: #b0b0b0 !important;
}

/* 1. Cuando pasas el mouse por encima (Hover) */
.bg-body-tertiary a:hover {
  color: #ffffff !important; /* Texto blanco brillante */
  background-color: rgba(
    230,
    126,
    34,
    0.15
  ) !important; /* Fondo naranja sutil */
  text-decoration: none; /* Quita el subrayado si lo tuviera */
}

.bg-body-tertiary .nav-link.active,
.bg-body-tertiary .active > a {
  color: #ffccbc !important; /* Color durazno/salmón (marca Ragnos) */
  font-weight: bold !important;
  background-color: rgba(230, 126, 34, 0.05) !important; /* Fondo muy tenue */
}

tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: inherit;
  border-style: solid;
  border-width: medium;
  padding: 2px;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.mermaid {
  background-color: whitesmoke;
  border-radius: 8px;
}

.admonition.info {
  background-color: #27393e !important; /* Azul verdoso oscuro acorde al tema */
  border-left: 5px solid #26a69a;
  color: whitesmoke;
}
.admonition.info .admonition-title {
  background-color: #26a69a !important;
  color: white;
}

.admonition.note,
.admonition.warning,
.admonition.danger {
  color: whitesmoke;
}

.admonition.quote {
  background-color: #3e2723 !important; /* Marrón oscuro acorde al tema */
  border-left: 5px solid #8d6e63;
  color: whitesmoke;
}

.admonition.quote .admonition-title {
  background-color: #8d6e63 !important;
  color: white;
}

.admonition.danger {
  background-color: #4a151f !important; /* Rojo oscuro acorde al tema */
  border-left: 5px solid #e53935;
}

.admonition.danger .admonition-title {
  background-color: #e53935 !important;
  color: white;
}

.admonition.success {
  background-color: #1b4d1b !important; /* Verde oscuro acorde al tema */
  border-left: 5px solid #43a047;
  color: whitesmoke;
}
.admonition.success .admonition-title {
  background-color: #43a047 !important;
  color: white;
}

.admonition.fail {
  background-color: #4a151f !important; /* Rojo oscuro acorde al tema */
  border-left: 5px solid #e53935;
  color: whitesmoke;
}
.admonition.fail .admonition-title {
  background-color: #e53935 !important;
  color: white;
}