/* ==== Base general ==== */
body {
  font-family: "Segoe UI", Arial, sans-serif;
  margin: 1em;
  background-color: #d8dee9; /* gris medio del fondo */
  color: #222;
  line-height: 1.5;
}

h1, h2, h3 {
  margin-bottom: 0.8em;
  font-weight: 600;
  color: #222;
}

h1 { font-size: 1.6em; }
h2 { font-size: 1.3em; margin-top: 1em; }
h3 { font-size: 1.1em; margin-top: 0.8em; }

/* ==== Contenedor ==== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5em;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow-x: auto; /* ✅ scroll horizontal si se desborda */
}

/* ==== Tablas ==== */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  border-radius: 6px;
  overflow: hidden;
  min-width: 600px; /* ✅ asegura columnas legibles */
}

th, td {
  border: 1px solid #ccc;
  padding: 8px 10px;
  text-align: center;
  font-size: 14px;
}

th {
  background-color: #f2f2f2;
  font-weight: 600;
}

/* Filas alternas diferenciadas */
table tr:nth-child(odd) { background-color: #fff; }
table tr:nth-child(even) { background-color: #f7f9fb; }

/* ==== Inputs ==== */
input[type="text"],
input[type="number"],
input[type="password"] {
  width: 120px;      /* ✅ más compacto */
  padding: 4px 6px;  /* ✅ menos alto */
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 13px;
}

/* Quitar flechas en number */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

input:focus {
  border-color: #4a90e2;
  outline: none;
  box-shadow: 0 0 4px rgba(74,144,226,0.3);
}

/* ==== Botones ==== */
button {
  padding: 8px 14px;
  margin: 6px 4px;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  white-space: nowrap; /* ✅ evita que el texto se parta */
}

button:active { transform: scale(0.97); }

/* Variantes */
.btn-primary   { background: linear-gradient(135deg, #007bff, #0056d2); color: #fff; }
.btn-primary:hover { background: linear-gradient(135deg, #0056d2, #003e9c); }

.btn-success   { background: linear-gradient(135deg, #28a745, #218838); color: #fff; }
.btn-success:hover { background: linear-gradient(135deg, #218838, #1e7e34); }

.btn-info      { background: linear-gradient(135deg, #17a2b8, #117a8b); color: #fff; }
.btn-info:hover { background: linear-gradient(135deg, #117a8b, #0d5c63); }

.btn-danger    { background: linear-gradient(135deg, #dc3545, #b02a37); color: #fff; }
.btn-danger:hover { background: linear-gradient(135deg, #b02a37, #802029); }

/* ==== Estado ==== */
#status {
  margin-top: 15px;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 4px;
}
#status.ok    { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; }
#status.error { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; }
#status.info  { color: #0c5460; background-color: #d1ecf1; border: 1px solid #bee5eb; }

/* ==== Info box ==== */
.info-box {
  border: 1px solid #ddd;
  padding: 12px;
  margin: 1em 0;
  background: #d8dee9;
  border-radius: 6px;
}

/* ==== Resaltados en tablas ==== */
.col-alloc {
  font-weight: bold;
  color: #000;        /* negro */
}
.col-res-coop {
  font-weight: bold;
  color: #28a745;     /* verde */
}
.col-res-comp {
  font-weight: bold;
  color: #dc3545;     /* rojo */
}

/* ==== Responsividad ==== */
@media (max-width: 768px) {
  body { margin: 1em 0.5em; font-size: 14px; }
  .container { padding: 1em; }
  table { font-size: 13px; min-width: 100%; }
  th, td { padding: 6px 8px; }
  input[type="text"],
  input[type="number"],
  input[type="password"] { max-width: 100%; width: 100%; }
  button { width: 100%; margin: 6px 0; }
}

/* ==== Resaltados automáticos en Last Turn ==== */

/* Columna 2 = mov Alloc → negro y negrita */
#last-turn table td:nth-child(2) {
  font-weight: bold;
  color: #000;
}

/* Columna 5 = res Coop → verde */
#last-turn table td:nth-child(5) {
  font-weight: bold;
  color: #28a745;
}

/* Columna 6 = res Comp → rojo */
#last-turn table td:nth-child(6) {
  font-weight: bold;
  color: #dc3545;
}

/* ==== Hover sutil en filas de resultados ==== */
#last-turn table tbody tr:hover {
  background-color: #eef3f7; /* un gris-azulado más perceptible */
  transition: background-color 0.2s ease-in-out;
}

/* ==== Transiciones suaves ==== */
#last-turn table td,
#last-turn table th,
#status {
  transition: all 0.3s ease-in-out;
}

/* Tablas dentro del contenedor */
.container table {
  width: 100%;
  max-width: 100%;     /* nunca más ancho que el contenedor */
  table-layout: auto;  /* que las celdas se ajusten */
}

/* Scroll horizontal si se desborda */
.container {
  overflow-x: auto;
}

/* Mantener un mínimo solo para tablas muy estrechas */
table {
  border-collapse: collapse;
  margin: 1em 0;
  border-radius: 6px;
  overflow: hidden;
  min-width: 500px; /* un poco menos que antes */
}