/*Añado para cambiar color cabecera web
 === Tema: Primary suave (aplica a navbar, btn-primary, etc.) === */
:root{
  --bs-primary: #6FA8DC;         /* ← cambia aquí el color a probar */
  --bs-primary-rgb: 111, 168, 220; /* los tres canales R,G,B del color anterior */
}

body { background: #f7f7fb; }
.table-fixed thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.role-badge { text-transform: capitalize; }
.chip { display: inline-flex; align-items: center; gap:.5rem; }
.table-zebra { --bs-table-striped-bg: #ECECEC; --bs-table-striped-color: inherit; }

/* Compactar un poco el formulario superior */
.compact .form-label { 
  margin-bottom: .25rem; 
  font-size: .9rem; 
  background-color: #F2F2F2;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  font-weight: 500;
  color: #495057;
}
.compact .form-control, .compact .form-select { padding-top: .35rem; padding-bottom: .35rem; }

/* Igualar estilo de etiquetas para Nueva aula y Nuevo equipo */
#formNuevaAulaCollapse .form-label,
#formNuevoEquipoCollapse .form-label {
  margin-bottom: .25rem; 
  font-size: .9rem; 
  background-color: #F2F2F2;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  font-weight: 500;
  color: #495057;
}

/* Evitar scroll horizontal: tabla fija y columnas estrechas */
#lista table.table-fixed {
  table-layout: fixed;   /* ← clave para que respeten los anchos */
  width: 100%;
}

/* Descripción (col 5) y Solución (col 9): anchos en caracteres + elipsis */
#lista table.table-fixed th:nth-child(5),
#lista table.table-fixed td:nth-child(5) { /* Descripción */
  width: 26ch;
}
#lista table.table-fixed th:nth-child(9),
#lista table.table-fixed td:nth-child(9) { /* Solución */
  width: 22ch;
}

/* Truncado con elipsis en esas dos columnas */
#lista table.table-fixed td:nth-child(5),
#lista table.table-fixed td:nth-child(9) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ajustes responsivos (reduce aún más en pantallas más estrechas) */
@media (max-width: 1400px) {
  #lista table.table-fixed th:nth-child(5),
  #lista table.table-fixed td:nth-child(5) { width: 22ch; }
  #lista table.table-fixed th:nth-child(9),
  #lista table.table-fixed td:nth-child(9) { width: 18ch; }
}
@media (max-width: 1200px) {
  #lista table.table-fixed th:nth-child(5),
  #lista table.table-fixed td:nth-child(5) { width: 18ch; }
  #lista table.table-fixed th:nth-child(9),
  #lista table.table-fixed td:nth-child(9) { width: 14ch; }
}

/* Por si aparecen palabras larguísimas en otras columnas */
#lista table.table-fixed td { overflow-wrap: anywhere; }


/* Tabla de usuarios (admin) */
.table-users td .form-control.form-control-sm { min-width: 160px; }
.code-badge { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.preview-table { max-height: 260px; overflow:auto; }

/* Listas en “cebra” para mejorar legibilidad (aulas/equipos) */
.list-zebra .list-group-item:nth-child(even) { background-color: #f4f5f7; }
.list-zebra .list-group-item:nth-child(odd)  { background-color: #ffffff; }
.list-zebra .list-group-item { transition: background-color .15s ease-in-out; }

/* === Colores de paneles (cámbialos aquí) === */
:root{
  --panel-color-a: #e6ecf1; /* describe el color */
  --panel-color-b: #fbf7ff; /* violeta muy suave */
  --panel-color-c: #fff4e8; /* ← prueba con este tono */
  --panel-border: rgba(0,0,0,.06);
}

/* Estilos de los paneles alternos */
.card.panel-alt {
  background-color: var(--_panel-bg, var(--panel-color-a));
  border-color: var(--panel-border);
}

/* Alternancia explícita A/B */
.card.panel-alt.panel-a { --_panel-bg: var(--panel-color-a); }
.card.panel-alt.panel-b { --_panel-bg: var(--panel-color-b); }
.card.panel-alt.panel-c { --_panel-bg: var(--panel-color-c); }


/* Hacer que header/body/footer hereden el fondo del panel
   aunque lleven clases como 'bg-white' en el HTML */
.card.panel-alt .card-header,
.card.panel-alt .card-body,
.card.panel-alt .card-footer {
  background-color: transparent !important;
}

/* === Colores de badges (ajústalos aquí) === */
:root{
  /* Prioridad (ejemplos suaves) */
  --prio-alta-bg:  #fde2dd; /* rojo muy suave */
  --prio-alta-fg:  #7a1f1a;
  --prio-media-bg: #fff3bf; /* amarillo suave */
  --prio-media-fg: #7a5a00;
  --prio-baja-bg:  #e9ecef; /* gris suave */
  --prio-baja-fg:  #495057;

  /* Estado */
  --estado-abierta-bg:  #fde2dd; /*  */
  --estado-abierta-fg:  #dc6868;
  --estado-encurso-bg:  #dbeafe; /* azul suave */
  --estado-encurso-fg:  #1e40af;
  --estado-resuelta-bg: #dcfce7; /* verde suave */
  --estado-resuelta-fg: #166534;
}

/* === Clases usadas por app.js === */
.badge-prio-alta   { background-color: var(--prio-alta-bg);   color: var(--prio-alta-fg); }
.badge-prio-media  { background-color: var(--prio-media-bg);  color: var(--prio-media-fg); }
.badge-prio-baja   { background-color: var(--prio-baja-bg);   color: var(--prio-baja-fg); }

.badge-estado-abierta  { background-color: var(--estado-abierta-bg);  color: var(--estado-abierta-fg); }
.badge-estado-encurso  { background-color: var(--estado-encurso-bg);  color: var(--estado-encurso-fg); }
.badge-estado-resuelta { background-color: var(--estado-resuelta-bg); color: var(--estado-resuelta-fg); }

/* Opcional: borde fino para mejor contraste en fondos de panel */
.badge-prio-alta, .badge-prio-media, .badge-prio-baja,
.badge-estado-abierta, .badge-estado-encurso, .badge-estado-resuelta {
  border: 1px solid rgba(0,0,0,.08);
}

/* Asegura zebra legible dentro del panel de incidencias */
.panel-incidencias .table.table-zebra{
  --bs-table-bg: #fff; /* filas pares en blanco */
}
/* ya tienes: .table-zebra { --bs-table-striped-bg: #ECECEC; } para las impares */

/* añadido con la posibilidad de ordenar incidencias */
.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sortable .sort-ind { font-size: .85em; opacity: .6; margin-left: .25rem; }
.th-sortable.active { font-weight: 600; } 

/* Cabeceras ordenables: título arriba, flecha debajo */
.th-sortable{
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;    /* apila en vertical */
  align-items: flex-start;    /* alinea a la izquierda */
  line-height: 1.1;
  white-space: normal;        /* permite dos líneas */
}

.th-sortable .sort-ind{
  display: block;
  margin: .15rem 0 0 0;       /* debajo del texto, sin margen izq */
  font-size: .95em;           /* un poco mayor */
  opacity: .7;
}

.th-sortable.active{ font-weight: 600; }


/* Edición en línea (admin) */
.editable-inline{
  padding: 2px 4px;
  border-radius: 4px;
  cursor: text;
  min-width: 1ch;
  display: inline-block;
}
.editable-inline:focus{
  outline: 2px solid rgba(13,110,253,.25);
  outline-offset: 1px;
}

/* Placeholder para campos editables vacíos (admin) */
.editable-inline[data-placeholder]:empty::before{
  content: attr(data-placeholder);
  color: rgba(0,0,0,.35);
}
.saving{
  opacity: .6;
  pointer-events: none;
}