/*
 * Pestaña Pedidos: el tablero de Trello «PEDIDOS».
 * La interfaz usa solo las variables de color de styles.css, así que sigue
 * sola al modo claro y al oscuro. La única excepción son los colores de las
 * etiquetas: son los 30 de la paleta de Trello, tal cual, para que «PEDIR A
 * SPLIT» siga siendo del mismo color que el equipo tiene en la cabeza.
 * Todo va con prefijo pe- para no chocar con el resto de la plataforma.
 */

/* ---------- Toda la pantalla, como el CRM ----------
 * main es lo único que se desplaza (styles.css, «TODA LA PANTALLA»). El
 * tablero llena el alto que queda y cada lista se desplaza por dentro. */
#tab-pedidos.active { display: flex; flex-direction: column; height: 100%; padding-bottom: .8rem; }
#tab-pedidos > * { flex: 0 0 auto; }
#tab-pedidos .toolbar, #tab-pedidos .filtros { margin-bottom: .6rem; }
#tab-pedidos .filtros:empty { display: none; }
#tab-pedidos .pe-tablero { flex: 1 1 auto; min-height: 320px; }

/* ---------- Tablero ---------- */
.pe-tablero {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  overflow-x: auto;
  padding: .75rem;
  border-radius: 12px;
  /* El fondo azul del Trello, con el azul de la marca. */
  background: linear-gradient(135deg, var(--marca-azul) 0%, var(--marca-azul-2) 100%);
}

.pe-col {
  flex: 0 0 272px;
  width: 272px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: 0 1px 1px rgb(0 0 0 / .2);
}
.pe-col-cab { display: flex; align-items: flex-start; gap: .4rem; padding: .6rem .5rem .3rem .8rem; }
.pe-col-nom {
  flex: 1; margin: 0; font-size: .88rem; font-weight: 650; line-height: 1.35;
  padding: .2rem .25rem; border-radius: 5px; cursor: text; overflow-wrap: anywhere;
}
.pe-col-nom:hover { background: var(--surface-2); }
.pe-col-cab textarea.en-sitio { font-size: .88rem; font-weight: 650; }
.pe-col-n { font-size: .8rem; color: var(--muted); padding-top: .25rem; font-variant-numeric: tabular-nums; }
.pe-col-menu {
  background: transparent; color: var(--muted); border: none; padding: 0 .45rem;
  font-size: 1.1rem; line-height: 1.6; border-radius: 6px;
}
.pe-col-menu:hover { background: var(--surface-2); color: var(--text); filter: none; }
.pe-col-cuerpo {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .2rem .5rem; overflow-y: auto; min-height: 1.5rem; flex: 1 1 auto;
}
.pe-col-vacia { color: var(--muted); font-size: .8rem; text-align: center; padding: .5rem; }
.pe-col-pie { padding: .3rem .5rem .5rem; }
.pe-anadir {
  display: flex; align-items: center; gap: .4rem; width: 100%;
  background: transparent; color: var(--muted); border: none; font-weight: 500;
  padding: .45rem .5rem; border-radius: 8px; text-align: left;
}
.pe-anadir:hover { background: var(--surface-2); color: var(--text); filter: none; }
.pe-anadir .ico { width: 1rem; height: 1rem; }
.pe-col-nueva { background: rgb(255 255 255 / .2); box-shadow: none; }
.pe-col-nueva .pe-anadir { color: #fff; padding: .7rem .8rem; }
.pe-col-nueva .pe-anadir:hover { background: rgb(255 255 255 / .15); color: #fff; }

/* ---------- Tarjeta ---------- */
.pe-tarj {
  display: grid; gap: .35rem;
  background: var(--surface); color: var(--text);
  border-radius: 8px; padding: .5rem .7rem .45rem;
  box-shadow: 0 1px 1px rgb(9 30 66 / .25);
  cursor: pointer; border: 2px solid transparent;
}
.pe-tarj:hover { border-color: var(--accent); }
.pe-tarj.arrastrando { opacity: .35; }
.pe-tarj-tit { font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.pe-tarj-tit .tarj-ok { margin-right: .3rem; }
.pe-tarj-ets { display: flex; flex-wrap: wrap; gap: .25rem; }
/* Plegadas, como en Trello: barritas de color. Al pulsar una se abren todas. */
.pe-et {
  height: .5rem; min-width: 2.5rem; padding: 0; border: none; border-radius: 4px;
}
.pe-tarj-ets.abiertas .pe-et {
  height: auto; min-height: 1rem; min-width: 3rem;
  font-size: .72rem; font-weight: 600; line-height: 1rem; padding: 0 .45rem;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pe-et:hover { filter: brightness(.9); }
.pe-tarj-ins { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font-size: .75rem; color: var(--muted); }

/* Profesional o particular, de un vistazo. */
.pe-tipo {
  display: inline-block; font-size: .66rem; font-weight: 650; letter-spacing: .02em;
  padding: .02rem .4rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
}
.pe-tipo-profesional { background: var(--marca-azul); border-color: var(--marca-azul); color: #fff; }
.pe-tipo-particular { background: var(--marca-amarillo); border-color: var(--marca-amarillo); color: var(--marca-azul); }

/* ---------- Ficha del pedido ---------- */
#pe-drawer { z-index: 55; }
.pe-cliente {
  display: flex; align-items: center; gap: .3rem 1rem; flex-wrap: wrap;
  margin: -.6rem 0 0 1.9rem; font-size: .88rem;
}
.pe-cliente a { color: var(--muted); text-decoration: none; }
.pe-cliente a:hover { color: var(--accent); text-decoration: underline; }
.pe-cliente-nom {
  background: none; border: none; padding: 0; color: var(--text); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px;
}
.pe-cliente-nom:hover { color: var(--accent); filter: none; text-decoration-color: currentColor; }
.pe-f-et {
  display: inline-flex; align-items: center; min-height: 2rem; min-width: 3rem;
  padding: 0 .7rem; border-radius: 4px; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.pe-archivada {
  background: var(--warn); color: #fff; font-size: .78rem; font-weight: 600;
  padding: .15rem .6rem; border-radius: 4px;
}
.pe-trello { font-size: .8rem; color: var(--muted); }
.pe-trello:hover { color: var(--accent); }
.pe-pie-ficha { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .4rem; border-top: 1px solid var(--border); }
.pe-pie-ficha button { display: inline-flex; align-items: center; gap: .4rem; }
.pe-pie-ficha .ico { width: 1rem; height: 1rem; }

/* Ventanita de etiquetas */
.pe-pop-ets { display: grid; gap: .3rem; }
.pe-pop-et { display: flex; align-items: center; gap: .4rem; }
.pe-pop-et input { width: 1rem; height: 1rem; flex: 0 0 auto; }
.pe-pop-et .pe-f-et { flex: 1; }
.pe-x {
  background: transparent; color: var(--muted); border: none; padding: .3rem; border-radius: 6px;
  display: inline-flex;
}
.pe-x:hover { background: var(--surface-2); color: var(--text); filter: none; }
.pe-x .ico { width: 1rem; height: 1rem; }
.pe-paleta { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.pe-paleta button { height: 2rem; padding: 0; border-radius: 4px; border: 2px solid transparent; }
.pe-paleta button.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.pe-et-muestra { display: flex; justify-content: center; padding: .6rem; background: var(--surface-2); border-radius: 6px; }
.pe-check { display: flex; gap: .4rem; align-items: flex-start; font-size: .82rem; color: var(--muted); }
.pe-check input { width: auto; margin-top: .15rem; }

/* ---------- Alta y ventanas (particulares, archivados) ---------- */
.pe-dialog {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text);
  padding: 1.1rem 1.2rem 1.2rem; width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
}
.pe-dialog::backdrop { background: rgb(0 0 0 / .5); }
.pe-alta, .pe-dlg { display: grid; gap: .8rem; }
.pe-dlg-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pe-dlg-cab h3 { margin: 0; font-size: 1.1rem; }
.pe-alta-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pe-alta-fila .pe-alta-num { grid-column: 1; }
.pe-alta .pe-alta-fila:has(.pe-alta-num) { grid-template-columns: 7rem 1fr; }
.pe-volver { justify-self: start; margin-top: -.4rem; }

.pe-tipo-sel { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pe-tipo-sel button {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  background: var(--surface-2); color: var(--text); border: 2px solid var(--border);
  padding: .65rem .8rem; border-radius: 10px; font-weight: 450;
}
.pe-tipo-sel button:hover { filter: none; border-color: var(--accent-dim); }
.pe-tipo-sel button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.pe-tipo-sel button span { display: grid; }
.pe-tipo-sel small { color: var(--muted); font-size: .76rem; }
.pe-tipo-sel .ico { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; }
.pe-tipo-sel-mini button { justify-content: center; padding: .35rem; font-size: .85rem; }

.pe-resultados { display: grid; gap: .25rem; max-height: 14rem; overflow-y: auto; }
.pe-resultados-alto { max-height: 55vh; }
.pe-res {
  display: grid; gap: .05rem; text-align: left;
  background: transparent; color: var(--text); border: 1px solid var(--border);
  padding: .45rem .65rem; border-radius: 8px; font-weight: 450;
}
.pe-res:hover { background: var(--surface-2); border-color: var(--accent-dim); filter: none; }
.pe-elegido {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem;
}
.pe-elegido .f-link { margin-left: auto; }
.pe-nuevo { display: grid; gap: .6rem; background: var(--surface-2); border-radius: 10px; padding: .7rem .8rem; }
.pe-nuevo h5 { margin: 0; font-size: .82rem; }
.pe-nuevo input, .pe-nuevo textarea { background: var(--surface); }
.pe-nuevo .f-link { justify-self: start; }

/* Historial de pedidos (de un particular, y en la ficha del CRM) */
.pe-historial { margin-top: .4rem; }
.pe-hist { display: grid; gap: .3rem; }
.pe-hist-fila {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .1rem .6rem; align-items: center;
  text-align: left; background: var(--surface-2); color: var(--text); border: 1px solid transparent;
  padding: .45rem .6rem; border-radius: 8px; font-weight: 450;
}
button.pe-hist-fila:hover { border-color: var(--accent); filter: none; }
.pe-hist-fila .small { grid-column: 2 / -1; }
.pe-hist-num { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.pe-hist-tit { overflow-wrap: anywhere; font-size: .88rem; }
.pe-hist-lista { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.pe-arch { grid-template-columns: minmax(0, 1fr) auto auto; }
.pe-arch .pe-hist-tit { text-align: left; color: var(--text); text-decoration: none; }

.toast.warn { border-color: var(--warn); }

/* Punto de color en los filtros */
.pe-punto { display: inline-block; width: .65rem; height: .65rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }

/* ---------- Paleta de Trello ---------- */
.pe-c-green_light { background: #BAF3DB; color: #164B35; }
.pe-c-green { background: #4BCE97; color: #172B4D; }
.pe-c-green_dark { background: #1F845A; color: #fff; }
.pe-c-yellow_light { background: #F8E6A0; color: #533F04; }
.pe-c-yellow { background: #F5CD47; color: #172B4D; }
.pe-c-yellow_dark { background: #946F00; color: #fff; }
.pe-c-orange_light { background: #FEDEC8; color: #702E00; }
.pe-c-orange { background: #FEA362; color: #172B4D; }
.pe-c-orange_dark { background: #C25100; color: #fff; }
.pe-c-red_light { background: #FFD5D2; color: #5D1F1A; }
.pe-c-red { background: #F87168; color: #172B4D; }
.pe-c-red_dark { background: #C9372C; color: #fff; }
.pe-c-purple_light { background: #DFD8FD; color: #352C63; }
.pe-c-purple { background: #9F8FEF; color: #172B4D; }
.pe-c-purple_dark { background: #6E5DC6; color: #fff; }
.pe-c-blue_light { background: #CCE0FF; color: #09326C; }
.pe-c-blue { background: #579DFF; color: #172B4D; }
.pe-c-blue_dark { background: #0C66E4; color: #fff; }
.pe-c-sky_light { background: #C6EDFB; color: #164555; }
.pe-c-sky { background: #6CC3E0; color: #172B4D; }
.pe-c-sky_dark { background: #227D9B; color: #fff; }
.pe-c-lime_light { background: #D3F1A7; color: #37471F; }
.pe-c-lime { background: #94C748; color: #172B4D; }
.pe-c-lime_dark { background: #5B7F24; color: #fff; }
.pe-c-pink_light { background: #FDD0EC; color: #50253F; }
.pe-c-pink { background: #E774BB; color: #172B4D; }
.pe-c-pink_dark { background: #AE4787; color: #fff; }
.pe-c-black_light { background: #DCDFE4; color: #172B4D; }
.pe-c-black { background: #8590A2; color: #172B4D; }
.pe-c-black_dark { background: #626F86; color: #fff; }

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .pe-tablero { padding: .5rem; border-radius: 8px; scroll-snap-type: x mandatory; }
  /* Filtros en una sola fila que se desliza de lado, como en el CRM. */
  #tab-pedidos .filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; }
  #tab-pedidos .filtros .chip { flex: 0 0 auto; white-space: nowrap; }
  .pe-col { flex-basis: 85vw; width: 85vw; scroll-snap-align: start; }
  .pe-alta-fila, .pe-tipo-sel { grid-template-columns: 1fr; }
  .pe-alta .pe-alta-fila:has(.pe-alta-num) { grid-template-columns: 6rem 1fr; }
  .pe-cliente { margin-left: 0; }
  #tab-pedidos .toolbar input { min-width: 0; flex: 1 1 100%; order: 3; }
}