/*====================================================
  CIMA — Documentos de la empresa al consultorio
  Factura del mes y recibo de pago. Un solo molde.
  Todo el color sale del TEMA ACTIVO. La única tinta propia del documento es el
  correlativo (--cpd-tinta-correlativo), y está explicada donde se declara.
=====================================================*/

.cpd-doc {
    /* ── Tinta del correlativo ───────────────────────────────────────────────
       ÚNICO color que no sale del tema. El correlativo va en rojo por convención
       de documento —el mismo rojo del talonario impreso—, no por decisión de
       interfaz: es la marca que el médico busca cuando coteja con su archivo.
       Vive en un token para que se cambie en UN sitio si Miguel prefiere que
       también obedezca al tema. */
    --cpd-tinta-correlativo: #c62828;

    /* HOJA CARTA. 816x1056 = 8,5x11 pulgadas a 96dpi. El documento se compone SIEMPRE a
       este tamano para que lo que se ve sea lo que se imprime; cuando no cabe, se reduce
       entero con `transform: scale` (CimaPlatformDoc.autofit), que conserva las
       proporciones. Antes era `max-width:780px` y el documento se reajustaba con la
       ventana, o sea que no tenia forma de hoja. */
    --cpd-pad: 56px;
    position: relative;
    width: 816px;
    min-height: 1056px;
    margin: 0;
    padding: var(--cpd-pad);
    display: flex;
    flex-direction: column;
    background: var(--surface-2, var(--glass-bg));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,0.25));
    color: var(--text-main);
    font-size: 0.88rem;
    line-height: 1.5;
    overflow: hidden;
}

/* Filo superior: da el aire de documento sin recurrir a un degradado de fondo. */
.cpd-doc::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: color-mix(in srgb, var(--primary) 70%, transparent);
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.cpd-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--glass-border);
}
.cpd-head-izq { min-width: 0; flex: 1 1 auto; }
.cpd-head-der { flex: 0 0 auto; text-align: right; }

.cpd-em-razon { font-size: 1.05rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
.cpd-em-l { font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.cpd-em-l i { color: color-mix(in srgb, var(--accent) 75%, transparent); flex: 0 0 auto; }

/* Emisor sin llenar: se dibuja la AUSENCIA, nunca un nombre de relleno. */
.cpd-emisor-vacio {
    border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: 10px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.cpd-emisor-vacio-t {
    font-size: 0.85rem; font-weight: 700; color: var(--text-main);
    display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
.cpd-emisor-vacio-t i { color: var(--accent); }
.cpd-emisor-vacio-d { font-size: 0.76rem; color: var(--text-muted); line-height: 1.5; }

/* ── El correlativo: lo que el médico busca primero ───────────────────────── */
.cpd-correlativo { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cpd-corr-k {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-muted); font-weight: 600;
}
.cpd-corr-v {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 1.45rem; font-weight: 700; letter-spacing: 0.04em;
    line-height: 1.15;
}
/* Decisión de Miguel (2026-09-21): el rojo es del SERIAL. El prefijo de la empresa es
   etiqueta —cambia si cambia la numeración— y va apagado, para que el ojo caiga en el
   número que el médico coteja contra su archivo. */
.cpd-corr-pfx { color: var(--text-muted); font-weight: 600; }
.cpd-corr-ser { color: var(--cpd-tinta-correlativo); }
.cpd-tipo {
    margin-top: 8px; font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
    display: flex; align-items: center; justify-content: flex-end; gap: 7px;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.cpd-kind {
    display: inline-block; margin-top: 7px;
    font-size: 0.68rem; color: var(--text-muted);
    border: 1px solid var(--glass-border); border-radius: 10px; padding: 1px 9px;
    cursor: help;
}

.cpd-bajada { font-size: 0.79rem; color: var(--text-muted); margin: 14px 0 20px; }

/* ── Partes y metadatos ───────────────────────────────────────────────────── */
.cpd-partes { display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 22px; }
.cpd-parte { min-width: 220px; flex: 1 1 260px; }
.cpd-parte-k {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-muted); font-weight: 600; margin-bottom: 5px;
}
.cpd-parte-n { font-size: 0.95rem; font-weight: 600; color: var(--text-main); }
.cpd-parte-l { font-size: 0.78rem; color: var(--text-muted); }
.cpd-parte-cod {
    margin-top: 6px; font-size: 0.74rem; color: var(--text-muted);
    display: flex; align-items: center; gap: 5px;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.cpd-parte-cod i { color: color-mix(in srgb, var(--accent) 75%, transparent); }

.cpd-estado-caja { flex: 0 1 300px; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.cpd-estado {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--text-main);
    padding: 3px 13px; border-radius: 13px;
    font-size: 0.78rem; font-weight: 600; white-space: nowrap;
    margin-bottom: 4px;
}
.cpd-meta-i { display: flex; justify-content: flex-end; gap: 12px; font-size: 0.78rem; width: 100%; }
.cpd-meta-k { color: var(--text-muted); }
.cpd-meta-v { color: var(--text-main); font-weight: 600; min-width: 140px; text-align: right; }

/* ── Tabla de conceptos / imputación ──────────────────────────────────────── */
.cpd-tabla-caja {
    border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden;
    background: color-mix(in srgb, var(--text-main) 3%, transparent);
}
.cpd-tabla { width: 100%; border-collapse: collapse; }
.cpd-th {
    text-align: left; padding: 9px 14px;
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-muted); font-weight: 600;
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    border-bottom: 1px solid var(--glass-border);
}
.cpd-th-num { text-align: right; }
.cpd-tabla td { padding: 11px 14px; border-bottom: 1px solid var(--glass-border); vertical-align: top; }
.cpd-tabla tr:last-child td { border-bottom: 0; }
.cpd-concepto { font-size: 0.85rem; color: var(--text-main); font-weight: 600; }
.cpd-detalle { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.cpd-td-num {
    text-align: right; white-space: nowrap; font-size: 0.83rem; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.cpd-td-total { color: var(--text-main); font-weight: 600; }
.cpd-vacio { text-align: center; color: var(--text-muted); font-size: 0.8rem; padding: 22px 14px; }

/* Dato que falta: se ve que falta, y no se puede confundir con un valor. */
.cpd-falta {
    color: var(--text-muted); font-style: italic;
    border-bottom: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
}

/* ── Pie: sello a la izquierda, totales a la derecha ──────────────────────── */
.cpd-pie {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
    margin-top: 22px; flex-wrap: wrap;
}
.cpd-pie-izq { flex: 0 0 auto; }
.cpd-pie-der { flex: 1 1 260px; min-width: 240px; }
.cpd-total-l {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 9px 0; border-top: 1px solid var(--glass-border);
    font-size: 0.83rem; color: var(--text-muted);
}
.cpd-total-v { font-size: 1.3rem; color: var(--text-main); font-variant-numeric: tabular-nums; }
.cpd-total-sec strong { color: var(--text-main); font-variant-numeric: tabular-nums; }
.cpd-anulada {
    font-size: 0.77rem; color: var(--text-muted); margin-top: 6px;
    padding: 7px 11px; border-radius: 9px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ── El hueco del sello ───────────────────────────────────────────────────── */
/* La MECÁNICA es esta caja: tamaño fijo, girada, y dentro va el arte de Miguel con
   object-fit:contain para que un sello grande y uno pequeño ocupen lo mismo (misma
   decisión que ya se tomó con la firma y el sello del médico). */
/* La CAJA la fija el documento y `pos` de la configuracion la ajusta una sola vez desde
   BASE: ancho, alto, giro y desplazamiento llegan en el `style` del elemento. Aqui NO se
   repiten, para que no haya dos sitios decidiendo lo mismo.
   `pointer-events:none` es la garantia de «inamovible»: el sello no se selecciona, no se
   arrastra y no tiene asas. Solo se mueve desde BASE, y para todos los documentos a la vez. */
.cpd-sello {
    display: flex; align-items: center; justify-content: center;
    opacity: 0.92;
    pointer-events: none;
    user-select: none;
    flex: 0 0 auto;
}
.cpd-sello img { width: 100%; height: 100%; object-fit: contain; }

/* Sello compuesto en el editor: lo dibuja CimaSigElements y ya viene escalado para caber
   en la caja sin deformarse. Se centra y se le prohibe desbordar. */
/* El contenedor RECORTA, igual que en el editor: lo que se sale de la caja compuesta no
   aparece aqui tampoco. Es lo que hace que el editor sea WYSIWYG, asi que no se fuerza
   `overflow:visible` — ademas seria letra muerta, porque renderGroup lo escribe inline. */
.cpd-sello-grupo { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }

/* Provisional, mientras no hay arte. Se anuncia como provisional a propósito. */
.cpd-sello-hueco .cpd-sello-marco {
    width: 100%; height: 100%;
    border: 3px double color-mix(in srgb, var(--accent) 65%, transparent);
    border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    color: color-mix(in srgb, var(--accent) 88%, var(--text-main));
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.cpd-sello-hueco i { font-size: 1.5rem; }
.cpd-sello-txt {
    font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
}
.cpd-sello-pie {
    font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); max-width: 92px; text-align: center; line-height: 1.25;
}

.cpd-nota {
    margin-top: auto;
    padding-top: 18px; border-top: 1px solid var(--glass-border);
    font-size: 0.73rem; color: var(--text-muted); text-align: center;
}

/* ── Teléfono ─────────────────────────────────────────────────────────────── */
@media (max-width: 0px) { /* jubilado: la hoja ya no se reflui, se reduce entera */
    /* La tabla de 4 columnas no cabe en un teléfono: se apila. Cada celda lleva encima el
       rótulo de su columna (data-r) y la cabecera se retira. Antes se recortaba el importe,
       que es justo el dato que el médico busca. */
    .cpd-tabla-caja { overflow: visible; background: none; border: 0; border-radius: 0; }
    .cpd-tabla, .cpd-tabla tbody, .cpd-tabla tr, .cpd-tabla td { display: block; width: 100%; }
    .cpd-tabla thead { display: none; }
    .cpd-tabla tr {
        border: 1px solid var(--glass-border); border-radius: 11px;
        background: color-mix(in srgb, var(--text-main) 3%, transparent);
        padding: 11px 13px; margin-bottom: 9px;
    }
    .cpd-tabla td { border: 0; padding: 0; }
    .cpd-tabla td.cpd-td-concepto { margin-bottom: 7px; }
    .cpd-tabla td.cpd-td-num {
        display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
        text-align: right; padding: 3px 0;
    }
    .cpd-tabla td.cpd-td-num::before {
        content: attr(data-r);
        font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--text-muted); font-weight: 600;
    }
    .cpd-vacio { border: 1px dashed var(--glass-border); border-radius: 11px; }

    .cpd-doc { --cpd-pad: 18px; border-radius: 12px; }
    .cpd-head { flex-direction: column; gap: 16px; }
    .cpd-head-der { text-align: left; align-self: stretch; }
    .cpd-correlativo { align-items: flex-start; }
    .cpd-tipo { justify-content: flex-start; }
    .cpd-estado-caja { align-items: flex-start; flex-basis: 100%; }
    .cpd-meta-i { justify-content: space-between; }
    .cpd-meta-v { text-align: left; min-width: 0; }
    /* En columna, `flex: 1 1 260px` del bloque de totales crece a lo ALTO y abría un hueco
       muerto de ~230 px entre el total y el sello. En teléfono cada bloque ocupa lo suyo. */
    .cpd-pie { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
    .cpd-pie-der { flex: 0 0 auto; min-width: 0; }
    .cpd-pie-izq { align-self: center; flex: 0 0 auto; }
    .cpd-corr-v { font-size: 1.25rem; }
}

/* Factura anulada: el monto original queda tachado y el número grande es el que se cobra. */
.cpd-total-caja { display: inline-flex; align-items: baseline; gap: 10px; }
.cpd-total-tachado {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}


/* ── Impresion ──────────────────────────────────────────────────────────────────────────
   La hoja ya ESTA en tamano carta, asi que imprimir es quitarle la reduccion de pantalla
   y los adornos de ventana. El navegador la encaja 1:1 en el papel. */
@media print {
    .cpd-doc {
        transform: none !important;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        background: #fff;
        color: #000;
    }
    .cpd-doc::before { display: none; }
}