:root { --gap: 16px; --card: #f6f6f8; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, Segoe UI, Roboto, sans-serif; }
.site-header { display: flex; gap: var(--gap); align-items: center; padding: var(--gap); border-bottom: 1px solid #ddd; }
.site-header h1 { margin: 0; font-size: 18px; }
.site-header nav a { margin-right: 12px; text-decoration: none; color: #0366d6; }
.container { max-width: 960px; margin: 0 auto; padding: var(--gap); }
.card { background: var(--card); padding: var(--gap); border-radius: 8px; border: 1px solid #e6e6ea; }
button { padding: 8px 12px; border: 1px solid #ccc; background: white; border-radius: 6px; cursor: pointer; }
.code { background: #111; color: #eee; padding: 12px; border-radius: 6px; overflow: auto; }
.card{box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.container-fluid{padding-left:10%;padding-right:10%;}
.prob-circle {
    --color: #0087ff;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(var(--color) 0% 0%, #e9ecef 0% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.5s ease;
}
.prob-circle::before {
  content: "";
  position: absolute;
  width: 60%;
  height: 60%;
  background: #ffffff;
  border-radius: 50%;
}
.prob-circle-label {
  position: relative;
  font-weight: 600;
  font-size: 0.9rem;
}
.prob-up {
  --color: #198754; 
}
.prob-down {
  --color: #dc3545; 
}
tr.detail-row td {
    padding: 0px;
    border-radius: 0px !important;
}
tr.detail-row td .card {
    border-radius: 0px !important;
}
#predictions-tbody > tr.prediction-row > td:nth-child(7),#predictions-tbody > tr.prediction-row > td:nth-child(6){
    width: 1%;
    white-space: nowrap;
}
.ver::first-letter{
    text-transform: uppercase
}

table{box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
div#predictions-spinner {
    padding: 20%;
}
body > main > ul > li:nth-child(3){margin-left: auto;}
/* Más aire en celdas de las tablas de órdenes */
.table-orders th,
.table-orders td {
  padding: 0.6rem 1rem;     /* arriba/abajo 0.6, lados 1rem */
  vertical-align: middle;   /* centrar un poco mejor verticalmente */
}

/* Evitar que el header se rompa feo */
.table-orders thead th {
  white-space: nowrap;
}

/* Opcional: reducir un poco el tamaño de texto si son muchas columnas */
.table-orders {
  font-size: 0.9rem;
}


.natural-explanation {
  white-space: pre-line;
}

.natural-explanation::before {
  content: "- ";
}