@charset "UTF-8";
/* =========================================================
   Toros CRM — Stylesheet
   ========================================================= */

/* --- Reset & base --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --crm-bg:        #f1f3f7;
  --crm-surface:   #f7f8fa;
  --crm-sidebar:   #050a30;
  --crm-sidebar-w: 220px;

  /* Azul marino para todo lo que se pulsa: botones, paginación, contadores.
     El dorado es solo acento —enlaces, foco, precios, sidebar activo— porque
     en superficie grande resta seriedad y encima no llega a contraste. */
  --crm-primary:   #131c4d;
  --crm-primary-h: #050a30;

  /* Dorado corporativo. --crm-brand es el de la web tal cual; sobre blanco da
     1,9:1, así que no vale ni para texto ni como fondo con texto encima.
     --crm-accent (3,6:1) para detalles y --crm-link (4,6:1) para texto. */
  --crm-brand:     #e3b576;
  --crm-accent:    #b8933f;
  --crm-accent-h:  #9c7b31;
  --crm-link:      #8c6f34;

  --crm-white:     #ffffff;
  --crm-card-bg:   #ffffff;
  --crm-text:      #1f2a44;
  --crm-muted:     #6b7689;
  --crm-text-muted:#6b7689;
  --crm-border:    #e2e5eb;
  --crm-radius:    8px;
  --crm-shadow:    0 1px 2px rgba(5,10,48,.05), 0 2px 8px rgba(5,10,48,.06);
  --font:          'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Escala de estados de pedido. Cada estado tiene un tono propio: antes
     "Enviado" y "En producción" compartían familia de color y se confundían
     de un vistazo en la lista. */
  --st-pending-fg:    #55606f;  --st-pending-bg:    #eef1f5;  --st-pending-bd:    #b6bfcb;
  --st-processing-fg: #9a6207;  --st-processing-bg: #fdf3d0;  --st-processing-bd: #e0b64a;
  --st-production-fg: #c2410c;  --st-production-bg: #ffe6d2;  --st-production-bd: #f0844a;
  --st-shipped-fg:    #1d4ed8;  --st-shipped-bg:    #dee7ff;  --st-shipped-bd:    #6d8ff0;
  --st-delivered-fg:  #15803d;  --st-delivered-bg:  #dcfce7;  --st-delivered-bd:  #5cba7d;
  --st-completed-fg:  #0e7490;  --st-completed-bg:  #d3f3fb;  --st-completed-bd:  #4fb4cc;
  --st-cancelled-fg:  #b91c1c;  --st-cancelled-bg:  #fee2e2;  --st-cancelled-bd:  #ef7b7b;
  --st-refunded-fg:   #7e22ce;  --st-refunded-bg:   #f4e6ff;  --st-refunded-bd:   #b273e6;
}

body.crm-body {
  font-family: var(--font);
  background:  var(--crm-bg);
  color:       var(--crm-text);
  font-size:   14px;
  line-height: 1.5;
}

/* --- Controles de formulario: base común ----------------
   Todos los select del panel salen de aquí. Antes cada vista traía el suyo
   —unos con borde, otros con el estilo del navegador— y no había dos iguales.
   appearance:none quita el widget del sistema y pone una flecha propia, que es
   la única forma de que Chrome, Firefox y Safari los pinten igual. */
.crm-body select,
.crm-body input[type="text"],
.crm-body input[type="search"],
.crm-body input[type="number"],
.crm-body input[type="email"],
.crm-body input[type="url"],
.crm-body input[type="tel"],
.crm-body input[type="date"],
.crm-body input[type="time"],
.crm-body input[type="password"],
.crm-body textarea {
  font-family:   var(--font);
  font-size:     13px;
  color:         var(--crm-text);
  background:    var(--crm-white);
  border:        1.5px solid var(--crm-border);
  border-radius: var(--crm-radius);
  padding:       7px 12px;
  min-height:    34px;
  transition:    border-color .15s, box-shadow .15s;
}
.crm-body select {
  appearance:         none;
  -webkit-appearance: none;
  -moz-appearance:    none;
  padding-right:      30px;
  cursor:             pointer;
  background-image:   url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 9px center;
  background-size:     14px 14px;
}
.crm-body select:focus,
.crm-body input:focus,
.crm-body textarea:focus {
  outline:      none;
  border-color: var(--crm-accent);
  box-shadow:   0 0 0 3px rgba(184,147,63,.18);
}
.crm-body select:disabled { opacity: .6; cursor: default; }

/* --- Layout --------------------------------------------- */
.crm-wrap {
  display:    flex;
  min-height: 100vh;
}

/* --- Sidebar -------------------------------------------- */
.crm-sidebar {
  width:      var(--crm-sidebar-w);
  min-width:  var(--crm-sidebar-w);
  background: var(--crm-sidebar);
  display:    flex;
  flex-direction: column;
  position:   sticky;
  top:        0;
  height:     100vh;
  overflow-y: auto;
}

.crm-logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     24px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.logo-img     { width: 36px; height: auto; display: block; }
.logo-text    { color: var(--crm-brand); font-size: 17px; font-weight: 700; letter-spacing: .3px; }

.crm-nav       { flex: 1; padding: 12px 0; }
.crm-nav-item  {
  display:     flex;
  align-items: center;
  gap:         11px;
  padding:     10px 20px;
  color:       rgba(255,255,255,.62);
  text-decoration: none;
  font-size:   14px;
  transition:  background .15s, color .15s;
  border-left: 3px solid transparent;
  /* El botón "Más" es un <button> y tiene que pasar por aquí igual que los <a> */
  background:  none;
  border-top:  0;
  border-right:0;
  border-bottom:0;
  width:       100%;
  text-align:  left;
  font-family: var(--font);
  cursor:      pointer;
}
.crm-nav-item { position: relative; }
.crm-nav-item:hover   { background: rgba(255,255,255,.07); color: #fff; }
.crm-nav-item.active  { background: rgba(227,181,118,.14); color: var(--crm-brand); border-left-color: var(--crm-brand); font-weight: 600; }

.nav-icon {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       20px;
  height:      20px;
  flex-shrink: 0;
}
.nav-icon svg { width: 19px; height: 19px; display: block; }
.nav-label    { font-size: 13.5px; }

/* El botón "Más" y la hoja desplegable solo existen en móvil */
.crm-nav-more, .crm-nav-sheet { display: none; }

.crm-sidebar-footer { padding: 16px 20px; }
.crm-logout-btn {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         7px;
  width:       100%;
  padding:     8px;
  border-radius: var(--crm-radius);
  background:  rgba(255,255,255,.08);
  color:       rgba(255,255,255,.6);
  font-size:   12px;
  text-decoration: none;
  transition:  background .15s;
}
.crm-logout-btn svg  { width: 15px; height: 15px; flex-shrink: 0; }
.crm-logout-btn:hover { background: rgba(255,255,255,.15); color: #fff; }

/* --- Main area ------------------------------------------ */
.crm-main {
  flex:     1;
  padding:  28px 32px;
  overflow: auto;
}

/* --- Page header ---------------------------------------- */
.crm-page-header {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 24px;
  flex-wrap:    wrap;
}
.crm-page-header h2   { font-size: 22px; font-weight: 700; }
.crm-date              { color: var(--crm-muted); font-size: 13px; margin-left: 4px; }

/* Secciones del dashboard, a lo HubSpot: una pestaña por tema. */
.dash-secciones {
  display:       flex;
  gap:           4px;
  margin:        -8px 0 24px;
  border-bottom: 1px solid var(--crm-border);
  overflow-x:    auto;
  scrollbar-width: none;
}
.dash-secciones__item {
  padding:       10px 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color:         var(--crm-muted);
  font-size:     14px;
  font-weight:   600;
  text-decoration: none;
  white-space:   nowrap;
}
.dash-secciones__item:hover     { color: var(--crm-text); }
.dash-secciones__item.is-active { color: var(--crm-primary); border-bottom-color: var(--crm-primary); }
.dash-secciones__item:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: -2px; border-radius: 4px; }

.crm-table--provincias { min-width: 620px; }
.chart-pico { margin-left: auto; color: var(--crm-muted); font-size: 13px; }
.chart-pico strong { color: var(--crm-text); }
.prov-cuota { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prov-cuota__barra { flex: 1; min-width: 60px; height: 6px; border-radius: 3px; background: var(--crm-surface); overflow: hidden; }
.prov-cuota__barra i { display: block; height: 100%; border-radius: 3px; background: var(--crm-primary); }
.header-actions        { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.count-badge {
  display:     inline-block;
  background:  var(--crm-primary);
  color:       #fff;
  font-size:   12px;
  font-weight: 600;
  padding:     2px 8px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
}

/* --- KPI Grid ------------------------------------------- */
/* Sin iconos y sin sombra: la jerarquía la marca el tamaño del número, no el
   color. Con un emoji de color por tarjeta el bloque parecía un panel de
   juguete en vez de la cuenta de resultados. */
.crm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap:     12px;
  margin-bottom: 24px;
}
.kpi-card {
  background:    var(--crm-white);
  border:        1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  padding:       14px 16px;
  display:       block;
}
.kpi-label {
  font-size:      10.5px;
  font-weight:    600;
  color:          var(--crm-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  line-height:    1.3;
}
.kpi-value {
  font-size:       23px;
  font-weight:     700;
  color:           var(--crm-text);
  margin-top:      6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
}
.kpi-hint {
  font-size:  11px;
  color:      var(--crm-muted);
  margin-top: 3px;
  line-height: 1.3;
}
.kpi-card--warning { border-left: 3px solid var(--st-production-fg); }
.kpi-card--warning .kpi-value { color: var(--st-production-fg); }
.kpi-delta        { font-weight: 600; color: var(--crm-text); font-variant-numeric: tabular-nums; }
.kpi-delta--sube  { color: var(--tk-done); }
.kpi-delta--baja  { color: var(--pr-high); }

.dash-periodo        { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.dash-periodo__mover { display: flex; align-items: center; gap: 2px; }
.dash-periodo__nombre { min-width: 140px; text-align: center; font-size: 14px; }
.dash-periodo__paso {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   6px;
  font-size:       20px;
  line-height:     1;
  color:           var(--crm-text);
  text-decoration: none;
}
.dash-periodo__paso:hover            { background: var(--crm-white); }
.dash-periodo__paso[aria-disabled]   { color: var(--crm-border); }
.dash-periodo__paso[aria-disabled]:hover { background: none; }

/* --- Selector de rango de un gráfico -------------------- */
.chart-head {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
  margin-bottom: 12px;
}
.chart-range { display: flex; gap: 4px; margin-left: auto; }
.chart-range--metrica { margin-left: 0; }
.chart-range button,
.chart-range a {
  padding:         4px 11px;
  border:          1px solid var(--crm-border);
  border-radius:   6px;
  background:      var(--crm-white);
  font-size:       12px;
  font-weight:     600;
  font-family:     var(--font);
  color:           var(--crm-muted);
  text-align:      center;
  text-decoration: none;
  cursor:          pointer;
  transition:      background .12s, color .12s;
}
.chart-range button:hover:not(.active),
.chart-range a:hover:not(.active) { background: var(--crm-surface); color: var(--crm-text); }
.chart-range button.active,
.chart-range a.active        { background: var(--crm-primary); color: #fff; border-color: var(--crm-primary); cursor: default; }
.chart-range button:disabled { opacity: .55; cursor: wait; }

/* --- Charts --------------------------------------------- */
.crm-charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap:     20px;
  margin-bottom: 28px;
}
.chart-card {
  background:    var(--crm-white);
  border-radius: var(--crm-radius);
  box-shadow:    var(--crm-shadow);
  padding:       20px;
}
.chart-card h3, .crm-panel-head h3 { font-size: 14px; font-weight: 600; color: var(--crm-text); }

/* --- Objetivo de ventas del mes ------------------------- */
.goal-card  { display: flex; flex-direction: column; }
.goal-body  { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
/* display:flex gana a [hidden], así que hay que devolverle el none a mano */
.goal-body[hidden], .goal-empty[hidden] { display: none; }

.goal-ring  { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
/* El SVG se gira para que el arco empiece arriba y no a las tres en punto */
.goal-ring svg      { width: 100%; height: 100%; transform: rotate(-90deg); }
.goal-ring circle   { fill: none; stroke-width: 11; }
.goal-ring__track   { stroke: #e7eaf0; }
.goal-ring__bar {
  stroke:         var(--crm-primary);
  stroke-linecap: round;
  transition:     stroke-dashoffset .6s ease;
}
/* Verde solo cuando está conseguido; naranja cuando el mes va más adelantado
   que las ventas. Mientras se va cumpliendo, el azul de la casa. */
.goal-ring--late .goal-ring__bar { stroke: var(--pr-high); }
.goal-ring--done .goal-ring__bar { stroke: var(--tk-done); }

.goal-ring__mid {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2px;
}
.goal-ring__mid strong { font-size: 25px; font-weight: 700; color: var(--crm-text); line-height: 1; }
.goal-ring__mid span   { font-size: 11.5px; color: var(--crm-muted); }
.goal-ring--done .goal-ring__mid strong { color: var(--tk-done); }

.goal-facts {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        6px;
  flex:       1;
  min-width:  150px;
  font-size:  13px;
  color:      var(--crm-text);
}
.goal-facts__pace          { font-size: 12px; font-weight: 700; }
.goal-facts__pace--late    { color: var(--pr-high); }
.goal-facts__pace--ontrack { color: var(--tk-done); }
.goal-facts__hit           { color: var(--tk-done); font-weight: 700; }
.goal-facts__prev          { font-size: 11.5px; color: var(--crm-muted); }

.goal-form           { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.goal-form[hidden]   { display: none; }
.goal-form label     { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--crm-muted); }
.goal-form__row      { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.goal-form__row input { width: 110px; }

.goal-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 0 4px; font-size: 13px; }

/* Historial: si se llegó o no en los meses anteriores, de un vistazo */
.goal-hist          { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--crm-border); }
.goal-hist[hidden]  { display: none; }
.goal-hist h4       { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--crm-muted); margin-bottom: 9px; }
.goal-hist ul       { list-style: none; display: flex; flex-direction: column; gap: 7px; }
/* Cada mes es un botón: pulsarlo abre el formulario con ese mes cargado */
.goal-hist__row {
  display:     flex;
  align-items: center;
  gap:         8px;
  width:       100%;
  padding:     3px 4px;
  border:      0;
  border-radius: 5px;
  background:  none;
  font-family: var(--font);
  font-size:   12px;
  text-align:  left;
  cursor:      pointer;
}
.goal-hist__row:hover { background: var(--crm-surface); }
.goal-hist__row:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 1px; }
.goal-hist__month   { width: 32px; flex-shrink: 0; color: var(--crm-muted); text-transform: capitalize; }
.goal-hist__bar     { flex: 1; min-width: 40px; height: 7px; border-radius: 4px; background: #e7eaf0; overflow: hidden; }
.goal-hist__bar i   { display: block; height: 100%; border-radius: 4px; background: var(--crm-primary); }
.goal-hist__num     { flex-shrink: 0; font-weight: 700; color: var(--crm-text); white-space: nowrap; }
.goal-hist__mark    { width: 12px; flex-shrink: 0; text-align: center; font-weight: 700; }

.goal-hist__row--hit  .goal-hist__bar i { background: var(--tk-done); }
.goal-hist__row--hit  .goal-hist__mark  { color: var(--tk-done); }
.goal-hist__row--miss .goal-hist__bar i { background: var(--pr-high); }
.goal-hist__row--miss .goal-hist__mark  { color: var(--pr-high); }
/* Mes sin objetivo: barra rayada, para que no parezca un 0% */
.goal-hist__row--none .goal-hist__bar {
  background: repeating-linear-gradient(45deg, #eef0f4, #eef0f4 4px, #e2e6ee 4px, #e2e6ee 8px);
}
.goal-hist__row--none .goal-hist__num { color: var(--crm-muted); font-weight: 600; }

/* --- Two-col panels ------------------------------------- */
.crm-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     20px;
}
.crm-panel {
  background:    var(--crm-white);
  border-radius: var(--crm-radius);
  box-shadow:    var(--crm-shadow);
  padding:       0;
  overflow:      hidden;
}
.crm-two-col--arriba { align-items: start; }
.dash-columna        { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Lista larga dentro del panel: la cabecera y el total se quedan a la vista. */
.dash-lista { max-height: 560px; overflow-y: auto; }
.crm-panel .dash-lista thead th { position: sticky; top: 0; z-index: 1; background: var(--crm-white); box-shadow: inset 0 -1px 0 var(--crm-border); }
.dash-lista tfoot td            { position: sticky; bottom: 0; box-shadow: inset 0 2px 0 var(--crm-border); }

/* Con desplegables dentro (el arreglo de un color): recortando, se cortaban. */
.crm-panel--desborda { overflow: visible; }
.crm-panel-head {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     14px 18px;
  border-bottom: 1px solid var(--crm-border);
}

/* Un panel que se abre solo si lo pides. El chevron lo dibuja el propio CSS:
   el marcador del navegador se ve distinto en cada uno. */
.crm-plegable > summary {
  cursor:      pointer;
  list-style:  none;
  user-select: none;
}
.crm-plegable > summary::-webkit-details-marker { display: none; }
.crm-plegable > summary::marker                 { content: ''; }

.crm-plegable > summary::after {
  content:       '';
  width:         9px;
  height:        9px;
  border-right:  2px solid var(--crm-muted);
  border-bottom: 2px solid var(--crm-muted);
  transform:     rotate(45deg);
  margin:        -4px 4px 0 12px;
  flex:          0 0 auto;
  transition:    transform .15s ease;
}
.crm-plegable[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }

.crm-plegable:not([open]) > summary { border-bottom: 0; }
.crm-plegable > summary:hover        { background: var(--crm-surface); }
.crm-plegable > summary:focus-visible { outline: 2px solid var(--crm-primary); outline-offset: -2px; }

/* --- Tables --------------------------------------------- */
.crm-table-wrap { background: var(--crm-white); border-radius: var(--crm-radius); box-shadow: var(--crm-shadow); overflow-x: auto; }
.crm-table      { width: 100%; border-collapse: collapse; }
.crm-table thead th {
  background:  var(--crm-surface);
  padding:     10px 14px;
  text-align:  left;
  font-size:   12px;
  font-weight: 600;
  color:       var(--crm-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--crm-border);
  white-space: nowrap;
}
.crm-table tbody td {
  padding:        8px 14px;
  vertical-align: middle;
}
.crm-table tbody tr {
  border-bottom: 1px solid var(--crm-border);
}
.crm-table tfoot td {
  padding:0px 14px;
}
.crm-table tbody tr:last-child       { border-bottom: 0; }
.crm-table tbody tr:hover td         { background: var(--crm-surface); }
.crm-panel .crm-table thead th { background: transparent; }

.empty-row    { color: var(--crm-muted); text-align: center; padding: 24px !important; }
.link-strong  { font-weight: 600; color: var(--crm-link); text-decoration: none; }
.link-strong:hover { text-decoration: underline; }

.total-row td      { font-size: 13px; color: var(--crm-muted); }
.total-row--grand td { font-size: 14px; color: var(--crm-text); border-top: 2px solid var(--crm-border); padding: 10px 14px; background: var(--crm-surface); }

/* .crm-table thead th fuerza text-align:left y pesa más que .text-right, así
   que la cabecera se quedaba a la izquierda mientras la cifra iba a la
   derecha. Hay que nombrar el th para empatarle. */
.text-right,
.crm-table thead th.text-right,
.crm-table tfoot td.text-right  { text-align: right; }
.text-center,
.crm-table thead th.text-center { text-align: center; }

/* Columna de cifras: ancho fijo para que el dato quede debajo de su
   cabecera. Sin esto, las columnas numéricas se reparten todo el espacio
   sobrante y el número acaba lejísimos del título. */
.col-num        { width: 92px; }
.col-num--wide  { width: 125px; }

/* --- Ranking (top clientes) ----------------------------- */
.th-rank { width: 42px; }
.rank {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      var(--crm-surface);
  border:          1px solid var(--crm-border);
  font-size:       12px;
  font-weight:     700;
  color:           var(--crm-muted);
  font-variant-numeric: tabular-nums;
}
/* Los tres primeros en dorado: es el único sitio donde el color del podio
   dice algo por sí mismo. */
.rank--top { background: var(--crm-primary); border-color: var(--crm-primary); color: var(--crm-brand); }

/* --- Badges --------------------------------------------- */
.badge {
  display:       inline-block;
  padding:       3px 9px;
  border-radius: 20px;
  font-size:     11px;
  font-weight:   600;
  white-space:   nowrap;
}
/* Los badges de estado llevan punto de color delante: el tono se lee de
   lejos, pero el punto los distingue también en blanco y negro. */
.badge-pending, .badge-processing, .badge-production, .badge-shipped,
.badge-completed, .badge-delivered, .badge-cancelled, .badge-refunded {
  border: 1px solid currentColor;
}
.badge-pending::before, .badge-processing::before, .badge-production::before,
.badge-shipped::before, .badge-completed::before, .badge-delivered::before,
.badge-cancelled::before, .badge-refunded::before {
  content: '●';
  font-size: 9px;
  margin-right: 5px;
  vertical-align: 1px;
}
.badge-pending     { background: var(--st-pending-bg);    color: var(--st-pending-fg); }
.badge-processing  { background: var(--st-processing-bg); color: var(--st-processing-fg); }
.badge-production  { background: var(--st-production-bg); color: var(--st-production-fg); }
.badge-shipped     { background: var(--st-shipped-bg);    color: var(--st-shipped-fg); }
.badge-completed   { background: var(--st-completed-bg);  color: var(--st-completed-fg); }
.badge-delivered   { background: var(--st-delivered-bg);  color: var(--st-delivered-fg); }

/* --- Inline status select (orders list) ----------------- */
.crm-body .status-select-inline {
  border:        1.5px solid currentColor;
  border-left-width: 6px;
  border-radius: 6px;
  padding:       4px 26px 4px 9px;
  min-height:    30px;
  font-size:     12px;
  font-weight:   700;
  min-width:     134px;
  background-position: right 7px center;
  background-size: 13px 13px;
  transition:    box-shadow .15s;
}
.crm-body .status-select-inline:hover { box-shadow: 0 0 0 3px rgba(5,10,48,.10); }

/* En la cabecera del pedido el desplegable va suelto entre botones y no en una
   columna: el ancho fijo que alinea la lista aqui lo deja gordo, y el borde
   grueso de la izquierda pesa mas que los botones de al lado. Se queda el
   color de fondo, que es lo que dice el estado de un vistazo. */
.crm-body .header-actions .status-select-inline {
  min-width:         0;
  border-left-width: 1.5px;
  font-size:         13px;
  font-weight:       600;
}
/* Al enfocar conserva SU color en vez de coger el dorado del foco genérico:
   si no, al abrir el desplegable el estado perdía el color justo al mirarlo. */
.crm-body .status-select-inline:focus {
  border-color: currentColor;
  box-shadow:   0 0 0 3px rgba(5,10,48,.14);
}

/* El borde izquierdo grueso repite el color del estado: en una lista larga
   se lee la columna entera de un barrido vertical, sin leer las etiquetas. */
.crm-body .status-select-inline--pending     { background-color: var(--st-pending-bg);    color: var(--st-pending-fg);    border-color: var(--st-pending-bd);    border-left-color: var(--st-pending-fg); }
.crm-body .status-select-inline--processing  { background-color: var(--st-processing-bg); color: var(--st-processing-fg); border-color: var(--st-processing-bd); border-left-color: var(--st-processing-fg); }
.crm-body .status-select-inline--production  { background-color: var(--st-production-bg); color: var(--st-production-fg); border-color: var(--st-production-bd); border-left-color: var(--st-production-fg); }
.crm-body .status-select-inline--shipped     { background-color: var(--st-shipped-bg);    color: var(--st-shipped-fg);    border-color: var(--st-shipped-bd);    border-left-color: var(--st-shipped-fg); }
.crm-body .status-select-inline--completed   { background-color: var(--st-completed-bg);  color: var(--st-completed-fg);  border-color: var(--st-completed-bd);  border-left-color: var(--st-completed-fg); }
.crm-body .status-select-inline--delivered   { background-color: var(--st-delivered-bg);  color: var(--st-delivered-fg);  border-color: var(--st-delivered-bd);  border-left-color: var(--st-delivered-fg); }
.crm-body .status-select-inline--cancelled   { background-color: var(--st-cancelled-bg);  color: var(--st-cancelled-fg);  border-color: var(--st-cancelled-bd);  border-left-color: var(--st-cancelled-fg); }
.crm-body .status-select-inline--refunded    { background-color: var(--st-refunded-bg);   color: var(--st-refunded-fg);   border-color: var(--st-refunded-bd);   border-left-color: var(--st-refunded-fg); }

/* Desplegable abierto: cada opción con su color. Chrome y Firefox lo
   respetan; donde no, se cae al estilo del sistema y sigue legible. */
.crm-body .status-select-inline option { background: #fff; font-weight: 600; }
.crm-body .status-select-inline option[value="pending"]    { color: var(--st-pending-fg); }
.crm-body .status-select-inline option[value="processing"] { color: var(--st-processing-fg); }
.crm-body .status-select-inline option[value="production"] { color: var(--st-production-fg); }
.crm-body .status-select-inline option[value="shipped"]    { color: var(--st-shipped-fg); }
.crm-body .status-select-inline option[value="completed"]  { color: var(--st-completed-fg); }
.crm-body .status-select-inline option[value="delivered"]  { color: var(--st-delivered-fg); }
.crm-body .status-select-inline option[value="cancelled"]  { color: var(--st-cancelled-fg); }
.crm-body .status-select-inline option[value="refunded"]   { color: var(--st-refunded-fg); }
/* --- Contenido del pedido (columna lista) -------------- */
.col-content           { display: flex; flex-direction: column; gap: 0; }
.col-content__items    { font-size: 13px; font-weight: 700; color: var(--crm-text); white-space: nowrap; line-height: 1.4; }
.col-content__detail   { font-size: 11px; color: var(--crm-muted); white-space: nowrap; line-height: 1.4; }

.profit-month-select { font-weight: 600; }

/* Quién adelantó el dinero de un gasto: el de la empresa es el caso normal y
   se queda apagado; el de una persona resalta, porque hay que devolvérselo. */
.expense-payer--company { color: var(--crm-muted); }
.expense-payer--user    { color: var(--crm-link); font-weight: 600; }

/* Botón toggle envío/recogida */
.btn-shipping-toggle {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       4px 10px;
  border-radius: 20px;
  font-size:     11px;
  font-weight:   600;
  white-space:   nowrap;
  cursor:        pointer;
  border:        1.5px solid currentColor;
  background:    transparent;
  transition:    opacity .15s, box-shadow .15s;
}
.btn-shipping-toggle:hover   { box-shadow: 0 0 0 3px rgba(0,0,0,.10); opacity: .85; }
.btn-shipping-toggle svg     { width: 14px; height: 14px; flex-shrink: 0; }
/* Azul y naranja están reservados a los estados del pedido (Enviado / En
   producción). Este botón es otra cosa —tipo de entrega— y va en neutro para
   no competir con la columna de estado, que está justo al lado. */
.btn-shipping-toggle[data-value="1"] { color: var(--crm-primary); border-color: var(--crm-primary); background: #e6e9f1; }
.btn-shipping-toggle[data-value="0"] { color: #6b7689; border-color: #bcc3d0; background: #f1f3f7; }

/* Checkbox en formulario */
.toggle-shipping-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-top: 4px; }
.form-hint             { font-size: 11px; color: var(--crm-muted); margin-top: 2px; display: block; }

.badge-cancelled   { background: var(--st-cancelled-bg);  color: var(--st-cancelled-fg); }
.badge-refunded    { background: var(--st-refunded-bg);   color: var(--st-refunded-fg); }
.badge-source-woocommerce { background: #f0eeff; color: #7c3aed; }
.badge-source-manual      { background: #f0fdf4; color: #15803d; }
.badge-source-newsletter  { background: #f5f0ff; color: #7c3aed; border: 1px solid #c4b5fd; }

/* --- Label hints (form IVA) ----------------------------- */
.label-hint { font-size: 11px; font-weight: 400; opacity: .85; }

/* --- Atributos de l\u00ednea de pedido ----------------------- */
.item-attrs    { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.attr-row      { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* El display:flex de arriba le gana al hidden del navegador: sin esto, el
   campo que solo sale al pedirlo (notas, nombre) se veia siempre. */
.attr-row[hidden] { display: none; }
.attr-label    { font-size: 11px; color: var(--crm-muted); white-space: nowrap; min-width: 80px; }
.attr-row .input-inline { font-size: 12px; padding: 3px 6px; }
.btn-add-attr  { font-size: 11px; padding: 2px 8px; margin-top: 2px; }
.btn-remove-attr { background: none; border: none; color: #b91c1c; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.btn-remove-attr:hover { color: #9a1616; }

/* --- Buttons -------------------------------------------- */
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       8px 16px;
  border:        none;
  border-radius: var(--crm-radius);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  text-decoration: none;
  transition:    background .15s, opacity .15s;
  white-space:   nowrap;
}
.btn-primary  { background: var(--crm-primary); color: #fff; }
.btn-primary:hover  { background: var(--crm-primary-h); }
.btn-secondary      { background: #465067; color: #fff; }
.btn-secondary:hover{ background: #333c50; }
.btn-outline  { background: transparent; color: var(--crm-text); border: 1.5px solid var(--crm-border); }
.btn-outline:hover  { background: var(--crm-bg); }
/* Botón de aviso: mismo botón, en el naranja de "esto reclama atención" */
.btn-outline--warn { border-color: var(--pr-high); color: var(--pr-high); }
.btn-outline--warn:hover { background: var(--st-production-bg); }
.btn-danger   { background: #fdedec; color: #b91c1c; border: 1px solid #fad5d5; }
.btn-danger:hover   { background: #fad5d5; }
/* Los iconos de los botones salen del mismo juego SVG que la navegación */
.btn svg      { width: 16px; height: 16px; flex-shrink: 0; }
.btn-sm svg   { width: 14px; height: 14px; }
.btn-sm       { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn-full     { width: 100%; justify-content: center; }

/* --- Filters -------------------------------------------- */
.crm-filters  { margin-bottom: 18px; }
.filter-form, .crm-filters form {
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
  align-items: center;
}
/* Los filtros heredan el control base; aquí solo el ancho de la búsqueda */
.filter-search { min-width: 240px; }

/* --- Forms ---------------------------------------------- */
.crm-form-wrap {
  max-width:  820px;
}
.form-section {
  background:    var(--crm-white);
  border-radius: var(--crm-radius);
  box-shadow:    var(--crm-shadow);
  padding:       20px 24px;
  margin-bottom: 20px;
}
.form-section h3 { font-size: 14px; font-weight: 600; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--crm-border); }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:     14px 20px;
}
.form-grid--narrow { max-width: 480px; }
.form-group        { display: flex; flex-direction: column; gap: 5px; }
.form-group--wide  { grid-column: 1 / -1; }
.form-group label  { font-size: 12px; font-weight: 600; color: var(--crm-muted); text-transform: uppercase; letter-spacing: .4px; }
/* En formularios el control es un poco más alto y la letra más grande, pero
   el borde, el radio y el foco vienen del control base */
.form-group input, .form-group select, .form-group textarea {
  font-size:  14px;
  min-height: 38px;
  padding:    8px 12px;
}
.form-group select   { padding-right: 30px; }
.form-group textarea { min-height: 80px; resize: vertical; }
.req { color: var(--crm-accent); }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* Inline inputs (order items table): compactos para no engordar las filas.
   Prefijados con .crm-body para pesar más que el control base, que si no
   les impone su altura de 34px. */
.crm-body .input-inline {
  border-width:  1px;
  border-radius: 5px;
  padding:       4px 8px;
  min-height:    28px;
  font-size:     13px;
  width:         100%;
}
.crm-body select.input-inline {
  padding-right:       24px;
  background-position: right 6px center;
  background-size:     12px 12px;
}

/* El estado de una tarea tiene que leerse entero. En una tabla se le deja el
   ancho que pida —la tabla ya desborda con scroll—, y en la tarjeta del
   tablero comparte fila con dos botones, así que ahí reparte el espacio. */
.crm-body .crm-table select.js-task-status {
  width:     auto;
  min-width: 132px;
}
.crm-body .task-card__actions select.js-task-status {
  flex:      1;
  min-width: 0;
}
.input-qty    { width: 60px; }
.input-price  { width: 90px; }
.input-sku    { width: 90px; }
.input-total-field { width: 120px; }

.total-preview { font-size: 22px; font-weight: 700; color: var(--crm-accent); padding: 8px 0; }

/* --- Definition list ------------------------------------ */
.crm-dl { padding: 14px 18px; }
.crm-dl dt { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--crm-muted); letter-spacing: .4px; margin-top: 10px; }
.crm-dl dt:first-child { margin-top: 0; }
.crm-dl dd { font-size: 14px; color: var(--crm-text); }
.crm-dl dd a { color: var(--crm-link); text-decoration: none; }
.crm-dl dd a:hover { text-decoration: underline; }
/* El cuerpo de un panel, debajo de su cabecera. Antes iba a mano en cada
   vista y siempre se olvidaba el de arriba. */
.panel-cuerpo { padding: 16px 20px 20px; }

.crm-notes { padding: 0 18px 18px; }
.crm-notes strong { font-size: 11px; text-transform: uppercase; color: var(--crm-muted); }
.crm-notes p { margin-top: 6px; font-size: 13px; color: var(--crm-text); background: var(--crm-bg); border-radius: 6px; padding: 10px 12px; }

/* --- Autocomplete --------------------------------------- */
.customer-autocomplete, .product-search-bar { position: relative; }
.autocomplete-list {
  position:   absolute;
  z-index:    999;
  width:      100%;
  background: var(--crm-white);
  border:     1.5px solid var(--crm-border);
  border-top: none;
  border-radius: 0 0 var(--crm-radius) var(--crm-radius);
  box-shadow: var(--crm-shadow);
  max-height: 240px;
  overflow-y: auto;
  display:    none;
}
.autocomplete-list.open { display: block; }
.autocomplete-item {
  padding:     9px 14px;
  cursor:      pointer;
  font-size:   13px;
  border-bottom: 1px solid var(--crm-border);
}
.autocomplete-item:last-child  { border-bottom: 0; }
.autocomplete-item:hover       { background: var(--crm-bg); }
.autocomplete-item small       { color: var(--crm-muted); font-size: 12px; margin-left: 6px; }
.product-search-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.product-search-bar input { flex: 1; min-width: 220px; padding: 8px 12px; border: 1.5px solid var(--crm-border); border-radius: var(--crm-radius); font-size: 13px; }

/* --- Alerts --------------------------------------------- */
.crm-alert {
  padding:       12px 16px;
  border-radius: var(--crm-radius);
  font-size:     13.5px;
  margin-bottom: 16px;
}
.crm-alert--error   { background: #fdedec; color: #b91c1c; border: 1px solid #fad5d5; }
.crm-alert--success { background: #eafaf1; color: #27ae60; border: 1px solid #a9dfbf; }

/* --- Pagination ----------------------------------------- */
.crm-pagination { display: flex; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.page-btn {
  padding: 6px 12px;
  border:  1.5px solid var(--crm-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--crm-text);
  text-decoration: none;
  background: var(--crm-white);
}
.page-btn.active  { background: var(--crm-primary); color: #fff; border-color: var(--crm-primary); }
.page-btn:hover:not(.active):not(.is-off) { background: var(--crm-bg); }
.crm-pagination { align-items: center; }
.page-btn { min-width: 36px; text-align: center; }
.page-btn--flecha { font-size: 18px; line-height: 1; padding-top: 4px; padding-bottom: 6px; }
.page-btn.is-off  { opacity: .35; cursor: default; }
.page-hueco       { min-width: 18px; text-align: center; color: var(--crm-muted); }

/* --- Productos (tabla con miniatura) -------------------- */
.crm-table--products .th-thumb,
.crm-table--products .td-thumb { width: 56px; padding-right: 0; }

.product-thumb {
  width:         44px;
  height:        44px;
  border-radius: 6px;
  object-fit:    cover;
  display:       block;
  background:    var(--crm-surface);
  border:        1px solid var(--crm-border);
}
.product-thumb--empty { background: var(--crm-surface); }

.product-name { font-weight: 600; font-size: 13.5px; color: var(--crm-text); display: block; }

/* Las categorías de esta tienda son cadenas larguísimas y casi idénticas
   entre productos: una sola línea, el resto al title del elemento. */
.product-cat {
  display:       block;
  font-size:     11.5px;
  color:         var(--crm-muted);
  max-width:     260px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* El precio en dorado se leía mal y competía con los enlaces: va en el color
   del texto, que para una cifra es lo que toca. */
.price-now { font-size: 14.5px; font-weight: 700; color: var(--crm-text); white-space: nowrap; }
.price-was { font-size: 11.5px; color: var(--crm-muted); text-decoration: line-through; margin-left: 5px; white-space: nowrap; }

/* --- Login page ----------------------------------------- */
.crm-login-body   { background: var(--crm-sidebar); display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.crm-login-wrap   { width: 100%; max-width: 420px; padding: 20px; }
.crm-login-box    { background: var(--crm-white); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.25); padding: 40px; }
.crm-login-logo   { text-align: center; margin-bottom: 28px; }
.login-bull       { font-size: 52px; display: block; }
.crm-login-logo h1 { font-size: 24px; font-weight: 700; margin-top: 8px; }
.crm-login-logo p  { color: var(--crm-muted); font-size: 13px; margin-top: 4px; }
.crm-login-form   { display: flex; flex-direction: column; gap: 16px; }
.password-wrap    { position: relative; display: flex; align-items: center; }
.password-wrap input { flex: 1; padding-right: 40px; }
.btn-eye          { position: absolute; right: 10px; background: none; border: none; cursor: pointer; font-size: 18px; color: var(--crm-muted); padding: 0; line-height: 1; }
.btn-eye:hover    { color: var(--crm-text); }
.login-hint       { margin-top: 20px; text-align: center; font-size: 12px; color: var(--crm-muted); }
.login-hint code  { background: var(--crm-bg); padding: 2px 6px; border-radius: 4px; }

/* --- Actions cell --------------------------------------- */
td.actions { white-space: nowrap; display: flex; gap: 4px; }

.badge-gift {
  display:       inline-block;
  font-size:     10px;
  background:    var(--st-cancelled-fg);
  color:         #fff;
  padding:       1px 6px;
  border-radius: 10px;
  margin-left:   4px;
  white-space:   nowrap;
}

/* Segunda línea de una celda, solo visible en móvil: recupera los datos de
   las columnas que ahí se ocultan en vez de perderlos. */
.cell-sub { display: none; font-size: 11px; color: var(--crm-muted); margin-top: 2px; }
.cell-sub--always { display: block; }

/* En pantalla estrecha la tabla se estrujaba hasta dejar el nombre del cliente
   a una palabra por línea. Con un mínimo por columna la tabla deja de encoger
   y el panel pasa a hacer scroll lateral, que es lo que se quería. */
.crm-panel--scroll { overflow-x: auto; }
.crm-table--clients { min-width: 620px; }
.crm-table--clients .td-name,
.crm-table--clients thead th:nth-child(2) { min-width: 190px; }
.crm-table--clients .td-name .link-strong { white-space: normal; }
.crm-table--clients .col-num { white-space: nowrap; }

/* Las dos tablas de "top" tienen seis columnas cada una y piden 620 y 560px.
   Al ancho de la ventana hay que restarle la barra lateral (220) y el margen
   del contenido (64), asi que hasta 1700px no hay sitio para las dos sin que se
   corte la ultima columna y haya que arrastrar dentro del panel. Por debajo de
   ahi se ven mejor apiladas, cada una entera. */
.crm-two-col--tops { grid-template-columns: 1fr; }
@media (min-width: 1700px) {
  .crm-two-col--tops { grid-template-columns: 1fr 1fr; }
}

/* En la ficha del pedido, si la prenda sale del almacen o hay que encargarla.
   Es un dato, no una alarma: se lee de reojo y no compite con el nombre. */
/* Lo que el CRM ha hecho solo. Es un registro, no un aviso que pida nada: va
   flotando a un lado, pequeño, y se descarta cuando ya lo has visto. Por eso no
   entra en la bandeja de arriba, donde cada linea es alguien escribiendote. */
/* Un color que es solo numeros es la referencia del catalogo del proveedor, no
   un color: se marca para que cante en la lista y lleve a ponerle nombre. */
.fila-alta { background: var(--crm-bg); }
.fila-alta input { border-style: dashed; }

/* Elegir de una lista larga, buscando. Una gama tiene doscientos colores y el
   almacen cien materias primas: arriba lo elegido, debajo el buscador. La cara
   de cada opcion la manda el servidor y se copia tal cual al elegirla. */
.picker { position: relative; margin: 4px 0 2px; }

.picker__puestos {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}
.picker__puestos:not(:empty) { margin-bottom: 8px; }

/* La cara es lo que se ve de una opcion: el circulo, el codigo y el nombre, o
   el nombre y la tira de colores de una materia prima. */
.picker__cara {
  display:     flex;
  align-items: center;
  gap:         7px;
  min-width:   0;
}
.picker__cara em {
  font-style:  normal;
  font-size:   11.5px;
  color:       var(--crm-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.picker__chip {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       4px 4px 4px 9px;
  border:        1px solid var(--crm-border);
  border-radius: 999px;
  background:    var(--crm-card-bg);
  font-size:     13px;
  line-height:   1.2;
}
.picker__chip--fuera .picker__cara { color: var(--crm-accent); }
.picker__chip--fuera { border-style: dashed; border-color: var(--crm-accent); }

.picker__quitar {
  display:       inline-flex;
  align-items:   center;
  border:        0;
  background:    transparent;
  color:         var(--crm-muted);
  line-height:   1;
  padding:       3px;
  cursor:        pointer;
  border-radius: 50%;
}
.picker__quitar svg { width: 12px; height: 12px; }
.picker__quitar:hover { background: var(--crm-bg); color: var(--st-cancelled-fg); }

.picker__caja { position: relative; max-width: 460px; }
/* .stock-form input va al 100% para llenar su columna; aqui el buscador es el
   campo y le viene bien. */
.picker__buscar { width: 100%; }
.picker--ancho .picker__caja { max-width: none; }

.picker__lista {
  position:      absolute;
  z-index:       50;
  left:          0;
  right:         0;
  top:           calc(100% + 4px);
  max-height:    320px;
  overflow-y:    auto;
  margin:        0;
  padding:       4px;
  list-style:    none;
  background:    var(--crm-card-bg);
  border:        1px solid var(--crm-border);
  border-radius: 10px;
  box-shadow:    0 10px 28px rgba(0, 0, 0, .13);
}
.picker__opcion {
  display:       block;
  width:         100%;
  padding:       6px 8px;
  border:        0;
  background:    transparent;
  border-radius: 7px;
  font-size:     13px;
  text-align:    left;
  cursor:        pointer;
}
.picker__opcion:hover,
.picker__opcion:focus-visible { background: var(--crm-bg); }
/* En la lista el codigo va en columna, que asi los nombres arrancan alineados;
   dentro de una pastilla no, que ahi cada una es de su ancho. */
.picker__opcion .picker__cara > em { flex: 0 0 62px; }
.picker__nada { padding: 10px; font-size: 13px; color: var(--crm-muted); }

/* La materia prima trae su nombre arriba y debajo el proveedor y los colores
   que tiene: es lo que hace falta ver para saber si es la que se busca. */
.picker__linea {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
  min-width:   0;
}
.picker__cara--apilada { flex-direction: column; align-items: flex-start; gap: 3px; }
.picker__pie {
  display:     flex;
  align-items: center;
  gap:         7px;
  flex-wrap:   wrap;
  font-size:   11.5px;
  color:       var(--crm-muted);
}

.form-etiqueta {
  display:     block;
  font-size:   12px;
  font-weight: 600;
  color:       var(--crm-muted);
  margin-bottom: 2px;
}

/* El color, a la vista. Una lista de ciento sesenta y seis nombres sin ver el
   color no la mira nadie. */
.color-punto {
  display:        inline-block;
  width:          15px;
  height:         15px;
  border-radius:  50%;
  border:         1px solid rgba(0, 0, 0, .18);
  vertical-align: middle;
}
/* Lo que no tiene color se queda a rayas, para que se vea que falta. */
.color-punto[style*="transparent"] {
  border-style: dashed;
  border-color: var(--crm-muted);
}
.color-tira {
  display:   flex;
  flex-wrap: wrap;
  gap:       3px;
  max-width: 100%;
}
/* El que no esta dado de alta en la gama del proveedor: se ve igual, pero se
   nota que le falta el nombre bueno. */
.color-punto--fuera {
  border-style: dashed;
  border-color: var(--crm-accent);
}

.color-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background:  var(--crm-bg);
  padding:     1px 7px;
  border-radius: 4px;
}

.stock-chip--codigo {
  border-style: dashed;
  font-family:  ui-monospace, SFMono-Regular, Menlo, monospace;
}
a.stock-chips { text-decoration: none; display: inline-flex; flex-wrap: wrap; gap: 4px; }
a.stock-chips:hover .stock-chip { border-color: var(--crm-accent); }

.crm-registro {
  position:      fixed;
  right:         18px;
  bottom:        18px;
  z-index:       900;
  width:         310px;
  max-width:     calc(100vw - 36px);
  background:    var(--crm-white);
  border:        1px solid var(--crm-border);
  border-radius: 10px;
  box-shadow:    0 8px 24px rgba(5, 10, 48, .12);
  overflow:      hidden;
}
.crm-registro__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         7px 10px 7px 12px;
  background:      var(--crm-surface);
  border-bottom:   1px solid var(--crm-border);
  font-size:       10.5px;
  font-weight:     700;
  letter-spacing:  .6px;
  text-transform:  uppercase;
  color:           var(--crm-muted);
}
.crm-registro__cerrar {
  color:           var(--crm-muted);
  text-decoration: none;
  font-size:       16px;
  line-height:     1;
  padding:         0 2px;
}
.crm-registro__cerrar:hover { color: var(--crm-text); }

.crm-registro__linea {
  display:         block;
  padding:         9px 12px;
  border-bottom:   1px solid var(--crm-border);
  text-decoration: none;
  font-size:       12.5px;
  color:           var(--crm-text);
}
.crm-registro__linea:last-child { border-bottom: 0; }
.crm-registro__linea:hover      { background: var(--crm-bg); }

.crm-registro__texto   { display: block; font-weight: 600; }
.crm-registro__detalle { display: block; color: var(--crm-muted); font-size: 11.5px; margin-top: 2px; }

/* En movil la barra de navegacion vive abajo: el registro se sube para no taparla. */
@media (max-width: 640px) {
  .crm-registro { bottom: 76px; right: 12px; left: 12px; width: auto; }
}

.stock-aviso {
  display:        inline-block;
  margin-left:    8px;
  padding:        1px 8px;
  border-radius:  20px;
  font-size:      11px;
  font-weight:    600;
  vertical-align: middle;
  white-space:    nowrap;
}
.stock-aviso--hay   { background: #e7f6ec; color: #1a7f3c; }
.stock-aviso--falta { background: var(--crm-bg); color: var(--crm-muted); }

.crm-table--variantes { min-width: 560px; }
.crm-table--variantes .td-name { min-width: 210px; white-space: normal; }
.crm-table--variantes .col-num { white-space: nowrap; }

/* Las dos vistas de tareas viven juntas en el DOM y se alternan con [hidden] */
.tasks-view[hidden] { display: none; }

/* --- Responsive ----------------------------------------- */
@media (max-width: 900px) {
  .crm-sidebar { width: 60px; min-width: 60px; }
  .logo-text, .nav-label, .logout-label { display: none; }
  .crm-logo { justify-content: center; padding: 20px 0; }
  .crm-nav-item { justify-content: center; padding: 12px 0; }
  /* El botón de salir se queda, solo con el icono: si se oculta el footer
     entero, entre 640 y 900px no hay manera de cerrar sesión. */
  .crm-sidebar-footer { padding: 12px 8px; }
  .crm-logout-btn     { padding: 10px 0; }
  .crm-main { padding: 16px; }
  .crm-charts-row, .crm-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .crm-kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   MÓVIL — breakpoint principal (≤ 640px)
   ========================================================= */
@media (max-width: 640px) {

  /* Sidebar oculto: se convierte en barra inferior de 5 destinos.
     Cabe en 360px y respeta el área segura de los móviles con gesto inferior. */
  .crm-sidebar {
    position:   fixed;
    bottom:     0;
    top:        auto;
    left:       0;
    width:      100% !important;
    min-width:  0 !important;
    height:     auto;
    flex-direction: row;
    overflow:   visible;
    z-index:    1000;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .crm-logo, .crm-sidebar-footer { display: none; }
  .crm-nav {
    display:  flex;
    flex-direction: row;
    padding:  0;
    width:    100%;
  }
  .crm-nav-item {
    flex-direction:  column;
    justify-content: center;
    gap:         3px;
    padding:     9px 2px 8px;
    border-left: none;
    border-top:  2px solid transparent;
    flex:        1 1 0;
    min-width:   0;
    text-align:  center;
    /* 44px es el mínimo táctil recomendado; con el label sale algo más */
    min-height:  50px;
  }
  .crm-nav-item.active { border-left-color: transparent; border-top-color: var(--crm-brand); background: rgba(227,181,118,.10); }
  .nav-label {
    display:       block;
    font-size:     10px;
    line-height:   1.1;
    max-width:     100%;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
  }
  .nav-icon svg { width: 21px; height: 21px; }

  /* Los cuatro primeros destinos van en la barra; el resto, al menú "Más" */
  .crm-nav-item--secondary { display: none; }
  .crm-nav-more            { display: flex; }

  .crm-nav-sheet {
    display:       block;
    position:      absolute;
    bottom:        100%;
    left:          0;
    right:         0;
    background:    var(--crm-sidebar);
    border-top:    1px solid rgba(255,255,255,.12);
    padding:       6px 0 8px;
    box-shadow:    0 -10px 24px rgba(0,0,0,.35);
  }
  .crm-nav-sheet[hidden] { display: none; }
  .crm-sheet-item {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         13px 20px;
    color:           rgba(255,255,255,.72);
    text-decoration: none;
    font-size:       14.5px;
  }
  .crm-sheet-item:active,
  .crm-sheet-item:hover        { background: rgba(255,255,255,.07); color: #fff; }
  .crm-sheet-item.active       { color: var(--crm-brand); font-weight: 600; }
  .crm-sheet-item--logout      { border-top: 1px solid rgba(255,255,255,.1); margin-top: 6px; color: rgba(255,255,255,.55); }

  /* Capa para cerrar el menú tocando fuera */
  .crm-nav-backdrop {
    position:   fixed;
    inset:      0;
    background: rgba(5,10,48,.45);
    z-index:    999;
  }

  /* Área principal: padding inferior para no quedar tapada por la barra */
  .crm-wrap { flex-direction: column; }
  .crm-main {
    padding:    12px 12px 84px;
    overflow-x: hidden;
  }

  /* Cabecera de página. En una pantalla de 400px cada fila cuesta: título y
     fecha comparten línea, y los botones van juntos debajo sin estirarse. */
  .crm-page-header {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-bottom: 14px;
  }

  .crm-page-header h2 { font-size: 18px; }
  .crm-date { margin-left: 0; font-size: 12px; }

  .header-actions {
    margin-left: 0;
    width: 100%;
    gap: 6px;
    align-items: center;
  }

  .header-actions .btn { padding: 6px 10px; font-size: 12.5px; }

  /* KPIs: 2 columnas en móvil */
  .crm-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .kpi-card  { padding: 12px 12px; }
  .kpi-value { font-size: 19px; }
  .kpi-label { font-size: 10px; }

  /* Gráficos: una columna */
  .crm-charts-row { grid-template-columns: 1fr; gap: 12px; }
  .chart-card { padding: 14px 12px; }

  /* Paneles: una columna */
  .crm-two-col { grid-template-columns: 1fr; gap: 12px; }

  /* Las tablas se quedan como tablas: scroll lateral y todas las columnas.
     Apilarlas en tarjetas se probó y era peor: se perdía la vista de conjunto. */
  .crm-table-wrap, .crm-panel { overflow-x: auto; }
  .crm-table thead th,
  .crm-table tbody td { padding: 8px 10px; font-size: 12.5px; }
  .crm-table tfoot td { padding: 0 10px; }

  /* width:100% obligaba a la tabla a caber en la pantalla, y para lograrlo
     estrujaba las columnas hasta dejar los desplegables en "Po". Con
     width:auto la tabla crece lo que necesita y el scroll lateral entra de
     verdad, que es de lo que se trataba. */
  .crm-table { width: auto; min-width: 100%; }

  /* Formularios */
  .crm-form-wrap { max-width: 100%; }
  .form-section  { padding: 14px 12px; }
  .form-grid { grid-template-columns: 1fr; gap: 10px; }
  .form-group--wide { grid-column: 1; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .btn { flex: 1; justify-content: center; }

  /* 16px es el umbral por debajo del cual iOS hace zoom al enfocar un campo,
     y al volver deja la página descuadrada. */
  .form-group input, .form-group select, .form-group textarea,
  .crm-filters input, .crm-filters select, .filter-search,
  .task-comment-form textarea { font-size: 16px; }

  /* Filtros */
  .crm-filters form { flex-direction: column; align-items: stretch; }
  .filter-search,
  .crm-filters input[type="text"],
  .crm-filters select { width: 100%; min-width: 0; }
  .crm-filters .btn  { width: 100%; justify-content: center; }

  /* Botones: 38px de alto mínimo para poder acertar con el dedo */
  .btn    { font-size: 13px; padding: 9px 14px; min-height: 38px; }
  .btn-sm { padding: 7px 10px; font-size: 12px; min-height: 32px; }

  /* Productos grid */
  /* Productos: miniatura más pequeña y nombre a varias líneas */
  .crm-table--products .th-thumb,
  .crm-table--products .td-thumb { width: 42px; }
  .product-thumb { width: 34px; height: 34px; }
  .product-name  { font-size: 12.5px; }

  /* Detalle de cliente/pedido: dl */
  .crm-dl { padding: 10px 12px; }

  /* Paginación: botones más grandes, que son objetivo táctil */
  .crm-pagination { justify-content: center; gap: 4px; flex-wrap: nowrap; }
  .page-btn       { padding: 9px 4px; min-width: 34px; text-align: center; }
  .page-btn--flecha { padding-top: 6px; padding-bottom: 8px; }

  /* Autocomplete */
  .product-search-bar { flex-direction: column; align-items: stretch; }
  .product-search-bar input { min-width: 0; width: 100%; }

  /* Profit section */
  .profit-section   { padding: 16px 14px; }
  .profit-breakdown { grid-template-columns: 1fr; }
  .profit-tabs      { width: 100%; }
  .profit-tab       { flex: 1; }

  /* Tareas: la cabecera del tablero y sus filtros ocupan el ancho */
  .chart-head    { gap: 8px; }
  .chart-range   { margin-left: 0; width: 100%; }
  .chart-range button,
  .chart-range a { flex: 1; }
  .dash-lista          { max-height: none; }
  .dash-periodo        { width: 100%; margin-left: 0; gap: 8px; }
  .dash-periodo__mover { width: 100%; justify-content: space-between; }
  .dash-task-row { flex-wrap: wrap; padding: 10px 14px; gap: 6px; }
  .dash-task-row__title { flex: 1 1 100%; order: -1; white-space: normal; }
}

/* ================================================================
   Profit / rentabilidad section
   ================================================================ */
.profit-section {
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-border);
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 24px;
}

.profit-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.profit-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--crm-text);
  margin: 0;
}
.profit-header h3 small {
  font-size:   12px;
  font-weight: 400;
  color:       var(--crm-muted);
}
/* Lo que iba suelto a la derecha de la cabecera con estilo en línea */
.profit-header__meta {
  margin-left: auto;
  font-size:   12px;
  color:       var(--crm-muted);
}
.profit-header .btn { margin-left: auto; }
.profit-header .btn ~ .btn { margin-left: 0; }

.profit-tabs {
  display: flex;
  gap: 6px;
}

.profit-tab {
  background: transparent;
  border: 1px solid var(--crm-border);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--crm-text-muted);
  transition: background .15s, color .15s;
}

.profit-tab.active,
.profit-tab:hover {
  background: var(--crm-primary);
  color: #fff;
  border-color: var(--crm-primary);
}

.profit-breakdown {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-width: 480px;
}

.profit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14px;
}

.profit-label { color: var(--crm-text-muted); }
.profit-value { font-weight: 600; }

.profit-row--income  { background: rgba(39,174,96,.08); }
.profit-row--cost    { background: rgba(231,76,60,.06);  color: var(--crm-text-muted); }
.profit-row--subtotal {
  background: var(--crm-border);
  border-top: 2px solid var(--crm-border);
  font-weight: 600;
}

.profit-row--net {
  background: linear-gradient(135deg, rgba(39,174,96,.15), rgba(39,174,96,.05));
  border: 1px solid rgba(39,174,96,.3);
  font-size: 15px;
  font-weight: 700;
  margin-top: 4px;
}

.text-green { color: #27ae60; }
.text-red   { color: #b91c1c; }

.profit-note {
  font-size: 12px;
  color: var(--crm-text-muted);
  margin-top: 16px;
  margin-bottom: 0;
}

.profit-note a { color: var(--crm-link); text-decoration: none; }

/* ================================================================
   Liquidación entre socios
   ================================================================ */
.liq-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.liq-card {
  background:    var(--crm-surface);
  border:        1px solid var(--crm-border);
  border-left:   4px solid var(--crm-border);
  border-radius: 10px;
  padding:       14px 18px;
}
.liq-card__label { font-size: 11px; color: var(--crm-muted); }
.liq-card__value { font-size: 19px; font-weight: 700; color: var(--crm-text); margin-top: 2px; font-variant-numeric: tabular-nums; }
.liq-card__hint  { font-size: 11px; color: var(--crm-muted); margin-top: 4px; }

.liq-card--web    { border-left-color: var(--st-shipped-fg); }
.liq-card--pres   { border-left-color: var(--crm-accent); }
.liq-card--gastos { border-left-color: var(--pr-urgent); }
.liq-card--gastos .liq-card__value { color: var(--pr-urgent); }
/* Barrita de reparto dentro de una tarjeta (cuánto lleva cada uno) */
.liq-card__bar   { margin-top: 9px; height: 6px; border-radius: 4px; background: #e2e6ee; overflow: hidden; }
.liq-card__bar i { display: block; height: 100%; border-radius: 4px; background: var(--crm-accent); }

/* Dos cuentas enfrentadas (lo que debe cada uno) y desgloses por persona.
   Antes eran flex con estilos en línea repetidos en cuatro sitios. */
.fin-cols {
  display:   grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:       18px;
}
.fin-cols__head {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color:          var(--crm-muted);
  margin-bottom:  8px;
}
.fin-user-card {
  background:    var(--crm-surface);
  border:        1px solid var(--crm-border);
  border-radius: 10px;
  overflow:      hidden;
}
.fin-user-card__head {
  padding:       10px 16px 8px;
  font-size:     13px;
  font-weight:   600;
  color:         var(--crm-text);
  border-bottom: 1px solid var(--crm-border);
}
.fin-user-card .profit-breakdown { padding: 6px 16px 10px; }

/* Bloque de cada socio dentro de la liquidación */
.liq-partner {
  background:    var(--crm-surface);
  border:        1px solid var(--crm-border);
  border-radius: 10px;
  padding:       18px 22px;
  margin-bottom: 16px;
}
.liq-partner__name {
  font-size:     14px;
  font-weight:   700;
  color:         var(--crm-text);
  margin-bottom: 14px;
}

/* Formulario de nueva liquidación: los controles heredan el estilo base del
   panel, aquí solo se coloca la fila. */
.liq-form {
  display:     flex;
  gap:         12px;
  flex-wrap:   wrap;
  align-items: flex-end;
  background:  var(--crm-surface);
  border:      1px solid var(--crm-border);
  border-radius: 8px;
  padding:     14px 16px;
  margin-top:  10px;
}
.liq-form .form-group { gap: 4px; min-width: 132px; }
.liq-form .form-group label { font-size: 11px; }
.liq-form__arrow {
  align-self:     flex-end;
  padding-bottom: 8px;
  font-size:      16px;
  color:          var(--crm-muted);
}
.liq-form__notes { flex: 1; min-width: 160px; }
.liq-form--edit  { margin-top: 0; background: var(--crm-white); }
/* El total es la cifra de la que salen todas las demás: se marca */
.liq-card--total { border-left-color: var(--crm-primary); background: var(--crm-white); }
.liq-card--total .liq-card__value { font-size: 22px; }

.liq-details {
  border:        1px solid var(--crm-border);
  border-radius: 8px;
  padding:       10px 14px;
  background:    var(--crm-white);
}
.liq-details > summary {
  cursor:      pointer;
  font-size:   12.5px;
  font-weight: 600;
  color:       var(--crm-link);
  list-style:  none;
}
.liq-details > summary::marker,
.liq-details > summary::-webkit-details-marker { display: none; }
.liq-details > summary::before { content: '▸ '; }
.liq-details[open] > summary::before { content: '▾ '; }

/* Cuentas cerradas: es el estado bueno y se dice con una frase */
.liq-paz {
  background:    var(--st-delivered-bg);
  border:        1px solid var(--st-delivered-bd);
  border-radius: var(--crm-radius);
  padding:       14px 18px;
  max-width:     560px;
}
.liq-paz__title { font-size: 16px; font-weight: 700; color: var(--st-delivered-fg); }
.liq-paz__sub   { font-size: 12.5px; color: var(--crm-muted); margin-top: 4px; line-height: 1.5; }

/* La cuenta del socio: una columna de filas donde cada una sale de la
   anterior y la última, destacada, es la que se paga. */
.liq-cuenta { max-width: 560px; margin-bottom: 18px; }
.liq-cuenta__head {
  font-size:      10.5px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color:          var(--crm-muted);
  margin-bottom:  8px;
}
.liq-cuenta__head small {
  text-transform: none;
  letter-spacing: 0;
  font-weight:    600;
  margin-left:    5px;
}
/* Aclaración debajo de la etiqueta de una línea de la cuenta */
.profit-label small {
  display:   block;
  font-size: 11px;
  opacity:   .8;
  margin-top: 1px;
}
.liq-cuenta .profit-row--net {
  font-size:   15px;
  align-items: center;
}
.liq-cuenta .profit-row--net .profit-value { font-size: 18px; }

.liq-pagos {
  max-width:     560px;
  margin-bottom: 4px;
  border:        1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  background:    var(--crm-white);
}
.liq-pagos thead th { font-size: 10.5px; }
.liq-pagos tbody td { font-size: 12.5px; }

/* ================================================================
   Tareas — tablero kanban, tarjetas y detalle
   ================================================================ */
:root {
  --tk-todo:    #55606f;
  --tk-doing:   #1d4ed8;
  --tk-blocked: #b91c1c;
  --tk-review:  #7e22ce;
  --tk-done:    #15803d;

  --pr-low:     #7a8494;
  --pr-normal:  #1d4ed8;
  --pr-high:    #c2410c;
  --pr-urgent:  #b91c1c;
}

.crm-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.board-col {
  background: #e7eaf0;
  border-radius: 10px;
  padding: 10px;
  min-height: 160px;
  transition: background .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
}
.board-col.is-dragover {
  background: #dbe0ea;
  box-shadow: inset 0 0 0 2px var(--crm-primary);
}

.board-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--crm-muted);
}
.board-col-head .col-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.board-col-head .col-count {
  margin-left: auto;
  background: rgba(5,10,48,.08);
  color: var(--crm-text);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 11px;
}
.board-col[data-status="todo"]    .col-dot { background: var(--tk-todo); }
.board-col[data-status="doing"]   .col-dot { background: var(--tk-doing); }
.board-col[data-status="blocked"] .col-dot { background: var(--tk-blocked); }
.board-col[data-status="review"]  .col-dot { background: var(--tk-review); }
.board-col[data-status="done"]    .col-dot { background: var(--tk-done); }

/* El cuerpo ocupa lo que sobre de la columna: así toda la columna, y no solo
   el trozo con tarjetas, acepta que le suelten algo encima. */
.board-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; flex: 1; }

.task-card {
  background: var(--crm-white);
  border-radius: 8px;
  box-shadow: var(--crm-shadow);
  border-left: 4px solid var(--pr-normal);
  padding: 10px 12px;
  cursor: grab;
  position: relative;
}
.task-card:active   { cursor: grabbing; }
.task-card.is-dragging { opacity: .45; }
.task-card--low     { border-left-color: var(--pr-low); }
.task-card--normal  { border-left-color: var(--pr-normal); }
.task-card--high    { border-left-color: var(--pr-high); }
.task-card--urgent  { border-left-color: var(--pr-urgent); }

.task-card__title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--crm-text);
  text-decoration: none;
  display: block;
}
.task-card__title:hover { color: var(--crm-link); }
.task-card--done .task-card__title { text-decoration: line-through; color: var(--crm-muted); }

.task-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px;
  color: var(--crm-muted);
}
.task-card__actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--crm-border);
}

.task-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--crm-sidebar);
  color: var(--crm-brand);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .3px;
}
.task-avatar--none { background: #ccd2de; color: #4a5468; }

.task-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.task-pill--low     { color: var(--pr-low);    background: #f1f3f6; }
.task-pill--normal  { color: var(--pr-normal); background: #dee7ff; }
.task-pill--high    { color: var(--pr-high);   background: #ffe6d2; }
.task-pill--urgent  { color: var(--pr-urgent); background: #fee2e2; }

.task-due            { color: var(--crm-muted); font-size: 11px; white-space: nowrap; }
.task-due--soon      { color: #9a6207;          font-weight: 700; }
.task-due--today     { color: var(--pr-high);   font-weight: 700; }
.task-due--overdue   { color: var(--pr-urgent); font-weight: 700; }

/* ── Urgencia: el único sitio donde algo se mueve ──────────
   Rojo y pulso solo para vencido y para hoy. Cualquier cosa que llame la
   atención permanentemente deja de llamarla, así que "esta semana" no se
   anima: solo cambia de color. */
@keyframes crm-pulse-urgent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185,28,28,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(185,28,28,0); }
}
@keyframes crm-pulse-today {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194,65,12,.45); }
  50%      { box-shadow: 0 0 0 5px rgba(194,65,12,0); }
}

.urgency-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       3px 11px;
  border-radius: 20px;
  font-size:     11.5px;
  font-weight:   700;
  white-space:   nowrap;
  border:        1px solid currentColor;
  text-decoration: none;
}
.urgency-pill--none    { color: var(--crm-muted); background: #eef0f4; }
.urgency-pill--later   { color: #3f4a63;          background: #e8ebf2; }
.urgency-pill--soon    { color: #9a6207;          background: var(--st-processing-bg); }
.urgency-pill--today   { color: var(--pr-high);   background: var(--st-production-bg); animation: crm-pulse-today 2.4s ease-out infinite; }
.urgency-pill--overdue { color: var(--pr-urgent); background: var(--st-cancelled-bg);  animation: crm-pulse-urgent 1.8s ease-out infinite; }

/* Franja izquierda de la fila del dashboard, para localizar la tarea apurada
   sin leer la fecha */
.dash-task-row--today   { box-shadow: inset 3px 0 0 var(--pr-high); }
.dash-task-row--overdue { box-shadow: inset 3px 0 0 var(--pr-urgent); background: #fff7f7; }

.task-card--overdue { border-left-color: var(--pr-urgent) !important; }
.task-card--overdue .task-card__title { color: var(--pr-urgent); }

@media (prefers-reduced-motion: reduce) {
  .urgency-pill--today,
  .urgency-pill--overdue { animation: none; }
}

.task-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid currentColor;
}
.task-status-badge--todo    { color: var(--tk-todo);    background: #eef1f5; }
.task-status-badge--doing   { color: var(--tk-doing);   background: #dee7ff; }
.task-status-badge--blocked { color: var(--tk-blocked); background: #fee2e2; }
.task-status-badge--review  { color: var(--tk-review);  background: #f4e6ff; }
.task-status-badge--done    { color: var(--tk-done);    background: #dcfce7; }

/* --- Estado editable con color -------------------------
   Mismo criterio que el estado de los pedidos: el desplegable lleva el color
   de su estado, y el borde izquierdo grueso deja leer la columna de un
   barrido vertical sin leer ninguna etiqueta. */
.crm-body .task-status-select {
  border:            1.5px solid currentColor;
  border-left-width: 6px;
  border-radius:     6px;
  padding:           4px 24px 4px 9px;
  min-height:        30px;
  font-size:         12px;
  font-weight:       700;
  background-position: right 6px center;
  background-size:   13px 13px;
  transition:        box-shadow .15s;
}
.crm-body .task-status-select:hover { box-shadow: 0 0 0 3px rgba(5,10,48,.10); }
.crm-body .task-status-select:focus {
  border-color: currentColor;
  box-shadow:   0 0 0 3px rgba(5,10,48,.14);
}
.crm-body .task-status-select--todo    { color: var(--tk-todo);    background-color: #eef1f5; border-color: #d3d9e2; border-left-color: var(--tk-todo); }
.crm-body .task-status-select--doing   { color: var(--tk-doing);   background-color: #dee7ff; border-color: #bacaf7; border-left-color: var(--tk-doing); }
.crm-body .task-status-select--blocked { color: var(--tk-blocked); background-color: #fee2e2; border-color: #f6c2c2; border-left-color: var(--tk-blocked); }
.crm-body .task-status-select--review  { color: var(--tk-review);  background-color: #f4e6ff; border-color: #e0c6f5; border-left-color: var(--tk-review); }
.crm-body .task-status-select--done    { color: var(--tk-done);    background-color: #dcfce7; border-color: #b3e9c6; border-left-color: var(--tk-done); }

.crm-body .task-status-select option { background: #fff; font-weight: 600; }
.crm-body .task-status-select option[value="todo"]    { color: var(--tk-todo); }
.crm-body .task-status-select option[value="doing"]   { color: var(--tk-doing); }
.crm-body .task-status-select option[value="blocked"] { color: var(--tk-blocked); }
.crm-body .task-status-select option[value="review"]  { color: var(--tk-review); }
.crm-body .task-status-select option[value="done"]    { color: var(--tk-done); }
/* En la tarjeta comparte fila con dos botones: ahí no impone ancho mínimo */
.crm-body .task-card__actions select.task-status-select { min-width: 0; }

/* --- Filas de la lista de tareas -----------------------
   La franja izquierda es la prioridad; el rojo de vencida pesa más que la
   prioridad, porque una tarea pasada de fecha se mira antes que nada. */
.task-row > td:first-child          { box-shadow: inset 4px 0 0 var(--pr-normal); }
.task-row--low > td:first-child     { box-shadow: inset 4px 0 0 var(--pr-low); }
.task-row--normal > td:first-child  { box-shadow: inset 4px 0 0 var(--pr-normal); }
.task-row--high > td:first-child    { box-shadow: inset 4px 0 0 var(--pr-high); }
.task-row--urgent > td:first-child  { box-shadow: inset 4px 0 0 var(--pr-urgent); }
.task-row--overdue > td:first-child { box-shadow: inset 4px 0 0 var(--pr-urgent); }
.task-row--overdue td               { background: #fff7f7; }
.task-row--done td                  { background: #f8faf9; }
.task-row--done > td:first-child    { box-shadow: inset 4px 0 0 var(--tk-done); }
.task-row--done .task-cell__title   { text-decoration: line-through; color: var(--crm-muted); }
.task-row--done .task-pill,
.task-row--done .task-who           { opacity: .65; }

.task-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-cell__title { min-width: 0; }
.task-cell__tag {
  font-size:     11px;
  color:         var(--crm-muted);
  background:    var(--crm-bg);
  border:        1px solid var(--crm-border);
  border-radius: 4px;
  padding:       1px 6px;
  white-space:   nowrap;
  text-decoration: none;
}
.task-cell__tag--link:hover { color: var(--crm-link); border-color: var(--crm-link); }

/* Referencia corta de la tarea, como la clave de una incidencia de Jira */
.task-key {
  font-family:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:      11px;
  font-weight:    700;
  color:          var(--crm-muted);
  letter-spacing: .3px;
  white-space:    nowrap;
}

.task-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.task-who__name {
  font-size:     13px;
  color:         var(--crm-text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.task-who__name--none { color: var(--crm-muted); font-style: italic; }

.task-pill__ico { font-size: 8px; line-height: 1; letter-spacing: -1px; }

/* Bloque plegado del formulario: lo que casi nunca se rellena no ocupa sitio
   hasta que se pide. */
.form-optional { margin-top: 4px; }
.form-optional > summary {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-size:   13px;
  font-weight: 600;
  color:       var(--crm-link);
  cursor:      pointer;
  list-style:  none;
  padding:     4px 0;
}
.form-optional > summary::-webkit-details-marker { display: none; }
.form-optional > summary::before { content: '+'; font-size: 15px; line-height: 1; }
.form-optional[open] > summary::before { content: '\2212'; }
.form-optional > .form-group { max-width: 260px; margin-top: 10px; }

.board-empty {
  font-size: 12px;
  color: var(--crm-muted);
  text-align: center;
  padding: 14px 6px;
  border: 1px dashed #c4cbd8;
  border-radius: 8px;
}

/* --- Vista de detalle de tarea -------------------------- */
.task-detail-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
.task-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--crm-text);
  white-space: pre-wrap;
}
.task-desc--empty { color: var(--crm-muted); font-style: italic; }

.task-comments      { display: flex; flex-direction: column; gap: 12px; }
.task-comment {
  display: flex;
  gap: 10px;
}
.task-comment__body {
  flex: 1;
  background: var(--crm-surface);
  border: 1px solid var(--crm-border);
  border-radius: 8px;
  padding: 9px 12px;
}
.task-comment__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.task-comment__author { font-size: 12.5px; font-weight: 700; }
.task-comment__date   { font-size: 11px; color: var(--crm-muted); }
.task-comment__del    { margin-left: auto; background: none; border: none; color: var(--crm-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.task-comment__del:hover { color: var(--pr-urgent); }
.task-comment__text   { font-size: 13.5px; white-space: pre-wrap; }

.task-comment-form { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.task-comment-form textarea {
  padding: 9px 12px;
  border: 1.5px solid var(--crm-border);
  border-radius: var(--crm-radius);
  font-size: 14px;
  font-family: var(--font);
  color: var(--crm-text);
  resize: vertical;
  min-height: 70px;
}
.task-comment-form textarea:focus { outline: none; border-color: var(--crm-accent); }

/* --- Panel de tareas del dashboard --------------------- */
.dash-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--crm-border);
}
.dash-task-row:last-child { border-bottom: 0; }
.dash-task-row__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--crm-text);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-task-row__title:hover { color: var(--crm-link); }
/* Ancho fijo para que los nombres queden alineados en columna de una fila a
   otra, en vez de bailar según lo que ocupe cada uno */
.dash-task-row .task-who { flex-shrink: 0; width: 130px; }
.dash-task-row .task-who__name { font-size: 12.5px; }
@media (max-width: 900px) {
  .dash-task-row .task-who { width: auto; }
  .dash-task-row .task-who__name { display: none; }
}

@media (max-width: 1100px) {
  .crm-board { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
  .task-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .crm-board { grid-template-columns: 1fr; }
  .board-col { padding: 8px; }
  /* En móvil no hay arrastre fiable: la tarjeta cambia de estado con el select */
  .task-card { cursor: default; }
}


/* =========================================================
   AVISOS — comentarios sin leer
   ========================================================= */

/* Globo del menú lateral. Va absoluto sobre el item para que sirva igual en
   las tres formas de la barra: ancha, rail de 60px y barra inferior de móvil. */
.nav-badge {
  position:    absolute;
  top:         6px;
  left:        30px;
  min-width:   17px;
  height:      17px;
  padding:     0 5px;
  border-radius: 20px;
  background:  #c0392b;
  color:       #fff;
  font-size:   10px;
  font-weight: 700;
  line-height: 17px;
  text-align:  center;
  box-shadow:  0 0 0 2px var(--crm-sidebar);
}
.nav-badge--prio { background: var(--pr-high); }
@media (max-width: 900px) {
  .nav-badge { left: 50%; margin-left: 2px; top: 6px; }
}
@media (max-width: 640px) {
  .nav-badge { top: 4px; left: 50%; margin-left: 4px; }
}

/* Bandeja de entrada del tablero */
.crm-inbox {
  background:  var(--crm-white);
  border:      1px solid var(--crm-border);
  border-left: 4px solid #c0392b;
  border-radius: var(--crm-radius);
  box-shadow:  var(--crm-shadow);
  margin-bottom: 20px;
  overflow:    hidden;
}
.crm-inbox__head {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
  padding:     12px 16px;
  border-bottom: 1px solid var(--crm-border);
  background:  #fff7f6;
}
.crm-inbox__title { font-size: 14px; font-weight: 700; color: var(--crm-text); }
.crm-inbox__all {
  margin-left: auto;
  font-size:   12.5px;
  color:       var(--crm-link);
  text-decoration: none;
}
.crm-inbox__all:hover { text-decoration: underline; }

.crm-inbox__item {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding:     11px 16px;
  border-top:  1px solid var(--crm-border);
  text-decoration: none;
  color:       var(--crm-text);
}
.crm-inbox__item:first-of-type { border-top: 0; }
.crm-inbox__item:hover         { background: var(--crm-surface); }
.crm-inbox__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crm-inbox__meta { font-size: 12px; color: var(--crm-muted); }
.crm-inbox__meta strong { color: var(--crm-text); }
.crm-inbox__date { margin-left: 6px; font-size: 11.5px; }
.crm-inbox__text {
  font-size:     13px;
  color:         var(--crm-text);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Marca de "sin leer" en tarjetas y filas */
.task-unread {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  background:    #fdecea;
  color:         #a5281b;
  border:        1px solid #f3c3bd;
  border-radius: 20px;
  padding:       1px 8px;
  font-size:     11px;
  font-weight:   600;
}
.task-card--unread { box-shadow: var(--crm-shadow), 0 0 0 1px #f0b3ac; }
.task-row--unread .task-cell__title { font-weight: 700; }


/* =========================================================
   PEDIDOS URGENTES
   ========================================================= */

/* El círculo: con número en la cabecera de la lista (cuántos hay) y con el
   rayo en la fila de cada pedido (cuál es). */
.prio-dot {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-width:     20px;
  height:        20px;
  padding:       0 5px;
  border-radius: 50%;
  background:    var(--pr-high);
  color:         #fff;
  font-size:     11px;
  font-weight:   700;
  line-height:   1;
  flex-shrink:   0;
}
/* El trazo se afina dentro del círculo: a 12px el 1.8 del menú se emborrona */
.prio-dot svg { width: 12px; height: 12px; stroke-width: 2.1; }

/* Icono dentro de la etiqueta de una casilla de formulario */
.label-ico     { display: inline-flex; color: var(--pr-high); }
.label-ico svg { width: 16px; height: 16px; }

.prio-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  padding:       3px 11px 3px 3px;
  border-radius: 20px;
  border:        1px solid #f0cdb5;
  background:    #fff4ed;
  color:         var(--pr-high);
  font-size:     12.5px;
  font-weight:   600;
  text-decoration: none;
}
.prio-pill:hover      { background: #ffe9dc; }
.prio-pill--on        { border-color: var(--pr-high); }
.prio-pill--closed    { opacity: .55; }
.prio-pill--closed .prio-dot { background: var(--crm-muted); }

/* La fila entera se marca: con veinte pedidos en pantalla, un icono suelto en
   la primera columna se pierde. */
.order-row--prio > td:first-child { box-shadow: inset 4px 0 0 var(--pr-high); }
.order-row--prio td               { background: #fff8f3; }
.order-row--prio .td-id .prio-dot  { margin-right: 5px; vertical-align: middle; }


/* =========================================================
   TAREAS — formulario a dos columnas y editor markdown
   ========================================================= */

.task-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
.task-form-main {
  background:    var(--crm-white);
  border-radius: var(--crm-radius);
  box-shadow:    var(--crm-shadow);
  padding:       20px 22px;
  display:       flex;
  flex-direction: column;
  gap:           18px;
}
.task-form-title { font-size: 16px !important; font-weight: 600; }
.task-form-side  { display: flex; flex-direction: column; gap: 16px; }
.task-form-side__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.task-form-actions    { margin-top: 0; }

/* --- Editor (Toast UI) ----------------------------------- */

/* La librería trae su propio marco: aquí solo se le quitan las esquinas y la
   tipografía de fábrica para que no cante al lado del resto de campos. */
.md-editor { border: 0; background: none; }
.md-area   { display: none; }
.md-editor.is-ready .md-area  { display: block; }
.md-editor.is-ready .md-store { display: none; }

.md-area .toastui-editor-defaultUI {
  border-radius: var(--crm-radius);
  border-color:  var(--crm-border);
  font-family:   var(--font);
}
.md-area .toastui-editor-defaultUI-toolbar { border-radius: var(--crm-radius) var(--crm-radius) 0 0; }
.md-area .toastui-editor-toolbar           { background: var(--crm-surface); }
.md-area .ProseMirror                      { font-family: var(--font); font-size: 14px; line-height: 1.65; }
.md-area .toastui-editor-contents          { font-family: var(--font); }

/* Sin JavaScript, o si el CDN del editor no responde, lo que queda a la vista
   es este textarea con el markdown dentro. Feo, pero se puede trabajar. */
.md-store {
  min-height:  320px;
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  font-size:   13.5px;
  line-height: 1.65;
}

/* --- Markdown ya pintado --------------------------------- */
.task-md { font-size: 14px; line-height: 1.65; color: var(--crm-text); }
.task-md > *:first-child { margin-top: 0; }
.task-md > *:last-child  { margin-bottom: 0; }
.task-md p        { margin: 0 0 10px; }
.task-md .md-h    { font-weight: 700; line-height: 1.3; margin: 18px 0 8px; }
.task-md h1.md-h  { font-size: 20px; }
.task-md h2.md-h  { font-size: 17px; }
.task-md h3.md-h  { font-size: 15px; }
.task-md h4.md-h,
.task-md h5.md-h,
.task-md h6.md-h  { font-size: 14px; color: var(--crm-muted); text-transform: uppercase; letter-spacing: .4px; }
.task-md ul,
.task-md ol       { margin: 0 0 10px; padding-left: 22px; }
.task-md li       { margin-bottom: 4px; }
.task-md a        { color: var(--crm-link); }
.task-md code {
  background:    var(--crm-surface);
  border:        1px solid var(--crm-border);
  border-radius: 4px;
  padding:       1px 5px;
  font-family:   ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  font-size:     12.5px;
}
.task-md pre {
  background:    #0f1533;
  color:         #e6e9f5;
  border-radius: var(--crm-radius);
  padding:       12px 14px;
  overflow-x:    auto;
  margin:        0 0 12px;
}
.task-md pre code { background: none; border: 0; color: inherit; padding: 0; font-size: 12.5px; }
.task-md blockquote {
  margin:      0 0 12px;
  padding:     6px 14px;
  border-left: 3px solid var(--crm-brand);
  background:  var(--crm-surface);
  color:       var(--crm-text-muted);
}
.task-md hr { border: 0; border-top: 1px solid var(--crm-border); margin: 16px 0; }

/* Lista de casillas: sin bolita de lista, la casilla ya hace de marca */
.task-md .md-tasklist { list-style: none; padding-left: 2px; }
.md-task {
  display:     flex;
  align-items: flex-start;
  gap:         9px;
  padding:     2px 0;
}
.md-task input[type="checkbox"] {
  width:        16px;
  height:       16px;
  margin-top:   3px;
  flex-shrink:  0;
  accent-color: var(--crm-accent);
  cursor:       pointer;
}
.md-task input[disabled] { cursor: default; }
.md-task--done > span    { text-decoration: line-through; color: var(--crm-muted); }

/* Contador de casillas en la tarjeta del tablero y en la fila de la lista */
.task-check {
  display:       inline-flex;
  align-items:   center;
  gap:           3px;
  background:    var(--crm-surface);
  border:        1px solid var(--crm-border);
  border-radius: 20px;
  padding:       1px 8px;
  font-size:     11px;
  font-weight:   600;
  color:         var(--crm-muted);
}
.task-check--full { border-color: #a9dfbf; background: #eafaf1; color: #1e7e45; }

/* Progreso de las casillas, en la cabecera del panel */
.md-progress {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-left: 12px;
  margin-right: auto;
}
.md-progress__bar {
  width:         90px;
  height:        6px;
  border-radius: 20px;
  background:    var(--crm-border);
  overflow:      hidden;
}
.md-progress__bar i {
  display:    block;
  height:     100%;
  background: var(--tk-done);
  transition: width .2s;
}
.md-progress__txt { font-size: 11.5px; font-weight: 600; color: var(--crm-muted); }

@media (max-width: 1000px) {
  .task-form-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   TABLAS ORDENABLES
   ========================================================= */

.th-sort {
  cursor:      pointer;
  user-select: none;
  position:    relative;
  white-space: nowrap;
}
.th-sort:hover { color: var(--crm-text); }

/* La flecha se reserva su hueco siempre: si solo aparece al ordenar, la
   cabecera da un salto de dos píxeles cada vez que se pulsa. */
.th-sort::after {
  content:     '↕';
  display:     inline-block;
  width:       11px;
  margin-left: 4px;
  font-size:   10px;
  opacity:     0;
  transition:  opacity .15s;
}
.th-sort:hover::after            { opacity: .45; }
.th-sort--active                 { color: var(--crm-text); }
.th-sort--active::after          { opacity: 1; color: var(--crm-accent); }
.th-sort--active[data-dir="asc"]::after  { content: '↑'; }
.th-sort--active[data-dir="desc"]::after { content: '↓'; }

/* ═══════════════════════════════════════════════════════
   ORGANIZACIONES
   El color de la barra y el acento los inyecta el layout
   como variables, así que aquí no hay ningún color fijo
   de organización: todo sale de --crm-sidebar y compañía.
   ═══════════════════════════════════════════════════════ */

/* ── La marca: logo + cambio de organización ──────────── */

.crm-marca { position: relative; padding: 4px 14px 14px; }

.crm-marca__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255,255,255,.75);
  transition: background .12s ease, border-color .12s ease;
}

.crm-marca__boton:hover,
.crm-marca__boton[aria-expanded="true"] {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}

.crm-marca__boton:focus-visible { outline: 2px solid var(--crm-brand); outline-offset: 2px; }

.crm-marca__sola { padding: 8px 10px; border: 1px solid transparent; }

/* El logo de cada organización tiene su forma: uno es una marca casi cuadrada
   y otro un logotipo apaisado con el nombre dentro. Se acota por los dos lados
   y se deja respirar. */
.crm-marca__logo {
  height: 34px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.crm-marca__flecha { display: flex; flex-shrink: 0; }
.crm-marca__flecha svg { width: 15px; height: 15px; }
.crm-marca__boton[aria-expanded="true"] .crm-marca__flecha { transform: rotate(180deg); }

.crm-marca__menu {
  position: absolute;
  z-index: 60;
  left: 12px;
  right: 12px;
  top: calc(100% - 6px);
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-border);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(5,10,48,.10), 0 12px 32px rgba(5,10,48,.18);
  padding: 6px;
}

.crm-marca__titulo {
  margin: 4px 8px 6px;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--crm-muted);
}

.crm-marca__opcion {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 6px;
  color: var(--crm-text);
  text-decoration: none;
  font-size: 13.5px;
}

.crm-marca__opcion:hover { background: var(--crm-bg); }
.crm-marca__opcion.is-actual { font-weight: 600; }

.crm-marca__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--org-punto, var(--crm-accent));
  flex-shrink: 0;
}

.crm-marca__nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-marca__check  { color: var(--crm-accent); font-size: 12px; }

.crm-marca__todas {
  display: block;
  margin-top: 4px;
  padding: 8px 9px;
  border-top: 1px solid var(--crm-border);
  color: var(--crm-muted);
  text-decoration: none;
  font-size: 12.5px;
}

.crm-marca__todas:hover { color: var(--crm-text); }

/* En móvil la barra lateral es la fila de abajo: la marca no pinta nada ahí. */
@media (max-width: 640px) {
  .crm-marca { display: none; }
}

/* ── Catálogo propio ──────────────────────────────────── */

.col-thumb { width: 52px; }

.prod-thumb {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
  background: var(--crm-bg);
  border: 1px solid var(--crm-border);
}

.prod-thumb--vacia { border-style: dashed; }

.row-muted td { opacity: .55; }

.attr-chip {
  display: inline-block;
  font-size: 12px;
  color: var(--crm-muted);
  margin-right: 10px;
}

.attr-chip strong { color: var(--crm-text); font-weight: 600; }

.crm-empty {
  background: var(--crm-card-bg);
  border: 1px dashed var(--crm-border);
  border-radius: var(--crm-radius);
  padding: 40px 28px;
  text-align: center;
  color: var(--crm-muted);
}

.crm-empty p { margin: 0 0 10px; }
.crm-empty p:last-child { margin-bottom: 0; }

.check-inline { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check-inline input { width: auto; }

.cat-estado {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}

.cat-estado--activo   { background: var(--st-delivered-bg); color: var(--st-delivered-fg); border-color: var(--st-delivered-bd); }
.cat-estado--retirado { background: var(--st-pending-bg);   color: var(--st-pending-fg);   border-color: var(--st-pending-bd); }

.btn-right { margin-left: auto; }

/* ── Cartera ──────────────────────────────────────────── */

.crm-cartera-body { background: var(--crm-bg); }

.crm-cartera {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 20px 72px;
}

.cartera-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--crm-border);
}

.cartera-head__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--crm-text);
}

.cartera-logo { width: 30px; height: auto; }

.cartera-head__usuario {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--crm-muted);
}

.cartera-titulo {
  font-size: 27px;
  margin: 34px 0 6px;
  color: var(--crm-text);
}

.cartera-sub {
  margin: 0 0 26px;
  color: var(--crm-muted);
  font-size: 15px;
  max-width: 60ch;
}

.cartera-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.org-tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: var(--crm-shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}

.org-tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(5,10,48,.07), 0 14px 30px rgba(5,10,48,.13);
}

/* La cabecera es del color de la organización y lleva su logo: es lo primero
   que distingue una tarjeta de la otra, antes de leer un solo número. */
.org-tarjeta__marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 92px;
  padding: 20px 22px;
  background: var(--org-barra);
}

.org-tarjeta__logo {
  height: 46px;
  width: auto;
  max-width: 62%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.org-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px 20px;
}

.org-tarjeta__nombre {
  margin: 0;
  font-size: 16px;
  color: var(--crm-text);
}

.org-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  white-space: nowrap;
}

.org-cifra { display: flex; flex-direction: column; gap: 2px; }
.org-cifra strong { font-size: 28px; color: var(--crm-text); letter-spacing: -.02em; }
.org-cifra span   { font-size: 12.5px; color: var(--crm-muted); }

.org-datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid var(--crm-border);
}

.org-datos div { display: flex; flex-direction: column; gap: 1px; }
.org-datos dt { font-size: 11.5px; color: var(--crm-muted); }
.org-datos dd { margin: 0; font-size: 19px; font-weight: 600; color: var(--crm-text); }
.org-datos dd small { font-size: 13px; font-weight: 400; color: var(--crm-muted); }

.org-meta { display: flex; align-items: center; gap: 10px; }
.org-meta__pista { flex: 1; height: 5px; border-radius: 3px; background: var(--crm-bg); overflow: hidden; }
.org-meta__pista i { display: block; height: 100%; background: var(--org-acento); border-radius: 3px; }
.org-meta__texto { font-size: 12px; color: var(--crm-muted); white-space: nowrap; }

.org-entrar {
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--org-acento);
}

.org-tarjeta:hover .org-entrar span { margin-left: 4px; }

/* Lo pendiente es lo unico de la cartera sobre lo que hay que hacer algo. En
   cero no se pinta: un rojo permanente deja de mirarse. */
.org-datos dd.cifra-pendiente,
.cartera-total strong.cifra-pendiente { color: var(--st-cancelled-fg); }

.cartera-total {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin-top: 20px;
  background: var(--crm-border);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  overflow: hidden;
}

.cartera-total div {
  background: var(--crm-card-bg);
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cartera-total span   { font-size: 11.5px; color: var(--crm-muted); text-transform: uppercase; letter-spacing: .05em; }
.cartera-total strong { font-size: 21px; color: var(--crm-text); }

@media (max-width: 620px) {
  .cartera-titulo { font-size: 22px; }
  .org-datos { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   AJUSTES DE MÓVIL
   ═══════════════════════════════════════════════════════ */

/* El identificador del pedido y su marca de urgente van juntos en una línea:
   sueltos, en una columna estrecha, se montaban uno encima del otro. */
.td-id { vertical-align: middle; }

.td-id__wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.order-row--prio .td-id .prio-dot { margin-right: 0; }

/* La marca de urgente cubre la fila entera, no solo la primera celda: con el
   nombre del cliente en dos lineas se quedaba media franja sin pintar. */
.order-row--prio > td { box-shadow: inset 0 1px 0 #f6d9c6; }
.order-row--prio > td:first-child { box-shadow: inset 4px 0 0 var(--pr-high), inset 0 1px 0 #f6d9c6; }

/* La organización, dentro del menú "Más": en móvil la barra lateral no existe
   y era el único sitio desde donde se podía cambiar. */
.crm-sheet-titulo {
  margin: 10px 12px 4px;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.crm-sheet-titulo:first-child { margin-top: 4px; }

.crm-sheet-item--org { gap: 9px; }
.crm-sheet-item--org .crm-marca__check { margin-left: auto; color: var(--crm-brand); }

@media (max-width: 640px) {

  /* La cabecera de un panel deja de repartirse en una línea: el título arriba
     y sus botones debajo, que si no se solapan con las píldoras de vencidas. */
  .crm-panel-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .crm-panel-head > h3 { display: flex; align-items: center; gap: 8px; }

  .crm-panel-head > div {
    width: 100%;
    justify-content: flex-start;
  }

  .crm-panel-head .btn { flex: 1 1 auto; text-align: center; justify-content: center; }

  /* Las píldoras de urgencia no se estiran: son etiquetas, no botones. */
  .crm-panel-head .urgency-pill { flex: 0 0 auto; }

  /* Un plegable sigue siendo una línea: el título a un lado y el chevron al
     otro, que apilados no parecen lo mismo. */
  .crm-plegable > summary {
    flex-direction: row;
    align-items:    center;
  }
}

/* Filtros plegables. En escritorio el resumen sobra: se ve todo de una vez. */
.crm-filters--plegable > summary { display: none; }
.crm-filters--plegable[open] > form { margin-top: 0; }

.crm-filters__resumen {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--crm-border);
  border-radius: 8px;
  background: var(--crm-card-bg);
  font-size: 14px;
  font-weight: 600;
  color: var(--crm-text);
  cursor: pointer;
  list-style: none;
}

.crm-filters__resumen::-webkit-details-marker { display: none; }
.crm-filters__ico     { display: inline-flex; color: var(--crm-muted); }
.crm-filters__ico svg { width: 16px; height: 16px; }

.crm-filters__marca {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--crm-accent);
  text-transform: uppercase;
  letter-spacing: .05em;
}

@media (max-width: 640px) {
  .crm-filters--plegable > summary { display: flex; }
  .crm-filters--plegable[open] > form { margin-top: 10px; }

  /* En el dashboard, una tarea en el móvil es: quién, qué prioridad y el
     título. El estado y el vencimiento están en el tablero, y aquí solo
     robaban el ancho que necesita el título para no cortarse. */
  .dash-task-row .task-status-badge,
  .dash-task-row .task-due { display: none; }

  .dash-task-row__title { font-size: 14px; }
}

/* La casilla del IVA, pegada a su campo. */
.iva-check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--crm-muted);
  cursor: pointer;
}

.iva-check input { width: auto; margin: 0; }

/* ═══════════════════════════════════════════════════════
   ARCHIVOS DE UNA LÍNEA DE PEDIDO
   Baldosas cuadradas y un "+" al final, que es lo que
   hace todo el mundo y se entiende sin leer nada.
   ═══════════════════════════════════════════════════════ */

.archivos {
  margin-top: 10px;
  padding: 2px;
  border: 1.5px dashed transparent;
  border-radius: 8px;
  transition: border-color .12s ease, background .12s ease;
}

.archivos--encima {
  border-color: var(--crm-accent);
  background: var(--crm-bg);
}

.archivos__titulo {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--crm-muted);
}

.archivos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.archivo {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--crm-bg);
  border: 1px solid var(--crm-border);
}

.archivo--nuevo { animation: crm-archivo-entra .22s ease-out; }

@keyframes crm-archivo-entra {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}

.archivo__enlace { display: block; width: 100%; height: 100%; }
.archivo__enlace img { width: 100%; height: 100%; object-fit: cover; display: block; }

.archivo__pdf {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #c0392b;
  background: #fdeeec;
}

.archivo__quitar {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(5,10,48,.66);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease;
}

/* Al editar, la X se ve siempre: escondida hasta pasar por encima, nadie sabe
   que se puede quitar un archivo. En el detalle no hay X que enseñar. */
.archivo__quitar { opacity: 1; }
.archivo__quitar:hover { background: var(--st-cancelled-fg); }

/* La baldosa de subir: mismo tamaño que las demás para que la fila no baile. */
.archivos__anadir { width: auto; }

.archivos__anadir label {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 64px;
  padding: 0 14px 0 11px;
  border: 1.5px dashed var(--crm-border);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--crm-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}

.archivos__anadir label:hover {
  border-color: var(--crm-accent);
  color: var(--crm-accent);
  background: var(--crm-card-bg);
}

.archivos__anadir span {
  font-size: 19px;
  line-height: 1;
  font-weight: 400;
}

.archivos__anadir label:focus-within {
  outline: 2px solid var(--crm-accent);
  outline-offset: 2px;
}

/* Hueco mientras sube: un aro que se llena con el progreso real. */
.archivo--subiendo {
  display: grid;
  place-items: center;
  border-style: dashed;
}

.archivo__aro {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(var(--crm-accent) var(--pct, 0%), var(--crm-border) 0);
  mask: radial-gradient(circle, transparent 8px, #000 9px);
  -webkit-mask: radial-gradient(circle, transparent 8px, #000 9px);
}

.archivos__aviso {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--crm-muted);
}

.archivos__aviso--error { color: var(--st-cancelled-fg); }

.linea-adjuntos > td { padding-top: 0 !important; border-top: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .archivo--nuevo { animation: none; }
}

.enlace-ficha {
  font-size: 12.5px;
  color: var(--crm-link);
  text-decoration: none;
  white-space: nowrap;
}

.enlace-ficha:hover { text-decoration: underline; }

/* El reparto de una linea: lo de la empresa y lo del que metio el pedido. */
.total-row--reparto td {
  font-size: 13px;
  color: var(--crm-muted);
  border-top: 1px dashed var(--crm-border);
}

.comision-negativa { color: var(--st-cancelled-fg); font-weight: 600; }

.input-company { max-width: 96px; }

.finanzas-nota {
  margin: 0 0 20px;
  max-width: 68ch;
  font-size: 14px;
  color: var(--crm-muted);
}

.pendiente-debe { color: var(--st-processing-fg); }

/* Un atributo que no siempre hace falta: se pide y aparece. */
.attr-anadir {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 0;
  border: 0;
  background: none;
  color: var(--crm-link);
  font-size: 12px;
  cursor: pointer;
}

.attr-anadir:hover { text-decoration: underline; }

/* Archivos en la vista de detalle: solo mirar, en una tira y pequeños. La
   etiqueta va al lado y no encima, que si no cada línea se come una banda. */
.linea-adjuntos__caja {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 2px 0 4px;
}

.linea-adjuntos .archivos__titulo {
  display: inline;
  margin: 0;
  font-size: 10px;
  color: var(--crm-faint, var(--crm-muted));
}

.archivos--mirar { margin-top: 0; padding: 0; border: 0; }
.archivos--mirar .archivos__lista { gap: 5px; }
.archivos--mirar .archivo { width: 30px; height: 30px; border-radius: 5px; }
.archivos--mirar .archivo__pdf { font-size: 8px; letter-spacing: 0; }

/* Las columnas de dinero, estrechas y alineadas: es lo que hace que quepan
   seis en medio panel sin pisarse. */
.crm-table td.col-num,
.crm-table th.col-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.crm-table th.col-num small {
  font-weight: 400;
  font-size: 9.5px;
  opacity: .7;
}

/* Marca en la lista de productos: esta prenda ya tiene ficha o archivos. */
.ficha-marca {
  display: inline-block;
  margin-right: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--crm-bg);
  border: 1px solid var(--crm-border);
  font-size: 10.5px;
  color: var(--crm-muted);
}

.ficha-marca--archivos { color: var(--crm-accent); border-color: var(--crm-accent); }

.ficha-wc { padding: 16px 20px 0; }
/* La lista ya va dentro del cuerpo del panel: su sangria propia la dejaba
   descolgada de la foto que tiene encima. */
.ficha-wc .crm-dl { padding-left: 0; padding-right: 0; }

.ficha-wc__foto {
  width: 100%;
  max-width: 220px;
  border-radius: 8px;
  border: 1px solid var(--crm-border);
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  /* La tabla de líneas cabe apretando el relleno, no partiendo las cifras. */
  .crm-table td,
  .crm-table th { padding-left: 8px; padding-right: 8px; }

  .crm-table td.col-num,
  .crm-table th.col-num { padding-left: 6px; padding-right: 6px; font-size: 12.5px; }

  .total-row td { padding-top: 5px; padding-bottom: 5px; }

  /* El dashboard arranca antes: la cabecera ya dice de sobra dónde estás. */
  .crm-main > .crm-page-header:first-child { margin-bottom: 12px; }
  .crm-kpi-grid { margin-top: 0; }
}

/* Un fichero que no es imagen enseña su extensión: de un PSD de 300 MB no hay
   miniatura que valga, pero sí hace falta saber qué es de un vistazo. */
.archivo__pdf--file {
  color: #4a5568;
  background: #eef1f6;
}

/* --- Pedir a tienda (cartera) ---------------------------- */
.crm-restock {
  margin-top:    20px;
  border:        1px solid var(--crm-border);
  border-left:   3px solid var(--st-processing-bd);
  border-radius: 12px;
  box-shadow:    none;
}
.crm-restock .crm-panel-head h3 { display: flex; align-items: center; gap: 8px; }
.restock-tools {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}
.restock-meta { font-size: 12.5px; color: var(--crm-muted); }

.restock-grupo + .restock-grupo { border-top: 1px solid var(--crm-border); }
.restock-grupo__head {
  display:     flex;
  align-items: baseline;
  gap:         10px;
  flex-wrap:   wrap;
  padding:     10px 18px 0;
}
.restock-grupo__head strong {
  font-size:      13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--crm-link);
}
.restock-grupo__cifra { font-size: 12.5px; color: var(--crm-muted); }
.restock-grupo__head a {
  margin-left:     auto;
  font-size:       12.5px;
  color:           var(--crm-link);
  text-decoration: none;
}
.restock-grupo__head a:hover { text-decoration: underline; }

.restock-table td { vertical-align: top; }
.restock-qty {
  font-weight: 700;
  font-size:   16px;
  color:       var(--st-processing-fg);
  text-align:  center;
}
span.restock-sku,
span.restock-names,
span.restock-para {
  display:   block;
  font-size: 12px;
  color:     var(--crm-muted);
}
.restock-none { color: var(--crm-border); }
.restock-orders a {
  display:       inline-block;
  margin:        1px 3px 1px 0;
  padding:       1px 6px;
  border:        1px solid var(--crm-border);
  border-radius: 10px;
  font-size:     12px;
  color:         var(--crm-muted);
  text-decoration: none;
}
.restock-orders a:hover { border-color: var(--crm-link); color: var(--crm-link); }
.restock-row--urgente td:first-child { box-shadow: inset 3px 0 0 var(--st-cancelled-bd); }
/* Lo que no tiene materia prima no se puede pedir a nadie: se avisa en
   ambar en vez de esconderlo. */
.restock-grupo--sin .restock-grupo__head strong { color: var(--st-processing-fg); }
.restock-grupo--sin { background: var(--st-processing-bg); }
.restock-grupo--sin .crm-table thead th,
.restock-grupo--sin .crm-table td { background: transparent; }

.restock-check { text-align: center; }
.restock-check input,
.restock-todos input {
  width:       16px;
  height:      16px;
  accent-color: var(--crm-primary);
  cursor:      pointer;
  margin:      0;
}

.restock-todos {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
}

/* Lo ya encargado se queda a la vista, apagado: sirve para saber que falta. */
.restock-row--pedida td       { opacity: .55; }
.restock-row--pedida .restock-check { opacity: 1; }
.restock-row--pedida strong   { text-decoration: line-through; }

.restock-grupo--stock .restock-grupo__head strong { color: var(--st-delivered-fg); }

.restock-vacio {
  padding:   16px 18px;
  font-size: 13.5px;
  color:     var(--crm-muted);
}

.restock-foot {
  padding:    10px 18px 14px;
  font-size:  12.5px;
  color:      var(--crm-muted);
  border-top: 1px solid var(--crm-border);
}

/* Una rejilla y no una fila. Con cinco campos y un boton, el flex dejaba el
   ancho de cada uno a lo que midiera su contenido: bastaba un campo mas para
   que la fila se descuadrara y, en el movil, para que se apilaran pegados. */
.stock-form {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap:                   14px;
  align-items:           end;
  padding:               16px 18px 14px;
}
.stock-form label {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  min-width:      0;
  font-size:      12px;
  font-weight:    600;
  color:          var(--crm-muted);
}
.stock-form input {
  width:     100%;
  min-width: 0;
}

/* El nombre y el enlace del proveedor piden mas sitio que un color o una talla. */
.stock-form__ancho { grid-column: span 2; }

.stock-form button { align-self: end; }

.stock-inline {
  display:     flex;
  align-items: center;
  gap:         4px;
}
.stock-inline__num { width: 62px; padding: 4px 6px; }
.stock-table .stock-qty {
  font-size:   17px;
  font-weight: 700;
  text-align:  center;
}
.stock-table .stock-qty--bajo { color: var(--st-cancelled-fg); }
.stock-min {
  display:     block;
  font-size:   11px;
  font-weight: 400;
  color:       var(--crm-muted);
}
.stock-row--bajo td:first-child { box-shadow: inset 3px 0 0 var(--st-processing-bd); }

/* --- Rejilla de existencias ------------------------------ */
.stock-grid th { white-space: nowrap; }
.stock-grid tbody th {
  text-align:  left;
  font-weight: 600;
  font-size:   13px;
  padding:     8px 14px;
  background:  var(--crm-surface);
}
.stock-grid th,
.stock-grid td { padding: 6px 8px !important; }
.stock-grid thead th { text-align: center; }

.stock-cell { text-align: center; }
.stock-cell__qty {
  display:    block;
  margin:     0 auto;
  width:      72px;
  padding:    5px 6px;
  text-align: center;
}
.stock-cell--bajo .stock-cell__qty {
  border-color: var(--st-cancelled-bd);
  background:   var(--st-cancelled-bg);
}
/* --- Almacén: la tabla de materias primas ---------------- */
.stock-sub {
  font-size: 12px;
  color:     var(--crm-muted);
}
.stock-vacio {
  font-size:  12px;
  color:      var(--crm-border);
  font-style: italic;
}
.stock-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
}
.stock-chip {
  display:       inline-block;
  padding:       1px 8px;
  border:        1px solid var(--crm-border);
  border-radius: 10px;
  background:    var(--crm-surface);
  font-size:     12px;
  color:         var(--crm-text);
  white-space:   nowrap;
}
td.actions form { display: inline-flex; }
.crm-table td.col-num,
.crm-table th.col-num { text-align: center; }

/* --- Almacén: la ficha técnica y su foto ----------------- */
.stock-ficha {
  display:     flex;
  align-items: flex-start;
  gap:         16px;
  padding:     0 18px 16px;
}
.stock-ficha__foto {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 auto;
  width:           108px;
  height:          108px;
  border:          1px solid var(--crm-border);
  border-radius:   8px;
  background:      var(--crm-surface);
  overflow:        hidden;
}
.stock-ficha__foto img {
  width:      100%;
  height:     100%;
  object-fit: contain;
}
.stock-ficha__datos {
  flex:           1 1 auto;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            8px;
}
.stock-ficha__datos label {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  font-size:      12.5px;
  color:          var(--crm-muted);
}
.stock-ficha__datos input { width: 100%; }
.stock-ficha__acciones {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

/* La miniatura de la lista de materias primas. */
.stock-nombre {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
}
.stock-miniatura {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 auto;
  width:           40px;
  height:          40px;
  border:          1px solid var(--crm-border);
  border-radius:   6px;
  background:      var(--crm-surface);
  overflow:        hidden;
}
.stock-miniatura img {
  width:      100%;
  height:     100%;
  object-fit: contain;
}
.stock-nombre__txt { min-width: 0; }

/* --- Almacén: volver, y los componentes de un producto --- */
/* Volver: el mismo boton en todas las paginas, siempre el primero de la cabecera. */
.crm-volver {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  align-self:      center;
  height:          32px;
  padding:         0 12px 0 9px;
  margin-right:    4px;
  border:          1px solid var(--crm-border);
  border-radius:   var(--crm-radius);
  background:      var(--crm-white);
  font-size:       13px;
  font-weight:     600;
  color:           var(--crm-text);
  text-decoration: none;
  white-space:     nowrap;
}
.crm-volver svg { width: 15px; height: 15px; }
.crm-volver:hover { border-color: var(--crm-accent); color: var(--crm-link); }

.stock-componentes {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 8px;
}
.stock-componente {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       2px 4px 2px 10px;
  border:        1px solid var(--st-delivered-bd);
  border-radius: 12px;
  background:    var(--st-delivered-bg);
  color:         var(--st-delivered-fg);
  font-size:     12.5px;
}
.stock-componente button {
  border:        0;
  background:    transparent;
  color:         inherit;
  cursor:        pointer;
  font-size:     15px;
  line-height:   1;
  padding:       0 4px;
  opacity:       .6;
}
.stock-componente button:hover { opacity: 1; color: var(--st-cancelled-fg); }

.stock-anadir {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
}
.stock-anadir select { min-width: 230px; }
.stock-anadir input[type="number"] { width: 62px; text-align: center; }
/* El buscador de materia prima se come el hueco; el resto va a su tamaño. */
.stock-anadir .picker { flex: 1 1 250px; min-width: 0; margin: 0; }

/* El emparejamiento, a la vista: de que colores es la materia prima y si el
   color con el que se vende sale de alguno. Un pedido de un color que no esta
   en la prenda no se puede descontar de ninguna estanteria. */
.mach {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
  font-size:   11.5px;
  color:       var(--crm-muted);
  margin-top:  4px;
}
.mach__titulo { font-weight: 600; flex: 0 0 auto; }
.mach__par {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       2px 8px 2px 5px;
  border:        1px solid var(--crm-border);
  border-radius: 999px;
  color:         var(--crm-text);
}
.mach__par--no {
  border-style: dashed;
  border-color: var(--st-cancelled-bd);
  color:        var(--st-cancelled-fg);
}
.mach__par--no b {
  font-weight: 700;
  margin-left: 1px;
}

/* El color que no casa se abre y se dice cual es. Un <details> y no un menu
   propio: se cierra solo al elegir y funciona sin JavaScript. */
.mach__arreglo { position: relative; display: inline-block; }
.mach__arreglo > summary { cursor: pointer; list-style: none; }
.mach__arreglo > summary::-webkit-details-marker { display: none; }
.mach__arreglo[open] > summary { box-shadow: 0 0 0 3px var(--st-cancelled-bg); }

.mach__form {
  position:      absolute;
  z-index:       60;
  top:           calc(100% + 5px);
  left:          0;
  min-width:     260px;
  padding:       11px;
  display:       flex;
  flex-wrap:     wrap;
  align-items:   flex-start;
  gap:           7px;
  background:    var(--crm-card-bg);
  border:        1px solid var(--crm-border);
  border-radius: 10px;
  box-shadow:    0 10px 28px rgba(0, 0, 0, .13);
}
.mach__form .picker { flex: 1 1 160px; min-width: 0; }
/* El que se saldria por la derecha de la pantalla se abre hacia la izquierda. */
.mach__form--derecha { left: auto; right: 0; }
/* Fundir un nombre sembrado en el color de verdad de la carta. */
.fundir { display: flex; gap: 6px; align-items: flex-start; }
.fundir .picker { flex: 1 1 auto; min-width: 0; }

/* El buscador metido en un hueco pequeño: sin margen propio y del ancho que le
   dejen. El boton de al lado va al alto de un campo —34px, como todos— porque
   con cada uno de su alto la fila queda coja. */
.picker--sopa { margin: 0; }
.picker--sopa .picker__caja { max-width: none; }
.fundir .btn,
.mach__form .btn { flex: 0 0 auto; min-height: 34px; }

.mach__form-dice {
  flex:      1 0 100%;
  margin:    0;
  font-size: 11.5px;
  color:     var(--crm-muted);
}

/* --- Almacén: guardar una vez, y borrar sin tropezarse --- */
.stock-panel { margin-bottom: 18px; }

.stock-guardar {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin:        16px 0 4px;
}
.js-aviso-cambios { color: var(--st-processing-fg); margin: 0; }

.stock-peligro {
  margin-top:    34px;
  border-top:    1px solid var(--crm-border);
  padding-top:   14px;
}
.stock-peligro__cuerpo {
  margin-top:    10px;
  padding:       14px 16px;
  border:        1px solid var(--st-cancelled-bd);
  border-radius: var(--crm-radius);
  background:    var(--st-cancelled-bg);
  max-width:     640px;
}
.stock-peligro__cuerpo p {
  font-size:     13px;
  color:         var(--st-cancelled-fg);
  margin-bottom: 10px;
}

/* Un segundo apartado dentro del mismo panel necesita aire por arriba: pegado
   al anterior parece que la cabecera es de lo de antes y no de lo de abajo. */
.crm-panel-head--separada {
  margin-top: 26px;
  border-top: 1px solid var(--crm-border);
}

/* --- La materia prima de un producto, en su ficha -------- */
.materia-lista {
  list-style: none;
  margin:     0 0 14px;
  padding:    0;
}
.materia {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 8px;
  padding:       10px 12px;
  border:        1px solid var(--crm-border);
  border-radius: 8px;
  background:    var(--crm-white);
}
.materia:last-child { margin-bottom: 0; }

.materia__foto {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 auto;
  width:           44px;
  height:          44px;
  border:          1px solid var(--crm-border);
  border-radius:   6px;
  background:      var(--crm-surface);
  overflow:        hidden;
}
.materia__foto img {
  width:      100%;
  height:     100%;
  object-fit: contain;
}

.materia__datos {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  flex:           1 1 auto;
  min-width:      0;
}
.materia__enlaces {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         4px 12px;
  font-size:   12px;
}
.materia__enlaces a { color: var(--crm-link); }
.materia__enlaces a:hover { text-decoration: underline; }

.materia__quitar { flex: 0 0 auto; }
.materia__quitar .btn {
  width:           30px;
  height:          30px;
  padding:         0;
  justify-content: center;
  font-size:       15px;
  line-height:     1;
}

/* --- Almacén: que todo mida lo que tiene que medir ------- */

/* El botón de alta, en su propia línea y del ancho que pida. Metido entre los
   campos se estiraba hasta ocupar una celda entera de la rejilla. */
.stock-form button {
  grid-column:  1 / -1;
  justify-self: start;
  margin-top:   2px;
}

/* El desplegable, la cantidad y el botón, los tres de la misma altura. El
   btn-sm de serie no lleva altura mínima y se quedaba dos dedos más bajo que
   los campos de al lado, que sí llevan sus 34px. */
.stock-anadir select,
.stock-anadir input[type="number"],
.stock-anadir .btn {
  height:     34px;
  min-height: 34px;
}
.stock-anadir .btn {
  padding:       0 14px;
  font-size:     12.5px;
  border-radius: var(--crm-radius);
}

/* Todas las filas miden lo mismo lleve una ocho colores y otra ninguno: una
   lista donde cada fila mide distinto no se lee, se descifra. Lo que no cabe
   se cuenta en un "+3" y se ve entero en la ficha. */
.stock-table tbody td {
  height:         66px;
  vertical-align: middle;
}
.stock-table .stock-chips { flex-wrap: nowrap; }
.stock-chip--mas {
  color:       var(--crm-muted);
  font-weight: 600;
  cursor:      default;
}

.stock-nombre { align-items: center; }
.stock-nombre__a {
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}
.stock-nombre__sub {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0 5px;
  margin-top: 2px;
}
.stock-nombre__sub a { color: var(--crm-link); }
.stock-nombre__sub a:hover { text-decoration: underline; }

/* Sin foto, un cuadro gris macizo parece un fallo de carga. Punteado se lee
   como lo que es: un hueco esperando a que la ficha técnica traiga una. */
.stock-miniatura--vacia,
.materia__foto--vacia {
  border-style: dashed;
  background:   transparent;
}

/* La columna de acciones: centrada y dentro de la fila. El display:flex que
   llevan todas las tablas la sacaba del flujo y la dejaba pegada arriba en
   cuanto la fila crecía. */
.stock-table td.actions {
  display:        table-cell;
  vertical-align: middle;
  text-align:     center;
  white-space:    nowrap;
}
.stock-table td.actions .btn,
.stock-table td.actions form { vertical-align: middle; }
.stock-table td.actions form { margin-left: 4px; }

/* --- La rejilla de existencias: la columna del color ----- */
/* Se queda quieta mientras las tallas pasan por delante, a cualquier ancho: en
   cuanto una prenda tiene ocho tallas, la tabla rueda también en el escritorio
   y sin esto no sabes qué fila estás rellenando.
   El fondo es obligatorio y no decorativo: dentro de un panel las cabeceras van
   transparentes, y una celda pegada y transparente deja que la columna de
   debajo se le pinte encima ("COLORM"). */
.stock-grid__color {
  position:      sticky;
  left:          0;
  z-index:       2;
  width:         170px;
  min-width:     120px;
  padding:       8px 12px !important;
  text-align:    left !important;
  vertical-align: middle;
  background:    var(--crm-white);
  box-shadow:    1px 0 0 var(--crm-border);
}
.stock-grid thead th.stock-grid__color {
  z-index:    3;
  background: var(--crm-surface);
}
.stock-grid tbody th.stock-grid__color {
  font-size:   13px;
  font-weight: 600;
  background:  var(--crm-white);
}
/* El circulo al lado del nombre: contando existencias, el color se reconoce
   antes por el color que por como se llame. Va en un span porque un th con
   display:flex se sale de la tabla y la fila se descuadra. */
.celda-color {
  display:     flex;
  align-items: center;
  gap:         8px;
}
/* El color sigue al resto de la fila cuando pasas por encima. */
.stock-grid tbody tr:hover th.stock-grid__color { background: var(--crm-surface); }

.stock-grid tbody td,
.stock-grid tbody th { height: 46px; }

/* --- Las materias primas de un producto, en la lista ----- */
.stock-chip--materia {
  border-color: var(--st-delivered-bd);
  background:   var(--st-delivered-bg);
  color:        var(--st-delivered-fg);
  white-space:  normal;
}

/* --- La ficha: el enlace del proveedor a todo lo ancho --- */
/* Una URL en una celda de 190px no se lee: se adivina. */
.stock-form__todo { grid-column: 1 / -1; }

.stock-ficha__foto--vacia {
  border-style: dashed;
  background:   transparent;
}

/* --- Borrar: un desplegable, no un signo raro ------------ */
.stock-peligro > summary {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  width:         fit-content;
  padding:       7px 13px;
  border:        1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  background:    var(--crm-white);
  font-size:     12.5px;
  font-weight:   600;
  color:         var(--crm-muted);
  cursor:        pointer;
  list-style:    none;
  transition:    color .15s, border-color .15s, background .15s;
}
.stock-peligro > summary::-webkit-details-marker { display: none; }
.stock-peligro > summary::before {
  content:       '';
  width:         6px;
  height:        6px;
  margin-top:    -3px;
  border-right:  2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform:     rotate(45deg);
  transition:    transform .15s;
}
.stock-peligro[open] > summary::before {
  margin-top: 2px;
  transform:  rotate(-135deg);
}
.stock-peligro > summary:hover {
  color:        var(--st-cancelled-fg);
  border-color: var(--st-cancelled-bd);
  background:   var(--st-cancelled-bg);
}

/* El canal de un pedido. Marcado aparte para poder esconder la columna entera
   con una linea el dia que estorbe mas de lo que cuenta:
       .td-canal { display: none; }
   El "Regalo" ya no vive aqui, asi que esconderla no se lo lleva por delante. */
.td-canal { white-space: nowrap; }

/* --- Almacén en el móvil --------------------------------- */
/* La tabla se queda como en el escritorio y rueda de lado dentro de su marco,
   que ya lleva overflow-x. Un ancho mínimo por columna es lo que la obliga a
   rodar en vez de estrujarse hasta partir cada palabra en cuatro líneas. */
.stock-table  { min-width: 720px; }
.stock-links  { min-width: 640px; }

@media (max-width: 640px) {

  /* Un campo por línea: dos no caben sin quedarse en un palmo cada uno. */
  .stock-form { grid-template-columns: 1fr; }
  .stock-form__ancho,
  .stock-form__todo { grid-column: auto; }

  /* Añadir un componente: el desplegable a lo ancho y debajo lo demás. */
  .stock-anadir { width: 100%; }
  .stock-anadir select { flex: 1 1 100%; }

  /* La columna del color ya va pegada de serie; aquí solo se estrecha. */
  .stock-grid__color {
    width:     auto !important;
    min-width: 96px;
    max-width: 118px;
    padding:   6px 8px !important;
  }
  .stock-grid th,
  .stock-grid td { padding: 5px 6px !important; }
  .stock-cell__qty { width: 52px; }

  /* La materia prima de un producto: el botón de quitar se va a su línea. */
  .materia { flex-wrap: wrap; }
  .materia__datos { flex: 1 1 60%; }

  /* La ficha técnica: la foto arriba y sus datos debajo, no de lado. */
  .stock-ficha {
    flex-wrap: wrap;
    padding:   0 16px 16px;
  }
  .stock-ficha__foto { width: 84px; height: 84px; }
  .stock-ficha__acciones .btn { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════
   LA HOJA DE UN PEDIDO
   Página suelta para imprimir o guardar en PDF. Lo que manda aquí no es el
   dinero sino lo que hay que hacer: prenda, color, talla y nombre en grande,
   y si sale por mensajero o lo recogen.
   ═══════════════════════════════════════════════════════ */
.hoja-body {
  background: var(--crm-bg);
  padding:    0 0 40px;
}

.hoja-barra {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
  max-width:   820px;
  margin:      0 auto;
  padding:     18px 16px;
}
.hoja {
  max-width:     820px;
  margin:        0 auto;
  padding:       34px 38px 30px;
  background:    var(--crm-white);
  border-radius: var(--crm-radius);
  box-shadow:    var(--crm-shadow);
  color:         var(--crm-text);
}
.hoja-marco {
  width:           100%;
  border-collapse: collapse;
}
.hoja-marco td { padding: 0; }

.hoja-cab {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             16px;
  padding-bottom:  16px;
  border-bottom:   2px solid var(--crm-text);
}
.hoja-cab h1 {
  margin:      0;
  font-size:   26px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.hoja-cab__sub {
  margin:    4px 0 0;
  font-size: 13px;
  color:     var(--crm-muted);
}

.hoja-marcas {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}
.hoja-marca {
  padding:        5px 12px;
  border-radius:  4px;
  font-size:      12px;
  font-weight:    800;
  letter-spacing: .06em;
}
.hoja-marca--urgente { background: var(--st-cancelled-bg); color: var(--st-cancelled-fg); border: 1.5px solid var(--st-cancelled-bd); }
.hoja-marca--regalo  { background: var(--st-processing-bg); color: var(--st-processing-fg); border: 1.5px solid var(--st-processing-bd); }

.hoja-dos {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
  margin:                18px 0 24px;
}

.hoja-caja {
  padding:       14px 16px;
  border:        1.5px solid var(--crm-border);
  border-radius: 8px;
}
.hoja-caja h2 {
  margin:         0 0 8px;
  font-size:      11px;
  font-weight:    800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--crm-muted);
}
.hoja-caja p {
  margin:    0 0 3px;
  font-size: 13.5px;
}
.hoja-caja__grande {
  font-size:   17px !important;
  font-weight: 800;
  line-height: 1.25;
}
/* El envío es el dato que más caro sale equivocarse, así que se ve desde lejos. */
.hoja-caja--envio {
  border-color: var(--st-processing-bd);
  background:   var(--st-processing-bg);
  color:        var(--st-processing-fg);
}

.hoja-falta {
  font-weight: 700;
  color:       var(--st-cancelled-fg);
}

.hoja-titulo {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             10px;
  margin:          0 0 12px;
  padding-bottom:  6px;
  border-bottom:   1.5px solid var(--crm-border);
  font-size:       13px;
  font-weight:     800;
  letter-spacing:  .06em;
  text-transform:  uppercase;
}
.hoja-titulo span {
  font-size:      12px;
  font-weight:    600;
  text-transform: none;
  letter-spacing: 0;
  color:          var(--crm-muted);
}

/* Una línea no se parte entre dos páginas: media camiseta no sirve de nada. */
.hoja-linea {
  display:       flex;
  gap:           16px;
  padding:       14px 0;
  border-bottom: 1px solid var(--crm-border);
  break-inside:  avoid;
  page-break-inside: avoid;
}
.hoja-linea__foto {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 auto;
  width:           96px;
  height:          96px;
  border:          1px solid var(--crm-border);
  border-radius:   6px;
  background:      var(--crm-surface);
  overflow:        hidden;
  font-size:       11px;
  color:           var(--crm-border);
  font-style:      italic;
}
.hoja-linea__foto img {
  width:      100%;
  height:     100%;
  object-fit: contain;
}

.hoja-linea__cuerpo { flex: 1 1 auto; min-width: 0; }
.hoja-linea__prenda {
  margin:      0 0 10px;
  font-size:   16px;
  font-weight: 700;
  line-height: 1.3;
}
.hoja-linea__uds {
  display:       inline-block;
  margin-right:  6px;
  padding:       1px 8px;
  border-radius: 4px;
  background:    var(--crm-text);
  color:         var(--crm-white);
  font-size:     14px;
  font-weight:   800;
}

.hoja-datos {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}
.hoja-dato {
  flex:          0 0 auto;
  min-width:     110px;
  padding:       6px 12px;
  border:        1.5px solid var(--crm-border);
  border-radius: 6px;
  background:    var(--crm-surface);
}
.hoja-dato--ancho { flex: 1 1 200px; }
.hoja-dato__et {
  display:        block;
  font-size:      10px;
  font-weight:    800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--crm-muted);
}
.hoja-dato__val {
  display:     block;
  margin-top:  1px;
  font-size:   16px;
  font-weight: 700;
  line-height: 1.25;
}
.hoja-dato__val--falta {
  font-weight: 500;
  font-style:  italic;
  color:       var(--crm-muted);
}

.hoja-linea__extra,
.hoja-linea__pie {
  margin:    8px 0 0;
  font-size: 12px;
  color:     var(--crm-muted);
}
.hoja-linea__pie span { margin-left: 10px; }

.hoja-archivos {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         8px;
  margin-top:  10px;
}
.hoja-archivos img {
  width:         56px;
  height:        56px;
  object-fit:    cover;
  border:        1px solid var(--crm-border);
  border-radius: 4px;
}
.hoja-archivo {
  padding:       3px 9px;
  border:        1px solid var(--crm-border);
  border-radius: 10px;
  font-size:     11.5px;
  color:         var(--crm-muted);
}

.hoja-linea__fila {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             6px 16px;
  margin-top:      8px;
}
.hoja-linea__fila .hoja-linea__pie { margin: 0; }

/* Para marcar a boli en el taller, prenda a prenda. */
.hoja-casillas {
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px 16px;
  margin:      0 0 0 auto;
  padding:     0;
  list-style:  none;
  font-size:   12.5px;
  font-weight: 700;
}
.hoja-casillas li {
  display:     flex;
  align-items: center;
  gap:         7px;
  white-space: nowrap;
}
.hoja-casillas li::before {
  content:       "";
  flex:          0 0 auto;
  width:         18px;
  height:        18px;
  border:        1.5px solid var(--crm-text);
  border-radius: 3px;
  background:    var(--crm-white);
}
.hoja-prendas {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            6px;
  margin-left:    auto;
}
.hoja-casillas li.hoja-casillas__num { color: var(--crm-muted); font-weight: 600; }
.hoja-casillas li.hoja-casillas__num::before { display: none; }
.hoja-casillas li.hoja-casilla--si::before {
  background: var(--crm-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.hoja + .hoja { margin-top: 24px; }

.hoja-notas { margin-top: 20px; }

.hoja-pie {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             14px;
  flex-wrap:       wrap;
  margin-top:      22px;
  padding-top:     14px;
  border-top:      2px solid var(--crm-text);
}
.hoja-pie__sello {
  margin:    0;
  font-size: 11px;
  color:     var(--crm-muted);
}

@media (max-width: 640px) {
  .hoja { padding: 22px 18px; border-radius: 0; }
  .hoja-dos { grid-template-columns: 1fr; }
  .hoja-linea { gap: 12px; }
  .hoja-linea__foto { width: 68px; height: 68px; }
}

/* Al papel va la hoja y nada más: ni botones, ni sombras, ni fondo gris. */
@media print {
  @page { size: A4; margin: 12mm; }

  /* Con body delante, o body.crm-body gana y deja gris lo que hay bajo la hoja. */
  body.hoja-body { background: #fff; padding: 0; }
  .hoja-barra { display: none; }

  .hoja {
    max-width:     none;
    margin:        0;
    padding:       0;
    border-radius: 0;
    box-shadow:    none;
  }

  /* Sin esto Chrome se come los fondos de color, que aquí son justo lo que
     distingue «envío a domicilio» de «recogida en tienda» de un vistazo. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust:         exact !important;
  }

  .hoja-linea__foto img,
  .hoja-archivos img { max-width: 100%; }

  /* Cada pedido empieza en una página nueva: van al taller por separado y uno
     no puede asomar al pie de otro. Si ocupa más de una página, su cabecera va
     en el thead de .hoja-marco y Chrome la repite arriba de cada una: con las
     hojas separadas se sigue sabiendo de qué pedido es cada una. */
  .hoja-marco thead { display: table-header-group; }
  .hoja-dos,
  .hoja-titulo { break-after: avoid; page-break-after: avoid; }
  .hoja + .hoja {
    margin-top:        0;
    break-before:      page;
    page-break-before: always;
  }
}

/* --- Almacén: lo que hay, desplegado bajo cada materia prima ---
   La rejilla va dentro de la tabla del almacén, así que todo lleva
   .stock-detalle delante: si no, .crm-table tbody td le mete su padding
   y su fondo al pasar el ratón. */
.stock-row[data-despliega] { cursor: pointer; }
.stock-desplegar {
  flex:            0 0 auto;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  padding:         0;
  border:          1px solid var(--crm-border);
  border-radius:   6px;
  background:      var(--crm-white);
  color:           var(--crm-muted);
  cursor:          pointer;
  transition:      border-color .15s ease, color .15s ease, background .15s ease;
}
.stock-desplegar svg { width: 14px; height: 14px; transition: transform .25s ease; }
.stock-desplegar:hover { border-color: var(--crm-accent); color: var(--crm-text); }
.stock-row.is-desplegada .stock-desplegar { background: var(--crm-primary); border-color: var(--crm-primary); color: #fff; }
.stock-row.is-desplegada .stock-desplegar svg { transform: rotate(180deg); }

.crm-table tbody tr.stock-row.is-desplegada { border-bottom-color: transparent; }
.crm-table tbody tr.stock-row.is-desplegada td { background: var(--crm-surface); }
.crm-table tbody tr.stock-detalle { border-bottom: 0; }
.crm-table tbody tr.stock-detalle.is-abierta { border-bottom: 1px solid var(--crm-border); }
/* height:0 porque .stock-table tbody td les da 66px a todas las celdas, y
   cerrada esta fila tiene que no ocupar nada. Abierta crece con lo de dentro. */
.crm-table tbody tr.stock-detalle > td,
.crm-table tbody tr.stock-detalle:hover > td {
  height:     0;
  padding:    0;
  border:     0;
  background: var(--crm-surface);
}

.stock-detalle__anim {
  display:            grid;
  grid-template-rows: 0fr;
  opacity:            0;
  transition:         grid-template-rows .28s ease, opacity .2s ease;
}
.stock-detalle.is-abierta .stock-detalle__anim { grid-template-rows: 1fr; opacity: 1; }
/* En el móvil la lista rueda de lado y la rejilla no puede rodar con ella:
   se queda pegada a la izquierda y mide lo que se ve (100cqw = el ancho del
   marco de la lista), y si no le caben las tallas rueda ella sola. */
.stock-lista { container-type: inline-size; }
.stock-detalle__dentro {
  overflow:   hidden;
  min-height: 0;
  position:   sticky;
  left:       0;
  width:      100cqw;
  max-width:  100%;
}
.stock-hay,
.stock-hay__vacio { margin: 2px 18px 16px 50px; }

.stock-detalle .stock-hay__tabla {
  width:           100%;
  table-layout:    fixed;
  border-collapse: separate;
  border-spacing:  0;
  background:      var(--crm-white);
  border:          1px solid var(--crm-border);
  border-radius:   var(--crm-radius);
  box-shadow:      var(--crm-shadow);
  overflow:        hidden;
  font-size:       12.5px;
}
.stock-detalle .stock-hay__tabla thead th,
.stock-detalle .stock-hay__tabla tbody th,
.stock-detalle .stock-hay__tabla tbody td,
.stock-detalle .stock-hay__tabla tfoot th,
.stock-detalle .stock-hay__tabla tfoot td {
  height:         32px;
  padding:        0 8px;
  text-align:     center;
  vertical-align: middle;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  background:     transparent;
  border-bottom:  1px solid var(--crm-border);
  font-variant-numeric: tabular-nums;
}
.stock-detalle .stock-hay__tabla thead th {
  background:     var(--crm-surface);
  font-size:      11px;
  font-weight:    600;
  color:          var(--crm-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.stock-detalle .stock-hay__tabla tbody tr:last-child > * { border-bottom: 0; }
.stock-detalle .stock-hay__tabla tbody tr:hover > * { background: var(--crm-surface); }
.stock-detalle .stock-hay__tabla .stock-hay__color {
  width:       170px;
  padding:     0 12px;
  text-align:  left;
  font-weight: 600;
  border-right: 1px solid var(--crm-border);
}
.stock-detalle .stock-hay__tabla .stock-hay__total {
  width:       70px;
  font-weight: 700;
  border-left: 1px solid var(--crm-border);
}
.stock-detalle .stock-hay__tabla tfoot th,
.stock-detalle .stock-hay__tabla tfoot td {
  background:  var(--crm-surface);
  font-weight: 700;
  border-top:  1px solid var(--crm-border);
  border-bottom: 0;
}
.stock-detalle .stock-hay__tabla .celda-color { gap: 7px; }
.stock-detalle .stock-hay__tabla .color-punto { width: 12px; height: 12px; }
.stock-hay--hay  { font-weight: 600; color: var(--crm-text); }
.stock-hay--cero { color: #c9ced8; }
.stock-detalle .stock-hay__tabla td.stock-hay--bajo { background: var(--st-cancelled-bg); color: var(--st-cancelled-fg); font-weight: 700; }
.stock-hay__vacio { padding-top: 4px; font-size: 12.5px; color: var(--crm-muted); }

@media (prefers-reduced-motion: reduce) {
  .stock-detalle__anim, .stock-desplegar svg { transition: none; }
}

/* --- Proveedor: su tabla de tallas --- */
.talla-gama { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.talla-gama form.picker__chip { margin: 0; }
.talla-alta { display: flex; gap: 8px; max-width: 460px; }
.talla-alta input[type="text"] { flex: 1 1 auto; min-width: 0; }

@media (max-width: 640px) {
  .stock-hay, .stock-hay__vacio { margin: 0 10px 12px; }
  .stock-hay {
    overflow-x:    auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--crm-radius);
    box-shadow:    var(--crm-shadow);
  }
  .stock-detalle .stock-hay__tabla {
    width:        auto;
    min-width:    100%;
    table-layout: auto;
    box-shadow:   none;
    font-size:    12px;
  }
  .stock-detalle .stock-hay__tabla thead th,
  .stock-detalle .stock-hay__tabla tbody th,
  .stock-detalle .stock-hay__tabla tbody td,
  .stock-detalle .stock-hay__tabla tfoot th,
  .stock-detalle .stock-hay__tabla tfoot td { height: 30px; padding: 0 7px; min-width: 34px; }
  .stock-detalle .stock-hay__tabla thead th { font-size: 10.5px; letter-spacing: 0; }
  /* El color se queda quieto mientras las tallas pasan por debajo; con fondo
     propio, que si no se le pintan encima los números. */
  .stock-detalle .stock-hay__tabla .stock-hay__color {
    position:   sticky;
    left:       0;
    z-index:    1;
    width:      auto;
    min-width:  0;
    max-width:  112px;
    padding:    0 8px;
    background: var(--crm-white);
  }
  .stock-detalle .stock-hay__tabla thead .stock-hay__color,
  .stock-detalle .stock-hay__tabla tfoot .stock-hay__color,
  .stock-detalle .stock-hay__tabla tbody tr:hover .stock-hay__color { background: var(--crm-surface); }
  .stock-detalle .stock-hay__tabla .stock-hay__total { width: auto; min-width: 44px; }
}

/* --- Almacén: el historial de movimientos --- */
.movs { margin-top: 22px; }
.movs__tabla th,
.movs__tabla td { padding: 7px 12px !important; font-size: 12.5px; vertical-align: middle; }
.movs__tabla thead th { font-size: 11px; }
.movs__fecha { color: var(--crm-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.movs__color { margin-right: 6px; }
.movs__qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.movs__tabla td.actions { text-align: right; }
.movs__deshacer { padding: 2px 8px; font-size: 14px; line-height: 1.2; }
.movs__paginas {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         10px;
  padding:     10px 12px 12px;
  border-top:  1px solid var(--crm-border);
}
.movs__paginas .page-btn { padding: 4px 10px; font-size: 12.5px; }
.movs__donde { font-size: 12.5px; color: var(--crm-muted); }

/* --- Pedidos: la lista ---------------------------------- */
/* Las acciones, centradas en su fila. El display:flex que llevan todas las
   tablas saca la celda del flujo de la tabla y la deja pegada arriba en
   cuanto la fila crece. */
.crm-table--pedidos td.actions {
  display:        table-cell;
  vertical-align: middle;
  text-align:     center;
  white-space:    nowrap;
}
.crm-table--pedidos td.actions > * { vertical-align: middle; }
.crm-table--pedidos td.actions > * + * { margin-left: 4px; }
.crm-table--pedidos th.col-acciones { text-align: center; }
.crm-table--pedidos .fecha-corta,
.crm-table--pedidos .td-id__num { display: none; }

/* Solo tras pulsar «Seleccionar», y casi sin relleno: con el de las demás
   columnas, la tabla ya no cabía. */
.crm-table--pedidos .td-sel { display: none; width: 16px; padding-right: 0; }
.crm-table--pedidos.seleccionando .td-sel { display: table-cell; }
.crm-table--pedidos.seleccionando .td-sel + .td-id { padding-left: 10px; }
.crm-table--pedidos .td-sel input {
  width:          16px;
  height:         16px;
  vertical-align: middle;
  accent-color:   var(--crm-primary);
}

/* Fija y no sticky: .crm-main lleva overflow:auto, y dentro de él sticky se
   pegaba al final de la tabla, fuera de la vista. */
.pedidos-lote {
  position:      fixed;
  left:          50%;
  bottom:        20px;
  transform:     translateX(-50%);
  z-index:       900;
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           10px;
  max-width:     calc(100vw - 24px);
  padding:       10px 14px;
  background:    var(--crm-white);
  border:        1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  box-shadow:    0 8px 28px rgba(5, 10, 48, .22);
  font-size:     13px;
  white-space:   nowrap;
}
.pedidos-lote[hidden] { display: none; }
.pedidos-lote select { width: auto; }
body.con-lote .crm-main { padding-bottom: 96px; }

/* --- Dashboard: la cabecera de las tareas --------------- */
.dash-tareas__extra {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
  margin-left: auto;
}

@media (max-width: 640px) {
  /* En el móvil sobra lo que no se mira de pasada: el número de pedido (se
     entra con el ojo) y el canal. Todo va en una línea, así que todas las
     filas miden lo mismo: el nombre largo se corta y entero sale al tocarlo. */
  .crm-table--pedidos .td-canal,
  .crm-table--pedidos .fecha-larga,
  .crm-table--pedidos .td-id__enlace,
  .crm-table--pedidos .td-id .badge-gift,
  .crm-table--pedidos .td-id .prio-dot { display: none; }
  .crm-table--pedidos .td-id__num { display: inline; color: var(--crm-muted); font-variant-numeric: tabular-nums; }
  .crm-table--pedidos .fecha-corta { display: inline; }

  .crm-table--pedidos thead th,
  .crm-table--pedidos tbody td { white-space: nowrap; vertical-align: middle; }
  .crm-table--pedidos tbody td { height: 56px; }

  .crm-table--pedidos .td-customer a {
    display:       block;
    max-width:     118px;
    overflow:      hidden;
    text-overflow: ellipsis;
  }

  /* Encima de la barra de navegación de abajo, que si no la tapa. */
  .pedidos-lote {
    left:        12px;
    right:       12px;
    bottom:      calc(68px + env(safe-area-inset-bottom, 0px));
    transform:   none;
    white-space: normal;
  }
  body.con-lote .crm-main { padding-bottom: 160px; }


  /* Mis tareas: el título, el número y el chevron. Lo demás está en el tablero. */
  .dash-tareas__extra { display: none; }
  .crm-plegable > summary h3 { white-space: nowrap; }
}

/* --- Finanzas: el beneficio de la web, al lado su gráfica --- */
.profit-cuerpo {
  display:               grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap:                   24px;
  align-items:           start;
}
.profit-cuerpo .profit-breakdown { max-width: none; }

.profit-grafica {
  margin:        0;
  padding:       14px 16px 12px;
  border:        1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  background:    var(--crm-white);
  min-width:     0;
}
.profit-grafica__head {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             8px;
  flex-wrap:       wrap;
  margin-bottom:   8px;
}
.profit-grafica__titulo { font-size: 13px; font-weight: 600; color: var(--crm-text); }
.profit-grafica__media  { font-size: 12px; color: var(--crm-muted); }
.profit-grafica__media strong { color: var(--crm-text); font-variant-numeric: tabular-nums; }
.profit-grafica__lienzo { position: relative; height: 230px; }
.profit-grafica__pie {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         4px 6px;
  margin:      8px 0 0;
  font-size:   11.5px;
  color:       var(--crm-muted);
}
.profit-grafica__clave { display: inline-flex; align-items: center; gap: 6px; }
.profit-grafica__rayas {
  display:       inline-block;
  width:         12px;
  height:        12px;
  border:        1px solid #2f6fd0;
  border-radius: 3px;
  background:    repeating-linear-gradient(135deg, #2f6fd0 0 2px, rgba(47,111,208,.18) 2px 5px);
}

.sr-only {
  position:   absolute !important;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

@media (max-width: 1100px) {
  .profit-cuerpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .profit-tab { white-space: nowrap; padding: 6px 8px; font-size: 12.5px; }
  .profit-grafica { padding: 12px 10px 10px; }
  .profit-grafica__lienzo { height: 200px; }
}

/* --- Ajustes: los tramos de la tarifa de envío --- */
.tramos { margin-bottom: 18px; border: 1px solid var(--crm-border); border-radius: var(--crm-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.tramos td.actions { display: table-cell; text-align: right; }
.tramo--vigente td { background: rgba(47,111,208,.06); }
.tramo__marca {
  display:       inline-block;
  margin-left:   6px;
  padding:       1px 7px;
  border-radius: 999px;
  background:    #2f6fd0;
  color:         #fff;
  font-size:     11px;
  font-weight:   600;
  vertical-align: 1px;
}
.tramo__marca--futuro { background: var(--crm-surface); color: var(--crm-muted); border: 1px solid var(--crm-border); }
.tramo-alta { padding-top: 14px; border-top: 1px dashed var(--crm-border); }
.tramo-alta__titulo { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--crm-text); }
.tramo-alta .form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .tramos { display: block; overflow-x: auto; }
}

/* --- Pedido: la nota de una línea (La Pecera) --- */
.item-attrs textarea.attr-notas {
  display:     block;
  width:       100%;
  min-height:  56px;
  resize:      vertical;
  font-family: inherit;
  line-height: 1.4;
}

/* Sin tienda, las ventas van solas en su fila. */
.crm-charts-row--uno { grid-template-columns: 1fr; }

/* --- Finanzas por línea (La Pecera): quién le debe a quién --- */
.saldo + .saldo { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--crm-border); }
.saldo__titular {
  display:     flex;
  align-items: baseline;
  flex-wrap:   wrap;
  gap:         6px;
  margin:      0 0 12px;
  font-size:   16px;
  color:       var(--crm-text);
}
.saldo__cifra {
  margin-left: 4px;
  font-size:   22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.saldo__cuenta .profit-value { font-variant-numeric: tabular-nums; }
.pedido-a-pedido { margin: 0; border-top: 1px solid var(--crm-border); }
.pedido-a-pedido > summary h3 { font-size: 13px; }

/* --- Finanzas: las dos empresas juntas --- */
.saldo-conjunto { margin-bottom: 24px; }
.saldo-conjunto__cuenta { max-width: 620px; }
.etiqueta-compensa {
  display:       inline-block;
  margin-right:  6px;
  padding:       0 7px;
  border-radius: 999px;
  border:        1px solid var(--crm-border);
  background:    var(--crm-surface);
  color:         var(--crm-muted);
  font-size:     11px;
  font-style:    normal;
}

/* --- Ajustes: tarjetas compactas --- */
.ajustes-tarjeta .form-hint { max-width: 70ch; }
.ajustes-fila {
  display:     flex;
  align-items: flex-end;
  flex-wrap:   wrap;
  gap:         12px 16px;
}
.ajustes-campo { width: 170px; }
.ajustes-campo--ancho { width: 240px; }
.ajustes-campo input,
.ajustes-campo select { width: 100%; }
.sin-coste { margin: 8px 0 0; padding-left: 18px; }
.sin-coste li { margin: 2px 0; }
.sin-coste a { color: inherit; font-weight: 600; }
.sin-coste span { color: var(--crm-muted); }
.sin-coste-marca { font-size: 12px; color: var(--st-cancelled-fg); text-decoration: underline dotted; }

@media (max-width: 640px) {
  .ajustes-campo, .ajustes-campo--ancho { width: 100%; }
  .ajustes-fila .btn { width: 100%; }
}

/* --- Ajustes: la tarifa de envio en vigor, y lo demas plegado --- */
.tarifa-vigente {
  display:     flex;
  align-items: baseline;
  flex-wrap:   wrap;
  gap:         8px 22px;
  font-size:   14px;
  color:       var(--crm-muted);
}
.tarifa-vigente__pais strong { color: var(--crm-text); font-variant-numeric: tabular-nums; }
.tarifa-vigente__desde { font-size: 12px; }
.tarifa-mas { margin-top: 14px; }
.tarifa-mas[open] > .tramos { margin-top: 12px; }

/* --- Dashboard: de donde llegan los pedidos web --- */
.chart-card--origen { display: flex; flex-direction: column; }
.origen {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             20px 32px;
}
.origen__circulo { position: relative; flex: 0 0 220px; width: 220px; height: 220px; }
.origen__leyenda {
  flex:            1 1 280px;
  max-width:       440px;
  border-collapse: collapse;
  font-size:       13px;
  color:           var(--crm-text);
}
.origen__leyenda th {
  padding:        0 6px 8px;
  font-size:      11px;
  font-weight:    600;
  text-align:     left;
  text-transform: uppercase;
  letter-spacing: .3px;
  color:          var(--crm-muted);
  border-bottom:  1px solid var(--crm-border);
}
.origen__leyenda td { padding: 7px 6px; border-bottom: 1px solid var(--crm-border); white-space: nowrap; }
.origen__leyenda tbody tr:hover td { background: var(--crm-surface); }
.origen__leyenda tfoot td { font-weight: 700; border-bottom: 0; }
.origen__leyenda .origen__num { text-align: right; font-variant-numeric: tabular-nums; }
.origen__clave {
  display:        inline-block;
  width:          10px;
  height:         10px;
  margin-right:   8px;
  border-radius:  3px;
  vertical-align: 0;
}

@media (max-width: 640px) {
  .origen__circulo { flex-basis: 180px; width: 180px; height: 180px; }
  .origen__leyenda { flex-basis: 100%; max-width: none; font-size: 12.5px; }
  .origen__leyenda td, .origen__leyenda th { padding-left: 4px; padding-right: 4px; }
}