/* calculadora.css - extracted from base.html L2506-2632 (refactor #72 v1.75.0) */
/* Wrap del input de monto con botón calculadora */
.monto-field-wrap {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.monto-field-wrap input[type="number"] {
    flex: 1;
    min-width: 0;
}
.btn-calc-open {
    flex-shrink: 0;
    width: 38px;
    border-radius: 6px;
    border: 1px solid var(--netza-stone);
    background: var(--netza-paper);
    color: var(--netza-ink-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background 0.15s, color 0.15s;
}
.btn-calc-open:hover { background: var(--netza-ink); color: #fff; border-color: var(--netza-ink); }
/* Modal overlay
   v1.80.0 — z-index subido a 2147483000 (top-most razonable) para garantizar
   que la calc quede SIEMPRE encima de cualquier modal/overlay de la app. El
   valor previo 11000 no era suficiente cuando algún ancestor del modal del
   form genera un stacking context propio (transform/will-change/etc). */
#calc-modal-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2147483000;
    align-items: center;
    justify-content: center;
}
#calc-modal-bg.activo { display: flex; }
/* Calculator box */
.calc-box {
    background: var(--netza-bg);
    border-radius: 16px;
    width: 288px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.calc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px 11px;
    background: var(--netza-paper);
    border-bottom: 1px solid var(--netza-stone);
}
.calc-header span { font-size: 13px; font-weight: 600; color: var(--netza-ink); letter-spacing: 0.2px; }
.calc-header-close {
    background: none; border: none; font-size: 20px; line-height: 1;
    cursor: pointer; color: var(--netza-ink-3); padding: 0 2px; display: flex; align-items: center;
}
.calc-header-close:hover { color: var(--netza-ink); }
/* Display */
.calc-display {
    background: var(--netza-ink);
    padding: 14px 18px 12px;
    text-align: right;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.calc-expr-line {
    font-size: 12px; color: rgba(255,255,255,0.5); min-height: 18px;
    word-break: break-all; font-family: var(--netza-font-mono, monospace);
}
.calc-num-line {
    font-size: 36px; font-weight: 300; color: #fff;
    line-height: 1.15; word-break: break-all; letter-spacing: -1px;
}
/* Keys grid */
.calc-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--netza-stone);
}
.calc-keys button {
    padding: 0; height: 58px; background: var(--netza-paper); border: none;
    font-size: 18px; cursor: pointer; color: var(--netza-ink);
    transition: background 0.1s; user-select: none; -webkit-user-select: none;
}
.calc-keys button:active { background: var(--netza-rule); }
.calc-keys .ck-fn { background: #e8eaec; color: var(--netza-ink-2); font-size: 16px; }
.calc-keys .ck-fn:active { background: #d5d8da; }
.calc-keys .ck-op { color: #e06c00; font-weight: 600; }
/* Pair cell: dos medios botones en el espacio de uno (paréntesis) */
.calc-keys .ck-pair {
    display: flex;
    background: #e8eaec;
}
.calc-keys .ck-pair button {
    flex: 1; height: 58px; background: transparent; border: none;
    font-size: 15px; cursor: pointer; color: var(--netza-ink-2);
    transition: background 0.1s; user-select: none; -webkit-user-select: none;
    border-right: 1px solid var(--netza-stone);
}
.calc-keys .ck-pair button:last-child { border-right: none; }
.calc-keys .ck-pair button:active { background: #d5d8da; }
/* Tecla igual — fondo naranja */
.calc-keys .ck-eq {
    background: #e06c00; color: #fff; font-weight: 700; font-size: 22px;
}
.calc-keys .ck-eq:active { background: #c05500; }
/* Load button */
.calc-load-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 15px; background: var(--netza-positivo); color: #fff;
    border: none; font-size: 14px; font-weight: 600; cursor: pointer;
    letter-spacing: 0.3px; transition: opacity 0.15s;
}
.calc-load-btn:hover { opacity: 0.88; }
.calc-load-btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 400px) {
    .calc-box { width: 96vw; }
    .calc-keys button { height: 52px; font-size: 16px; }
    .calc-keys .ck-pair button { height: 52px; }
    .calc-num-line { font-size: 30px; }
}