* {
    box-sizing: border-box;
}

:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --primary: #1f5eff;
    --primary-dark: #194bcb;
    --line: #e5e7eb;
    --danger: #dc2626;
    --sidebar: #111827;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--text);
}

.app-bg {
    background: var(--bg);
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 245px;
    background: var(--sidebar);
    color: white;
    padding: 24px 18px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
}

.brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #111827;
    font-weight: 800;
}

.brand strong,
.brand span {
    display: block;
}

.brand span {
    color: #9ca3af;
    font-size: 13px;
}

.nav-link {
    display: block;
    text-decoration: none;
    color: #cbd5e1;
    padding: 12px 14px;
    border-radius: 10px;
    margin: 5px 0;
}

.nav-link:hover,
.nav-link.active {
    background: #1f2937;
    color: #fff;
}

.main {
    margin-left: 245px;
    padding: 30px;
}

.topbar {
    margin-bottom: 24px;
}

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

.topbar p {
    margin: 6px 0 0;
    color: var(--muted);
}

.welcome-card {
    background: linear-gradient(135deg, #ffffff, #eef4ff);
    border: 1px solid #dce6ff;
    border-radius: 18px;
    padding: 34px;
    min-height: 220px;
    display: flex;
    align-items: center;
}

.welcome-card h2 {
    font-size: 30px;
    margin: 8px 0 10px;
}

.welcome-card p {
    max-width: 700px;
    color: var(--muted);
    line-height: 1.6;
}

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--primary);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.step-card,
.form-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.step-card {
    padding: 22px;
}

.step-card > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: #eaf0ff;
    color: var(--primary);
    border-radius: 50%;
    font-weight: 700;
}

.step-card h3 {
    margin-bottom: 6px;
}

.step-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.form-card {
    overflow: hidden;
}

.form-section {
    padding: 26px;
    border-bottom: 1px solid var(--line);
}

.section-title {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.section-title > span {
    background: #eaf0ff;
    color: var(--primary);
    border-radius: 8px;
    font-weight: 800;
    padding: 7px 9px;
    font-size: 12px;
}

.section-title h2 {
    margin: 0;
    font-size: 19px;
}

.section-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.form-grid {
    display: grid;
    gap: 16px;
}

.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.span-2 {
    grid-column: span 2;
}

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

.field.grow {
    flex: 1;
}

.field label {
    font-size: 13px;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    padding: 11px 12px;
    background: #fff;
    font: inherit;
    color: var(--text);
    outline: none;
}

textarea {
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(31, 94, 255, .10);
}

input[readonly] {
    background: #f8fafc;
    font-weight: 700;
}

select:disabled {
    background: #f8fafc;
    color: #9ca3af;
    cursor: not-allowed;
}

.hidden {
    display: none !important;
}

/* Ubicación del locador */
.location-box {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 18px;
    border: 1px solid #dbe3ef;
    border-radius: 13px;
    background: #f8fafc;
}

.location-box h3 {
    margin: 0 0 5px;
    font-size: 15px;
}

.location-box > p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.location-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 14px;
}

.location-preview {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding: 12px 14px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 13px;
    line-height: 1.5;
}

.location-preview strong {
    display: block;
    margin-bottom: 3px;
    color: #1e40af;
}

.location-status {
    grid-column: 1 / -1;
    margin-top: -2px;
    font-size: 12px;
    color: var(--muted);
}

.location-status.success {
    color: #15803d;
    font-weight: 600;
}

.location-status.error {
    color: #b91c1c;
    font-weight: 600;
}


/* Modo automático según cantidad de entregables */
.deliverable-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.deliverable-title-row h3 {
    margin: 0;
}

.deliverable-mode {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.deliverable-mode.one {
    background: #ecfdf3;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.deliverable-mode.multiple {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.dynamic-box {
    margin-top: 20px;
    border: 1px dashed #cbd5e1;
    background: #fafcff;
    border-radius: 13px;
    padding: 18px;
}

.dynamic-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}

.dynamic-head h3 {
    margin: 0;
}

.dynamic-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.repeat-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    padding: 14px 0;
    border-top: 1px solid #e5e7eb;
}

.repeat-row:first-child {
    border-top: none;
}

.entregable-row .field {
    flex: 1;
}

.btn {
    border: none;
    border-radius: 9px;
    padding: 11px 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: #eef2ff;
    color: #3730a3;
}

.btn-light {
    background: #f3f4f6;
    color: #374151;
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.btn-icon.danger {
    background: #fee2e2;
    color: var(--danger);
}

.form-actions {
    padding: 22px 26px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #fafafa;
}

/* Vista previa */
.preview-bg {
    background: #e5e7eb;
    min-height: 100vh;
    padding: 90px 20px 40px;
}

.preview-toolbar {
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    height: 68px;
    background: white;
    border-bottom: 1px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
}

.preview-toolbar > div {
    text-align: center;
}

.preview-toolbar > div strong,
.preview-toolbar > div span {
    display: block;
}

.preview-toolbar > div span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.paper {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 12mm 20mm 18mm;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10.2pt;
    line-height: 1.24;
    color: #000;
}

.contract-header {
    display: grid;
    grid-template-columns: 55px 1fr 65px;
    align-items: center;
    gap: 10px;
}

.contract-header img {
    max-width: 100%;
    height: 55px;
    object-fit: contain;
}

.institution {
    text-align: center;
    font-family: Georgia, serif;
    font-size: 16px;
    font-weight: 800;
    text-decoration: underline;
}

.header-rule {
    margin: -5px 65px 18px;
    border-top: 4px solid #222;
    border-bottom: 1px solid #222;
    height: 6px;
}

.contract-title {
    font-size: 10.5pt;
    text-align: center;
    text-decoration: underline;
    margin: 0 0 12px;
}

.paper h2 {
    font-size: 10pt;
    text-decoration: underline;
    margin: 12px 0 4px;
}

.paper p {
    text-align: justify;
    margin: 0 0 8px;
}

.paper p.compact {
    margin-bottom: 2px;
}

.paper ul {
    margin: 3px 0 8px 22px;
    padding: 0;
}

.paper li {
    margin-bottom: 3px;
    text-align: justify;
}

.signature {
    width: 300px;
    margin: 60px 0 0 auto;
    text-align: center;
}

.signature-line {
    border-top: 1px solid #000;
    margin-bottom: 5px;
}

.signature strong,
.signature span {
    display: block;
    font-size: 9pt;
}

/* Consulta DNI */
.input-action {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.input-action input {
    flex: 1;
}

.btn-inline {
    white-space: nowrap;
}

.field-help {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.status-success {
    color: #15803d;
    font-weight: 600;
}

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

.status-loading {
    color: #1d4ed8;
    font-weight: 600;
}

/* Foto a texto */
.ocr-box {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    background: #f8fafc;
}

.ocr-box h3 {
    margin-top: 0;
    margin-bottom: 6px;
}

.ocr-box > p {
    margin-top: 0;
    color: var(--muted);
}

.ocr-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 20px;
    align-items: start;
}

.ocr-grid .btn {
    margin-top: 10px;
}

@media (max-width: 1050px) {
    .sidebar {
        position: static;
        width: 100%;
    }

    .main {
        margin-left: 0;
    }

    .steps-grid,
    .cols-2,
    .cols-3,
    .cols-4 {
        grid-template-columns: 1fr;
    }

    .span-2 {
        grid-column: span 1;
    }

    .repeat-row {
        align-items: stretch;
        flex-direction: column;
    }

    .location-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .input-action {
        flex-direction: column;
    }
}

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

    .location-box {
        padding: 14px;
    }
}


@media (max-width: 650px) {
    .deliverable-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .deliverable-mode {
        white-space: normal;
    }
}

/* ============================================================
   VERSION MULTIUSUARIO / ADMIN
   ============================================================ */
.sidebar-user {
    padding: 13px 14px;
    margin: -12px 0 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 12px;
}
.sidebar-user strong,
.sidebar-user span { display:block; }
.sidebar-user strong { font-size: 13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user span { margin-top:3px; font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:.6px; }
.nav-logout { margin-top:20px; color:#fecaca; }
.nav-logout:hover { background:#3f1d24; color:#fff; }

.dashboard-wrap { padding: 0; }
.dashboard-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.dashboard-head h1 { margin:4px 0 0; font-size:30px; }
.dashboard-head p { margin:5px 0 0; color:var(--muted); }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.stat-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:0 5px 18px rgba(16,24,40,.05); }
.stat-label { display:block; color:#667085; font-size:13px; margin-bottom:7px; }
.stat-value { font-size:28px; line-height:1; font-weight:800; color:#101828; }
.filters-card { background:#fff; padding:18px; border-radius:16px; border:1px solid var(--line); box-shadow:0 5px 18px rgba(16,24,40,.05); margin-bottom:20px; }
.filters-grid { display:grid; grid-template-columns:2fr 1fr auto; gap:12px; align-items:end; }
.admin-filter-grid { grid-template-columns:2fr 1.1fr .8fr auto; }
.filter-actions { display:flex; gap:8px; align-items:center; }
.table-card { background:#fff; border-radius:16px; border:1px solid var(--line); box-shadow:0 5px 18px rgba(16,24,40,.05); overflow:hidden; }
.table-scroll { overflow-x:auto; }
.contracts-table { width:100%; border-collapse:collapse; min-width:1050px; }
.contracts-table th,.contracts-table td { padding:13px 14px; border-bottom:1px solid #eaecf0; text-align:left; vertical-align:middle; font-size:13px; }
.contracts-table th { background:#f8fafc; color:#475467; font-weight:700; white-space:nowrap; }
.contracts-table tbody tr:hover { background:#f9fbfd; }
.contrato-numero,.locador-nombre { font-weight:700; color:#101828; }
.text-muted { color:#667085; font-size:12px; margin-top:3px; }
.results-info { padding:13px 16px; border-bottom:1px solid #eaecf0; color:#667085; font-size:13px; }
.empty-state { padding:50px 20px; text-align:center; color:#667085; }
.estado,.role-badge,.account-status,.legacy-badge { display:inline-flex; align-items:center; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:700; white-space:nowrap; }
.estado-vigente,.account-activo { background:#ecfdf3; color:#027a48; }
.estado-vencido,.account-inactivo { background:#fef3f2; color:#b42318; }
.estado-proximo { background:#fffaeb; color:#b54708; }
.role-admin { background:#eef4ff; color:#1d4ed8; }
.role-usuario { background:#f2f4f7; color:#344054; }
.legacy-badge { background:#f2f4f7; color:#667085; }
.btn-small { display:inline-flex; align-items:center; justify-content:center; padding:7px 11px; border-radius:9px; text-decoration:none; font-size:12px; font-weight:700; border:1px solid #d0d5dd; background:#fff; color:#344054; cursor:pointer; }
.btn-small:hover { background:#f2f4f7; }
.btn-pdf { background:#eff8ff; border-color:#b2ddff; color:#175cd3; }

.alert { padding:13px 15px; border-radius:10px; margin-bottom:18px; font-size:14px; }
.alert-danger { background:#fef3f2; border:1px solid #fecdca; color:#b42318; }
.alert-success { background:#ecfdf3; border:1px solid #abefc6; color:#067647; }

.login-bg { min-height:100vh; margin:0; display:grid; place-items:center; background:radial-gradient(circle at 20% 20%,#e7efff 0,transparent 32%),linear-gradient(135deg,#f8fafc,#eef2f7); padding:24px; }
.login-shell { width:min(920px,100%); min-height:520px; display:grid; grid-template-columns:1.05fr .95fr; background:#fff; border:1px solid #e5e7eb; border-radius:24px; overflow:hidden; box-shadow:0 24px 60px rgba(15,23,42,.12); }
.login-brand-panel { padding:54px; background:linear-gradient(145deg,#111827,#1d2a44); color:#fff; display:flex; flex-direction:column; justify-content:center; }
.login-brand-panel .eyebrow { color:#93c5fd; }
.login-brand-panel h1 { font-size:38px; line-height:1.08; margin:12px 0 15px; }
.login-brand-panel p { color:#cbd5e1; line-height:1.7; max-width:420px; }
.login-logo { width:58px; height:58px; display:grid; place-items:center; border-radius:16px; background:#fff; color:#111827; font-weight:900; font-size:20px; margin-bottom:34px; }
.login-card { padding:54px 46px; display:flex; flex-direction:column; justify-content:center; }
.login-card-head h2 { margin:0; font-size:28px; }
.login-card-head p { color:#667085; margin:7px 0 24px; line-height:1.5; }
.login-submit { width:100%; margin-top:22px; min-height:44px; }
.first-admin-box { margin-top:24px; padding:14px; border-radius:12px; background:#fffaeb; border:1px solid #fedf89; display:grid; gap:3px; font-size:13px; }
.first-admin-box span { color:#667085; }
.first-admin-box a { color:#175cd3; font-weight:700; margin-top:5px; }
.setup-card { width:min(540px,100%); background:#fff; border:1px solid #e5e7eb; border-radius:20px; padding:34px; box-shadow:0 20px 50px rgba(15,23,42,.1); }
.setup-card h1 { margin:8px 0; }
.setup-card > p { color:#667085; margin-bottom:22px; }
.setup-card form { display:grid; gap:15px; }

.admin-two-columns { display:grid; grid-template-columns:330px minmax(0,1fr); gap:20px; align-items:start; }
.user-create-card .form-section { border:0; }
.user-create-card form { display:grid; gap:14px; }
.users-table { min-width:850px; }
.user-actions { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.user-actions form { margin:0; }
.password-reset-form { display:flex; gap:6px; }
.password-reset-form input { width:155px; padding:7px 9px; font-size:12px; }

@media (max-width:1100px) {
    .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .admin-filter-grid,.filters-grid { grid-template-columns:1fr 1fr; }
    .admin-two-columns { grid-template-columns:1fr; }
}
@media (max-width:760px) {
    .dashboard-head { flex-direction:column; align-items:flex-start; }
    .stats-grid,.admin-filter-grid,.filters-grid { grid-template-columns:1fr; }
    .filter-actions { width:100%; }
    .login-shell { grid-template-columns:1fr; }
    .login-brand-panel { display:none; }
    .login-card { padding:34px 24px; }
}