:root {
    --verde: #1b365d;
    --verde-oscuro: #12243f;
    --crema: #f5f7fa;
    --beige: #e6ebf2;
    --tierra: #23487a;
    --texto: #1a2433;
    --linea: #cdd5e0;
    --radio: 8px;
    --foco: #3d6ca8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, sans-serif;
    background: var(--beige);
    color: var(--texto);
    font-size: 14px;
    line-height: 1.35;
}
a { color: var(--tierra); }
.top {
    background: linear-gradient(135deg, var(--verde), var(--verde-oscuro));
    color: #fff;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.top-izq { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.top-izq strong { font-size: .95rem; }
.top-izq span { font-size: .75rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
.top nav {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.top a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .78rem;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
}
.top a:hover { background: rgba(255,255,255,.22); }
.top a.on { background: #fff; color: var(--verde-oscuro); }
.caja {
    max-width: 1280px;
    margin: 10px auto;
    background: var(--crema);
    padding: 12px 14px 16px;
    border-radius: var(--radio);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    overflow-x: auto;
}
h1 { margin: 0 0 8px; font-size: 1.15rem; color: var(--tierra); }
h2 { margin: 14px 0 8px; font-size: 1rem; color: var(--tierra); }
h3 { margin: 10px 0 6px; font-size: .95rem; }
.filtros, .form-linea {
    display: flex;
    gap: 6px 8px;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 10px;
}
label { display: flex; flex-direction: column; font-size: .72rem; font-weight: 600; gap: 3px; flex: 0 1 160px; min-width: 0; }
.filtros > label:has(input[type="number"]),
.form-linea > label:has(input[type="number"]),
.filtros > label:has(input[type="date"]) {
    flex: 0 0 88px;
}
.filtros > label:has(.busca-wrap),
.form-linea > label:has(.busca-wrap) {
    flex: 1 1 240px;
    max-width: 420px;
}
label.ancho { flex: 1 1 100%; max-width: none; }
.ruta-fila { display: flex; gap: 6px; align-items: center; }
.ruta-fila input { flex: 1 1 auto; }
.ruta-fila button { flex: 0 0 auto; }
input, select, textarea {
    padding: 6px 7px;
    border: 1px solid var(--linea);
    border-radius: 6px;
    font: inherit;
    width: 100%;
    min-width: 0;
    background: #fff;
}
button, .boton {
    background: #e8eef6;
    color: #2a4060;
    border: 1px solid #c5d0de;
    border-radius: 6px;
    padding: 6px 11px;
    font-weight: 600;
    font-size: .78rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    flex: 0 0 auto;
    line-height: 1.2;
}
button:hover, .boton:hover { background: #dce6f2; }
button:focus, .boton:focus, input:focus, select:focus, .busca-txt:focus {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}
button.sec, .boton.sec { background: #eef2f7; color: #3a4a5e; }
button.peligro { background: #f4ecec; color: #8a4444; border-color: #e0caca; }
button.peligro:hover { background: #eadfdf; }
table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: .72rem;
    font-family: Nunito, "Segoe UI", "Trebuchet MS", sans-serif;
    letter-spacing: .01em;
    border-radius: 8px;
    overflow: hidden;
}
th, td { border: 1px solid var(--linea); padding: 4px 6px; text-align: left; }
th { background: #e8eef6; }
th[data-ordena] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-ordena]:hover { background: #d5e0ee; }
th[data-ordena]::after { content: " ▾"; color: #8a96a8; font-size: .75em; }
th[data-dir="asc"]::after { content: " ▲"; color: var(--tierra); }
th[data-dir="desc"]::after { content: " ▼"; color: var(--tierra); }
tr.madre { color: #c00; font-weight: 700; }
td input, td select { min-width: 0; width: 100%; }
.aviso { padding: 7px 10px; border-radius: 6px; margin-bottom: 10px; font-size: .86rem; }
.aviso.ok { background: #e5f3df; }
.aviso.error { background: #f8d7d7; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.num input { text-align: right; }
.cen { text-align: center; }
.muted { color: #777; font-size: .8rem; margin: 0 0 8px; }
.estado {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.estado.abierto { background: #e5f3df; color: #2f6b2f; }
.estado.cerrado { background: #f8d7d7; color: #8a4444; }
.grid-exporta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-exporta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-exporta .filtros { margin-bottom: 0; }
.busca-wrap { position: relative; min-width: 0; width: 100%; }
.busca-txt { width: 100%; min-width: 0; }
.busca-origen { position: absolute; left: -9999px; width: 1px; height: 1px; }
.busca-lista {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    max-height: 220px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--linea);
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.busca-lista li { padding: 6px 8px; cursor: pointer; }
.busca-lista li:hover,
.busca-lista li.on { background: #e8eef6; }
.atajos { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.atajos a { font-weight: 700; font-size: .82rem; }
.pestanas {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--linea);
    margin: 0 0 12px;
}
.pestanas a {
    padding: 7px 12px;
    text-decoration: none;
    color: #5a6a80;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    border: 1px solid transparent;
    border-bottom: 0;
}
.pestanas a:hover { background: #e8eef6; color: var(--tierra); }
.pestanas a.on {
    background: #fff;
    color: var(--tierra);
    border-color: var(--linea);
    margin-bottom: -1px;
}
.pestaña { display: none; }
.pestaña.on { display: block; }
.tabla-form { margin-bottom: 8px; }
.tabla-form th:first-child, .tabla-form td:first-child { width: 64px; }
.tabla-form th.num, .tabla-form td.num { width: 96px; }
.tabla-form tr.alta { background: #f4f7fb; }
.tabla-form .accs { white-space: nowrap; width: 1%; text-align: right; }
.tabla-form .accs button { padding: 4px 8px; }
.form-linea.alta { background: #fff; border: 1px dashed var(--linea); padding: 8px; border-radius: var(--radio); }
.seccion-conv { background: #fff; border: 1px solid var(--linea); padding: 10px 12px; margin-bottom: 10px; border-radius: var(--radio); }
.seccion-conv .form-linea { margin-bottom: 6px; }
.seccion-conv h2, .seccion-conv h3 { margin-top: 0; }
.conv-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 14px; }
.conv-grid h3 { font-size: .78rem; color: #5a6a80; margin: 4px 0 6px; }
.tarjeta {
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 12px 14px;
}
.tarjeta h2 { margin-top: 0; }
.tarjeta label { flex: 1 1 100%; max-width: none; margin-bottom: 8px; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 8px; }
.checks label { flex-direction: row; align-items: center; font-weight: 500; font-size: .8rem; flex: 0 1 auto; }
.checks input { width: auto; min-width: auto; }
.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #0d1b2e;
}
.login-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(760px, 100%);
    min-height: 380px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.login-lado {
    background: linear-gradient(165deg, #12243f 0%, #1b365d 55%, #0d1b2e 100%);
    color: #fff;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-lado h1 { color: #fff; margin: 0 0 8px; font-size: 1.45rem; }
.login-lado p { margin: 0; color: #b8c5d6; font-size: .9rem; line-height: 1.45; }
.login-caja {
    background: #fff;
    padding: 32px 28px;
    width: auto;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-marca {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #2c5282;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .9rem;
    margin-bottom: 16px;
    letter-spacing: .04em;
}
.login-caja h2 { margin: 0 0 14px; font-size: 1.15rem; color: #12243f; }
.login-caja form { display: grid; gap: 10px; }
.login-caja button {
    width: 100%;
    margin-top: 6px;
    padding: 10px;
    background: var(--verde);
    color: #fff;
    border: 0;
}
.login-caja .muted { margin: 12px 0 0; color: #7a8696; }
.login-caja p { margin: 0 0 10px; }

@media (max-width: 900px) {
    .grid-2, .grid-exporta, .conv-grid { grid-template-columns: 1fr; }
    .caja { margin: 8px; padding: 10px; }
    .login-panel { grid-template-columns: 1fr; min-height: 0; }
    .login-lado { padding: 22px 22px 16px; }
    .login-caja { padding: 20px 22px 24px; }
}
@media (max-width: 640px) {
    body { font-size: 13px; }
    .top { padding: 7px 8px; }
    .top a { padding: 4px 7px; font-size: .72rem; }
    h1 { font-size: 1.05rem; }
    table { font-size: .78rem; }
    th, td { padding: 4px 5px; }
    label { flex: 1 1 100%; max-width: none; }
    .filtros > label:has(input[type="number"]),
    .form-linea > label:has(input[type="number"]) { flex: 1 1 46%; }
    .filtros > label:has(.busca-wrap),
    .form-linea > label:has(.busca-wrap) { flex: 1 1 100%; max-width: none; }
}