/* ------------------------------------------------------------------
   Formularios por bloques

   Un título chico por bloque y una grilla pareja adentro: todas las
   etiquetas en un renglón y los campos alineados por abajo, así un campo
   más alto (el selector de ficha) no descuadra al resto.
   ------------------------------------------------------------------ */
.raver-form-seccion {
    display: block;
    width: 100%;
    margin-top: 6px;
}

.raver-form-titulo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    margin: 18px 0 10px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tinta-borde);
    font-family: var(--raver-mono);
    font-size: 10.5px !important;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.raver-form-titulo small {
    font-family: var(--raver-fuente);
    font-size: 11.5px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tinta-apagado);
}

.raver-form-grilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: end;
}

@media (max-width: 900px) {
    .raver-form-grilla {
        grid-template-columns: minmax(0, 1fr);
    }
}

.raver-form-ancho {
    grid-column: 1 / -1;
}

.raver-cobro-form .raver-form-seccion label,
.raver-cobro-form .raver-form-grilla label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: none;
}

.raver-cobro-form .raver-form-grilla label > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El selector de ficha: buscar, elegir y crear, en una fila. */
.raver-ficha-controles {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.raver-ficha-controles .raver-buscador-ficha {
    flex: 1 1 40%;
    margin: 0;
}

.raver-ficha-controles select {
    flex: 1 1 60%;
    min-width: 0;
}

.raver-ficha-crear {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .raver-ficha-controles {
        flex-wrap: wrap;
    }
}

/* Kickoff, monto, plazo y estado: cuatro datos cortos, una sola fila. */
@media (min-width: 901px) {
    .raver-form-grilla-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------
   Ítems y pagos de un presupuesto

   Una fila por ítem, en columnas fijas para que se lean como tabla:
   tipo, nombre, costo, modo de pago, estado, fecha de pago y quitar.
   ------------------------------------------------------------------ */
.raver-item-cabeza,
.raver-item-fila {
    display: grid;
    grid-template-columns: 110px minmax(0, 2fr) 120px minmax(0, 1.4fr) 120px 132px 30px 30px;
    gap: 8px;
    align-items: center;
}

.raver-item-cabeza {
    padding: 0 0 6px;
    font-family: var(--raver-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-apagado);
}

.raver-item-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.raver-cobro-form .raver-item-fila input,
.raver-cobro-form .raver-item-fila select {
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    font-size: 12.5px;
}

/* La fecha solo aparece en un ítem pagado; su lugar queda igual. */
.raver-item-fila .raver-item-fecha[hidden] {
    display: block !important;
    visibility: hidden;
}

.raver-item-quitar {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border: 1px solid var(--tinta-borde) !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: var(--tinta-apagado) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: pointer;
}

.raver-item-quitar:hover {
    color: var(--tinta-mal) !important;
    border-color: rgb(var(--tinta-mal-rgb) / 0.4) !important;
}

/* El estado se nota en el borde izquierdo de la fila. */
.raver-item-fila {
    padding-left: 8px;
    border-left: 2px solid var(--tinta-alerta);
}

.raver-item-fila.raver-item-pagado {
    border-left-color: var(--tinta-ok);
}

.raver-item-fila.raver-item-anulado {
    border-left-color: var(--tinta-apagado);
    opacity: 0.6;
}

.raver-item-agregar {
    margin-top: 10px;
}

.raver-item-ayuda {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--tinta-apagado);
}

@media (max-width: 1250px) {
    .raver-item-cabeza {
        display: none;
    }

    .raver-item-fila {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding: 10px 0 10px 10px;
        border-bottom: 1px solid var(--tinta-borde);
    }

    .raver-item-fila input[name$="[nombre]"],
    .raver-item-fila input[name$="[modo_pago]"] {
        grid-column: 1 / -1;
    }
}

/* Los pagos del presupuesto, en la ficha del proyecto. */
.raver-pagos-lista {
    display: flex;
    flex-direction: column;
}

.raver-pagos-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 130px;
    gap: 12px;
    align-items: center;
    padding: 10px 0 10px 10px;
    border-bottom: 1px solid var(--tinta-borde);
    border-left: 2px solid var(--tinta-alerta);
}

.raver-pagos-fila:last-child {
    border-bottom: 0;
}

.raver-pagos-fila.raver-item-pagado { border-left-color: var(--tinta-ok); }
.raver-pagos-fila.raver-item-anulado { border-left-color: var(--tinta-apagado); opacity: 0.6; }

.raver-pagos-nombre {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.raver-pagos-nombre strong {
    font-size: 13.5px;
    color: var(--tinta-texto);
}

.raver-pagos-nombre small,
.raver-pagos-estado small {
    font-size: 11.5px;
    color: var(--tinta-apagado);
}

.raver-pagos-monto {
    font-family: var(--raver-mono);
    font-size: 12.5px;
    color: var(--tinta-texto);
    text-align: right;
}

.raver-pagos-estado {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--raver-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* El total del presupuesto: se lee, no se escribe (sale de los ítems). */
.raver-form-dato {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.raver-form-dato > span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.raver-form-dato > strong {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px dashed var(--tinta-borde);
    border-radius: 3px;
    font-family: var(--raver-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--tinta-texto);
}

.raver-pagos-estado .raver-panel-atajo {
    font-family: var(--raver-fuente) !important;
    text-transform: none !important;
}

/* ------------------------------------------------------------------
   Ítems: la boleta como ícono al final de la fila, y los totales en
   la columna del costo (total, pagado y lo que falta, en escalera).
   ------------------------------------------------------------------ */
.raver-cobro-form .raver-item-fila input[name$="[costo]"],
.raver-item-a-la-derecha {
    text-align: right;
}

.raver-item-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border: 1px solid var(--tinta-borde) !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: var(--tinta-suave) !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: color .15s, border-color .15s, background .15s;
}

.raver-item-icono:hover {
    color: var(--tinta-acento-claro) !important;
    border-color: rgb(var(--tinta-acento-rgb) / 0.5) !important;
    background: rgb(var(--tinta-acento-rgb) / 0.08) !important;
}

/* Ya tiene boleta: el papel en verde, se abre al tocarlo. */
.raver-item-boleta-lista {
    color: var(--tinta-ok) !important;
    border-color: rgb(var(--tinta-ok-rgb) / 0.35) !important;
}

.raver-item-boleta-lista:hover {
    color: var(--tinta-ok) !important;
    border-color: var(--tinta-ok) !important;
    background: rgb(var(--tinta-ok-rgb) / 0.08) !important;
}

/* Recién agregado, sin guardar: todavía no se puede. */
.raver-item-icono-vacio,
.raver-item-icono-vacio:hover {
    opacity: 0.3;
    cursor: not-allowed;
    color: var(--tinta-apagado) !important;
    border-color: var(--tinta-borde) !important;
    background: transparent !important;
}

.raver-item-quitar:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* El estado de un ítem con boleta: se lee, y lleva al cobro. */
.raver-item-estado-cobro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 9px;
    border: 1px dashed var(--tinta-borde);
    border-radius: 3px;
    font-size: 12.5px;
    color: var(--tinta-texto) !important;
    text-decoration: none !important;
}

.raver-item-estado-cobro .lni {
    font-size: 10px;
    color: var(--tinta-apagado);
}

.raver-item-estado-cobro:hover {
    border-color: var(--tinta-acento);
}

.raver-item-pagado .raver-item-estado-cobro {
    color: var(--tinta-ok) !important;
}

.raver-item-fecha-fija {
    font-family: var(--raver-mono);
    font-size: 11.5px;
    color: var(--tinta-suave);
}

/* Los totales: la misma grilla que las filas, así caen bajo el costo. */
.raver-item-totales {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--tinta-borde);
}

.raver-item-total {
    display: grid;
    grid-template-columns: 110px minmax(0, 2fr) 120px minmax(0, 1.4fr) 120px 132px 30px 30px;
    gap: 8px;
    align-items: center;
    padding-left: 10px;
    min-height: 26px;
}

.raver-item-total .raver-item-agregar {
    grid-column: 1 / 2;
    grid-row: 1;
    justify-self: start;
    margin: 0;
    white-space: nowrap;
}

.raver-item-total > span {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-family: var(--raver-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-apagado);
}

.raver-item-total > strong {
    grid-column: 3;
    grid-row: 1;
    padding-right: 9px;
    text-align: right;
    font-family: var(--raver-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tinta-suave);
    white-space: nowrap;
}

.raver-item-total-suma > strong {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta-texto);
}

.raver-item-total-pagado > strong { color: var(--tinta-ok); }
.raver-item-total-falta > strong  { color: var(--tinta-alerta); }

@media (max-width: 1250px) {
    .raver-item-fila .raver-item-icono,
    .raver-item-fila .raver-item-quitar {
        justify-self: end;
    }

    .raver-item-total {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .raver-item-total > span { grid-column: 2; }
    .raver-item-total > strong { grid-column: 3; }
}

/* Nada que falte: el cero no alarma. */
.raver-item-total-falta.raver-item-total-cero > strong { color: var(--tinta-apagado); }

/* De dónde salió el PDF del presupuesto. */
.raver-pdf-origen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--raver-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tinta-apagado);
}

.raver-pdf-origen::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tinta-apagado);
}

.raver-pdf-generado { color: var(--tinta-acento-claro); }
.raver-pdf-generado::before { background: var(--tinta-acento); }

.raver-pdf-aviso {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--tinta-alerta);
}

/* Hasta cuándo vale un presupuesto (la fecha "Vence" del PDF generado). */
.raver-panel-item .raver-validez-ok { color: var(--tinta-suave) !important; }
.raver-validez-cerca   { color: var(--tinta-alerta) !important; }
.raver-validez-vencido { color: var(--tinta-mal) !important; }

.raver-validez-nota {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--tinta-suave);
}

/* El editor del documento, dentro del presupuesto abierto. */
.raver-doc-abrir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid rgb(var(--tinta-acento-rgb) / 0.35);
    border-radius: 3px;
    background: rgb(var(--tinta-acento-rgb) / 0.06);
}

.raver-doc-abrir > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.raver-doc-abrir strong {
    font-size: 13.5px;
    color: var(--tinta-texto);
}

.raver-doc-abrir small {
    font-size: 12px;
    color: var(--tinta-suave);
}

.raver-doc-abrir-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 9px 16px;
    border-radius: 3px;
    background: var(--tinta-acento);
    color: var(--tinta-sobre-acento) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s;
}

.raver-doc-abrir-boton:hover {
    background: var(--tinta-acento-hover);
}

@media (max-width: 700px) {
    .raver-doc-abrir {
        flex-direction: column;
        align-items: stretch;
    }
    .raver-doc-abrir-boton {
        justify-content: center;
    }
}

/* Presupuesto: el primer texto del PDF bajo el título, en la página del cliente. */
.raver-publico-descripcion {
    max-width: 720px;
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tinta-suave);
}

/* "Ver como cliente", junto a Copiar, en el enlace del presupuesto. */
.raver-concept-box .raver-ver-como-cliente {
    margin-left: 6px;
    text-decoration: none !important;
    white-space: nowrap;
}

/* La página del presupuesto: título, descripción y datos en la columna de
   la izquierda; la portada del PDF a la derecha, a la par del título. */
.raver-publico-izq {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.raver-publico-izq > .raver-welcome-banner {
    margin: 0;
}

/* En el teléfono: título, portada, datos. La columna izquierda se abre
   para que la portada pueda ir entre el título y los datos. */
@media (max-width: 860px) {
    .raver-publico-izq {
        display: contents;
    }
    .raver-publico-izq > .raver-welcome-banner { order: -2; }
    .raver-publico-der { order: -1; }
}


/* Presupuesto aprobado: el aviso con el botón para crear (o ver) el proyecto. */
.raver-pres-proyecto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid rgb(var(--tinta-ok-rgb) / 0.4);
    border-radius: 3px;
    background: rgb(var(--tinta-ok-rgb) / 0.07);
}
.raver-pres-proyecto > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.raver-pres-proyecto strong { font-size: 13.5px; color: var(--tinta-texto); }
.raver-pres-proyecto small { font-size: 12px; color: var(--tinta-suave); }
.raver-pres-proyecto form { margin: 0; flex-shrink: 0; }
.raver-pres-proyecto-hecho { border-color: var(--tinta-borde); background: rgb(var(--tinta-vela-rgb) / 0.02); }
.raver-pres-proyecto-boton {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    width: auto !important;
    padding: 9px 16px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: var(--tinta-ok) !important;
    color: #0b0d12 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: filter .15s;
}
.raver-pres-proyecto-boton:hover { filter: brightness(1.1); }
.raver-pres-proyecto-hecho .raver-pres-proyecto-boton { background: var(--tinta-acento) !important; color: var(--tinta-sobre-acento) !important; }
@media (max-width: 700px) {
    .raver-pres-proyecto { flex-direction: column; align-items: stretch; }
    .raver-pres-proyecto-boton { justify-content: center; width: 100% !important; }
}

/* Lista de presupuestos: el cliente de cada tarjeta, a la vista. */
.raver-panel-item-cliente {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-top: 3px;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tinta-acento-claro);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.raver-panel-item-cliente svg { flex-shrink: 0; opacity: 0.8; }
.raver-panel-item-sin-cliente { color: var(--tinta-apagado); font-style: italic; font-weight: 400; }

/* Presupuesto: la sección Cliente, mínima. Muestra lo cargado; se cambia en
   ventanas (empresa y usuario) y se aplica con Guardar. */
.raver-cliente-filas { display: flex; flex-direction: column; border: 1px solid var(--tinta-borde); border-radius: 4px; }
.raver-cliente-fila { display: flex; align-items: center; gap: 14px; padding: 11px 14px; }
.raver-cliente-fila + .raver-cliente-fila { border-top: 1px solid var(--tinta-borde); }
.raver-cliente-rotulo {
    flex-shrink: 0;
    width: 74px;
    font-family: var(--raver-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-apagado);
}
.raver-cliente-valor { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.raver-cliente-valor strong { font-size: 14px; color: var(--tinta-texto); }
.raver-cliente-valor small { font-size: 12px; color: var(--tinta-suave); }
.raver-cliente-valor em { font-size: 13px; font-style: normal; color: var(--tinta-apagado); }
.raver-cliente-cambiar { flex-shrink: 0; }
.raver-cliente-pendiente { margin: 8px 0 0; font-size: 12px; color: var(--tinta-alerta); }
.raver-cliente-dlg { width: min(560px, calc(100vw - 32px)); }
.raver-cliente-dlg label { display: flex; flex-direction: column; gap: 6px; }
.raver-cliente-dlg select, .raver-cliente-dlg input[type=text], .raver-cliente-dlg input[type=email] { width: 100%; }
.raver-cliente-sin { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tinta-borde); }
.raver-cliente-ayuda { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--tinta-suave); }
label.raver-cliente-crear { flex-direction: row; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--tinta-texto); cursor: pointer; }
.raver-cliente-dlg-pie { display: flex; justify-content: flex-end; margin-top: 18px; }
@media (max-width: 600px) {
    .raver-cliente-fila { flex-wrap: wrap; }
    .raver-cliente-rotulo { width: 100%; }
}
.raver-cliente-dlg .raver-form-grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.raver-cliente-dlg .raver-form-grilla label { min-width: 0; }
.raver-cliente-dlg .raver-form-grilla input { box-sizing: border-box; width: 100% !important; }
label.raver-cliente-crear { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; }
label.raver-cliente-crear input { flex-shrink: 0; width: 16px !important; height: 16px; margin: 0 !important; }
label.raver-cliente-crear span {
    font-family: inherit !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--tinta-texto) !important;
}