/* Pedidos de la tienda: lo poco que sus pantallas anaden a los estilos de la aplicacion (estilos.css).
   Todo lo demas (tablas, botones, pastillas, el panel lateral, los colores) es lo de depositos. */

.tp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 26px; }
.tp-kpis .kpi b { font-size: 40px; }
.tp-espera { padding: 26px 0; }
.nota.tp-espera { padding: 12px 14px; max-width: 720px; }
.hoja > .tp-aviso { margin: 4px 0 18px; max-width: 900px; }
.tp-aviso .boton { flex: none; }

.tp-volver { display: inline-flex; align-items: center; gap: 2px; margin: -6px 0 14px -6px; }
.tp-volver svg { width: 18px; height: 18px; }
.tp-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tp-titulo .pill { font-family: var(--texto); font-size: 13px; }

/* buscar y filtrar */
.tp-busca { flex: 1 1 260px; max-width: 380px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: 15px var(--texto); color: var(--ink); }
.tp-busca:focus, .tp-num-in:focus, .tp-form textarea:focus, .tp-caja input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.elegir.tp-corto { width: auto; padding-top: 10px; padding-bottom: 10px; }
.tp-cuenta .enlace { padding: 0; }
.tabla .tp-abrir { display: inline; font-size: 14px; }

/* el pedido */
.tp-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 8px; }
.tp-cifras .cifra span { min-height: 0; }
.tp-num-in { width: 88px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font: 600 14px var(--texto); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.tp-lineas td { vertical-align: middle; }
/* Una fila con algo cambiado ensena Guardar y Deshacer; una sin cambios, Quitar. */
.tp-lineas tr:not(.tp-cambiada) .tp-guardar, .tp-lineas tr.tp-cambiada .tp-quitar { display: none; }
.tp-lineas tr.tp-cambiada td { background: var(--blue-wash); }
.tp-lineas .enlace { display: inline; padding: 0 2px; font-size: 13.5px; }

.tp-caja { margin-top: 16px; padding: 18px 20px 20px; max-width: 900px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio); }
.tp-caja > * + * { margin-top: 14px; }
.tp-buscar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.tp-buscar .campo { flex: 1 1 280px; }
.tp-fichas li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.tp-fichas li:last-child { border-bottom: 1px solid var(--line); }
.tp-fichas b { font-size: 14.5px; overflow-wrap: anywhere; }
.tp-fichas p { color: var(--muted); font-size: 13px; }

/* formularios: nuevo pedido, y pago y envio */
.tp-form { margin-top: 0; }
.tp-rotulo { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.tp-form textarea { display: block; width: 100%; min-height: 84px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: 16px/1.4 var(--texto); color: var(--ink); resize: vertical; }
.tp-form .boton { border-width: 1px; }
.tp-fijo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 48px; color: var(--muted); font-size: 13.5px; }
.tp-elegido { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tp-elegido b { display: block; font-family: var(--display); font-weight: 600; font-size: 27px; line-height: 1.1; }
.tp-elegido p { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.tp-opciones { margin-top: 8px; }
#tp-opciones .ayuda { margin-top: 8px; }
.tp-datos { max-width: 620px; }
.tp-dir { white-space: pre-line; }
.tp-final { margin-top: 30px; }
.tp-peligro { color: var(--error); }

.tp-panel .liq { max-width: none; }
.tp-panel .liq dd { overflow-wrap: anywhere; white-space: pre-line; }

@media (max-width: 900px) {
  .tp-kpis .kpi b { font-size: 31px; }
  .tp-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-cifras .cifra:nth-child(3) { border-left: 0; padding-left: 0; }
  .tp-cifras .cifra:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tp-fichas li { grid-template-columns: minmax(0, 1fr) auto; }
  .tp-fichas li > div { grid-column: 1 / -1; }
  .tp-caja { padding: 16px; }
}
@media (max-width: 640px) {
  .tp-kpis { grid-template-columns: minmax(0, 1fr); }
  /* En el celular el boton del aviso va debajo del texto, no al lado. */
  .nota.tp-aviso { flex-direction: column; align-items: stretch; }
}