/* Estilos propios de CellDesk. Se cargan después de Bootstrap 5.3 y AdminLTE 4. */

/* --- Identidad del producto y de la empresa ------------------------------------------------ */
.sidebar-brand {
  background-color: #0A3D62;
}
.sidebar-brand .brand-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.celldesk-sidebar-logo {
  display: block;
  width: 216px;
  max-width: 100%;
  height: auto;
  max-height: 54px;
  object-fit: contain;
}
.celldesk-login-logo {
  display: block;
  width: 100%;
  height: auto;
}
.empresa-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  flex: 1;
}
.empresa-header-logo {
  max-width: 64px;
  height: 32px;
  object-fit: contain;
}

/* --- Color de la empresa (variables definidas en module/head.tpl) --------------------------- */
.btn-primary {
  --bs-btn-bg: var(--gc-primario);
  --bs-btn-border-color: var(--gc-primario);
  --bs-btn-color: var(--gc-primario-texto);
  --bs-btn-hover-bg: color-mix(in srgb, var(--gc-primario) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--gc-primario) 85%, #000);
  --bs-btn-hover-color: var(--gc-primario-texto);
  --bs-btn-active-bg: color-mix(in srgb, var(--gc-primario) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--gc-primario) 75%, #000);
  --bs-btn-active-color: var(--gc-primario-texto);
}
.card-primary.card-outline {
  border-top: 3px solid var(--gc-primario);
}
.page-item.active .page-link {
  background-color: var(--gc-primario);
  border-color: var(--gc-primario);
  color: var(--gc-primario-texto);
}

/* --- Login ---------------------------------------------------------------------------------- */
.login-box {
  width: min(400px, 92vw);
}
.logo-login {
  max-height: 80px;
  max-width: 100%;
}

/* --- Formularios ---------------------------------------------------------------------------- */
.formulario-angosto {
  max-width: 480px;
}
.formulario-medio {
  max-width: 720px;
}
/* Pie estándar de formularios y modales: Cancelar → acción principal, a la derecha (ux.md §Formularios). */
.pie-formulario {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
}
/* Moneda + importe: una sola unidad visual; la moneda ocupa lo justo y el importe el resto (ux.md §Moneda). */
.moneda-importe > .moneda-importe-moneda {
  flex: 0 0 auto;
  width: auto;
  min-width: 5.5rem;
}
.moneda-importe > .form-control {
  min-width: 6rem;
}
.logo-vista {
  max-height: 160px;
}

/* --- Inicio --------------------------------------------------------------------------------- */
.acceso-inicio {
  transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.acceso-inicio:hover {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
  transform: translateY(-1px);
}
.acceso-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  border-radius: 50%;
  background: var(--gc-primario);
  color: var(--gc-primario-texto);
  font-size: 1.25rem;
}

/* --- Tablas --------------------------------------------------------------------------------- */
.celda-agente {
  max-width: 280px;
}
.tabla-diferencias pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .8rem;
}
.table .acciones {
  white-space: nowrap;
}

/*
 * Tablas apilables: en pantallas chicas cada fila se muestra como una tarjeta y cada celda
 * con su etiqueta (atributo data-label). Evita el scroll horizontal en celulares.
 */
@media (max-width: 767.98px) {
  .tabla-apilable thead {
    display: none;
  }
  .tabla-apilable,
  .tabla-apilable tbody,
  .tabla-apilable tr,
  .tabla-apilable td {
    display: block;
    width: 100%;
  }
  .tabla-apilable tr {
    border-bottom: 1px solid var(--bs-border-color);
    padding: .5rem .75rem;
  }
  /* !important: AdminLTE agrega padding-left a la primera celda de las tablas en .card-body.p-0 */
  .tabla-apilable td {
    border: 0;
    padding: .2rem 0 !important;
    text-align: left !important;
  }
  .tabla-apilable td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .75rem;
    color: var(--bs-secondary-color);
  }
  .tabla-apilable td.acciones {
    padding-top: .5rem;
  }
  .tabla-apilable td.acciones .btn {
    min-width: 2.75rem;
    min-height: 2.25rem;
  }
  .celda-agente {
    max-width: none;
    white-space: normal;
  }
  /* Botón de guardar siempre visible en formularios largos (permisos). */
  .barra-acciones {
    position: sticky;
    bottom: 0;
    background: var(--bs-body-bg);
    padding: .75rem;
    margin: 0 -.75rem;
    box-shadow: 0 -.25rem .5rem rgba(0, 0, 0, .08);
    z-index: 10;
  }
}

/* Menú lateral oculto en pantallas chicas: sin la sombra que asoma en el borde izquierdo. */
@media (max-width: 991.98px) {
  body:not(.sidebar-open) .app-sidebar {
    box-shadow: none !important;
  }
}

/* --- Catálogo ------------------------------------------------------------------------------- */
.miniatura-articulo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: .375rem;
  background: var(--bs-tertiary-bg);
  flex: 0 0 auto;
}
.miniatura-grande {
  width: 72px;
  height: 72px;
}
.sin-imagen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
  font-size: 1.25rem;
}
.imagen-ficha {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
}
span.imagen-ficha {
  width: 100%;
  height: 220px;
  font-size: 4rem;
  border-radius: .5rem;
  background: var(--bs-tertiary-bg);
}
.col-imagen {
  width: 64px;
}
.precio-destacado {
  font-weight: 700;
  color: var(--gc-primario);
  white-space: nowrap;
}
.texto-2-lineas {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.texto-multilinea {
  white-space: pre-line;
}
.min-w-0 {
  min-width: 0;
}
.tarjeta-articulo:active {
  background: var(--bs-tertiary-bg);
}
details.rubro > summary {
  cursor: pointer;
  list-style: none;
}
details.rubro > summary::-webkit-details-marker {
  display: none;
}
/* Botón flotante de alta en el celular. */
.boton-flotante {
  position: fixed;
  right: 1rem;
  bottom: 1.25rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25);
  z-index: 1030;
}
.lista-tarjetas {
  padding-bottom: 4.5rem; /* que el botón flotante no tape la última tarjeta */
}
/* Unidades (IMEI). */
.imei, .font-monospace {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
input.imei {
  font-family: var(--bs-font-monospace);
}
.lista-unidades {
  max-height: 22rem;
  overflow-y: auto;
}
.lista-unidades .list-group-item {
  cursor: pointer;
}
.lista-unidades .form-check-input {
  width: 1.4rem;
  height: 1.4rem;
}
.unidad-entrada {
  background: var(--bs-tertiary-bg);
}
.min-w-0 {
  min-width: 0;
}
.linea-tiempo {
  list-style: none;
  padding-left: 0;
  border-left: 2px solid var(--bs-border-color);
  margin-left: .5rem;
}
.linea-tiempo > li {
  position: relative;
  padding: 0 0 1rem 1.25rem;
}
.linea-tiempo > li::before {
  content: "";
  position: absolute;
  left: -.45rem;
  top: .3rem;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--bs-secondary);
}
.linea-tiempo > li.ingreso::before { background: var(--bs-success); }
.linea-tiempo > li.egreso::before { background: var(--bs-primary); }
.linea-tiempo > li.anulado { opacity: .6; }
.linea-tiempo > li.anulado::before { background: var(--bs-danger); }
.linea-tiempo > li.ajuste::before { background: var(--bs-warning); }
/* Ajustes: sentido (faltante / sobrante) y resumen de existencia. */
.sentido-ajuste .btn {
  min-height: 2.75rem;
}
.sentido-ajuste.is-invalid .btn {
  border-color: var(--bs-danger);
}
.resumen-ajuste {
  min-height: 1.5rem;
}
/* Personas. */
.avatar-persona {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}
.avatar-persona.avatar-grande {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.4rem;
}
.selector-persona .list-group-item {
  cursor: pointer;
}
details.card > summary {
  cursor: pointer;
}
/* El atributo hidden siempre oculta, aunque el elemento tenga utilidades de display (d-flex, etc.). */
[hidden] {
  display: none !important;
}
/* Comprobantes imprimibles (A4 por defecto; "Formato ticket" para impresoras de 80 mm). */
.pagina-imprimible {
  background: #fff;
  color: #000;
}
.barra-impresion {
  display: flex;
  gap: .5rem;
  justify-content: center;
  padding: .75rem;
  border-bottom: 1px solid #ddd;
}
.hoja-imprimible {
  max-width: 190mm;
  margin: 0 auto;
  padding: 10mm 8mm;
  font-size: 11pt;
}
.pagina-imprimible.ticket .hoja-imprimible {
  max-width: 72mm;
  padding: 2mm;
  font-size: 9pt;
}
.pagina-imprimible.ticket .comprobante-dos-columnas {
  display: block;
}
.comprobante-dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
}
.comprobante h1 {
  font-size: 1.3em;
}
.comprobante h2 {
  font-size: 1em;
  border-bottom: 1px solid #000;
  padding-bottom: 1mm;
  margin: 4mm 0 2mm;
}
.comprobante dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5mm 3mm;
  margin: 0;
}
.comprobante dt {
  font-weight: 600;
}
.comprobante dd {
  margin: 0;
  white-space: pre-line;
}
.firma {
  margin-top: 14mm;
  border-top: 1px solid #000;
  padding-top: 1mm;
  text-align: center;
  font-size: .9em;
}
@media print {
  .no-imprimir {
    display: none !important;
  }
  .hoja-imprimible {
    padding: 0;
  }
  @page {
    margin: 12mm;
  }
}
/* Servicio técnico. */
.texto-multilinea {
  white-space: pre-line;
}
.pasos-recepcion .paso-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--bs-secondary-bg);
  font-weight: 600;
  margin-right: .5rem;
}
.indicador-pasos {
  display: flex;
  gap: .25rem;
}
.indicador-pasos span {
  flex: 1;
  height: .35rem;
  border-radius: .2rem;
  background: var(--bs-secondary-bg);
}
.indicador-pasos span.activo {
  background: var(--bs-primary);
}
.atajos .btn {
  margin: 0 .25rem .25rem 0;
}
.tarjeta-tablero {
  text-decoration: none;
  color: inherit;
}
.tarjeta-tablero .numero {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
.tarjeta-tablero.activa {
  outline: 2px solid var(--bs-primary);
}
.linea-tiempo > li.interno::before { background: var(--bs-secondary); }
.linea-tiempo > li.estado::before { background: var(--bs-primary); }

/* Rubros: ▶ colapsado, ▼ desplegado (indicador al comienzo del summary). */
details.rubro .indicador-despliegue { transition: transform .15s ease; width: 1em; }
details.rubro[open] > summary .indicador-despliegue { transform: rotate(90deg); }
/* Botón «Filtros» de la tarjeta de listados: ▼ abierto, ▶ cerrado. */
.indicador-filtros { display: inline-block; }
[data-alternar-filtros].collapsed .indicador-filtros { transform: rotate(-90deg); }
/* Asistente de IA del Inicio: la respuesta es texto plano con saltos de línea. */
.asistente-respuesta { white-space: pre-wrap; max-height: 24rem; overflow-y: auto; }