/* ==========================================================================
   responsive.css
   Hoja compartida, mobile-first, para todo el sistema.
   Breakpoints: 360px / 480px / 768px / 1024px

   Contiene el patrón "tabla -> tarjeta": en pantallas < 768px cada <tr>
   de una tabla con clase `.table-stack` se muestra como una tarjeta
   apilada, usando el atributo `data-label` de cada <td> (vía ::before)
   para mostrar el nombre de la columna. No requiere JavaScript.

   Clases usadas en las plantillas:
     .table-stack                 -> en el <table>
     data-label="Columna"         -> en cada <td> (igual que el <th>)
     .table-stack-actions         -> en el <td> que contiene los enlaces/acciones
     .table-stack-actions-inner   -> en un <div> dentro de ese <td>
   ========================================================================== */

/* ---------------------------------------------------------------------
   Base (mobile-first): sin overflow horizontal en contenedores/encabezado
   --------------------------------------------------------------------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* html/body ya recortan cualquier overflow horizontal a nivel de página
   (regla de arriba): eso es lo único que hace falta para evitar el scroll
   horizontal general en mobile. Ponerlo TAMBIÉN en .container/.container-fluid
   es redundante para ese objetivo, y tiene un efecto secundario no deseado:
   cualquier dropdown/menú que necesite desbordar hacia abajo (ej. el del
   usuario en el navbar, o el selector .js-task-select de Registro diario)
   queda atrapado y recortado dentro de la caja de su contenedor. Por eso
   estos dos NO llevan overflow-x acá. */
.container,
.container-fluid {
  max-width: 100%;
}

/* Buscadores/filtros a ancho completo en móvil */
form input.form-control,
form select.form-select {
  width: 100%;
}

/* ---------------------------------------------------------------------
   Patrón "tabla -> tarjeta"
   Mobile-first: la tarjeta es el estado por defecto; desde 768px se
   restaura la tabla real (display: table).
   --------------------------------------------------------------------- */
.table-stack {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-stack thead {
  /* Oculto visualmente pero accesible (no display:none) */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.table-stack,
.table-stack tbody,
.table-stack tr,
.table-stack td {
  display: block;
  width: 100%;
}

.table-stack tbody tr {
  background: #fff;
  border: 1px solid rgba(11, 61, 145, 0.12);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
  padding: 0.85rem 1rem;
  margin-bottom: 0.9rem;
}

.table-stack tbody tr:last-child {
  margin-bottom: 0;
}

.table-stack td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: right;
  padding: 0.45rem 0;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  /* El valor (texto plano tras el ::before) es un flex item anónimo con
     min-width:auto por defecto: sin esto, un valor largo (ej. un email)
     no se achica ni hace wrap, se sale del contenedor. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.table-stack td:last-child {
  border-bottom: 0;
}

.table-stack td::before {
  content: attr(data-label);
  flex-shrink: 0;
  margin-right: auto;
  padding-right: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  color: var(--cmch-azul, #0b3d91);
}

.table-stack td:not([data-label])::before,
.table-stack td[data-label=""]::before {
  content: none;
}

/* Campos largos (email, nombre completo): en mobile se apilan label
   arriba / valor abajo en vez de compartir la misma línea que el label
   -aunque ya no se salga del viewport, en la misma fila queda apretado
   contra el borde derecho-. Clase a agregar en el <td> correspondiente. */
.table-stack td.table-stack-td-full {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.table-stack td.table-stack-td-full::before {
  margin-right: 0;
  padding-right: 0;
}

/* Contenedor de badges (ej. columna "Estado"): permite que se envuelvan
   en vez de desbordar si en el futuro se agrega un tercer badge. */
.table-stack-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.table-stack td.table-stack-td-full .table-stack-badges {
  justify-content: flex-start;
}

/* Fila "no hay resultados" (colspan): no debe verse como celda etiquetada */
.table-stack tbody tr td[colspan] {
  display: block;
  text-align: center;
  border-bottom: 0;
  padding: 0.5rem 0;
}

.table-stack tbody tr td[colspan]::before {
  content: none;
}

/* Columna de acciones: al final de la tarjeta, con separación clara */
.table-stack td.table-stack-actions {
  justify-content: flex-start;
  text-align: left;
  padding-top: 0.75rem;
}

.table-stack-actions-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.table-stack-actions-inner a,
.table-stack-actions-inner button {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(11, 61, 145, 0.18);
  border-radius: 8px;
  text-decoration: none;
  width: 100%;
}

.table-stack-actions-inner form {
  display: flex;
  width: 100%;
}

.table-stack-actions-inner form button {
  width: 100%;
}

/* ---------------------------------------------------------------------
   Grilla de acciones (botonera de accesos, ej. Registro diario /
   Documentos / Evaluación / Convenio / Chat de seguimiento en el detalle
   de práctica): mobile-first, 2 columnas en móvil para que ningún botón
   quede cortado fuera del viewport; desde 768px vuelve a una fila que
   envuelve según el ancho disponible.
   Clase: .action-grid (en el contenedor), con los botones/enlaces
   dentro usando la clase .btn (Bootstrap) como ya se hace hoy.
   --------------------------------------------------------------------- */
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.action-grid > .btn {
  width: 100%;
  white-space: normal;
  text-align: center;
}

/* =======================================================================
   360px — teléfonos angostos
   ======================================================================= */
@media (min-width: 360px) {
  .table-stack tbody tr {
    padding: 0.9rem 1.1rem;
  }
}

/* =======================================================================
   480px — teléfonos grandes / phablets
   ======================================================================= */
@media (min-width: 480px) {
  .table-stack-actions-inner {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .table-stack-actions-inner a,
  .table-stack-actions-inner button,
  .table-stack-actions-inner form {
    width: auto;
    flex: 1 1 auto;
  }
}

/* =======================================================================
   768px — tablet en adelante: la tarjeta vuelve a ser tabla real
   ======================================================================= */
@media (min-width: 768px) {
  form input.form-control,
  form select.form-select {
    /* width:auto revierte al tamaño nativo del navegador para un <input>
       (~20 caracteres), demasiado angosto para placeholders como "Buscar
       por razón social o RUT...". Con esto quedan a un ancho legible sin
       estirarse a lo bruto en formularios sueltos dentro de contenedores
       muy anchos (ej. el buscador de Empresas). */
    width: 100%;
    max-width: 400px;
  }

  /* Excepción: un formulario dentro de una .card (login, registro) ya
     vive en un contenedor angosto y centrado (ej. col-md-5) — el límite
     de arriba no hace falta ahí y solo deja un hueco vacío al lado del
     input, descuadrado con el botón (que sí es w-100). Que ocupe el 100%
     real de su tarjeta, como el botón. */
  .card form input.form-control,
  .card form select.form-select {
    max-width: none;
  }

  .action-grid {
    display: flex;
    flex-wrap: wrap;
  }

  .action-grid > .btn {
    width: auto;
  }

  .table-stack thead {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    display: table-header-group;
  }

  .table-stack {
    display: table;
  }

  /* Selector reforzado (table.table-stack, no solo .table-stack) para que
     gane sin ambigüedad sobre la regla mobile de arriba que fuerza
     width:100% en la tabla — misma especificidad de clase, pero esta suma
     el tipo de elemento y no depende del orden en el archivo. En mobile
     width:100% tiene sentido (la tarjeta ocupa todo el ancho); en
     escritorio, forzarlo en una tabla con columnas cortas obligaba al
     navegador a inflar la única columna de texto libre (ej. "Nombre")
     para rellenar el resto. */
  table.table-stack {
    width: auto;
    max-width: 100%;
  }

  /* Tabla sin resultados (solo la fila de fallback "No hay X registrados",
     con su <td colspan>): sin filas reales, el ancho auto de arriba se
     calcula puramente del texto corto de los <th>, dejando la tabla mucho
     más angosta que su contenedor -el header oscuro corta a mitad de
     camino y el mensaje de "sin resultados" queda descentrado-. Detectado
     por la presencia del <td colspan>, que solo existe en esa fila de
     fallback; con datos reales esta regla no aplica y el ancho auto de
     arriba sigue intacto. */
  table.table-stack:has(> tbody > tr > td[colspan]) {
    width: 100%;
  }

  .table-stack tbody {
    display: table-row-group;
  }

  .table-stack tr {
    display: table-row;
  }

  .table-stack td,
  .table-stack th {
    display: table-cell;
    /* width:1% (ver abajo) hace que cada columna ocupe solo lo que su
       contenido necesita — perfecto cuando hay datos reales, pero con
       poco contenido (encabezados cortos, tabla vacía) el resultado
       queda todo apretado a la izquierda. Este mínimo evita que se vea
       así, sin impedir que una columna con contenido genuinamente ancho
       crezca más allá de esto. */
    min-width: 110px;
  }

  .table-stack tbody tr {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
  }

  .table-stack td {
    text-align: left;
    padding: 0.75rem;
    border-bottom: inherit;
    justify-content: flex-start;
    /* En mobile la celda es una fila flex angosta y necesita poder
       partir palabras largas (ver arriba). En escritorio, con muchas
       columnas, dejar que el texto envuelva dentro de la celda hace que
       el navegador la aplaste (nombres de 3-4 palabras terminan una
       palabra por línea) aunque sobre espacio a los costados. Con
       nowrap cada celda ocupa su ancho natural en una sola línea; si la
       fila completa no cabe, crece la tabla y el scroll horizontal de
       .table-responsive (ver plantillas) es la válvula de escape, no el
       aplastamiento de columnas.

       width:1% es el truco clásico de tablas HTML: le pide a cada
       columna que ocupe solo el mínimo que su contenido necesita, en vez
       de repartirse una porción arbitraria del ancho total. Aplicado por
       igual a TODAS las columnas (no solo a las cortas), ninguna se
       infla a costa de las demás — la tabla termina con el ancho real de
       la suma de sus columnas, sin necesitar marcar cuál es "la
       importante" en cada plantilla.
    */
    white-space: nowrap;
    width: 1%;
  }

  .table-stack td::before {
    content: none;
  }

  /* Campos largos marcados con .table-stack-td-full (email, nombre
     completo, texto libre): el nowrap + width:1% de arriba es perfecto
     para columnas cortas (RUT, Estado, badges), pero fuerza un correo o
     un cargo largo a quedar en una sola línea kilométrica. Con varias
     columnas así en la misma tabla (ej. Usuarios: Rol/Cargo/Especialidad
     + Email) la suma de anchos no cabe en ninguna pantalla real y el
     único resultado es scroll horizontal permanente, aunque el
     contenedor sea más ancho (ver 992px arriba). Estas sí pueden
     partirse en 2-3 líneas sin perder legibilidad, así que se les da un
     ancho acotado en vez de "todo en una sola línea". */
  .table-stack td.table-stack-td-full {
    white-space: normal;
    word-break: break-word;
    width: auto;
    max-width: 260px;
  }

  .table-stack tbody tr td[colspan] {
    padding: 0.75rem;
  }

  .table-stack td.table-stack-actions {
    padding-top: 0.75rem;
  }

  .table-stack-actions-inner {
    /* Antes iban en fila con un "·" separador: con 3 acciones (ej. Editar /
       Representante legal / Convenio en Empresas) esa fila era más ancha
       que el resto de la tabla y forzaba un wrap feo a mitad de acción.
       Apiladas una debajo de otra, cada una queda legible sin importar
       cuántas haya, y esa celda usa el ancho mínimo que necesita (ver
       width:1% de .table-stack td), no un ancho arbitrario. */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    width: auto;
  }

  .table-stack-actions-inner a,
  .table-stack-actions-inner button {
    min-height: auto;
    min-width: auto;
    width: auto;
    flex: none;
  }

  /* Los <a> sueltos (ej. "Ver", "Editar", sin clase .btn) son links de
     texto: se ven compactos, sin caja de botón. Los <button class="btn ...">
     (ej. "Firmar como admin", "Rechazar") y los <a class="btn ..."> (ej.
     "Ver ficha" en PIE) SÍ son botones reales de Bootstrap y deben
     conservar su fondo/borde/padding — quitárselos los deja como texto
     plano resaltado, sin verse clicables. El :not(.btn) es lo que evita
     que esta regla le pise el estilo a un <a> que sí quiso ser botón. */
  .table-stack-actions-inner a:not(.btn) {
    border: 0;
    border-radius: 0;
    /* Área táctil de 44px de alto sin agrandar el texto ni el espacio
       real entre acciones: el padding agranda la caja clickeable, el
       margin negativo de igual magnitud la vuelve a encoger visualmente
       a su tamaño de antes (ver .table-stack-actions-inner gap arriba,
       que sigue midiendo lo mismo porque gap se calcula sobre los
       bordes ya compensados por el margin negativo). */
    padding: 12px 0;
    margin: -12px 0;
  }

  .table-stack-actions-inner form {
    display: inline-flex;
    width: auto;
    flex: none;
  }

  .table-stack-actions-inner form button {
    width: auto;
  }
}

/* =======================================================================
   1024px — escritorio: un poco más de aire en las celdas
   ======================================================================= */
@media (min-width: 1024px) {
  .table-stack td {
    padding: 0.85rem 1rem;
  }
}

/* =======================================================================
   992px+ — tablet grande en adelante: el .container de Bootstrap salta
   entre anchos fijos (960/1140/1320px) sin importar cuánto más ancha sea
   la ventana real, dejando franjas vacías a los costados mientras una
   tabla con muchas columnas (ej. Estudiantes, Empresas) igual tiene que
   recurrir al scroll horizontal de .table-responsive. En vez de otro
   salto fijo, se usa un ancho fluido (% del viewport) para que se adapte
   a cualquier resolución, con un tope para no estirarse de más en
   monitores ultra anchos.
   Selector con `body >` para igualar la especificidad de Bootstrap y ganar
   por orden de carga (responsive.css se carga después de bootstrap.min.css).
   ======================================================================= */
@media (min-width: 992px) {
  body > .container {
    width: 96%;
    max-width: 1600px;
  }
}