/*
 * Carpeta:  css/
 * Fichero:  zuricar-base.css
 * Permisos: 644
 *
 * Rediseño del portal (variante C, «matrícula primero»): layout del shell (cabecera de dos
 * filas, subpestañas, sin sidebar) y reestilo de los componentes de Bootstrap 3 / SmartAdmin
 * con los tokens de zuricar-tokens.css. SOLO variables --z-*: ningún color suelto.
 *
 * Se carga desde php/plantillas/header.html.php DESPUÉS de your_style.css. Todas las reglas
 * cuelgan de body.smart-style-2 (las vistas con shell), así que el login no se ve afectado.
 * Los selectores llevan ese prefijo para ganar a los de SmartAdmin sin tocar sus .min.css.
 */

/* ============================================================
   Capas: las propias se alinean con las de Bootstrap 3
   (navbar 1030, backdrop de modal 1040, modal 1050)
   ============================================================ */
:root {
  --z-layer-nav: 1030;
  --z-layer-dropdown: 1035;
  --z-layer-modal: 1050;
  --z-layer-toast: 1080;
  --z-cab-alto: 64px;
  --z-sub-alto: 48px;
}

/* ============================================================
   Base: lienzo y tipografía
   ============================================================ */
body.smart-style-2 {
  background: var(--z-fondo);
  color: var(--z-texto);
  font-family: var(--z-font-body);
  font-size: var(--z-text-md);
  line-height: var(--z-leading-normal);
}
body.smart-style-2 h1,
body.smart-style-2 h2,
body.smart-style-2 h3,
body.smart-style-2 h4,
body.smart-style-2 h5,
body.smart-style-2 h6,
body.smart-style-2 .h1,
body.smart-style-2 .h2,
body.smart-style-2 .h3 {
  font-family: var(--z-font-body);
  color: var(--z-texto);
}
body.smart-style-2 a { color: var(--z-marca-texto); }
body.smart-style-2 a:hover,
body.smart-style-2 a:focus { color: var(--z-marca-hover); }
body.smart-style-2 a:focus-visible,
body.smart-style-2 button:focus-visible,
body.smart-style-2 .btn:focus-visible {
  outline: 2px solid var(--z-foco);
  outline-offset: 2px;
}
body.smart-style-2 .text-muted,
body.smart-style-2 .txt-color-blueLight,
body.smart-style-2 .txt-color-blueDark { color: var(--z-texto-suave) !important; }
body.smart-style-2 h1.page-title {
  font-family: var(--z-font-body);
  font-size: var(--z-text-xl);
  font-weight: var(--z-weight-medium);
  color: var(--z-texto) !important;
  margin: 0 0 var(--z-space-4);
}
body.smart-style-2 h1.page-title .fa { color: var(--z-marca-texto); }

/* ============================================================
   Layout: sin sidebar de SmartAdmin, cabecera fija de dos filas
   ============================================================ */
body.smart-style-2 #left-panel,
body.smart-style-2 #ribbon,
body.smart-style-2 .minifyme { display: none !important; }

body.smart-style-2 #main {
  margin-left: 0 !important;
  margin-top: 0;
  min-height: 100vh;
  padding: calc(var(--z-cab-alto) + var(--z-sub-alto)) 0 0;
  background: var(--z-fondo);
}
body.smart-style-2 #content {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--z-space-6);
}
@media (max-width: 767px) {
  body.smart-style-2 #content { padding: var(--z-space-4) var(--z-space-3); }
}

/* Fila 1: barra oscura */
body.smart-style-2 #header.z-cab {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: var(--z-cab-alto);
  margin: 0;
  padding: 0;
  background: var(--z-cab-fondo);
  color: var(--z-cab-texto);
  border: 0;
  box-shadow: none;
  z-index: var(--z-layer-nav);
}
body.smart-style-2 #header.z-cab > .z-cab-fila {
  display: flex;
  float: none;
  width: 100%;
  align-items: center;
  gap: var(--z-space-4);
  height: 100%;
  padding: 0 var(--z-space-6);
}
body.smart-style-2 .z-cab-relleno { flex: 1 1 0; }
body.smart-style-2 #logo.z-logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}
body.smart-style-2 #logo.z-logo img {
  display: block;
  width: 132px;
  height: auto;
  /* Logos propios del taller (pueden ser cuadrados): nunca más altos que la cabecera */
  max-height: 44px;
  object-fit: contain;
  object-position: left center;
}

/* Áreas */
body.smart-style-2 #header.z-cab #z-areas {
  display: flex;
  /* Las áreas no se encogen (sin scroll lateral): quien cede el espacio es el buscador */
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  margin: 0;
  padding: 0 !important;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
body.smart-style-2 .z-areas::-webkit-scrollbar { display: none; }
body.smart-style-2 .z-area {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: var(--z-control-md);
  padding: 0 var(--z-space-4);
  border-radius: var(--z-radius-pill);
  color: var(--z-cab-texto-suave);
  font-size: var(--z-text-md);
  text-decoration: none;
  transition: background var(--z-duration-fast) var(--z-ease-standard), color var(--z-duration-fast) var(--z-ease-standard);
}
body.smart-style-2 .z-area:hover,
body.smart-style-2 .z-area:focus {
  background: var(--z-cab-elevado);
  color: var(--z-cab-texto);
  text-decoration: none;
}
body.smart-style-2 .z-area.activa {
  background: var(--z-cab-elevado);
  color: var(--z-cab-texto);
  font-weight: var(--z-weight-medium);
  box-shadow: inset 0 -2px 0 var(--z-marca);
}

/* Anchos medios: áreas más compactas y sin el atajo del buscador, para que el buscador conserve un tamaño útil */
@media (max-width: 1360px) {
  body.smart-style-2 .z-area { padding: 0 var(--z-space-3); }
  body.smart-style-2 #header.z-cab #z-areas { gap: 0; }
  body.smart-style-2 .z-buscador-caja kbd { display: none; }
}

/* Buscador global */
body.smart-style-2 #header.z-cab #z-buscador {
  float: none;
  width: auto;
  height: auto;
  flex: 0 1 380px;
  min-width: 120px;
  margin: 0 0 0 auto;
}
body.smart-style-2 .z-buscador-caja {
  display: flex;
  align-items: center;
  gap: var(--z-space-2);
  height: var(--z-control-md);
  margin: 0;
  padding: 0 var(--z-space-4);
  border-radius: var(--z-radius-pill);
  background: var(--z-cab-elevado);
  color: var(--z-cab-texto-suave);
  font-weight: var(--z-weight-regular);
}
body.smart-style-2 .z-buscador-caja:focus-within { box-shadow: var(--z-shadow-foco); }
body.smart-style-2 .z-buscador-caja input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--z-cab-texto);
  font-family: var(--z-font-body);
  font-size: var(--z-text-md);
}
body.smart-style-2 .z-buscador-caja input[type="search"]::placeholder { color: var(--z-cab-texto-suave); opacity: 1; }
body.smart-style-2 .z-buscador-caja kbd {
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: var(--z-cab-texto-suave);
  font-family: var(--z-font-body);
  font-size: var(--z-text-xs);
}

/* Botón «+ Orden» */
body.smart-style-2 .z-btn-orden {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: var(--z-control-md);
  padding: 0 var(--z-space-4);
  border-radius: var(--z-radius-pill);
  background: var(--z-marca);
  color: var(--z-sobre-marca);
  font-size: var(--z-text-sm);
  font-weight: var(--z-weight-medium);
  text-decoration: none;
  transition: background var(--z-duration-fast) var(--z-ease-standard);
}
body.smart-style-2 .z-btn-orden:hover,
body.smart-style-2 .z-btn-orden:focus {
  background: var(--z-marca-hover);
  color: var(--z-sobre-marca);
  text-decoration: none;
}

/* Campana de recordatorios (ids y clases que usa recordatorios-campana.js) */
body.smart-style-2 #campana-recordatorios {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  line-height: 1;
}
body.smart-style-2 #campana-recordatorios > a {
  display: grid;
  place-items: center;
  position: relative;
  width: var(--z-control-md);
  height: var(--z-control-md);
  border: 1px solid var(--z-cab-borde);
  border-radius: var(--z-radius-pill);
  color: var(--z-cab-texto);
  font-size: var(--z-text-base);
}
body.smart-style-2 #campana-recordatorios > a:hover { background: var(--z-cab-elevado); color: var(--z-cab-texto); }
body.smart-style-2 #campana-recordatorios .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  padding: 2px 5px;
  background: var(--z-error-solido);
  color: var(--z-sobre-solido);
  font-size: 10px;
  line-height: 1.2;
}
body.smart-style-2 #campana-recordatorios .campana-menu {
  top: calc(100% + var(--z-space-2));
  background: var(--z-superficie);
  color: var(--z-texto);
  border: 1px solid var(--z-borde);
  border-radius: var(--z-radius-lg);
  box-shadow: var(--z-shadow-lg);
}

/* Menú de usuario */
body.smart-style-2 #usuario-topbar.z-usuario {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  height: auto;
  border: 0;
  background: transparent;
}
body.smart-style-2 #usuario-topbar.z-usuario > .z-usuario-boton {
  display: flex;
  align-items: center;
  gap: var(--z-space-2);
  height: var(--z-control-md);
  max-width: 250px;
  padding: 0 var(--z-space-2);
  border: 0;
  border-radius: var(--z-radius-pill);
  background: transparent;
  color: var(--z-cab-texto);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
body.smart-style-2 #usuario-topbar.z-usuario > .z-usuario-boton:hover,
body.smart-style-2 #usuario-topbar.z-usuario > .z-usuario-boton[aria-expanded="true"] { background: var(--z-cab-elevado); }
body.smart-style-2 #usuario-topbar.z-usuario > .z-usuario-boton[aria-expanded="true"] { box-shadow: inset 0 -2px 0 var(--z-marca); }
body.smart-style-2 #usuario-topbar.z-usuario > .z-usuario-boton:focus-visible { outline: 2px solid var(--z-foco); outline-offset: 2px; }
body.smart-style-2 #usuario-topbar.z-usuario > .z-usuario-boton[aria-expanded="true"] .z-usuario-ini { background: var(--z-marca); color: var(--z-sobre-marca); }
body.smart-style-2 #usuario-topbar.z-usuario .fa-angle-down { transition: transform var(--z-duration-fast) var(--z-ease-standard); }
body.smart-style-2 #usuario-topbar.z-usuario > .z-usuario-boton[aria-expanded="true"] .fa-angle-down { transform: rotate(180deg); }
body.smart-style-2 .z-usuario-ini {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--z-cab-elevado);
  color: var(--z-cab-texto);
  font-size: var(--z-text-xs);
  font-weight: var(--z-weight-medium);
}
body.smart-style-2 .z-usuario-nombre { font-size: var(--z-text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nombre largo: solo las siglas del avatar, para que la barra no desborde */
body.smart-style-2 .z-usuario-largo .z-usuario-nombre { display: none; }

/* Fila 2: subpestañas del área y recientes */
body.smart-style-2 .z-subpestanas {
  position: fixed;
  top: var(--z-cab-alto);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--z-space-4);
  height: var(--z-sub-alto);
  overflow: hidden;
  padding: 0 var(--z-space-6);
  background: var(--z-superficie);
  border-bottom: 1px solid var(--z-borde);
  z-index: calc(var(--z-layer-nav) - 1);
}
body.smart-style-2 .z-subpestanas-nav {
  display: flex;
  gap: var(--z-space-1);
  min-width: 0;
  /* SmartAdmin aplica «.fixed-navigation nav» (padding-bottom 49px, overflow-y auto, height 100%) a cualquier <nav>: sin
     este reinicio la barra tenía 97 px de contenido en 48 y se desplazaba en vertical, escondiendo las pestañas */
  height: 100%;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
body.smart-style-2 .z-subpestanas-nav::-webkit-scrollbar { display: none; }
body.smart-style-2 .z-sub {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-2);
  flex: 0 0 auto;
  height: var(--z-sub-alto);
  padding: 0 var(--z-space-3);
  color: var(--z-texto-suave);
  font-size: var(--z-text-sm);
  text-decoration: none;
  white-space: nowrap;
}
body.smart-style-2 .z-sub:hover,
body.smart-style-2 .z-sub:focus { color: var(--z-texto); text-decoration: none; }
body.smart-style-2 .z-sub.activa {
  color: var(--z-texto);
  font-weight: var(--z-weight-medium);
  box-shadow: inset 0 -3px 0 var(--z-marca);
}
body.smart-style-2 .z-sub-badge {
  position: static;
  float: none;
  padding: 2px 6px;
  background: var(--z-error-solido);
  color: var(--z-sobre-solido);
  font-size: 10px;
}
body.smart-style-2 .z-sub-badge-aviso { background: var(--z-aviso-solido); }
body.smart-style-2 .z-recientes {
  display: flex;
  align-items: center;
  gap: var(--z-space-2);
  flex: 0 0 auto;
}
body.smart-style-2 .z-recientes[hidden] { display: none; }
body.smart-style-2 .z-recientes-titulo { font-size: var(--z-text-xs); color: var(--z-texto-suave); }
body.smart-style-2 .z-recientes-lista { display: flex; gap: 6px; flex-wrap: nowrap; }
@media (max-width: 979px) {
  body.smart-style-2 .z-recientes-titulo { display: none; }
  body.smart-style-2 .z-cab-fila,
  body.smart-style-2 .z-subpestanas { padding: 0 var(--z-space-3); gap: var(--z-space-2); }
}
@media (max-width: 767px) {
  body.smart-style-2 #logo.z-logo img { width: 96px; }
  /* La barra cabe en 390 px: el buscador cede ancho para que el botón de usuario siga a la vista */
  body.smart-style-2 #header.z-cab > .z-cab-fila { padding: 0 var(--z-space-3); gap: var(--z-space-2); }
  body.smart-style-2 #header.z-cab #z-areas { display: none; }
  body.smart-style-2 #header.z-cab #z-buscador { flex: 1 1 0; min-width: 44px; }
  body.smart-style-2 .z-buscador-caja { padding: 0 var(--z-space-3); }
  body.smart-style-2 .z-buscador-caja input[type="search"] { min-width: 0; }
  body.smart-style-2 .z-btn-orden { padding: 0 var(--z-space-3); }
  body.smart-style-2 .z-recientes { display: none; }
}

/* ============================================================
   Matrícula: componente único. Franja azul plana + fuente de matrícula.
   Cinco tallas: sin modificador (S, 26 px, listados), --xs (20), --m (30), --l (44, cabeceras y modales), --xl (60).
   Marcado: <span class="z-matricula z-matricula--l"><span class="z-matricula-ue"></span><span class="z-matricula-texto">1234 KLM</span></span>
   Helper PHP: html_matricula_or() (php/funciones-ordenes.php). No añadir otras placas: usar esta con la talla que toque.
   ============================================================ */
body.smart-style-2 .z-matricula {
  --zm-h: 26px; --zm-bw: 1px; --zm-ue: 7px; --zm-fs: 15px; --zm-ls: 0.06em; --zm-px: 8px; --zm-r: 4px;
  display: inline-flex;
  align-items: stretch;
  height: var(--zm-h);
  border: var(--zm-bw) solid var(--z-sobre-marca);
  border-radius: var(--zm-r);
  background: var(--z-matricula-fondo);
  color: var(--z-sobre-marca);
  overflow: hidden;
  text-decoration: none;
  vertical-align: middle;
}
body.smart-style-2 .z-matricula:hover,
body.smart-style-2 .z-matricula:focus { color: var(--z-sobre-marca); text-decoration: none; box-shadow: var(--z-shadow-foco); }
body.smart-style-2 .z-matricula-ue { flex: none; width: var(--zm-ue); background: var(--z-matricula-ue); }
body.smart-style-2 .z-matricula-texto {
  display: flex;
  align-items: center;
  padding: 0 var(--zm-px);
  font-family: var(--z-font-matricula);
  font-size: var(--zm-fs);
  font-weight: 600;
  letter-spacing: var(--zm-ls);
  white-space: nowrap;
}
body.smart-style-2 .z-matricula--xs { --zm-h: 20px; --zm-ue: 6px; --zm-fs: 12.5px; --zm-px: 6px; --zm-r: 3px; }
body.smart-style-2 .z-matricula--m  { --zm-h: 30px; --zm-ue: 9px; --zm-fs: 17px; --zm-ls: 1.4px; --zm-px: 9px; }
body.smart-style-2 .z-matricula--l  { --zm-h: 44px; --zm-bw: 2px; --zm-ue: 18px; --zm-fs: 27px; --zm-ls: 2px; --zm-px: 14px; --zm-r: 6px; }
body.smart-style-2 .z-matricula--xl { --zm-h: 60px; --zm-bw: 2px; --zm-ue: 26px; --zm-fs: 36px; --zm-ls: 2.4px; --zm-px: 20px; --zm-r: 8px; }

/* Campo para escribir una matrícula: la misma placa (borde, franja azul a la izquierda, fuente). Solo para campos que piden una matrícula;
   los buscadores que también aceptan el nombre del cliente no lo usan. Se pone la clase en el propio <input>, sin envoltorio. */
body.smart-style-2 input.z-matricula-entrada,
body.smart-style-2 .smart-form .input input.z-matricula-entrada,
html body.smart-style-2 .zf-pagina .zf-campo input.z-matricula-entrada { /* «html» solo sube la especificidad sobre .zf-campo input[type="text"] de facturas.css */
  height: 46px;
  padding: 0 14px 0 34px;
  border: 2px solid var(--z-sobre-marca);
  border-radius: 6px;
  background: linear-gradient(var(--z-matricula-ue), var(--z-matricula-ue)) left top / 22px 100% no-repeat, var(--z-matricula-fondo);
  color: var(--z-sobre-marca);
  font-family: var(--z-font-matricula);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
body.smart-style-2 input.z-matricula-entrada { line-height: normal; }
/* El texto de ayuda del campo lleva el mismo tamaño que lo que se escribe (queda centrado en vertical) y un poco más suave */
body.smart-style-2 input.z-matricula-entrada::placeholder { color: var(--z-texto-suave); font-size: inherit; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; line-height: normal; opacity: .75; }
body.smart-style-2 input.z-matricula-entrada:focus { outline: none; box-shadow: var(--z-shadow-foco); }

/* ============================================================
   Botones
   ============================================================ */
body.smart-style-2 .btn {
  font-family: var(--z-font-body);
  font-size: var(--z-text-sm);
  font-weight: var(--z-weight-medium);
  border-radius: var(--z-radius-md);
  text-shadow: none;
  transition: background var(--z-duration-fast) var(--z-ease-standard), border-color var(--z-duration-fast) var(--z-ease-standard);
}
body.smart-style-2 .btn:not(.btn-xs):not(.btn-sm):not(.btn-lg) { padding: 8px var(--z-space-4); }
body.smart-style-2 .btn-sm { padding: 5px var(--z-space-3); }
body.smart-style-2 .btn-xs { padding: 2px var(--z-space-2); border-radius: var(--z-radius-sm); }
/* Primario: naranja con texto oscuro. Se unifican aquí los botones amarillos y de aviso/info */
body.smart-style-2 .btn-primary,
body.smart-style-2 .btn-info,
body.smart-style-2 .btn-warning,
body.smart-style-2 .btn.bg-color-yellow,
body.smart-style-2 .btn.bg-color-orange {
  background: var(--z-marca);
  border: 1px solid var(--z-marca);
  color: var(--z-sobre-marca);
}
body.smart-style-2 .btn-primary:hover,
body.smart-style-2 .btn-primary:focus,
body.smart-style-2 .btn-primary:active,
body.smart-style-2 .btn-info:hover,
body.smart-style-2 .btn-info:focus,
body.smart-style-2 .btn-info:active,
body.smart-style-2 .btn-warning:hover,
body.smart-style-2 .btn-warning:focus,
body.smart-style-2 .btn-warning:active,
body.smart-style-2 .btn.bg-color-yellow:hover,
body.smart-style-2 .btn.bg-color-yellow:focus,
body.smart-style-2 .btn.bg-color-orange:hover,
body.smart-style-2 .btn.bg-color-orange:focus {
  background: var(--z-marca-hover);
  border-color: var(--z-marca-hover);
  color: var(--z-sobre-marca);
}
body.smart-style-2 .btn.bg-color-yellow { background: var(--z-marca) !important; }
body.smart-style-2 .btn.bg-color-yellow:hover { background: var(--z-marca-hover) !important; }
body.smart-style-2 .smart-form footer .btn { height: auto; line-height: var(--z-leading-normal); }
body.smart-style-2 .btn.txt-color-white.bg-color-yellow,
body.smart-style-2 .btn.txt-color-white.bg-color-orange { color: var(--z-sobre-marca) !important; }
/* Secundario: contorno */
body.smart-style-2 .btn-default {
  background: var(--z-superficie);
  border: 1px solid var(--z-borde-fuerte);
  color: var(--z-texto);
}
body.smart-style-2 .btn-default:hover,
body.smart-style-2 .btn-default:focus,
body.smart-style-2 .btn-default:active,
body.smart-style-2 .btn-default.active {
  background: var(--z-superficie-alta);
  border-color: var(--z-borde-fuerte);
  color: var(--z-texto);
}
body.smart-style-2 .btn-success,
body.smart-style-2 .btn.bg-color-green {
  background: var(--z-ok-solido);
  border: 1px solid var(--z-ok-solido);
  color: var(--z-sobre-solido);
}
body.smart-style-2 .btn-danger,
body.smart-style-2 .btn.bg-color-red {
  background: var(--z-error-solido);
  border: 1px solid var(--z-error-solido);
  color: var(--z-sobre-solido);
}
body.smart-style-2 .btn-success:hover,
body.smart-style-2 .btn-danger:hover,
body.smart-style-2 .btn-success:focus,
body.smart-style-2 .btn-danger:focus { color: var(--z-sobre-solido); filter: brightness(0.92); }
body.smart-style-2 .btn.disabled,
body.smart-style-2 .btn[disabled],
body.smart-style-2 fieldset[disabled] .btn { opacity: 0.55; }
body.smart-style-2 .btn-link { color: var(--z-marca-texto); background: transparent; border: 0; }

/* ============================================================
   Formularios (Bootstrap y smart-form)
   ============================================================ */
body.smart-style-2 .form-control,
body.smart-style-2 .smart-form .input input,
body.smart-style-2 .smart-form .select select,
body.smart-style-2 .smart-form .textarea textarea {
  height: var(--z-control-md);
  padding: 0 var(--z-space-3);
  border: 1px solid var(--z-borde-fuerte);
  border-radius: var(--z-radius-md);
  background: var(--z-superficie);
  color: var(--z-texto);
  font-family: var(--z-font-body);
  font-size: var(--z-text-md);
  box-shadow: none;
}
body.smart-style-2 .smart-form .input .icon-prepend + input,
body.smart-style-2 .smart-form .input .icon-prepend ~ input { padding-left: 38px !important; } /* ponytail: !important gana a reglas legacy de your_style.css */
body.smart-style-2 .smart-form .input .icon-prepend,
body.smart-style-2 .smart-form .input .icon-append { top: 50%; transform: translateY(-50%); }
body.smart-style-2 .smart-form .input .icon-append + input,
body.smart-style-2 .smart-form .input .icon-append ~ input { padding-right: 38px; }
/* SmartAdmin fija .form-control, .input-sm {border-radius:0 !important}: sin !important aquí los campos de Bootstrap salían rectos. */
body.smart-style-2 .form-control,
body.smart-style-2 .input-sm,
body.smart-style-2 .input-lg { border-radius: var(--z-radius-md) !important; }
body.smart-style-2 .smart-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]):not([type=color]):not([type=submit]):not([type=button]),
body.smart-style-2 .smart-form textarea { border-radius: var(--z-radius-md) !important; }
body.smart-style-2 .input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body.smart-style-2 .input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body.smart-style-2 .input-group-addon:first-child, body.smart-style-2 .input-group-btn:first-child > .btn { border-top-left-radius: var(--z-radius-md); border-bottom-left-radius: var(--z-radius-md); }
body.smart-style-2 .input-group-addon:last-child, body.smart-style-2 .input-group-btn:last-child > .btn { border-top-right-radius: var(--z-radius-md); border-bottom-right-radius: var(--z-radius-md); }
body.smart-style-2 textarea.form-control,
body.smart-style-2 .smart-form .textarea textarea {
  height: auto;
  padding: var(--z-space-2) var(--z-space-3);
}
body.smart-style-2 .form-control:focus,
body.smart-style-2 .smart-form .input input:focus,
body.smart-style-2 .smart-form .select select:focus,
body.smart-style-2 .smart-form .textarea textarea:focus {
  border-color: var(--z-foco);
  box-shadow: var(--z-shadow-foco);
  outline: 0;
  background: var(--z-superficie);
}
body.smart-style-2 .form-control[disabled],
body.smart-style-2 .form-control[readonly],
body.smart-style-2 .smart-form .input.state-disabled input,
body.smart-style-2 .smart-form .select.state-disabled select,
body.smart-style-2 .smart-form .textarea.state-disabled textarea {
  background: var(--z-superficie-alta);
  color: var(--z-texto-suave);
}
body.smart-style-2 .smart-form .input input::placeholder,
body.smart-style-2 .smart-form .textarea textarea::placeholder,
body.smart-style-2 .form-control::placeholder { color: var(--z-texto-suave); opacity: 1; }
body.smart-style-2 .smart-form .input .icon-append,
body.smart-style-2 .smart-form .input .icon-prepend,
body.smart-style-2 .smart-form .select i { color: var(--z-texto-suave); border-color: var(--z-borde); }
body.smart-style-2 .smart-form .label,
body.smart-style-2 label.label,
body.smart-style-2 .control-label {
  color: var(--z-texto-suave);
  font-size: var(--z-text-sm);
  font-weight: var(--z-weight-medium);
}
body.smart-style-2 .smart-form fieldset { background: transparent; }
body.smart-style-2 .smart-form footer { background: var(--z-superficie-alta); border-top: 1px solid var(--z-borde); }
body.smart-style-2 .smart-form .state-error input,
body.smart-style-2 .smart-form .state-error select,
body.smart-style-2 .smart-form .state-error textarea { border-color: var(--z-error); background: var(--z-error-suave); }
body.smart-style-2 .smart-form .state-success input,
body.smart-style-2 .smart-form .state-success select,
body.smart-style-2 .smart-form .state-success textarea { border-color: var(--z-ok); }
body.smart-style-2 .smart-form .note { color: var(--z-texto-suave); }
body.smart-style-2 .smart-form .state-error + em,
body.smart-style-2 .smart-form em.invalid { color: var(--z-error); }
body.smart-style-2 .input-group-addon {
  background: var(--z-superficie-alta);
  border: 1px solid var(--z-borde-fuerte);
  color: var(--z-texto-suave);
  border-radius: var(--z-radius-md);
}

/* select2 */
body.smart-style-2 .select2-container .select2-choice,
body.smart-style-2 .select2-container-multi .select2-choices,
body.smart-style-2 .select2-container .select2-selection--single,
body.smart-style-2 .select2-container .select2-selection--multiple {
  min-height: var(--z-control-md);
  border: 1px solid var(--z-borde-fuerte);
  border-radius: var(--z-radius-md);
  background: var(--z-superficie);
  color: var(--z-texto);
  box-shadow: none;
}
body.smart-style-2 .select2-container .select2-choice { line-height: calc(var(--z-control-md) - 2px); height: var(--z-control-md); }
body.smart-style-2 .select2-container-active .select2-choice,
body.smart-style-2 .select2-container-active .select2-choices,
body.smart-style-2 .select2-container--focus .select2-selection { border-color: var(--z-foco); box-shadow: var(--z-shadow-foco); }
body.smart-style-2 .select2-drop,
body.smart-style-2 .select2-dropdown {
  background: var(--z-superficie);
  color: var(--z-texto);
  border: 1px solid var(--z-borde);
  border-radius: var(--z-radius-md);
  box-shadow: var(--z-shadow-md);
}
body.smart-style-2 .select2-results .select2-highlighted,
body.smart-style-2 .select2-results__option--highlighted { background: var(--z-marca-suave); color: var(--z-texto); }

/* ============================================================
   Tablas y DataTables
   ============================================================ */
body.smart-style-2 .table {
  color: var(--z-texto);
  background: transparent;
}
body.smart-style-2 .table > thead > tr > th {
  background: var(--z-superficie-alta);
  color: var(--z-texto-suave);
  border-bottom: 1px solid var(--z-borde);
  font-size: var(--z-text-xs);
  font-weight: var(--z-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.smart-style-2 .table > tbody > tr > td,
body.smart-style-2 .table > tfoot > tr > td,
body.smart-style-2 .table > tbody > tr > th {
  border-top: 1px solid var(--z-borde);
  vertical-align: middle;
}
body.smart-style-2 .table-bordered,
body.smart-style-2 .table-bordered > thead > tr > th,
body.smart-style-2 .table-bordered > tbody > tr > td { border-color: var(--z-borde); }
body.smart-style-2 .table-hover > tbody > tr:hover > td,
body.smart-style-2 .table-hover > tbody > tr:hover > th,
body.smart-style-2 table.dataTable tbody tr:hover > td { background: var(--z-anidado); }
body.smart-style-2 .table-striped > tbody > tr:nth-child(odd) > td { background: var(--z-fondo); }
body.smart-style-2 .table > tbody > tr > td.active,
body.smart-style-2 .table > tbody > tr.active > td { background: var(--z-marca-suave); }
body.smart-style-2 .dataTables_wrapper .dt-toolbar,
body.smart-style-2 .dataTables_wrapper .dt-toolbar-footer {
  background: transparent;
  border-color: var(--z-borde);
  color: var(--z-texto-suave);
}
body.smart-style-2 .dataTables_wrapper .dataTables_filter input,
body.smart-style-2 .dataTables_wrapper .dataTables_length select {
  height: var(--z-control-sm);
  border: 1px solid var(--z-borde-fuerte);
  border-radius: var(--z-radius-sm);
  background: var(--z-superficie);
  color: var(--z-texto);
}
body.smart-style-2 table.dataTable thead .sorting,
body.smart-style-2 table.dataTable thead .sorting_asc,
body.smart-style-2 table.dataTable thead .sorting_desc { color: var(--z-texto-suave); }
body.smart-style-2 .dataTables_info { color: var(--z-texto-suave); font-size: var(--z-text-sm); }

/* ============================================================
   Tarjetas: jarviswidget
   ============================================================ */
body.smart-style-2 .jarviswidget {
  margin: 0 0 var(--z-space-5);
  background: var(--z-superficie);
  border: 1px solid var(--z-borde);
  border-radius: var(--z-radius-lg);
  box-shadow: var(--z-shadow-sm);
  overflow: hidden;
}
body.smart-style-2 .jarviswidget > header {
  display: flex;
  align-items: center;
  height: auto;
  min-height: var(--z-control-lg);
  padding: 0 var(--z-space-4);
  background: var(--z-superficie);
  color: var(--z-texto);
  border: 0;
  border-bottom: 1px solid var(--z-borde);
  border-radius: 0;
}
body.smart-style-2 .jarviswidget > header h2 {
  margin: 0;
  color: var(--z-texto);
  font-family: var(--z-font-body);
  font-size: var(--z-text-base);
  font-weight: var(--z-weight-medium);
  line-height: var(--z-control-lg);
}
body.smart-style-2 .jarviswidget > header .widget-icon { color: var(--z-marca-texto); margin-right: var(--z-space-2); }
body.smart-style-2 .jarviswidget > header .jarviswidget-ctrls { top: auto; right: var(--z-space-3); }
body.smart-style-2 .jarviswidget > header .jarviswidget-ctrls .button-icon { color: var(--z-texto-suave); }
body.smart-style-2 .jarviswidget > div,
body.smart-style-2 .jarviswidget .widget-body {
  background: var(--z-superficie);
  border: 0;
  color: var(--z-texto);
}
body.smart-style-2 .jarviswidget .widget-body { padding: var(--z-space-4); }
body.smart-style-2 .jarviswidget .widget-body-toolbar { background: var(--z-superficie-alta); border-color: var(--z-borde); }
/* SmartAdmin pinta la cabecera de cada widget con su color y !important: se unifica */
body.smart-style-2 .jarviswidget[class*="jarviswidget-color-"] > header {
  background: var(--z-superficie) !important;
  border-color: var(--z-borde) !important;
  color: var(--z-texto);
}
body.smart-style-2 .jarviswidget[class*="jarviswidget-color-"] > header > .jarviswidget-ctrls a,
body.smart-style-2 .jarviswidget[class*="jarviswidget-color-"] .nav-tabs li:not(.active) a { color: var(--z-texto-suave) !important; }
body.smart-style-2 .jarviswidget[class*="jarviswidget-color-"] > header h2 { color: var(--z-texto); }

/* ============================================================
   Pestañas
   ============================================================ */
body.smart-style-2 .nav-tabs {
  border-bottom: 1px solid var(--z-borde);
  background: transparent;
}
body.smart-style-2 .nav-tabs > li > a {
  margin-right: var(--z-space-1);
  padding: var(--z-space-2) var(--z-space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--z-texto-suave);
  font-size: var(--z-text-sm);
}
body.smart-style-2 .nav-tabs > li > a:hover,
body.smart-style-2 .nav-tabs > li > a:focus {
  background: var(--z-superficie-alta);
  border-color: transparent;
  color: var(--z-texto);
}
body.smart-style-2 .nav-tabs > li.active > a,
body.smart-style-2 .nav-tabs > li.active > a:hover,
body.smart-style-2 .nav-tabs > li.active > a:focus {
  border: 0;
  border-bottom: 3px solid var(--z-marca);
  background: transparent;
  color: var(--z-texto);
  font-weight: var(--z-weight-medium);
}
body.smart-style-2 .tab-content { background: transparent; border: 0; }

/* ============================================================
   Modales (css/modal-rediseno.css ajusta casos concretos y se carga después)
   ============================================================ */
body.smart-style-2 .modal-content {
  border: 1px solid var(--z-borde);
  border-radius: var(--z-radius-xl);
  background: var(--z-superficie);
  color: var(--z-texto);
  box-shadow: var(--z-shadow-lg);
}
body.smart-style-2 .modal-header {
  padding: var(--z-space-4) var(--z-space-5);
  background: var(--z-superficie);
  border-bottom: 1px solid var(--z-borde);
  border-radius: var(--z-radius-xl) var(--z-radius-xl) 0 0;
}
body.smart-style-2 .modal-title {
  font-family: var(--z-font-body);
  font-size: var(--z-text-lg);
  font-weight: var(--z-weight-medium);
  color: var(--z-texto);
}
body.smart-style-2 .modal-header .close { color: var(--z-texto-suave); opacity: 1; text-shadow: none; }
body.smart-style-2 .modal-body { background: var(--z-superficie); color: var(--z-texto); }
body.smart-style-2 .modal-footer {
  background: var(--z-superficie);
  border-top: 1px solid var(--z-borde);
  border-radius: 0 0 var(--z-radius-xl) var(--z-radius-xl);
}

/* ============================================================
   Alertas, etiquetas y paginación
   ============================================================ */
body.smart-style-2 .alert {
  border: 1px solid transparent;
  border-radius: var(--z-radius-md);
  text-shadow: none;
}
body.smart-style-2 .alert-success { background: var(--z-ok-suave); border-color: var(--z-ok); color: var(--z-ok); }
body.smart-style-2 .alert-info { background: var(--z-info-suave); border-color: var(--z-info); color: var(--z-info); }
body.smart-style-2 .alert-warning { background: var(--z-aviso-suave); border-color: var(--z-aviso); color: var(--z-aviso); }
body.smart-style-2 .alert-danger { background: var(--z-error-suave); border-color: var(--z-error); color: var(--z-error); }
body.smart-style-2 .alert .close { color: inherit; opacity: 0.7; text-shadow: none; }

body.smart-style-2 .label,
body.smart-style-2 .badge {
  font-family: var(--z-font-body);
  font-weight: var(--z-weight-medium);
  border-radius: var(--z-radius-pill);
  text-shadow: none;
}
body.smart-style-2 .label-default,
body.smart-style-2 .badge { background: var(--z-superficie-alta); color: var(--z-texto-suave); }
body.smart-style-2 .label-primary,
body.smart-style-2 .label-warning { background: var(--z-marca-suave); color: var(--z-marca-texto); }
body.smart-style-2 .label-success { background: var(--z-ok-suave); color: var(--z-ok); }
body.smart-style-2 .label-danger { background: var(--z-error-suave); color: var(--z-error); }
body.smart-style-2 .label-info { background: var(--z-info-suave); color: var(--z-info); }
/* El badge pierde su fondo gris cuando lleva un color de SmartAdmin explícito */
body.smart-style-2 .badge[class*="bg-color-"] { color: var(--z-sobre-solido); }

body.smart-style-2 .pagination > li > a,
body.smart-style-2 .pagination > li > span {
  border: 1px solid var(--z-borde);
  background: var(--z-superficie);
  color: var(--z-texto);
}
body.smart-style-2 .pagination > li > a:hover,
body.smart-style-2 .pagination > li > a:focus { background: var(--z-superficie-alta); color: var(--z-texto); }
body.smart-style-2 .pagination > .active > a,
body.smart-style-2 .pagination > .active > a:hover,
body.smart-style-2 .pagination > .active > span {
  background: var(--z-marca);
  border-color: var(--z-marca);
  color: var(--z-sobre-marca);
}
body.smart-style-2 .pagination > .disabled > a,
body.smart-style-2 .pagination > .disabled > span { color: var(--z-texto-suave); opacity: 0.6; }

/* ============================================================
   Desplegables
   ============================================================ */
body.smart-style-2 .dropdown-menu {
  padding: var(--z-space-1) 0;
  border: 1px solid var(--z-borde);
  border-radius: var(--z-radius-md);
  background: var(--z-superficie);
  box-shadow: var(--z-shadow-md);
  z-index: var(--z-layer-dropdown);
}
body.smart-style-2 .dropdown-menu > li > a {
  padding: var(--z-space-2) var(--z-space-4);
  color: var(--z-texto);
  font-size: var(--z-text-sm);
}
body.smart-style-2 .dropdown-menu > li > a:hover,
body.smart-style-2 .dropdown-menu > li > a:focus {
  background: var(--z-superficie-alta);
  color: var(--z-texto);
}
body.smart-style-2 .dropdown-menu .divider { background: var(--z-borde); }

/* ============================================================
   Pie: barra oscura a juego con la cabecera; la última conexión va centrada
   ============================================================ */
body.smart-style-2 .page-footer.z-pie {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--z-space-4);
  margin: 0;
  padding: var(--z-space-4) var(--z-space-6) !important;
  background: var(--z-cab-fondo);
  border-top: 0;
  color: var(--z-cab-texto-suave);
  font-size: var(--z-text-xs);
  position: static;
  height: auto;
}
body.smart-style-2 .page-footer .z-pie-app { justify-self: start; font-weight: var(--z-weight-semibold); font-style: italic; letter-spacing: .06em; text-transform: uppercase; color: var(--z-marca); font-size: var(--z-text-sm); }
body.smart-style-2 .page-footer .z-pie-app small { margin-left: 6px; font-style: normal; font-weight: var(--z-weight-regular); letter-spacing: 0; text-transform: none; color: var(--z-cab-texto-suave); font-size: var(--z-text-xs); }
body.smart-style-2 .page-footer .z-pie-conexion { text-align: center; }
body.smart-style-2 .page-footer .z-pie-conexion strong { color: var(--z-cab-texto); font-weight: var(--z-weight-medium); }
body.smart-style-2 .page-footer .z-pie-incidencia { justify-self: end; display: inline-flex; align-items: center; gap: var(--z-space-2); height: 32px; padding: 0 var(--z-space-4); border-radius: var(--z-radius-pill); background: var(--z-marca); color: var(--z-sobre-marca); font-weight: var(--z-weight-medium); text-decoration: none; }
body.smart-style-2 .page-footer .z-pie-incidencia:hover, body.smart-style-2 .page-footer .z-pie-incidencia:focus { background: var(--z-marca-oscuro); color: #fff; text-decoration: none; }
@media (max-width: 767px) {
  body.smart-style-2 .page-footer.z-pie { grid-template-columns: 1fr; justify-items: center; gap: var(--z-space-2); }
  body.smart-style-2 .page-footer .z-pie-app, body.smart-style-2 .page-footer .z-pie-incidencia { justify-self: center; }
}

/* ============================================================
   Número de orden de reparación («OR-1664»). Helper PHP: html_numero_orden() en php/funciones-ordenes.php.
   Neutro por defecto; con color de estado (z-orden-rec, -cur, -pie, -lis, -ne) solo cuando se conoce el estado y
   no se muestra ya al lado; tamaños sm, md (por defecto) y lg; z-orden-txt = en línea, sin pastilla.
   ============================================================ */
body.smart-style-2 .z-orden {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--z-radius-pill);
  background: var(--z-superficie-alta);
  color: var(--z-texto);
  font-size: var(--z-text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
}
body.smart-style-2 a.z-orden:hover, body.smart-style-2 a.z-orden:focus { background: var(--z-borde); color: var(--z-texto); text-decoration: none; }
body.smart-style-2 a.z-orden:focus-visible { outline: none; box-shadow: var(--z-shadow-foco); }
body.smart-style-2 .z-orden-sm { height: 20px; padding: 0 8px; font-size: 11px; }
body.smart-style-2 .z-orden-lg { height: 36px; padding: 0 16px; font-size: 18px; }
body.smart-style-2 .z-orden-rec { background: var(--z-est-rec-suave); color: var(--z-est-rec-texto); }
body.smart-style-2 .z-orden-cur { background: var(--z-est-cur-suave); color: var(--z-est-cur-texto); }
body.smart-style-2 .z-orden-pie { background: var(--z-est-pie-suave); color: var(--z-est-pie-texto); }
body.smart-style-2 .z-orden-lis { background: var(--z-est-lis-suave); color: var(--z-est-lis-texto); }
body.smart-style-2 .z-orden-ne { background: var(--z-est-ne-suave); color: var(--z-est-ne-texto); }
body.smart-style-2 a.z-orden-rec:hover, body.smart-style-2 a.z-orden-cur:hover, body.smart-style-2 a.z-orden-pie:hover,
body.smart-style-2 a.z-orden-lis:hover, body.smart-style-2 a.z-orden-ne:hover { filter: brightness(0.96); background: inherit; }
body.smart-style-2 .z-orden-cerrada::before { content: "\f023"; font-family: FontAwesome; font-weight: 400; font-size: 0.9em; color: var(--z-texto-suave); }
body.smart-style-2 .z-orden-txt { height: auto; padding: 0; border-radius: 0; background: none; font-size: inherit; letter-spacing: 0; }
body.smart-style-2 a.z-orden-txt { color: var(--z-marca-texto); }
body.smart-style-2 a.z-orden-txt:hover { background: none; text-decoration: underline; color: var(--z-marca-texto); }


/* ============================================================
   Listas de autocompletado (matrículas, clientes, marcas…); las de vehículo llevan matrícula + marca y modelo + cliente
   ============================================================ */
body.smart-style-2 ul.lista-autocompletado {
  width: 100%;
  margin: 6px 0 0;
  padding: var(--z-space-2);
  background: var(--z-superficie);
  border: 1px solid var(--z-borde);
  border-radius: var(--z-radius-lg);
  box-shadow: var(--z-shadow-md);
}
/* las de vehículo necesitan sitio para matrícula, marca y modelo y cliente aunque el campo sea estrecho */
body.smart-style-2 ul.lista-autocompletado:has(li.ac-vehiculo), body.smart-style-2 ul.lista-autocompletado:has(li.ac-vacio) { min-width: min(440px, 90vw); }
body.smart-style-2 ul.lista-autocompletado li {
  padding: var(--z-space-2) var(--z-space-3);
  border-radius: var(--z-radius-md);
  color: var(--z-texto);
  font-size: var(--z-text-sm);
}
body.smart-style-2 ul.lista-autocompletado li:hover,
body.smart-style-2 ul.lista-autocompletado li.ac-activo { background: var(--z-marca-suave); color: var(--z-texto); }
body.smart-style-2 ul.lista-autocompletado li small.note { color: var(--z-texto-suave); }
body.smart-style-2 ul.lista-autocompletado li.ac-vehiculo { display: flex; align-items: center; gap: var(--z-space-3); }
body.smart-style-2 ul.lista-autocompletado li.ac-vehiculo .z-matricula { flex: none; min-width: 116px; }
body.smart-style-2 ul.lista-autocompletado li.ac-vehiculo .z-matricula-texto { flex: 1; justify-content: center; }
body.smart-style-2 ul.lista-autocompletado li.ac-vehiculo .ac-datos { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
body.smart-style-2 ul.lista-autocompletado li.ac-vehiculo .ac-datos strong { font-weight: var(--z-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.smart-style-2 ul.lista-autocompletado li.ac-vehiculo .ac-sin { color: var(--z-texto-suave); font-weight: var(--z-weight-regular); }
/* Cliente en el autocompletado: nombre y, debajo, NIF y teléfono */
body.smart-style-2 ul.lista-autocompletado li .ac-cli { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
body.smart-style-2 ul.lista-autocompletado li .ac-cli strong { font-weight: var(--z-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.smart-style-2 ul.lista-autocompletado li .ac-cli small { color: var(--z-texto-suave); font-size: var(--z-text-sm); }
body.smart-style-2 ul.lista-autocompletado li.ac-vacio { display: flex; align-items: center; gap: var(--z-space-2); color: var(--z-texto-suave); cursor: default; }
body.smart-style-2 ul.lista-autocompletado li.ac-vacio:hover { background: transparent; }

/* Fila marcada como incidencia (artículo eliminado): your_style.css la pinta con #F7F8E0 !important, que en tema oscuro dejaba
   texto claro sobre fondo claro; con el token del aviso sigue el tema (también en las fichas de factura y venta directa) */
body.smart-style-2 .clase-incidencia { background: var(--z-aviso-suave) !important; }