* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background: #f4f6f9;
    color: #1f2937;
}

.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    background: #111827;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.brand {
    padding: 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-title {
    font-size: 20px;
    font-weight: 700;
}

.brand-subtitle {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 4px;
}

.menu {
    padding: 14px;
    flex: 1;
}

.menu a {
    display: block;
    padding: 12px 14px;
    color: #d1d5db;
    text-decoration: none;
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: 15px;
}

.menu a:hover,
.menu a.active {
    background: #2563eb;
    color: #fff;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-footer a {
    color: #fca5a5;
    text-decoration: none;
}

.main {
    flex: 1;
    min-width: 0;
}

.topbar {
    background: #fff;
    padding: 20px 26px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar h1 {
    margin: 0;
    font-size: 24px;
}

.topbar p {
    margin: 4px 0 0;
    color: #6b7280;
}

.user-box {
    background: #f3f4f6;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
}

.content {
    padding: 24px;
}

.card {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #111827, #1e3a8a);
}

.login-card {
    width: 100%;
    max-width: 390px;
    background: #fff;
    padding: 30px;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.login-card h1 {
    margin: 0;
    font-size: 26px;
}

.login-card p {
    color: #6b7280;
    margin-bottom: 22px;
}

.login-card label {
    display: block;
    margin-top: 14px;
    font-weight: 600;
    font-size: 14px;
}

.login-card input {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    margin-top: 6px;
}

.login-card button {
    width: 100%;
    margin-top: 22px;
    padding: 13px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.alert {
    background: #fee2e2;
    color: #991b1b;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

    .menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .menu a {
        margin-bottom: 0;
        text-align: center;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.card-header h2 {
    margin: 0;
}

.card-header p {
    margin: 4px 0 0;
    color: #6b7280;
}

.filters {
    display: grid;
    grid-template-columns: 1.5fr 220px 220px auto auto;
    gap: 10px;
    margin-bottom: 18px;
}

.filters input,
.filters select {
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
}

.filters button,
.btn-secondary {
    padding: 11px 14px;
    border-radius: 10px;
    border: 0;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.btn-secondary {
    background: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

.data-table th {
    background: #f9fafb;
    text-align: left;
    font-size: 13px;
    color: #374151;
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.data-table td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    vertical-align: top;
}

.badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 12px;
    font-weight: 700;
}

.empty {
    text-align: center;
    color: #6b7280;
    padding: 30px !important;
}

@media (max-width: 900px) {
    .filters {
        grid-template-columns: 1fr;
    }

    .data-table {
        min-width: 0;
    }

    .data-table thead {
        display: none;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tr {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        margin-bottom: 12px;
        padding: 10px;
    }

    .data-table td {
        border-bottom: 0;
        padding: 7px 4px;
    }

    .data-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #6b7280;
        display: block;
        margin-bottom: 2px;
    }
}
.btn-primary {
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    padding: 11px 14px;
    border-radius: 10px;
    font-weight: 700;
}

.btn-table {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111827;
    color: #fff;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
}

.form-field textarea {
    resize: vertical;
}

.full {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

@media (max-width: 1100px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }
}
.badge.ingreso {
    background: #dcfce7;
    color: #166534;
}

.badge.egreso {
    background: #fee2e2;
    color: #991b1b;
}

.badge.ajuste {
    background: #fef3c7;
    color: #92400e;
}
.qr-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 18px;
}

.qr-box label {
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

.qr-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.qr-row input {
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 16px;
}

#qrMsg {
    display: block;
    margin-top: 8px;
    color: #374151;
}

@media (max-width: 700px) {
    .qr-row {
        grid-template-columns: 1fr;
    }
}
/* =========================
   SIDEBAR
========================= */

.sidebar {
    width: 260px;
    min-width: 260px;
    background: #111827;
    color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
}

.brand-title {
    font-size: 18px;
    font-weight: 700;
}

.brand-subtitle {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.menu {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #d1d5db;
    padding: 13px 14px;
    border-radius: 12px;
    transition: .2s;
    font-size: 15px;
    font-weight: 500;
}

.menu a:hover {
    background: rgba(255,255,255,.06);
}

.menu a.active {
    background: #2563eb;
    color: #fff;
}

.menu-icon {
    width: 20px;
    text-align: center;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-user {
    margin-bottom: 14px;
}

.sidebar-user-name {
    font-weight: 700;
    font-size: 14px;
}

.sidebar-user-role {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 2px;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fca5a5;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
}

/* =========================
   MOBILE NAV
========================= */

.bottom-nav {
    display: none;
}

@media (max-width: 900px) {

    .sidebar {
        display: none;
    }

    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 72px;
        background: #111827;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border-top: 1px solid rgba(255,255,255,.08);
        z-index: 9999;
    }

    .bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #d1d5db;
        font-size: 12px;
        gap: 4px;
    }

    .bottom-nav a.active {
        color: #60a5fa;
    }

    .bottom-nav span {
        font-size: 20px;
    }

    .main {
        padding-bottom: 90px;
    }

}

/* =========================
   MEJORAS MOBILE / RETAIL
========================= */

.alert.success {
    background: #dcfce7;
    color: #166534;
}

code {
    background: #f3f4f6;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 12px;
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.mini-kpi {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

.mini-kpi span {
    color: #6b7280;
    font-size: 13px;
}

.mini-kpi strong {
    display: block;
    margin-top: 6px;
    font-size: 24px;
}

.filters-extended {
    grid-template-columns: 1.6fr 180px 180px 220px auto auto;
}

.scanner-btn {
    margin-top: 10px;
    width: 100%;
}

.scanner-box {
    margin-top: 14px;
    background: #111827;
    padding: 14px;
    border-radius: 14px;
}

#reader {
    width: 100%;
    max-width: 360px;
    margin: 0 auto 12px auto;
    overflow: hidden;
    border-radius: 12px;
}

#reader video {
    border-radius: 12px;
}

input,
select,
textarea,
button {
    font-size: 16px;
}

@media (max-width: 900px) {
    body {
        background: #eef2f7;
    }

    .content {
        padding: 14px;
    }

    .topbar {
        padding: 14px;
    }

    .topbar h1 {
        font-size: 20px;
    }

    .user-box {
        display: none;
    }

    .card {
        padding: 16px;
        border-radius: 16px;
        box-shadow: 0 3px 12px rgba(0,0,0,.05);
    }

    .card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary,
    .filters button {
        min-height: 48px;
        width: 100%;
        justify-content: center;
        display: inline-flex;
        align-items: center;
    }

    .filters,
    .filters-extended {
        grid-template-columns: 1fr;
    }

    .kpi-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mini-kpi {
        padding: 14px;
    }

    .mini-kpi strong {
        font-size: 20px;
    }

    .data-table tr {
        box-shadow: 0 2px 10px rgba(15,23,42,.04);
    }

    .data-table td {
        display: grid;
        grid-template-columns: 112px 1fr;
        gap: 8px;
        align-items: start;
        font-size: 14px;
    }

    .data-table td::before {
        margin: 0;
    }

    .form-field input,
    .form-field select,
    .form-field textarea,
    .filters input,
    .filters select,
    .qr-row input {
        min-height: 48px;
        border-radius: 12px;
    }

    .form-actions {
        position: sticky;
        bottom: 82px;
        background: rgba(238,242,247,.92);
        backdrop-filter: blur(8px);
        padding-top: 10px;
        z-index: 20;
    }
}
.brand-logo {
    width: 110px;
    height: 122px;
    border-radius: 14px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.brand-logo img {
    width: 77px;
    height: 85px;
    object-fit: contain;
    display: block;
}
/* =========================
   FIX FILTROS RESPONSIVE
========================= */

.filters,
.filter-bar,
.filtros,
.form-filters {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    overflow: visible;
}

.filters input,
.filters select,
.filter-bar input,
.filter-bar select,
.filtros input,
.filtros select,
.form-filters input,
.form-filters select {
    width: 100%;
    min-width: 0;
    height: 44px;
}

.filters .btn,
.filter-bar .btn,
.filtros .btn,
.form-filters .btn,
.filters button,
.filter-bar button,
.filtros button,
.form-filters button {
    height: 44px;
    white-space: nowrap;
}

/* Evita que la card empuje horizontalmente */
.card,
.content,
.main {
    max-width: 100%;
    overflow-x: hidden;
}

/* La tabla sí puede tener scroll horizontal */
.table-responsive,
.table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

/* Tablet */
@media (max-width: 1100px) {
    .filters,
    .filter-bar,
    .filtros,
    .form-filters {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .filters,
    .filter-bar,
    .filtros,
    .form-filters {
        grid-template-columns: 1fr;
    }

    .filters .btn,
    .filter-bar .btn,
    .filtros .btn,
    .form-filters .btn,
    .filters button,
    .filter-bar button,
    .filtros button,
    .form-filters button {
        width: 100%;
    }
}

.pagination-summary {
    margin: 14px 0;
    font-size: 14px;
    color: #64748b;
}

.pagination {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pagination span {
    font-weight: 700;
    color: #334155;
}

.pagination .disabled {
    pointer-events: none;
    opacity: .45;
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.subcard {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 18px;
}

.subcard h3 {
    margin: 0 0 14px;
    font-size: 18px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.form-grid label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.form-grid input,
.form-grid select {
    width: 100%;
    height: 44px;
    margin-top: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    background: #fff;
}

@media (max-width: 900px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================
   LOGO LOGIN CRILUM
========================== */

.login-logo{
    display:flex;
    justify-content:center;
    align-items:center;

    margin-top:0;
    margin-bottom:12px;

    width:100%;
}

.login-logo img{

    /* tamaño logo */
    width:280px;
    max-width:100%;
    height:auto;

    display:block;

    /* efectos opcionales */
    filter: drop-shadow(
        0 8px 18px rgba(0,0,0,.15)
    );

    transition:all .25s ease;
}

/* efecto hover opcional */
.login-logo img:hover{
    transform:scale(1.03);
}

/* ==========================
   TITULO
========================== */

.login-card h1{

    margin:0 0 10px;

    text-align:center;

    font-size:34px;
    font-weight:700;

    color:#0f172a;
}

/* ==========================
   SUBTITULO
========================== */

.login-card p{

    margin:0 0 24px;

    text-align:center;

    font-size:16px;
    line-height:1.4;

    color:#64748b;
}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width:768px){

    .login-logo{
        margin-bottom:10px;
    }

    .login-logo img{
        width:120px;
    }

    .login-card h1{
        font-size:28px;
    }

    .login-card p{
        font-size:14px;
    }
}

/* ==========================
   CONDICIÓN MATERIAL
========================== */

.badge-condicion-utilizable {
    background: #dcfce7;
    color: #166534;
}

.badge-condicion-rayado {
    background: #fef3c7;
    color: #92400e;
}

.badge-condicion-danado {
    background: #ffedd5;
    color: #c2410c;
}

.badge-condicion-descarte {
    background: #fee2e2;
    color: #991b1b;
}

.badge-estado {
    background: #e0f2fe;
    color: #075985;
}

.mini-kpi-alert {
    border: 1px solid #fecaca;
    background: #fff1f2;
}

.mini-kpi-alert strong {
    color: #b91c1c;
}

/* ==========================
   EGRESO / STOCK DETAIL
========================== */

.stock-detail {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    display: grid;
    gap: 6px;
    font-size: 14px;
}

.alert-warning {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    margin-top: 10px;
}

.qr-msg-warn {
    color: #b45309;
    font-weight: 700;
}

/* ==========================
   IMPRESIÓN ZEBRA
========================== */

.print-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.print-copies-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

.print-copies-input {
    width: 72px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}

.print-msg {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #374151;
}

.print-msg-error {
    color: #b91c1c;
    font-weight: 600;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: grid;
    place-items: center;
    padding: 16px;
    z-index: 1000;
}

.modal-overlay[hidden] {
    display: none !important;
}

.modal-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.modal-card h3 {
    margin: 0 0 6px;
}

.modal-subtitle {
    margin: 0 0 14px;
    color: #6b7280;
    font-size: 14px;
    word-break: break-all;
}

@media (max-width: 900px) {
    .data-table .btn-table {
        width: 100%;
        margin-top: 4px;
    }

    .print-actions {
        flex-direction: column;
        align-items: stretch;
    }
}
/* Circuito OP */
.op-tabs,.op-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:16px}.op-toolbar label{display:grid;gap:5px}.op-toolbar select{min-width:260px;padding:10px;border:1px solid #d1d5db;border-radius:10px}.op-inline-form{display:grid;grid-template-columns:minmax(130px,1fr) minmax(220px,2fr) auto auto;gap:6px;margin-top:8px;align-items:center}.op-inline-form input,.op-inline-form select,.op-length-form input{padding:7px;border:1px solid #d1d5db;border-radius:7px}.op-check-label{white-space:nowrap;font-size:12px}.op-length-form{display:flex;gap:5px}.op-length-form input{width:100px}.op-row-warning{background:#fff8e1}.op-scan-grid{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(320px,1.3fr);gap:24px}.input-action{display:flex;gap:8px}.input-action input{flex:1}#opCamera{width:100%;max-width:420px;margin-top:12px;border-radius:12px;background:#111}.op-recovery-summary{padding:14px;border:1px solid #dbeafe;background:#eff6ff;border-radius:10px}.btn-table:disabled,.btn-primary:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:900px){.op-scan-grid{grid-template-columns:1fr}.op-inline-form{grid-template-columns:1fr}.op-toolbar>*{width:100%}.op-toolbar select{min-width:0;width:100%}}

/* Circuito OP: grupo y submenú lateral */
.menu-group {
    margin: 4px 8px;
    border-radius: 12px;
}

.menu-group-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 8px;
    color: #cbd5e1;
    font-weight: 700;
}

.menu-group.active .menu-group-title {
    color: #ffffff;
}

.menu-submenu {
    display: grid;
    gap: 4px;
    padding: 0 0 8px 38px;
}

.menu-submenu a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 9px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
}

.menu-submenu a:hover,
.menu-submenu a.active {
    color: #ffffff;
    background: #2563eb;
}

.menu-submenu-dot {
    font-size: 16px;
    line-height: 1;
}

/* Circuito OP - Ingreso optimizado para celular */
.op-ingreso-card {
    max-width: 1120px;
    margin-inline: auto;
}

.op-scan-panel {
    min-width: 0;
}

.op-camera-main {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
}

.op-manual-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.op-manual-separator::before,
.op-manual-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e2e8f0;
}

@media (max-width: 700px) {
    .op-ingreso-card {
        padding: 14px;
        border-radius: 14px;
    }

    .op-ingreso-header {
        margin-bottom: 14px;
    }

    .op-ingreso-header h2 {
        font-size: 22px;
    }

    .op-ingreso-header p {
        font-size: 14px;
        line-height: 1.4;
    }

    .op-scan-grid {
        gap: 16px;
    }

    .op-camera-main {
        min-height: 58px;
        font-size: 17px;
        border-radius: 12px;
    }

    .input-action {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .input-action input,
    .input-action button {
        width: 100%;
        min-height: 50px;
    }

    #opCamera {
        max-width: none;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        border-radius: 14px;
    }

    .op-recovery-summary {
        padding: 12px;
        font-size: 14px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    #opIngresoForm {
        gap: 12px;
    }

    #opIngresoForm .form-field input,
    #opIngresoForm .form-field select,
    #opIngresoForm .form-field textarea {
        min-height: 52px;
        font-size: 16px;
    }

    #opIngresoForm .form-field textarea {
        min-height: 96px;
    }

    #opIngresoForm .form-actions {
        position: sticky;
        bottom: 78px;
        margin: 0 -6px -6px;
        padding: 10px 6px 6px;
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(8px);
        z-index: 30;
    }

    #opIngresoForm .form-actions .btn-primary {
        min-height: 56px;
        font-size: 16px;
        border-radius: 12px;
    }
}