/* ==========================================================================
   Presupuestos — diseño westudio (guía §6.4).

   A la izquierda la lista de 392 px: búsqueda, pestañas con contadores y una
   fila por presupuesto (código, estado con glifo, monto en mono, título,
   cliente y actividad). A la derecha el presupuesto abierto: cabecera con el
   código y el estado, dos pestañas y el resumen con la hoja sobre retícula,
   la actividad, los comentarios y «Si lo aprueban».
   ========================================================================== */

.ws-pr [hidden],
.ws-pr-lista [hidden] { display: none !important; }

/* --- Pestañas (también las usa la cabecera del presupuesto) -------------------- */
.ws-tabs { display: flex; align-items: center; gap: 4px; }
.ws-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--tinta-texto-3) !important;
    font-family: var(--f-ui);
    font-size: 13px;
    text-decoration: none !important;
    cursor: pointer;
    transition: color var(--m-rapido) var(--c-salida);
}
.raver-portal-container button.ws-tab { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 10px !important; }
.ws-tab:hover { color: var(--tinta-texto) !important; }
.ws-tab.on { color: var(--tinta-texto) !important; border-bottom-color: var(--tinta-acento-tx); }
.ws-tab .n { font-size: 11px; color: var(--tinta-texto-3); }

/* --- La forma: lista + panel --------------------------------------------------- */
@media (min-width: 1100px) {
    .raver-dos-paneles.ws-pr { grid-template-columns: 392px minmax(0, 1fr); gap: 0; }
}
.ws-pr-lista { min-width: 0; border: 1px solid var(--tinta-borde); border-radius: var(--r-3) 0 0 var(--r-3); background: var(--tinta-fondo); overflow: hidden; }
.raver-dos-paneles.ws-pr .raver-panel-trabajo { min-width: 0; border: 1px solid var(--tinta-borde); border-left: 0; border-radius: 0 var(--r-3) var(--r-3) 0; background: var(--tinta-fondo); }
@media (max-width: 1099px) {
    .ws-pr-lista { border-radius: var(--r-3); margin-bottom: 16px; }
    .raver-dos-paneles.ws-pr .raver-panel-trabajo { border-left: 1px solid var(--tinta-borde); border-radius: var(--r-3); }
}

/* --- La lista ------------------------------------------------------------------- */
.ws-pr-lista-cab { padding: 14px 14px 0; border-bottom: 1px solid var(--tinta-borde); }
.ws-pr-buscar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    margin-bottom: 8px;
    padding: 0 10px;
    border: 1px solid var(--tinta-borde-2);
    border-radius: var(--r-1);
    background: var(--tinta-campo);
    color: var(--tinta-texto-3);
}
.ws-pr-buscar:focus-within { border-color: var(--tinta-acento-tx); box-shadow: var(--foco); }
.ws-pr-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--tinta-texto); font-family: var(--f-ui); font-size: 13px; outline: none; padding: 0; }
.ws-pr-lista-cab .ws-tabs { margin: 0 -10px; overflow-x: auto; scrollbar-width: none; }

.ws-pr-fila {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 16px 13px;
    border-bottom: 1px solid var(--tinta-borde);
    color: var(--tinta-texto) !important;
    text-decoration: none !important;
    transition: background var(--m-rapido) var(--c-salida);
}
.ws-pr-fila:hover { background: var(--tinta-hover); }
.ws-pr-fila.on { background: var(--tinta-acento-suave); }
.ws-pr-fila.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--tinta-acento-tx); }
.ws-pr-fila.cerrado .ws-pr-monto,
.ws-pr-fila.cerrado .ws-pr-titulo { color: var(--tinta-texto-3); }
.ws-pr-f1 { display: flex; align-items: center; gap: 10px; }
.ws-pr-cod { font-size: 11px; color: var(--tinta-texto-3); }
.ws-pr-monto { margin-left: auto; font-size: 13px; color: var(--tinta-texto); }
.ws-pr-titulo { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--tinta-texto); }
.ws-pr-f3 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--tinta-texto-3); }
.ws-pr-ojo { width: 13px; height: 13px; margin: 0 2px 0 0; }
.ws-pr-x { color: var(--tinta-texto-3); flex: none; }
.ws-pr-vacio { margin: 0; padding: 28px 18px; color: var(--tinta-texto-3); font-size: 13px; line-height: 1.5; }

/* --- El panel: cabecera ---------------------------------------------------------- */
.ws-pr-panel { min-width: 0; display: flex; flex-direction: column; }
.ws-pr-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 20px; padding: 20px 24px 12px; }
.ws-pr-cab-txt { min-width: 0; flex: 1 1 320px; }
.ws-pr-cab-linea { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ws-pr-cab-titulo { margin: 0 0 6px; font-family: var(--f-marca); font-size: 28px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; color: var(--tinta-texto-fuerte); }
.ws-pr-cab-sub { font-size: 13px; color: var(--tinta-texto-3); }
.ws-pr-cab-acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-pr-form-acc { display: inline-flex; margin: 0; }
.ws-btn-ico { width: 32px; padding: 0 !important; }

.ws-pr-vistas { padding: 0 24px; border-bottom: 1px solid var(--tinta-borde); gap: 6px; }
.ws-pr-vistas-der { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 0 2px; flex-wrap: wrap; }

/* El formulario de siempre, dentro del panel */
.ws-pr-panel > .raver-specs-card { margin: 0; border: 0; border-radius: 0; background: transparent; }

/* --- El resumen ---------------------------------------------------------------- */
.ws-pr-resumen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 480px; }
.ws-pr-lienzo {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 28px 24px 40px;
    border-right: 1px solid var(--tinta-borde);
    background-color: var(--tinta-hundido);
    min-width: 0;
}
.ws-pr-hoja { display: block; width: 100%; max-width: 480px; background: #ffffff; box-shadow: 0 8px 28px rgba(0, 0, 0, .28); }
.ws-pr-hoja img { display: block; width: 100%; height: auto; }
.ws-pr-sin-hoja {
    width: 100%;
    max-width: 420px;
    margin-top: 40px;
    padding: 28px;
    border: 1px dashed var(--tinta-borde-marcado);
    border-radius: var(--r-3);
    background: var(--tinta-fondo);
    text-align: left;
}
.ws-pr-sin-hoja strong { display: block; margin-bottom: 6px; font-size: 15px; color: var(--tinta-texto); }
.ws-pr-sin-hoja p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--tinta-texto-3); }

.ws-pr-lado { display: flex; flex-direction: column; gap: 26px; padding: 20px; min-width: 0; }
.ws-pr-lado .ws-rotulo { display: block; margin-bottom: 12px; }
.ws-pr-act, .ws-pr-coment { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ws-pr-act li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; align-items: start; }
.ws-pr-act .ws-g { margin-top: 5px; }
.ws-pr-act-txt { display: block; font-size: 13px; line-height: 1.35; color: var(--tinta-texto); }
.ws-pr-act-cuando { display: inline-block; margin-top: 2px; font-size: 11px; color: var(--tinta-texto-3); }
.ws-pr-coment li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.ws-pr-coment .ws-av { width: 24px; height: 24px; }
.ws-pr-coment b { font-size: 13px; font-weight: 500; color: var(--tinta-texto); }
.ws-pr-coment p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--tinta-texto-2); }
.ws-pr-nada { margin: 0; font-size: 13px; color: var(--tinta-texto-3); }
.ws-pr-si { margin-top: auto; padding: 14px 16px; border: 1px dashed var(--tinta-borde-marcado); border-radius: var(--r-2); }
.ws-pr-si p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tinta-texto-2); }

@media (max-width: 900px) {
    .ws-pr-resumen { grid-template-columns: 1fr; }
    .ws-pr-lienzo { border-right: 0; border-bottom: 1px solid var(--tinta-borde); }
}
@media (prefers-reduced-motion: reduce) {
    .ws-pr-fila, .ws-tab { transition-duration: 1ms !important; }
}

/* Cargando un presupuesto por ajax: el panel se apaga un poco, sin saltos. */
.raver-dos-paneles.ws-pr .raver-panel-trabajo { transition: opacity var(--m-rapido) var(--c-salida); }
.raver-dos-paneles.ws-pr .raver-panel-trabajo.ws-pr-cargando { opacity: .55; pointer-events: none; }

/* --- Estilos del tema de WordPress que se colaban ---------------------------------
   Los <button>, <input> y <a> del tema traen su propio aspecto (borde y texto
   magenta, fondo, tamaño) y ganan por orden de carga. Acá se fijan los de la
   lista y el panel de presupuestos. */
.ws-pr button,
.ws-pr input[type="search"],
.ws-pr a { font-family: var(--f-ui) !important; text-transform: none !important; letter-spacing: normal !important; }

.ws-pr button.ws-tab {
    height: 34px;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tinta-texto-3) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}
.ws-pr button.ws-tab:hover { color: var(--tinta-texto) !important; }
.ws-pr button.ws-tab.on { border-bottom-color: var(--tinta-acento-tx) !important; color: var(--tinta-texto) !important; }
.ws-pr a.ws-tab { border-bottom: 2px solid transparent; }
.ws-pr a.ws-tab.on { border-bottom-color: var(--tinta-acento-tx); }

.ws-pr .ws-pr-buscar input[type="search"] {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tinta-texto) !important;
    font-size: 13px !important;
    -webkit-appearance: none;
    appearance: none;
}
.ws-pr .ws-pr-buscar input[type="search"]::-webkit-search-cancel-button { display: none; }

.ws-pr .ws-pr-cab-titulo,
.ws-pr .ws-pr-sin-hoja strong { margin-top: 0 !important; text-transform: none !important; }
.ws-pr .ws-pr-fila, .ws-pr .ws-pr-fila:hover, .ws-pr .ws-pr-hoja { text-decoration: none !important; }
.ws-pr h2, .ws-pr p, .ws-pr ol, .ws-pr ul, .ws-pr li { letter-spacing: normal; }
.ws-pr ol, .ws-pr ul { list-style: none; }

/* --- Ítems y pagos como una lista compacta ---------------------------------------
   Cada ítem es una sola línea con lo importante:
       tipo (ícono) · nombre · costo · estado (ícono) · flecha
   El costo va en su propia columna, a la derecha, así las cifras quedan una
   debajo de la otra y los totales caen justo debajo.
   La flecha abre una segunda línea con lo secundario: el modo de pago, la fecha
   de pago, la boleta y quitar. Tipo y estado son íconos que abren un menú con el
   ícono y el texto de cada opción (assets/js/raver-items-menu.js).
   Manda el ancho del propio panel, no el de la ventana. */
.ws-pr-panel { container-type: inline-size; container-name: wspr; }

.raver-item-cabeza,
.raver-item-fila,
.raver-item-total {
    /* tipo | ítem | costo | estado | flecha */
    grid-template-columns: 32px minmax(0, 1fr) 150px 32px 32px;
    gap: 8px;
    align-items: center;
}

.raver-item-cabeza { padding: 0 0 6px 10px; }
.raver-item-cabeza span { display: none; }
.raver-item-cabeza span:nth-child(2) { display: block; grid-column: 2; }
.raver-item-cabeza span:nth-child(3) { display: block; grid-column: 3; text-align: right; padding-right: 9px; }

.raver-item-fila { padding: 8px 0 8px 10px; border-bottom: 1px solid var(--tinta-borde); }
.raver-item-lista { gap: 0; }

/* La línea principal */
.raver-item-fila > select[name$="[tipo]"],
.ws-sel[data-campo="tipo"]                       { grid-column: 1; grid-row: 1; }
.raver-item-fila > input[name$="[nombre]"]       { grid-column: 2; grid-row: 1; }
.raver-item-fila > input[name$="[costo]"]        { grid-column: 3; grid-row: 1; text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.raver-item-fila > .raver-item-estado,
.raver-item-fila > .raver-item-estado-cobro,
.ws-sel[data-campo="estado"]                     { grid-column: 4; grid-row: 1; }
.raver-item-fila > .raver-item-mas               { grid-column: 5; grid-row: 1; }

/* Lo secundario, en la segunda línea: solo con la flecha abierta */
.raver-item-fila > input[name$="[modo_pago]"]    { grid-column: 2; grid-row: 2; }
.raver-item-fila .raver-item-fecha,
.raver-item-fila .raver-item-fecha-fija          { grid-column: 3; grid-row: 2; justify-self: end; }
.raver-item-fila > .raver-item-icono             { grid-column: 4; grid-row: 2; justify-self: center; }
.raver-item-fila > .raver-item-quitar            { grid-column: 5; grid-row: 2; justify-self: center; }

.raver-item-fila:not([data-abierta="1"]) > input[name$="[modo_pago]"],
.raver-item-fila:not([data-abierta="1"]) .raver-item-fecha,
.raver-item-fila:not([data-abierta="1"]) .raver-item-fecha-fija,
.raver-item-fila:not([data-abierta="1"]) > .raver-item-icono,
.raver-item-fila:not([data-abierta="1"]) > .raver-item-quitar { display: none !important; }

.raver-item-fila .raver-item-fecha[hidden] { display: none !important; }
.raver-cobro-form .raver-item-fila input.raver-item-fecha { width: 150px; }
.raver-item-fecha-fija { font-family: var(--f-mono); font-size: 11px; color: var(--tinta-texto-3); text-align: right; }
.raver-item-fecha-fija:empty { display: none !important; }
.raver-item-fecha-fija::before { content: "Pagado el "; font-family: var(--f-ui); }

.raver-cobro-form .raver-item-fila input,
.raver-cobro-form .raver-item-fila select { height: 32px; padding-top: 0; padding-bottom: 0; }

/* La flecha */
.raver-portal-container .raver-item-mas {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--r-1) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tinta-texto-3) !important;
    cursor: pointer;
}
.raver-portal-container .raver-item-mas:hover { background: var(--tinta-hover) !important; color: var(--tinta-texto) !important; }
.raver-item-mas svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; transition: transform var(--m-base) var(--c-salida); }
.raver-item-fila[data-abierta="1"] .raver-item-mas svg { transform: rotate(180deg); }
.raver-item-fila[data-abierta="1"] { background: var(--tinta-hover); }

/* Los selectores de tipo y estado, como ícono */
.raver-item-fila select.ws-sel-oculto { display: none !important; }
.ws-sel { position: relative; display: inline-flex; }
.raver-portal-container .ws-sel-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border: 1px solid var(--tinta-borde-2) !important;
    border-radius: var(--r-1) !important;
    background: var(--tinta-campo) !important;
    box-shadow: none !important;
    color: var(--tinta-texto-3) !important;
    cursor: pointer;
    transition: border-color var(--m-rapido) var(--c-salida), color var(--m-rapido) var(--c-salida);
}
.raver-portal-container .ws-sel-btn:hover { border-color: var(--tinta-borde-marcado) !important; color: var(--tinta-texto) !important; }
.raver-portal-container .ws-sel-btn[aria-expanded="true"] { border-color: var(--tinta-acento-tx) !important; box-shadow: var(--foco) !important; }
.ws-sel-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.raver-portal-container .ws-sel-btn.v-pagado { color: var(--tinta-ok) !important; }
.raver-portal-container .ws-sel-btn.v-pendiente { color: var(--tinta-alerta) !important; }
.raver-portal-container .ws-sel-btn.v-anulado { color: var(--tinta-apagado) !important; }

.ws-sel-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 170px;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--tinta-borde-2);
    border-radius: var(--r-2);
    background: var(--tinta-sup);
    box-shadow: 0 12px 28px var(--tinta-sombra, rgba(0, 0, 0, .35));
}
/* El menú del estado se abre hacia la izquierda: la columna está al borde. */
.ws-sel[data-campo="estado"] .ws-sel-menu { left: auto; right: 0; }
.ws-sel-menu[hidden] { display: none; }
.ws-sel-menu li { margin: 0; }
.raver-portal-container .ws-sel-menu button {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 32px;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: var(--r-1) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tinta-texto-2) !important;
    font-family: var(--f-ui) !important;
    font-size: 13px !important;
    text-align: left;
    cursor: pointer;
}
.raver-portal-container .ws-sel-menu button:hover { background: var(--tinta-hover) !important; color: var(--tinta-texto) !important; }
.raver-portal-container .ws-sel-menu button[aria-selected="true"] { color: var(--tinta-texto) !important; background: var(--tinta-acento-suave) !important; }
.ws-sel-menu svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.ws-sel-menu .v-pagado svg { color: var(--tinta-ok); }
.ws-sel-menu .v-pendiente svg { color: var(--tinta-alerta); }
.ws-sel-menu .v-anulado svg { color: var(--tinta-apagado); }

/* Con boleta, el estado es un enlace al cobro: solo el ícono, el texto va en el título. */
.raver-item-fila .raver-item-estado-cobro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border: 1px solid var(--tinta-borde-2);
    border-radius: var(--r-1);
    background: var(--tinta-campo);
    text-decoration: none !important;
}
.raver-item-estado-cobro .raver-item-estado-txt,
.raver-item-estado-cobro > i { display: none; }
.raver-item-estado-cobro svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.raver-item-estado-cobro.v-pagado { color: var(--tinta-ok) !important; }
.raver-item-estado-cobro.v-pendiente { color: var(--tinta-alerta) !important; }
.raver-item-estado-cobro.v-anulado { color: var(--tinta-apagado) !important; }

/* Los totales: la misma grilla; cada cifra cae bajo la columna del costo. */
.raver-item-total { padding-left: 10px; min-height: 28px; }
.raver-item-total .raver-item-agregar { grid-column: 1 / 3; grid-row: 1; justify-self: start; }
.raver-item-total > span { grid-column: 2; justify-self: end; grid-row: 1; }
.raver-item-total > strong { grid-column: 3; grid-row: 1; justify-self: end; padding-right: 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.raver-item-total-suma > span { grid-column: 2; }

/* Un panel angosto: el costo un poco más chico y lo secundario a lo ancho. */
@container wspr (max-width: 560px) {
    .raver-item-fila,
    .raver-item-total,
    .raver-item-cabeza { grid-template-columns: 32px minmax(0, 1fr) 110px 32px 32px; }
    .raver-item-fila > input[name$="[modo_pago]"] { grid-column: 2 / -1; }
    .raver-item-fila .raver-item-fecha,
    .raver-item-fila .raver-item-fecha-fija { grid-column: 2 / 4; grid-row: 3; justify-self: start; }
    .raver-item-fila > .raver-item-icono,
    .raver-item-fila > .raver-item-quitar { grid-row: 3; }
}

/* El PDF del presupuesto: el nombre en su propia línea y debajo, de dónde salió
   y las acciones, sin apretarse. */
.raver-cobro-pdf-actual { flex-wrap: wrap; row-gap: 8px; column-gap: 14px; }
.raver-cobro-pdf-actual > a:first-child { flex: 1 1 100%; min-width: 0; }
.raver-cobro-pdf-actual .raver-pdf-origen { flex: 0 1 auto; white-space: nowrap; }
.raver-cobro-pdf-actual .raver-panel-atajo { white-space: nowrap; }

/* --- El detalle de cada ítem (lo que abre la flecha) ------------------------------
   Modo de pago con su rótulo y una línea que explica qué es; la fecha de pago si
   el ítem está pagado; y las dos acciones —generar la boleta y quitar— como
   botones de verdad, con ícono y texto. */
.raver-item-detalle {
    grid-column: 2 / -1;
    grid-row: 2;
    display: none;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
    padding: 10px 0 6px;
}
.raver-item-fila[data-abierta="1"] .raver-item-detalle { display: flex; }

.raver-item-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.raver-item-campo[hidden] { display: none !important; }
.raver-item-campo > span {
    font-family: var(--f-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-texto-3);
}
.raver-item-campo small { font-size: 11.5px; line-height: 1.4; color: var(--tinta-texto-3); }
.raver-item-campo-modo { flex: 1 1 240px; }
.raver-item-campo-fecha { flex: 0 0 auto; }
.raver-cobro-form .raver-item-campo input { width: 100%; }
.raver-cobro-form .raver-item-campo-fecha input { width: 158px; }
.raver-item-fecha-fija { font-family: var(--f-mono); font-size: 13px; font-weight: 500; color: var(--tinta-texto); }

.raver-item-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.raver-item-detalle .raver-item-icono,
.raver-item-detalle .raver-item-quitar {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid var(--tinta-borde-2) !important;
    border-radius: var(--r-1) !important;
    background: var(--tinta-sup) !important;
    box-shadow: none !important;
    color: var(--tinta-texto-2) !important;
    font-family: var(--f-ui) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--m-rapido) var(--c-salida), border-color var(--m-rapido) var(--c-salida), color var(--m-rapido) var(--c-salida);
}
.raver-item-detalle .raver-item-icono:hover { background: var(--tinta-hover) !important; color: var(--tinta-texto) !important; border-color: var(--tinta-borde-marcado) !important; }
.raver-item-detalle .raver-item-icono svg { width: 16px; height: 16px; flex: none; }
.raver-item-detalle .raver-item-icono-vacio { opacity: .5; cursor: not-allowed; }
.raver-item-detalle .raver-item-boleta-lista { color: var(--tinta-ok) !important; }
.raver-item-detalle .raver-item-quitar svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.raver-item-detalle .raver-item-quitar:hover:not([disabled]) { border-color: rgb(var(--tinta-mal-rgb) / .5) !important; color: var(--tinta-mal) !important; background: rgb(var(--tinta-mal-rgb) / .08) !important; }
.raver-item-detalle .raver-item-quitar[disabled] { opacity: .4; cursor: not-allowed; }

@container wspr (max-width: 560px) {
    .raver-item-acciones { margin-left: 0; width: 100%; }
    .raver-item-acciones > * { flex: 1 1 0; }
}
.raver-item-fecha-fija::before { content: none !important; }
.raver-item-fila .raver-item-fecha-fija { grid-column: auto; grid-row: auto; justify-self: auto; text-align: left; }

/* Aire a la derecha: el botón «Quitar ítem» no toca el borde del panel. Los
   totales llevan el mismo margen para que sus cifras sigan cayendo bajo el costo. */
.raver-item-fila, .raver-item-total, .raver-item-cabeza { padding-right: 12px; }

/* El modo de pago y los botones, en la misma línea: el campo toma el ancho que
   sobra y las acciones quedan a la derecha, alineadas con el borde de abajo del
   campo. Solo en un panel muy angosto se apilan. */
.raver-item-detalle { flex-wrap: nowrap; align-items: flex-end; }
.raver-item-detalle .raver-item-campo-modo { flex: 1 1 auto; min-width: 160px; }
.raver-item-detalle .raver-item-acciones { flex: 0 0 auto; flex-wrap: nowrap; margin-left: 0; }
@container wspr (max-width: 620px) {
    .raver-item-detalle { flex-wrap: wrap; }
    .raver-item-detalle .raver-item-acciones { flex-wrap: wrap; width: 100%; }
    .raver-item-detalle .raver-item-acciones > * { flex: 1 1 0; }
}