/* Rediseño visual de requerimiento/view_almacen.php, en la misma línea que
   orden-compra-view.css / cotizacion-view.css / sol-mat-view.css. Todo
   escopado bajo .requerimiento-almacen-view (wrapper agregado en el PHP)
   asi que no afecta a ninguna otra pantalla. Es puramente presentacional --
   no se tocó la lógica de los formularios/grillas/modales existentes. */

.requerimiento-almacen-view {
  --ra-blue: #04a9f5;
  --ra-green: #2ca961;
  --ra-orange: #f57c00;
  --ra-ink: #2a2d38;
  --ra-muted: #8a97a6;
  --ra-border: #e7eaf0;
  --ra-bg: #f7f8fa;
  --ra-card-bg: #fff;
}

html.dark-mode .requerimiento-almacen-view {
  --ra-ink: #e6e6e6;
  --ra-muted: #9aa3b0;
  --ra-border: #33363f;
  --ra-bg: #1c1e26;
  --ra-card-bg: #212325;
}

/* Aviso de "adicional KM Recorridos registrado": .alert-success de
   Bootstrap. Traia el texto forzado en negro via inline style en el PHP
   (un inline !important no se puede pisar desde ninguna hoja de estilos
   externa por especificidad de cascada, ni con !important propio) -- se
   sacó ese inline del PHP y se define el color acá, con su variante oscura
   (mismos tonos que .table > tbody > tr.success en dark-mode.css). */
html.dark-mode .requerimiento-almacen-view .alert-success {
  background-color: #1f3a2a !important;
  border-color: #2f5a3d !important;
  color: #d6f5e0 !important;
}
html.dark-mode .requerimiento-almacen-view .alert-success .close {
  color: #d6f5e0;
  opacity: 0.7;
}

/* ---------- Card "Datos Generales" ---------- */

.requerimiento-almacen-view .card {
  border: 1px solid var(--ra-border);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20, 24, 38, 0.05);
  border-left-width: 3px;
  overflow: hidden;
}

.requerimiento-almacen-view .card-primary {
  border-left-color: var(--ra-blue);
}

.requerimiento-almacen-view .card-header {
  background: var(--ra-card-bg);
  border-bottom: 1px solid var(--ra-border);
}

.requerimiento-almacen-view .card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ra-ink);
  display: flex;
  align-items: center;
  gap: 9px;
}

.requerimiento-almacen-view .ra-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: 0 0 auto;
  font-size: 12px;
  color: #fff;
  background: var(--ra-blue);
}

.requerimiento-almacen-view .ra-card-icon--blue {
  background: var(--ra-blue);
}

/* DetailView de Datos Generales: la regla global de site.css
   (.table td, .table th { white-space:nowrap }) hace que etiquetas largas
   ("Servicio", "Finaliza", etc.) se corten contra el valor -- mismo fix ya
   aplicado en orden-compra-view.css/cotizacion-view.css/sol-mat-view.css. */
.requerimiento-almacen-view .detail-view > tbody > tr > th,
.requerimiento-almacen-view .detail-view > tbody > tr > td {
  white-space: normal;
  overflow-wrap: break-word;
}

/* ---------- Paneles kartik\grid\GridView (Materiales / Compras) ---------- */

/* kartik-grid con 'panel'=>['type'=>'default'] renderiza Bootstrap 3
   estandar (.panel.panel-default), no el .card de Bootstrap 4 que usa el
   resto de la vista -- se le da la misma chapa (bordes redondeados, sombra
   suave, franja de color) para que ambos convivan con el mismo lenguaje
   visual. Los colores de fondo/texto en si ya los resuelve dark-mode.css. */
.requerimiento-almacen-view .panel {
  border: 1px solid var(--ra-border) !important;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20, 24, 38, 0.05);
  border-left: 3px solid var(--ra-blue) !important;
  overflow: hidden;
}

.requerimiento-almacen-view .panel-heading {
  padding: 14px 18px;
}

.requerimiento-almacen-view .panel-title {
  font-size: 14px;
  font-weight: 700;
}

.requerimiento-almacen-view .panel-title .glyphicon {
  color: var(--ra-blue);
}

/* Barra de "Agregar" (contenido de 'before' en la config del panel) queda
   pegada al borde del panel -- se le da el mismo aire horizontal que ya
   tiene el panel-heading. */
.requerimiento-almacen-view .kv-panel-before {
  padding: 12px 18px !important;
}

/* Causa habitual de scroll horizontal de mas: un .row de Bootstrap
   (margenes negativos) metido dentro de un .table-responsive -- mismo fix
   ya aplicado en las otras vistas rediseñadas. */
.requerimiento-almacen-view .table-responsive .row {
  margin-left: 0;
  margin-right: 0;
}