/* ---------------------------------------------------------------------------
   Portal de Soporte — Protección Mutual
   Paleta tomada de StockIT (App/wwwroot/css/site.css) para que los dos sistemas
   se vean como una misma familia. Si cambia la identidad, cambia en los dos.
   --------------------------------------------------------------------------- */

:root {
  --brand-primary: #A71930;
  --brand-primary-dark: #861326;
  --brand-primary-soft: #F5E7EA;
  --brand-gray-dark: #343A40;
  --brand-gray: #66707A;
  --brand-gray-light: #D8DADD;
  --brand-surface: #FAF9F7;
  --brand-background: #F1EFEC;
  --brand-white: #FFFFFF;
  --status-success: #2F7D42;
  --status-success-soft: #EAF4EC;
  --status-warning: #B26A00;
  --status-warning-soft: #FBF0E1;
  --status-danger: #B71C32;
  --status-danger-soft: #F8E8EB;
  --app-text: #252A2E;
  --app-shadow: 0 12px 30px rgba(52, 58, 64, 0.09);
  --app-radius: 14px;
}

body {
  /* El mismo fondo que StockIT. Un blanco puro deja las tarjetas sin borde visible
     y la pantalla se lee plana; este gris cálido las separa sin ensuciar. */
  background-color: #F3F1EF;
  color: var(--app-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Un velo apenas perceptible del rojo de la marca en la parte de arriba del
   contenido, para que la pantalla no arranque plana debajo de la cabecera. Se
   apaga a los 420px, así el resto de la página queda limpio. */
.app-main {
  flex: 1 0 auto;
  padding: 2.25rem 0 4rem;
  background-image: linear-gradient(180deg, rgba(167, 25, 48, .05) 0%, rgba(167, 25, 48, 0) 420px);
}

/* Ancho del contenido, igual que en StockIT: usa la pantalla en serio en vez de
   dejar dos franjas vacías a los costados. */
.app-shell {
  width: min(100%, 1760px);
  margin: 0 auto;
  padding-left: clamp(1rem, 2.2vw, 2.5rem);
  padding-right: clamp(1rem, 2.2vw, 2.5rem);
}

/* --- Cabecera institucional ---
   Misma estructura que StockIT: fondo claro, logo de la marca a la izquierda, el
   nombre del sistema al lado, y el menú con iconos a la derecha. Lo que cambia es
   el nombre y la bajada; el formato es deliberadamente el mismo, para que los dos
   sistemas se lean como una familia. */
.institutional-header {
  position: relative;
  z-index: 20;
}

.app-navbar {
  min-height: 96px;
  padding: .65rem 0;
  border-bottom: 2px solid var(--brand-primary);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 4px 16px rgba(52, 58, 64, .08);
}

/* La barra va de borde a borde, como en StockIT: el logo pegado a la izquierda y el
   usuario a la derecha. Centrarla dejaba dos franjas vacías y la hacía ver angosta
   al lado del otro sistema. */
.app-navbar > .app-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* width y max-width: con soltar sólo el max-width, el `width: min(100%, 1760px)`
     seguía angostando la barra y el logo quedaba a 95px del borde. */
  width: 100%;
  max-width: none;
  padding-left: 32px;
  padding-right: 32px;
}

/* Todo en un solo renglón: con la marca fija y nueve ítems de ancho mínimo, el
   conjunto no entraba y el menú caía a una segunda línea. Ahora el bloque de marca
   puede encogerse y los ítems se ajustan al espacio disponible.

   El menú horizontal arranca en 1200px y no en 992: abajo de eso los nueve ítems ya
   no entran por más que se los apriete, y desbordaban la pantalla de costado. Ahí va
   el botón de menú, que es lo que hace un teléfono o una tablet apaisada. */
@media (min-width: 1200px) {
  .app-navbar > .app-shell {
    flex-wrap: nowrap;
  }

  .app-navbar .navbar-collapse {
    flex-basis: auto;
    min-width: 0;
  }
}

.app-brand {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 0;
  min-width: 0;
  text-decoration: none;
}

.app-brand-logo {
  display: inline-flex;
  align-items: center;
  width: clamp(120px, 12vw, 185px);
  min-width: 120px;
}

.app-brand-logo img {
  width: 100%;
  height: auto;
}

/* La barra vertical que separa el logo institucional del nombre del sistema. */
.app-brand-copy {
  display: flex;
  flex-direction: column;
  padding-left: 1.15rem;
  border-left: 1px solid var(--brand-gray-light);
  line-height: 1.2;
}

.app-brand-copy strong {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--brand-gray-dark);
}

.app-brand-copy small {
  font-size: .85rem;
  color: var(--brand-gray);
}

.app-navbar .nav-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  /* Ancho mínimo chico y padding elástico: los ítems se reparten el espacio que
     sobra y quedan parejos entre sí, en vez de forzar un salto de línea. */
  min-width: 76px;
  padding: .5rem clamp(.4rem, .9vw, 1rem);
  color: var(--brand-gray);
  font-size: clamp(.76rem, .62vw + .38rem, .86rem);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link.active {
  color: var(--brand-primary);
}

/* El subrayado del ítem actual, en el rojo de la marca. */
.app-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: -.2rem;
  height: 2px;
  background: var(--brand-primary);
}

.nav-icon {
  display: block;
  width: 24px;
  height: 24px;
  opacity: .72;
}

.app-navbar .nav-link:hover .nav-icon,
.app-navbar .nav-link.active .nav-icon {
  opacity: 1;
}

/* Entre 1200 y 1500px —el ancho de casi todas las notebooks del área— la marca
   completa más los nueve ítems no entran en un renglón. Se cede lo que menos se
   necesita: la bajada del sistema, que ya está dicha en el nombre, y el aire entre
   ítems. Antes de esto, el menú desbordaba 32px a 1366. */
@media (min-width: 1200px) and (max-width: 1500px) {
  .app-navbar > .app-shell {
    gap: .4rem;
    padding-left: 16px;
    padding-right: 16px;
  }

  .app-brand-copy small {
    display: none;
  }

  .app-brand-logo {
    width: 118px;
    min-width: 118px;
  }

  .app-navbar .nav-link {
    min-width: 52px;
    padding: .5rem .2rem;
    font-size: .74rem;
  }

  .nav-icon {
    width: 21px;
    height: 21px;
  }

  /* Con el prefijo: las reglas base del menú de usuario están más abajo en el
     archivo y una media query no agrega especificidad, así que sin esto las
     pisaba la declaración base y el ajuste no hacía nada. */
  .app-navbar .user-menu-copy strong {
    max-width: 76px;
  }

  .app-navbar .user-menu {
    margin-left: .25rem;
  }

  .app-navbar .user-avatar {
    width: 30px;
    height: 30px;
  }
}

/* Abajo de 1320 ya no alcanza con apretar: sobran unos 40px. Se cede el nombre de
   quien está conectado —queda el avatar, y el nombre completo está adentro del
   desplegable— antes que romper el renglón o esconder un ítem del menú. */
@media (min-width: 1200px) and (max-width: 1319px) {
  .app-navbar .user-menu-copy {
    display: none;
  }

  .app-brand-logo {
    width: 92px;
    min-width: 92px;
  }

  .app-navbar .nav-link {
    min-width: 48px;
    padding: .5rem .12rem;
  }
}

/* --- Menú de usuario --- */
.user-menu {
  margin-left: .6rem;
  flex: 0 0 auto;
}

.user-menu-toggle {
  max-width: 210px;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .55rem;
  color: var(--app-text);
  border: 1px solid rgba(167, 25, 48, .16);
  border-radius: 12px;
  background: var(--brand-white);
}

.user-menu-toggle:hover,
.user-menu-toggle:focus {
  color: var(--brand-primary);
  border-color: rgba(167, 25, 48, .4);
  background: #FAF7F7;
}

.user-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--brand-white);
  border-radius: 50%;
  background: var(--brand-primary);
}

.user-avatar svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.user-menu-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.user-menu-copy strong {
  font-size: .85rem;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-copy small {
  font-size: .75rem;
  color: var(--brand-gray);
}

.user-dropdown-heading {
  padding: .5rem 1rem;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.user-dropdown-heading small {
  color: var(--brand-gray);
  font-size: .78rem;
}

.user-logout {
  color: var(--status-danger);
}

@media (max-width: 1199px) {
  .app-brand-logo {
    width: 150px;
    min-width: 150px;
  }

  .app-brand-copy strong {
    font-size: 1.1rem;
  }

  .app-brand-copy small {
    font-size: .75rem;
  }

  /* Apilado, los iconos arriba del texto ocupan de más: van al costado. */
  .app-navbar .nav-link {
    flex-direction: row;
    justify-content: flex-start;
    gap: .6rem;
    min-width: 0;
    padding: .6rem .25rem;
  }

  .app-navbar .nav-link.active::after {
    left: .25rem;
    right: auto;
    width: 28px;
  }

  .user-menu {
    margin: .5rem 0 0;
  }
}

/* En el teléfono el bloque de marca no entra al lado del botón del menú: se achica
   el logo y se esconde la bajada, que ahí no aporta —el nombre del sistema alcanza
   para saber dónde estás— y era lo que empujaba la pantalla de costado. */
@media (max-width: 640px) {
  .app-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .app-navbar {
    min-height: 0;
  }

  .app-brand {
    max-width: calc(100% - 70px);
    gap: .6rem;
  }

  .app-brand-logo {
    width: 108px;
    min-width: 108px;
  }

  .app-brand-copy {
    padding-left: .6rem;
    min-width: 0;
  }

  .app-brand-copy strong {
    font-size: .98rem;
  }

  .app-brand-copy small {
    display: none;
  }

  .app-navbar > .app-shell {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Sólo aparece cuando llega el foco por teclado. */
.salto-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand-white);
  color: var(--brand-primary-dark);
  padding: .6rem 1rem;
  border-radius: 0 0 var(--app-radius) 0;
  font-weight: 600;
}

.salto-al-contenido:focus {
  left: 0;
}

/* Foco visible en toda la aplicación: el default del navegador se pierde sobre
   los fondos claros de las tarjetas. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* --- Superficies --- */
.app-card {
  background-color: var(--brand-white);
  border: 1px solid var(--brand-gray-light);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}

/* Tarjeta que le pide algo al usuario: tiene que distinguirse de las que sólo
   informan, sin gritar como una alerta de error. */
.borde-atencion {
  border-left: 4px solid var(--brand-primary);
}

/* --- Portada ---
   Mismo formato que el panel de StockIT: fondo institucional con un velo claro
   encima, un rótulo chico arriba, el título grande y una fila de datos. El velo no
   es decorativo: sobre la foto sola, el texto gris no llega al contraste mínimo. */
.app-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--app-radius);
  border: 1px solid var(--brand-gray-light);
  padding: 2.5rem 2.25rem;
  margin-bottom: 2rem;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .93) 45%, rgba(255, 255, 255, .72) 100%),
    url('../images/proteccion-background.png');
  background-size: cover;
  background-position: center right;
}

.app-hero-rotulo {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: .35rem;
}

.app-hero h1 {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--brand-gray-dark);
  margin-bottom: .35rem;
}

.app-hero p {
  color: var(--brand-gray);
  margin-bottom: 0;
  max-width: 46ch;
}

/* La fila de datos institucionales del pie de la portada. */
.app-hero-datos {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--brand-gray-light);
}

.app-hero-dato {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .84rem;
  color: var(--brand-gray);
}

.app-hero-dato strong {
  color: var(--brand-gray-dark);
  font-weight: 600;
}

@media (max-width: 640px) {
  .app-hero {
    padding: 1.75rem 1.25rem;
  }

  .app-hero h1 {
    font-size: 1.55rem;
  }
}

/* --- Encabezado de sección ---
   El rótulo chico arriba del título, como en el panel de StockIT. */
.seccion-encabezado {
  margin-bottom: 1rem;
}

.seccion-rotulo {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.seccion-titulo {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand-gray-dark);
  margin: .1rem 0 0;
}

/* --- Indicadores ---
   Tarjeta con filo de color, número grande y enlace al pie. El filo dice de qué se
   trata antes de leer el rótulo. */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.15rem;
}

.indicador {
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.25rem;
  background: var(--brand-white);
  border: 1px solid var(--brand-gray-light);
  border-left: 4px solid var(--brand-gray-light);
  border-radius: 12px;
  text-decoration: none;
  color: var(--app-text);
  box-shadow: 0 6px 18px rgba(52, 58, 64, .06);
  transition: transform .16s ease, box-shadow .16s ease;
}

.indicador:hover,
.indicador:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(52, 58, 64, .12);
  color: var(--app-text);
}

/* Un color por tarjeta, fijo: rojo lo urgente, verde lo que ya está en manos de
   alguien, gris lo que todavía no. El gris es un gris de verdad y no el del borde
   —#D8DADD sobre blanco no se ve— para que las tres se lean como una decisión. */
.indicador-urgente { border-left-color: var(--status-danger); }
.indicador-propio  { border-left-color: var(--status-success); }
.indicador-espera  { border-left-color: #5B6670; }

.indicador-titulo {
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand-gray);
}

.indicador-numero {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-gray-dark);
}

.indicador-detalle {
  font-size: .8rem;
  color: var(--brand-gray);
}

.indicador-enlace {
  margin-top: .85rem;
  padding-top: .6rem;
  border-top: 1px solid var(--brand-gray-light);
  font-size: .82rem;
  font-weight: 600;
  color: var(--brand-primary);
}

.dato-icono {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--brand-primary);
}

/* --- Grilla de categorías del portal ---
   Ancho mínimo chico para que las siete entren en un renglón en una pantalla
   normal; en una angosta bajan solas. auto-fit y no auto-fill: las columnas que
   sobran se reparten el ancho en vez de quedar vacías. */
.categoria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem;
}

/* Mismo tratamiento que las tarjetas de indicadores: filo de color a la izquierda,
   para que la pantalla se lea como una sola pieza y no como dos estilos pegados. */
.categoria-card {
  background-color: var(--brand-white);
  border: 1px solid var(--brand-gray-light);
  border-left: 4px solid var(--brand-primary);
  border-radius: 12px;
  padding: 1rem .85rem;
  text-align: center;
  text-decoration: none;
  color: var(--app-text);
  box-shadow: 0 6px 18px rgba(52, 58, 64, .06);
  transition: transform .16s ease, box-shadow .16s ease;
  display: block;
}

/* Cada categoría lleva el color de su icono: la llave ámbar, la red azul, el
   gráfico naranja. No codifica ningún estado, sólo evita que la grilla sean siete
   tarjetas iguales. */
.categoria-card.categoria-gris    { border-left-color: #5B6670; }
.categoria-card.categoria-pizarra { border-left-color: #46708C; }
.categoria-card.categoria-azul    { border-left-color: #2F6FB2; }
.categoria-card.categoria-celeste { border-left-color: #3AA0D1; }
.categoria-card.categoria-ambar   { border-left-color: #C9911F; }
.categoria-card.categoria-violeta { border-left-color: #6E5AA8; }
.categoria-card.categoria-verde   { border-left-color: var(--status-success); }
.categoria-card.categoria-naranja { border-left-color: #C9601F; }
.categoria-card.categoria-marca   { border-left-color: var(--brand-primary); }

.categoria-card:hover,
.categoria-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(52, 58, 64, .12);
  color: var(--brand-primary-dark);
}

.categoria-card .categoria-icono {
  font-size: 1.5rem;
  line-height: 1;
  display: block;
  margin-bottom: .45rem;
}

.categoria-card .categoria-nombre {
  font-weight: 600;
  font-size: .88rem;
  line-height: 1.25;
  display: block;
}

/* --- Listados que se vuelven tarjetas en el teléfono ---

   Una tabla de siete columnas en 375px obliga a arrastrar cada fila de costado
   para ver el estado o el responsable. Con el QR de las etiquetas, el celular
   dejó de ser un caso raro: el usuario está parado frente al equipo con el
   teléfono en la mano, y el técnico mira la bandeja desde donde esté.

   Cada celda lleva su rótulo en data-etiqueta y el CSS lo dibuja adelante. Un
   solo marcado sirve para las dos formas: nada de duplicar la lista en HTML. */
@media (max-width: 640px) {
  .tabla-tarjetas thead {
    display: none;
  }

  .tabla-tarjetas,
  .tabla-tarjetas tbody,
  .tabla-tarjetas tr,
  .tabla-tarjetas td {
    display: block;
    width: 100%;
  }

  .tabla-tarjetas tr {
    border: 1px solid var(--brand-gray-light);
    border-radius: 12px;
    padding: .85rem 1rem;
    margin: 0 0 .75rem;
    background: var(--brand-white);
  }

  .tabla-tarjetas tr:last-child {
    margin-bottom: 0;
  }

  .tabla-tarjetas td {
    border: 0;
    padding: .2rem 0;
  }

  /* El rótulo de la columna, que en la tabla lo daba el encabezado. */
  .tabla-tarjetas td[data-etiqueta]::before {
    content: attr(data-etiqueta) ": ";
    color: var(--brand-gray);
    font-size: .78rem;
  }

  /* La celda del número y la del asunto se leen solas y no necesitan rótulo. */
  .tabla-tarjetas td.celda-titulo {
    font-size: 1.02rem;
    padding-bottom: .4rem;
  }

  /* En modo tarjeta la marca de urgencia va en todo el borde, no en una celda. */
  .tabla-tarjetas tr.fila-urgente {
    border-left: 4px solid var(--brand-primary);
  }

  .tabla-tarjetas tr.fila-urgente > td:first-child {
    box-shadow: none;
  }

  /* Las acciones quedan al final de la tarjeta, alineadas a la izquierda como
     todo lo demás: alinearlas a la derecha en una tarjeta angosta las esconde. */
  .tabla-tarjetas td.celda-acciones {
    text-align: left !important;
    padding-top: .5rem;
  }

  .tabla-tarjetas td.celda-acciones:empty {
    display: none;
  }
}

/* --- El cierre, dentro del formulario de comentario ---
   Finalizar es escribir la explicación que le llega al solicitante, así que se
   escribe en el mismo cuadro que todo lo demás. Estos controles aparecen recién
   cuando se tilda «Finalizar», para no ofrecer tres formularios a la vez. */
.cierre-opciones {
  margin-top: .75rem;
  padding: .85rem 1rem;
  background: var(--brand-surface);
  border: 1px solid var(--brand-gray-light);
  border-radius: 10px;
}

/* --- Acciones de cada fila de la bandeja ---
   Tomar es un botón; el pase abre un modal, porque el combo y la nota en la fila
   ensanchaban la columna hasta romper la tabla. */
.acciones-fila {
  display: flex;
  gap: .4rem;
  justify-content: flex-end;
  align-items: center;
}

@media (max-width: 640px) {
  .acciones-fila {
    justify-content: flex-start;
  }
}

/* La nota que dejó quien pasó el ticket. Se muestra sólo al equipo, así que se
   distingue del resto del historial en vez de leerse como un dato más. */
.historial-nota {
  margin-top: .3rem;
  padding: .35rem .6rem;
  font-size: .82rem;
  color: var(--brand-gray);
  background: var(--brand-background);
  border-left: 3px solid var(--brand-gray-light);
  border-radius: 0 6px 6px 0;
}

/* El título del bloque de filtros. En la computadora está siempre abierto, así que
   el resumen se ve como un rótulo más y no como algo para tocar. */
.filtros-resumen {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--brand-gray);
  cursor: pointer;
  list-style: none;
}

.filtros-resumen::-webkit-details-marker {
  display: none;
}

@media (max-width: 640px) {
  /* Ahí sí es un control: se indica que se abre y se cierra. */
  .filtros-resumen::after {
    content: " ▾";
  }

  details[open] > .filtros-resumen::after {
    content: " ▴";
  }
}

/* Objetivo táctil: en pantalla chica, un botón de 31px es incómodo de acertar. */
@media (max-width: 640px) {
  .btn-sm {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Etiquetas ---
   Propias y no de Bootstrap por una razón concreta: la versión vendorizada es la
   5.1 y `.text-bg-danger` / `.text-bg-warning` recién existen desde la 5.2. Al
   usarlas quedaba aplicada sólo `.badge`, que trae `color:#fff` y ningún fondo:
   letra blanca sobre tarjeta blanca. El "Urgente" y el "Nota interna" estaban ahí
   y no se veían. Definidas acá, no dependen de qué versión de Bootstrap haya. */
.etiqueta {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

.etiqueta-urgente {
  background: var(--status-danger);
  color: var(--brand-white);
}

.etiqueta-interna {
  background: var(--status-warning);
  color: var(--brand-white);
}

/* Misma historia: .fw-semibold tampoco está en 5.1. */
.fw-semibold {
  font-weight: 600;
}

/* --- Estados de ticket --- */
.estado-badge {
  display: inline-block;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2px;
}

.estado-nuevo      { background: var(--brand-primary-soft);  color: var(--brand-primary-dark); }
.estado-encurso    { background: var(--status-warning-soft); color: var(--status-warning); }
.estado-enespera   { background: #EFF0F1;                    color: var(--brand-gray); }
.estado-resuelto   { background: var(--status-success-soft); color: var(--status-success); }
.estado-cerrado    { background: #EFF0F1;                    color: var(--brand-gray-dark); }

/* --- Adjuntos --- */
.adjunto-lista {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.adjunto {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .6rem .75rem;
  border: 1px solid var(--brand-gray-light);
  border-radius: 10px;
  background: var(--brand-surface);
}

.adjunto-datos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.adjunto-nombre {
  color: var(--brand-primary-dark);
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.adjunto-nombre:hover,
.adjunto-nombre:focus {
  text-decoration: underline;
}

.adjunto-miniatura {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--brand-gray-light);
}

.adjunto-quitar {
  margin-left: auto;
}

/* Lo que se pegó o se eligió y todavía no se envió. */
.adjunto-seleccion {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .75rem;
}

.adjunto-elegido {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .6rem;
  border: 1px dashed var(--brand-gray-light);
  border-radius: 10px;
  background: var(--brand-surface);
  font-size: .9rem;
}

.adjunto-elegido-miniatura {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--brand-gray-light);
  flex: 0 0 auto;
}

.adjunto-elegido-nombre {
  overflow-wrap: anywhere;
}

kbd {
  background: var(--brand-gray-dark);
  color: var(--brand-white);
  border-radius: 4px;
  padding: .1rem .35rem;
  font-size: .8em;
}

/* --- Bandeja --- */
/* La urgencia tiene que verse recorriendo la columna con la vista, sin leer cada
   fila. El badge solo se pierde entre el texto. */
.fila-urgente > td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-primary);
}

/* --- Botones --- */
.btn-brand {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-white);
  font-weight: 500;
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: var(--brand-white);
}

.btn-outline-brand {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  font-weight: 500;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
  background-color: var(--brand-primary);
  color: var(--brand-white);
}

/* --- Ingreso ---
   Misma estructura que StockIT: cabecera clara con el logo institucional, cuerpo
   gris muy claro y pie con la razón social. Lo que cambia —a propósito— es el
   nombre de la aplicación en rojo, la bajada, y el filo rojo de la tarjeta: quien
   usa los dos sistemas tiene que saber en cuál está antes de escribir la clave. */
.acceso-body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: #F2F2F2;
}

.acceso-cabecera {
  background-color: var(--brand-white);
  border-bottom: 3px solid var(--brand-primary);
}

.acceso-cabecera-contenido {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.acceso-logo {
  height: 52px;
  width: auto;
  flex: 0 0 auto;
}

/* La barra vertical que separa el logo del nombre, igual que en StockIT. */
.acceso-identidad {
  display: flex;
  flex-direction: column;
  padding-left: 1.25rem;
  border-left: 1px solid var(--brand-gray-light);
}

.acceso-app {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--brand-primary);
}

.acceso-bajada {
  font-size: .9rem;
  color: var(--brand-gray);
}

.acceso-main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.acceso-pie {
  flex-shrink: 0;
  background-color: var(--brand-white);
  border-top: 1px solid var(--brand-gray-light);
  color: var(--brand-gray);
  font-size: .82rem;
  padding: 1rem 1.5rem;
}

.acceso-pie-contenido {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  text-align: center;
}

.acceso-pie-separador {
  color: var(--brand-gray-light);
}

/* --- Selección de sistema ---
   Comparte el esqueleto del ingreso: acá todavía no se eligió a dónde entrar, así
   que mostrar el menú de un sistema en particular sería adelantar la respuesta. */
.selector {
  width: 100%;
  max-width: 720px;
}

.selector-encabezado {
  text-align: center;
  margin-bottom: 2rem;
}

.selector-titulo {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: .25rem;
}

.selector-bajada {
  color: var(--brand-gray);
  margin-bottom: 0;
}

.selector-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.selector-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
  padding: 2rem 1.5rem;
  background: var(--brand-white);
  border: 1px solid var(--brand-gray-light);
  border-top: 3px solid var(--brand-gray-light);
  border-radius: 10px;
  text-decoration: none;
  color: var(--app-text);
  box-shadow: 0 6px 18px rgba(52, 58, 64, .08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.selector-tarjeta:hover,
.selector-tarjeta:focus {
  transform: translateY(-3px);
  border-color: var(--brand-primary);
  border-top-color: var(--brand-primary);
  box-shadow: 0 12px 26px rgba(52, 58, 64, .14);
  color: var(--app-text);
}

/* El portal donde ya estás parado lleva el filo de la marca desde el principio. */
.selector-tarjeta-propia {
  border-top-color: var(--brand-primary);
}

.selector-icono {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: .35rem;
}

.selector-nombre {
  font-size: 1.15rem;
  font-weight: 700;
}

.selector-descripcion {
  font-size: .88rem;
  color: var(--brand-gray);
}

.selector-pie {
  text-align: center;
  color: var(--brand-gray);
  font-size: .85rem;
  margin: 1.75rem 0 .25rem;
}

.login-card {
  background-color: var(--brand-white);
  border: 1px solid var(--brand-gray-light);
  border-top: 3px solid var(--brand-primary);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(52, 58, 64, .08);
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 430px;
}

.login-titulo {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--app-text);
}

/* Ver la contraseña: el botón se pega al campo sin romper el alto del input. */
.campo-con-boton {
  display: flex;
}

.campo-con-boton .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-ver-clave {
  border: 1px solid var(--brand-gray-light);
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--brand-surface);
  padding: 0 .85rem;
  line-height: 1;
}

.btn-ver-clave:hover,
.btn-ver-clave:focus {
  background: var(--brand-primary-soft);
}

@media (max-width: 640px) {
  .acceso-cabecera-contenido {
    gap: .75rem;
    padding: .85rem 1rem;
  }

  .acceso-logo {
    height: 38px;
  }

  .acceso-identidad {
    padding-left: .75rem;
  }

  .acceso-app {
    font-size: 1.15rem;
  }

  .acceso-bajada {
    font-size: .78rem;
  }

  .acceso-main {
    padding: 1.75rem 1rem;
  }
}

/* --- Pie --- */
.app-footer {
  flex-shrink: 0;
  background-color: var(--brand-white);
  border-top: 1px solid var(--brand-gray-light);
  color: var(--brand-gray);
  font-size: .82rem;
  padding: 1rem 0;
}

.app-footer-contenido {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  text-align: center;
}

.app-footer-separador {
  color: var(--brand-gray-light);
}

/* --- Aviso de entorno de desarrollo --- */
.dev-banner {
  background: var(--status-warning-soft);
  color: var(--status-warning);
  border-bottom: 1px solid rgba(178, 106, 0, .3);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  padding: .4rem 1rem;
}

/* Código de activo de StockIT. Se distingue de las demás etiquetas porque no es un
   estado ni una alerta: es un identificador, y se lee como tal. */
.etiqueta-activo {
  background: var(--brand-gray-dark);
  color: var(--brand-white);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .5px;
}

/* --- Filas que llevan al detalle ---
   En las listas del inicio se toca la fila entera, no sólo el número: es un blanco
   chico, y en el teléfono la fila es una tarjeta que se toca como tal. */
.fila-enlace {
  cursor: pointer;
}

.fila-enlace:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

/* --- Respuestas que el solicitante todavía no leyó ---
   Verde y no rojo: es una buena noticia, no una alarma. El filo a la izquierda de
   la fila la hace ver aunque la etiqueta quede lejos en una lista larga. */
.etiqueta-novedad {
  background: var(--status-success);
  color: var(--brand-white);
}

.fila-novedad > td:first-child {
  box-shadow: inset 3px 0 0 var(--status-success);
}

.novedad-texto {
  margin-top: .3rem;
  padding: .3rem .55rem;
  font-size: .82rem;
  color: var(--brand-gray);
  background: var(--brand-background);
  border-radius: 6px;
  max-width: 72ch;
  /* Hasta dos líneas: una sola cortaba la respuesta antes de que se entendiera. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.novedad-texto strong {
  color: var(--brand-gray-dark);
}

/* La última nota está siempre; en verde sólo mientras sea algo que no leyó. */
.novedad-sin-leer {
  color: var(--app-text);
  background: var(--status-success-soft);
}

.novedad-sin-leer strong {
  color: var(--status-success);
}