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

.sol-mat-view {
  --sm-blue: #04a9f5;
  --sm-green: #2ca961;
  --sm-orange: #f57c00;
  --sm-red: #ff5c75;
  --sm-ink: #2a2d38;
  --sm-muted: #8a97a6;
  --sm-border: #e7eaf0;
  --sm-bg: #f7f8fa;
  --sm-card-bg: #fff;
}

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

/* El aviso de "Esta SM cuenta con N SC(s) asociada(s)" es un .alert-info
   de Bootstrap con su texto forzado en negro via inline style en el PHP.
   Un inline style con !important no puede ser pisado desde ninguna hoja de
   estilos externa (ni siquiera con !important) por especificidad de
   cascada, asi que ese inline se saco directamente del PHP -- acá se
   define el color en su lugar, y se agrega la variante para modo oscuro
   (mismos tonos que .table > tbody > tr.info en dark-mode.css). */
html.dark-mode .sol-mat-view .alert-info {
  background-color: #1c3a42 !important;
  border-color: #2a5560 !important;
  color: #cfeff5 !important;
}
html.dark-mode .sol-mat-view .alert-info .close {
  color: #cfeff5;
  opacity: 0.7;
}
/* El numero de SC es un link con style="color:black" inline (sin
   !important, a diferencia del texto del aviso) -- se pisa con esta regla. */
html.dark-mode .sol-mat-view .alert-info a {
  color: #7cd4ea !important;
}
html.dark-mode .sol-mat-view .alert-info a:hover {
  color: #a6e4f2 !important;
}

/* ---------- Encabezado / barra de acciones ---------- */

.sol-mat-view .sm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}

.sol-mat-view .sm-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Cuando el toolbar tiene un unico grupo con contenido, .sm-toolbar's
   justify-content:space-between lo deja pegado a la izquierda -- este
   modificador lo empuja a la derecha. */
.sol-mat-view .sm-toolbar-group--right {
  margin-left: auto;
}

.sol-mat-view .sm-toolbar .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
}

.sol-mat-view .sm-badge-anulada {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 92, 117, 0.12);
  color: var(--sm-red);
  border: 1px solid rgba(255, 92, 117, 0.35);
  border-radius: 8px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
}

/* ---------- Cards ---------- */

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

.sol-mat-view .card-primary {
  border-left-color: var(--sm-blue);
}

.sol-mat-view .card-header {
  background: var(--sm-card-bg);
  border-bottom: 1px solid var(--sm-border);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

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

.sol-mat-view .sm-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(--sm-blue);
}

.sol-mat-view .sm-card-icon--blue {
  background: var(--sm-blue);
}

.sol-mat-view .sm-card-icon--orange {
  background: var(--sm-orange);
}

.sol-mat-view .card-body {
  padding: 18px;
}

.sol-mat-view .card-footer {
  background: var(--sm-card-bg);
  border-top: 1px solid var(--sm-border);
}

/* La causa habitual de scroll horizontal de mas: un .row de Bootstrap
   (margenes negativos) metido dentro de un .table-responsive, ver mismo
   fix aplicado en orden-compra-view.css/cotizacion-view.css. */
.sol-mat-view .table-responsive .row {
  margin-left: 0;
  margin-right: 0;
}

/* ---------- DetailView (Datos Generales) ---------- */

.sol-mat-view .detail-view {
  margin-bottom: 0;
  table-layout: fixed;
  width: 100%;
}

.sol-mat-view .detail-view > tbody > tr > th {
  width: 38%;
  color: var(--sm-muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  border-color: var(--sm-border);
  vertical-align: middle;
  background: var(--sm-bg);
  white-space: normal;
  overflow-wrap: break-word;
}

.sol-mat-view .detail-view > tbody > tr > td {
  color: var(--sm-ink);
  font-size: 13.5px;
  border-color: var(--sm-border);
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: break-word;
}

/* ---------- Grilla de Material ---------- */

.sol-mat-view .kv-grid-container {
  border: none;
  box-shadow: none;
}

.sol-mat-view .table thead th {
  background: var(--sm-bg);
  color: var(--sm-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  border-color: var(--sm-border);
}

.sol-mat-view .table td {
  font-size: 13px;
  color: var(--sm-ink);
  vertical-align: middle;
  border-color: var(--sm-border);
}

.sol-mat-view .table-bordered {
  border-color: var(--sm-border);
}

@media screen and (max-width: 576px) {
  .sol-mat-view .sm-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .sol-mat-view .sm-toolbar-group {
    justify-content: flex-start;
  }
}