/* ==================================================================
 * El editor del documento del presupuesto (?raver_view=presupuestos&documento=)
 * Armado a la izquierda, vista previa del PDF a la derecha.
 * ================================================================== */

/* Pantalla completa: tapa el encabezado del tema, el menú del panel y la
   barra de WordPress (z-index 99999). La página de atrás no se desplaza. */
html.raver-doc-abierto,
html.raver-doc-abierto body { overflow: hidden !important; }

.raver-doc-pantalla {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: var(--tinta-fondo);
    color: var(--tinta-texto);
    font-family: var(--raver-fuente);
}

.raver-doc-top {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    height: 52px;
    padding: 0 16px;
    border-bottom: 1px solid var(--tinta-borde);
    background: var(--tinta-sup);
}
.raver-doc-top-marca {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tinta-texto) !important;
    font-family: var(--raver-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none !important;
}
.raver-doc-top-marca .raver-doc-top-lobo { width: 26px !important; height: 26px !important; }
.raver-doc-top-que {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    padding-left: 18px;
    border-left: 1px solid var(--tinta-borde);
    white-space: nowrap;
    overflow: hidden;
}
.raver-doc-top-rotulo {
    color: var(--tinta-suave);
    font-family: var(--raver-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.raver-doc-top-que strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.raver-doc-top-meta { color: var(--tinta-suave); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.raver-doc-top-acciones { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.raver-doc-top-acciones .raver-doc-salir:hover { border-color: var(--tinta-mal); }

/* Barra lateral con los controles, vista previa en el resto. */
.raver-doc {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(440px, 38vw, 660px) minmax(0, 1fr);
    margin: 0;
}

.raver-doc-lateral {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--tinta-borde);
    background: var(--tinta-fondo);
}
.raver-doc-lateral-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    scrollbar-color: var(--tinta-borde-fuerte) transparent;
}
.raver-doc-lateral-scroll .raver-cobro-aviso { margin: 0 0 12px; }

.raver-doc-bloque {
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--tinta-borde);
    border-radius: 5px;
    background: var(--tinta-sup);
}
.raver-doc-bloque h3 {
    margin: 0 0 12px;
    color: var(--tinta-suave);
    font-family: var(--raver-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.raver-doc input[type="text"],
.raver-doc input[type="date"],
.raver-doc select,
.raver-doc textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--tinta-borde-fuerte);
    border-radius: 3px;
    background: var(--tinta-campo);
    color: var(--tinta-texto-2);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    box-sizing: border-box;
}
.raver-doc textarea { resize: vertical; min-height: 64px; overflow: hidden; }
.raver-doc input:focus,
.raver-doc select:focus,
.raver-doc textarea:focus { outline: none; border-color: var(--tinta-acento); }
.raver-doc input[type="date"] { color-scheme: var(--tinta-esquema, dark); font-family: var(--raver-mono); font-size: 12px; }

.raver-doc-grilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}
.raver-doc-grilla-precios { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-top: 12px; }
.raver-doc-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.raver-doc-campo.ancho { grid-column: 1 / -1; }
.raver-doc-campo > span {
    color: var(--tinta-suave);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.raver-doc-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 9px;
    color: var(--tinta-texto-3);
    font-size: 13px;
    cursor: pointer;
}
.raver-doc-check input { accent-color: var(--tinta-acento); width: 15px; height: 15px; margin: 0; }

.raver-doc-hoja-cabeza {
    display: flex;
    align-items: center;
    gap: 6px;
}
.raver-doc-hoja-cabeza { margin-bottom: 12px; }
.raver-doc-hoja-numero {
    flex: 0 0 auto;
    color: var(--tinta-acento-claro);
    font-family: var(--raver-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.raver-doc .raver-doc-titulo-hoja { font-weight: 600; letter-spacing: .02em; }

.raver-doc-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}
.raver-doc-columna { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.raver-doc-columna-nombre {
    color: var(--tinta-apagado);
    font-family: var(--raver-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.raver-doc-seccion {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--tinta-borde-fuerte);
    border-radius: 4px;
    background: var(--tinta-hundido);
}
.raver-doc .raver-doc-titulo-seccion {
    padding: 6px 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.raver-doc-seccion textarea { font-size: 12.5px; }
.raver-doc-seccion-pie { display: flex; justify-content: flex-end; gap: 4px; }
.raver-doc-seccion-pie .raver-doc-btn { min-width: 24px; height: 22px; padding: 0 6px; font-size: 11px; color: var(--tinta-suave); }

.raver-doc-btn {
    flex: 0 0 auto;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--tinta-borde-fuerte);
    border-radius: 3px;
    background: var(--tinta-sup);
    color: var(--tinta-texto-3);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.raver-doc-btn:hover { border-color: var(--tinta-acento); color: var(--tinta-texto-fuerte); }
.raver-doc-btn-quitar:hover { border-color: var(--tinta-mal); color: var(--tinta-mal); }
.raver-doc-btn-agregar { align-self: flex-start; height: 30px; padding: 0 12px; }

.raver-doc-plantilla-nueva { display: flex; gap: 8px; margin: -4px 0 12px; }
.raver-doc-plantilla-nueva[hidden] { display: none; }

.raver-doc-agregar-hojas {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px dashed var(--tinta-borde-fuerte);
    border-radius: 5px;
}
.raver-doc-agregar-hojas select { width: auto; flex: 1 1 180px; }
.raver-doc-o { color: var(--tinta-apagado); font-size: 12px; }

.raver-doc-precio {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.6fr) auto auto;
    gap: 6px;
    margin-bottom: 6px;
}
.raver-doc .raver-doc-monto { font-family: var(--raver-mono); font-size: 12.5px; text-align: right; }

.raver-doc-nota { margin: 8px 0 0; color: var(--tinta-suave); font-size: 12px; }

.raver-doc-previa {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--tinta-borde-fuerte);
}
.raver-doc-previa-cabecera {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--tinta-borde);
    background: var(--tinta-sup);
}
.raver-doc-previa-estado {
    color: var(--tinta-suave);
    font-family: var(--raver-mono);
    font-size: 11px;
    text-align: right;
}
.raver-doc-previa-estado.raver-doc-mal { color: var(--tinta-mal); }
#raver-doc-iframe {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: var(--tinta-borde-fuerte);
}

/* Las acciones quedan fijas al pie de la barra lateral. */
.raver-doc-barra {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--tinta-borde);
    background: var(--tinta-sup);
}
.raver-doc-barra-estado { flex: 1 0 100%; min-height: 0; color: var(--tinta-alerta); font-family: var(--raver-mono); font-size: 11px; }
.raver-doc-barra-estado:empty { display: none; }
.raver-doc-barra-asistentes,
.raver-doc-barra-guardar { display: flex; gap: 8px; align-items: center; }
.raver-doc-barra-guardar { margin-left: auto; }
.raver-doc-barra .raver-btn-action { width: auto !important; padding: 9px 16px !important; font-size: 12.5px; }

/* La barra lateral se ajusta a su propio ancho, no al de la ventana. */
@container (max-width: 600px) {
    .raver-doc-columnas { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 480px) {
    .raver-doc-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .raver-doc-grilla-precios { grid-template-columns: minmax(0, 1fr); }
    .raver-doc-precio { grid-template-columns: minmax(0, 1fr) auto auto; }
    .raver-doc-precio .raver-doc-monto,
    .raver-doc-precio input:nth-child(3) { grid-column: 1 / -1; grid-row: auto; }
}

/* En pantallas angostas: todo en una columna que se desplaza entera. */
@media (max-width: 900px) {
    .raver-doc-top { height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
    .raver-doc-top-que { flex-basis: 100%; order: 3; padding-left: 0; border-left: 0; }
    .raver-doc-top-acciones { margin-left: auto; }
    .raver-doc-top-acciones .raver-cobro-accion:not(.raver-doc-salir) { display: none; }
    .raver-doc { display: block; overflow-y: auto; }
    .raver-doc-lateral { border-right: 0; }
    .raver-doc-lateral-scroll { overflow: visible; }
    .raver-doc-previa { height: 80vh; }
}

/* El reset del tema pinta todo <button> de rosa (#c36) con relleno y letra
   grande: los botones del editor necesitan ganarle, igual que .raver-btn-action. */
.raver-doc .raver-doc-btn,
.raver-doc .raver-doc-btn:focus {
    padding: 0 8px !important;
    border: 1px solid var(--tinta-borde-fuerte) !important;
    border-radius: 3px !important;
    background: var(--tinta-sup) !important;
    color: var(--tinta-texto-3) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
.raver-doc .raver-doc-btn:hover {
    border-color: var(--tinta-acento) !important;
    background: var(--tinta-sup) !important;
    color: var(--tinta-texto-fuerte) !important;
}
.raver-doc .raver-doc-btn-quitar:hover {
    border-color: var(--tinta-mal) !important;
    color: var(--tinta-mal) !important;
}
.raver-doc .raver-doc-btn-agregar { padding: 0 12px !important; }
.raver-doc .raver-doc-seccion-pie .raver-doc-btn {
    min-width: 24px;
    height: 22px;
    padding: 0 6px !important;
    font-size: 11px !important;
    color: var(--tinta-suave) !important;
}
.raver-doc .raver-doc-seccion-pie .raver-doc-btn:hover { color: var(--tinta-texto-fuerte) !important; }