* {
    box-sizing: border-box;
}

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

.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111827;
}

.login-card {
    width: 380px;
    background: #ffffff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

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

.login-card p {
    margin: 0 0 24px 0;
    color: #6b7280;
}

label {
    display: block;
    margin-top: 14px;
    margin-bottom: 6px;
    font-weight: bold;
}

input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
}

button {
    margin-top: 18px;
    background: #1f2937;
    color: white;
    border: 0;
    padding: 11px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background: #374151;
}

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

.topbar {
    background: #111827;
    color: white;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.topbar nav a {
    color: white;
    text-decoration: none;
    margin-left: 16px;
    font-size: 14px;
}

.topbar nav a:hover {
    text-decoration: underline;
}

.container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.card {
    background: white;
    color: inherit;
    text-decoration: none;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.card:hover {
    border-color: #9ca3af;
}

.card h2 {
    margin-top: 0;
}

.toolbar {
    background: white;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    margin-bottom: 18px;
}

.toolbar button {
    margin-top: 0;
    margin-right: 8px;
}

.placeholder {
    background: white;
    border: 1px dashed #9ca3af;
    padding: 30px;
    border-radius: 10px;
    color: #6b7280;
}

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

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

.page-header h1 {
    margin-bottom: 4px;
}

.page-header p {
    margin-top: 0;
    color: #6b7280;
}

.btn,
.btn-secondary,
.btn-small {
    display: inline-block;
    text-decoration: none;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    font-weight: bold;
}

.btn {
    background: #1f2937;
    color: white;
    padding: 11px 18px;
}

.btn:hover {
    background: #374151;
}

.btn-secondary {
    background: #e5e7eb;
    color: #111827;
    padding: 10px 16px;
}

.btn-secondary:hover {
    background: #d1d5db;
}

.btn-small {
    background: #1f2937;
    color: white;
    padding: 7px 10px;
    font-size: 13px;
}

.btn-danger {
    background: #991b1b;
}

.btn-danger:hover {
    background: #7f1d1d;
}

.search-box {
    display: flex;
    gap: 10px;
    background: white;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    margin-bottom: 18px;
}

.search-box input {
    flex: 1;
}

.search-box button {
    margin-top: 0;
}

.table-card,
.form-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: #f9fafb;
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
}

td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

tr:last-child td {
    border-bottom: 0;
}

.text-right {
    text-align: right;
}

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

.muted {
    color: #6b7280;
    font-size: 13px;
    margin-top: 4px;
}

.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: bold;
}

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

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

.actions {
    white-space: nowrap;
}

.inline-form {
    display: inline;
}

.inline-form button {
    margin-top: 0;
}

.form-card {
    padding: 22px;
}

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

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

textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
}

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

.form-actions button {
    margin-top: 0;
}

select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    background: white;
}

.badge-admin {
    background: #ede9fe;
    color: #5b21b6;
}

.badge-info {
    background: #dbeafe;
    color: #1e40af;
}

.role-help {
    margin-top: 18px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 14px;
    border-radius: 8px;
    color: #4b5563;
    line-height: 1.5;
}

.btn-info {
    background: #1d4ed8;
}

.btn-info:hover {
    background: #1e40af;
}

.btn-ok {
    background: #15803d;
}

.btn-ok:hover {
    background: #166534;
}

/* Ajustes listado Hojas de ruta */
.tabla-hojas {
    table-layout: fixed;
}

.tabla-hojas th,
.tabla-hojas td {
    font-size: 13px;
}

.tabla-hojas .col-id {
    width: 55px;
}

.tabla-hojas .col-fecha {
    width: 105px;
}

.tabla-hojas .col-servicio {
    width: 190px;
}

.tabla-hojas .col-conductor {
    width: 170px;
}

.tabla-hojas .col-vehiculo {
    width: 95px;
}

.tabla-hojas .col-contratante {
    width: 170px;
}

.tabla-hojas .col-estado {
    width: 95px;
}

.tabla-hojas .col-acciones {
    width: 250px;
    text-align: left;
}

.acciones-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    gap: 6px;
    align-items: center;
    justify-content: start;
}

.acciones-grid .inline-form {
    display: block;
}

.acciones-grid .btn-small,
.acciones-grid button.btn-small {
    margin: 0;
    min-width: 58px;
    text-align: center;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.1;
}

.btn-disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

/* Corrección botones listado Hojas de ruta */
.tabla-hojas .col-acciones {
    width: 330px !important;
    min-width: 330px !important;
}

.acciones-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 76px) !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: start !important;
}

.acciones-grid .btn-small,
.acciones-grid button.btn-small,
.acciones-grid a.btn-small,
.acciones-grid span.btn-small {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 28px !important;
    padding: 7px 6px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.acciones-grid .inline-form {
    display: block !important;
    margin: 0 !important;
}

/* Editar naranja */
.acciones-grid a[href*="/editar"] {
    background: #f97316 !important;
    color: #ffffff !important;
}

.acciones-grid a[href*="/editar"]:hover {
    background: #ea580c !important;
}

/* Descargar azul */
.acciones-grid a[href*="/descargar-pdf"] {
    background: #2563eb !important;
    color: #ffffff !important;
}

.acciones-grid a[href*="/descargar-pdf"]:hover {
    background: #1d4ed8 !important;
}

/* Eliminar rojo */
.acciones-grid form[action*="/eliminar"] button {
    background: #dc2626 !important;
    color: #ffffff !important;
}

.acciones-grid form[action*="/eliminar"] button:hover {
    background: #b91c1c !important;
}

/* Eliminar deshabilitado también rojo apagado */
.acciones-grid .btn-disabled {
    background: #ef4444 !important;
    color: #ffffff !important;
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Corrección definitiva botones Hojas de ruta */
.tabla-hojas .col-acciones {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
}

.acciones-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 72px) !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: start !important;
}

.acciones-grid .btn-small,
.acciones-grid button.btn-small,
.acciones-grid a.btn-small,
.acciones-grid span.btn-small {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 28px !important;
    padding: 7px 4px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.acciones-grid .inline-form {
    display: block !important;
    margin: 0 !important;
}

/* Vista oscuro */
.acciones-grid a[target="_blank"]:not([href^="http"]) {
    background: #111827 !important;
    color: #ffffff !important;
}

/* Editar naranja */
.acciones-grid a[href*="/editar"] {
    background: #f97316 !important;
    color: #ffffff !important;
}

.acciones-grid a[href*="/editar"]:hover {
    background: #ea580c !important;
}

/* QR verde */
.acciones-grid form[action*="/publicar-qr"] button {
    background: #15803d !important;
    color: #ffffff !important;
}

/* Descargar azul */
.acciones-grid a[href*="/descargar-pdf"] {
    background: #2563eb !important;
    color: #ffffff !important;
}

.acciones-grid a[href*="/descargar-pdf"]:hover {
    background: #1d4ed8 !important;
}

/* Enlace oscuro */
.acciones-grid a[href^="http"] {
    background: #111827 !important;
    color: #ffffff !important;
}

/* Duplicar oscuro */
.acciones-grid form[action*="/duplicar"] button {
    background: #111827 !important;
    color: #ffffff !important;
}

/* Eliminar rojo */
.acciones-grid form[action*="/eliminar"] button {
    background: #dc2626 !important;
    color: #ffffff !important;
}

.acciones-grid form[action*="/eliminar"] button:hover {
    background: #b91c1c !important;
}

/* Eliminar deshabilitado */
.acciones-grid .btn-disabled {
    background: #dc2626 !important;
    color: #ffffff !important;
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Colores corporativos botones Hoja de Ruta */
.acciones-grid a[href*="/vista-previa"] {
    background: #63A4F7 !important;
    color: #ffffff !important;
}

.acciones-grid a[href*="/vista-previa"]:hover {
    background: #4b8de0 !important;
}

.acciones-grid a[href*="/editar"] {
    background: #FFC000 !important;
    color: #ffffff !important;
}

.acciones-grid a[href*="/editar"]:hover {
    background: #e6ad00 !important;
}

.acciones-grid form[action*="/publicar-qr"] button {
    background: #92D050 !important;
    color: #ffffff !important;
}

.acciones-grid form[action*="/publicar-qr"] button:hover {
    background: #7fbd3d !important;
}

.acciones-grid a[href*="/descargar-pdf"] {
    background: #63A4F7 !important;
    color: #ffffff !important;
}

.acciones-grid a[href*="/descargar-pdf"]:hover {
    background: #4b8de0 !important;
}

.acciones-grid form[action*="/eliminar"] button {
    background: #FF0505 !important;
    color: #ffffff !important;
}

.acciones-grid form[action*="/eliminar"] button:hover {
    background: #d90000 !important;
}

.acciones-grid .btn-disabled {
    background: #FF0505 !important;
    color: #ffffff !important;
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* COLORES FINALES EXACTOS BOTONES HOJA DE RUTA */
.acciones-grid a[href*="/vista-previa"],
.acciones-grid a[href*="/vista-previa"]:hover {
    background: #63A4F7 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.acciones-grid a[href*="/editar"],
.acciones-grid a[href*="/editar"]:hover {
    background: #FFC000 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.acciones-grid form[action*="/publicar-qr"] button,
.acciones-grid form[action*="/publicar-qr"] button:hover {
    background: #92D050 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.acciones-grid a[href*="/descargar-pdf"],
.acciones-grid a[href*="/descargar-pdf"]:hover {
    background: #63A4F7 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.acciones-grid form[action*="/eliminar"] button,
.acciones-grid form[action*="/eliminar"] button:hover,
.acciones-grid .btn-disabled {
    background: #FF0505 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Para que Eliminar deshabilitado siga rojo pero no clickable */
.acciones-grid .btn-disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Enlace público en azul, sustituyendo al botón Descargar */
.acciones-grid a[href^="http"],
.acciones-grid a[href^="http"]:hover {
    background: #63A4F7 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Acciones en 2 filas x 3 botones */
.acciones-grid {
    grid-template-columns: repeat(3, 72px) !important;
}

/* COLORES FINALES ACCIONES HOJAS DE RUTA */

/* Vista, Editar, Enlace y Duplicar en azul */
.acciones-grid a[href*="/vista-previa"],
.acciones-grid a[href*="/vista-previa"]:hover,
.acciones-grid a[href*="/editar"],
.acciones-grid a[href*="/editar"]:hover,
.acciones-grid a[href^="http"],
.acciones-grid a[href^="http"]:hover,
.acciones-grid form[action*="/duplicar"] button,
.acciones-grid form[action*="/duplicar"] button:hover {
    background: #63A4F7 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* QR en verde */
.acciones-grid form[action*="/publicar-qr"] button,
.acciones-grid form[action*="/publicar-qr"] button:hover {
    background: #92D050 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Eliminar en rojo */
.acciones-grid form[action*="/eliminar"] button,
.acciones-grid form[action*="/eliminar"] button:hover {
    background: #FF0505 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Ya no queremos botón eliminar deshabilitado visible */
.acciones-grid .btn-disabled {
    display: none !important;
}

/* Botones ordenados en 2 filas */
.acciones-grid {
    grid-template-columns: repeat(3, 72px) !important;
}

/* Forzar botón Vista en azul */
.acciones-grid a[href*="/vista-previa"],
.acciones-grid a[href*="/vista-previa"]:hover,
.acciones-grid a[href*="/vista-previa"][target="_blank"],
.acciones-grid a[href*="/vista-previa"][target="_blank"]:hover {
    background: #63A4F7 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ESTÉTICA PANEL PRINCIPAL CON LATERAL VISUAL */

.layout-app {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 58px);
}

.sidebar-visual {
    width: 330px;
    padding: 12px;
    background: #f3f4f6;
    flex-shrink: 0;
}

.bus-card {
    position: relative;
    width: 100%;
    height: 236px;
    overflow: hidden;
    background: #ffffff;
    border-radius: 0;
    margin-bottom: 12px;
}

.bus-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.logo-panel {
    position: absolute;
    left: 0;
    right: 52px;
    top: 80px;
    height: 96px;
    background: rgba(255,255,255,0.96);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-panel img {
    width: 210px;
    max-height: 70px;
    object-fit: contain;
}

.route-card {
    width: 100%;
    height: 462px;
    overflow: hidden;
    background: #ffffff;
}

.route-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* El contenedor principal se adapta al lateral */
.layout-app .container {
    max-width: none;
    flex: 1;
    margin: 0;
    padding: 28px 28px 40px 18px;
    overflow-x: auto;
}

.panel-title h1 {
    margin: 0 0 6px 0;
    font-size: 34px;
    font-weight: 800;
    color: #111827;
}

.panel-title p {
    margin: 0 0 24px 0;
    color: #6b7280;
}

/* Tarjetas del panel */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.card {
    min-height: 150px;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    padding: 26px 24px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.card:hover {
    transform: translateY(-2px);
    border-color: #63A4F7;
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
}

.card h2 {
    margin: 0 0 18px 0;
    font-size: 26px;
    font-weight: 800;
}

.card p {
    margin: 0;
    font-size: 16px;
    color: #111827;
}

.card-primary {
    border-top: 5px solid #63A4F7;
}

/* Footer en este diseño */
.footer {
    text-align: right;
    color: #6b7280;
    padding: 16px 28px;
    background: #f3f4f6;
}

/* Responsive */
@media (max-width: 900px) {
    .layout-app {
        display: block;
    }

    .sidebar-visual {
        width: 100%;
        display: flex;
        gap: 12px;
    }

    .bus-card,
    .route-card {
        width: 50%;
        height: 220px;
    }

    .layout-app .container {
        padding: 20px;
    }
}

@media (max-width: 640px) {
    .sidebar-visual {
        display: none;
    }

    .panel-title h1 {
        font-size: 28px;
    }
}

/* LOGIN NUEVO CON FONDO NEGRO Y BLOQUE DE RUTA */

.login-body-new {
    background: #000000 !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.login-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    max-width: 820px;
    width: 100%;
}

.login-image-box {
    width: 380px;
    height: 380px;
    background: #ffffff;
    overflow: hidden;
    border-radius: 14px 0 0 14px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.45);
}

.login-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.login-card-new {
    width: 380px;
    min-height: 380px;
    border-radius: 0 14px 14px 0 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,0.45) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-card-new h1 {
    font-size: 26px;
    margin-bottom: 6px;
}

.login-card-new p {
    margin-bottom: 24px;
}

@media (max-width: 820px) {
    .login-wrapper {
        flex-direction: column;
        max-width: 380px;
    }

    .login-image-box {
        width: 380px;
        height: 260px;
        border-radius: 14px 14px 0 0;
    }

    .login-card-new {
        border-radius: 0 0 14px 14px !important;
    }
}

@media (max-width: 430px) {
    .login-body-new {
        padding: 16px;
    }

    .login-wrapper,
    .login-image-box,
    .login-card-new {
        width: 100%;
    }
}

/* BLOQUE IZQUIERDO FIJO CON IMÁGENES */
.layout-app {
    display: flex !important;
    align-items: stretch !important;
    min-height: calc(100vh - 58px) !important;
}

.sidebar-visual {
    position: sticky !important;
    top: 58px !important;
    height: calc(100vh - 58px) !important;
    overflow: hidden !important;
    width: 330px !important;
    flex-shrink: 0 !important;
}

/* La zona derecha es la que se desplaza */
.layout-app .container {
    flex: 1 !important;
    min-height: calc(100vh - 58px) !important;
    overflow-x: auto !important;
}

/* Ajuste para que las imágenes no empujen la pantalla */
.bus-card {
    height: 236px !important;
}

.route-card {
    height: calc(100vh - 58px - 236px - 36px) !important;
    min-height: 300px !important;
}

/* En móvil no dejamos fijo el lateral */
@media (max-width: 900px) {
    .sidebar-visual {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .route-card {
        height: 220px !important;
        min-height: 220px !important;
    }
}

/* FIJAR MENÚ SUPERIOR + BLOQUE IZQUIERDO */

/* La página completa no debe hacer scroll */
html,
body {
    height: 100% !important;
    overflow: hidden !important;
}

/* Menú superior fijo */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 58px !important;
    z-index: 9999 !important;
}

/* El layout empieza debajo del menú */
.layout-app {
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    min-height: 0 !important;
    height: calc(100vh - 58px) !important;
    overflow: hidden !important;
}

/* Bloque izquierdo fijo */
.sidebar-visual {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 330px !important;
    height: calc(100vh - 58px) !important;
    min-height: 0 !important;
    flex: 0 0 330px !important;
    overflow: hidden !important;
}

/* Imágenes dentro del bloque izquierdo */
.bus-card {
    height: 236px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}

.route-card {
    height: calc(100vh - 58px - 236px - 36px) !important;
    min-height: 260px !important;
    overflow: hidden !important;
}

/* Solo se mueve la parte derecha */
.layout-app .container {
    flex: 1 1 auto !important;
    height: calc(100vh - 58px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    margin: 0 !important;
}

/* Footer oculto para que no genere scroll general */
.footer {
    display: none !important;
}

/* En móvil volvemos al comportamiento normal */
@media (max-width: 900px) {
    html,
    body {
        height: auto !important;
        overflow: auto !important;
    }

    .topbar {
        position: relative !important;
        height: auto !important;
    }

    .layout-app {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        height: auto !important;
        display: block !important;
        overflow: visible !important;
    }

    .sidebar-visual {
        width: 100% !important;
        height: auto !important;
        flex: none !important;
        overflow: visible !important;
    }

    .layout-app .container {
        height: auto !important;
        overflow: visible !important;
    }

    .footer {
        display: block !important;
    }
}

/* CABECERA FIJA EN HOJAS DE RUTA */
.sticky-hojas-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #ffffff !important;
    padding: 0 0 14px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 14px !important;
}

.sticky-hojas-header h1 {
    margin-top: 0 !important;
}

.sticky-hojas-header form {
    margin-bottom: 0 !important;
}

/* HOJAS DE RUTA: buscador fijo y solo tabla con scroll */
.hojas-ruta-page {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* El buscador ya no hace sticky: queda fuera del scroll */
.sticky-hojas-header {
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
    flex: 0 0 auto !important;
    background: #ffffff !important;
    padding: 0 0 14px 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* El scroll queda exclusivamente aquí */
.tabla-hojas-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    padding-bottom: 18px !important;
}

/* La tabla no genera scroll en toda la página */
.tabla-hojas-scroll table {
    margin-top: 0 !important;
}

/* Cabecera de la tabla fija dentro del scroll de la tabla */
.tabla-hojas-scroll thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #f9fafb !important;
}

/* CORRECCIÓN REAL: Hojas de ruta con cabecera fija y solo tabla con scroll */

.container-hojas-fijo {
    overflow: hidden !important;
    height: calc(100vh - 58px) !important;
    max-height: calc(100vh - 58px) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Página completa de hojas de ruta */
.container-hojas-fijo .hojas-ruta-page {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Título, nuevo y buscador fijos */
.container-hojas-fijo .sticky-hojas-header {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    background: #ffffff !important;
    z-index: 50 !important;
    padding-bottom: 12px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Solo esta zona se mueve */
.container-hojas-fijo .tabla-hojas-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Cabecera de columnas fija dentro de la tabla */
.container-hojas-fijo .tabla-hojas-scroll thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #f9fafb !important;
}

/* FIJADO DEFINITIVO HOJAS DE RUTA */
.container-hojas-fijo {
    overflow: hidden !important;
    height: calc(100vh - 58px) !important;
    max-height: calc(100vh - 58px) !important;
    display: flex !important;
    flex-direction: column !important;
}

.container-hojas-fijo .hojas-ruta-page {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.container-hojas-fijo .sticky-hojas-header {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    background: #ffffff !important;
    z-index: 50 !important;
    padding-bottom: 12px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.container-hojas-fijo .tabla-hojas-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    padding-bottom: 20px !important;
}

.container-hojas-fijo .tabla-hojas-scroll thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #f9fafb !important;
}

/* RECUPERAR BARRA DE SCROLL SOLO EN LA TABLA DE HOJAS DE RUTA */

.container-hojas-fijo {
    height: calc(100vh - 58px) !important;
    max-height: calc(100vh - 58px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.container-hojas-fijo .hojas-ruta-page {
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Buscador fijo arriba */
.container-hojas-fijo .sticky-hojas-header {
    flex: 0 0 auto !important;
    overflow: visible !important;
}

/* Aquí vuelve la barra de scroll */
.container-hojas-fijo .tabla-hojas-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: scroll !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
    padding-bottom: 24px !important;
}

/* Que la tabla ocupe su ancho natural */
.container-hojas-fijo .tabla-hojas-scroll table {
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Cabecera de columnas fija dentro del scroll */
.container-hojas-fijo .tabla-hojas-scroll thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    background: #f9fafb !important;
}

/* CORRECCIÓN: RECUPERAR SCROLL EN LA PARTE DERECHA */

/* Permitimos que la app gestione el scroll */
html,
body {
    height: 100% !important;
    overflow: hidden !important;
}

/* Menú superior fijo */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 58px !important;
    z-index: 9999 !important;
}

/* Layout fijo debajo del menú */
.layout-app {
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100vh - 58px) !important;
    display: flex !important;
    overflow: hidden !important;
}

/* Imágenes izquierda fijas */
.sidebar-visual {
    width: 330px !important;
    flex: 0 0 330px !important;
    height: calc(100vh - 58px) !important;
    overflow: hidden !important;
}

/* ESTA ES LA PARTE IMPORTANTE: la derecha vuelve a tener scroll */
.layout-app .container {
    flex: 1 1 auto !important;
    height: calc(100vh - 58px) !important;
    max-height: calc(100vh - 58px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    min-height: 0 !important;
    padding-bottom: 60px !important;
}

/* Anulamos el intento anterior que bloqueaba Hojas de ruta */
.container-hojas-fijo {
    overflow-y: auto !important;
    overflow-x: auto !important;
    height: calc(100vh - 58px) !important;
    max-height: calc(100vh - 58px) !important;
    display: block !important;
}

/* La página de hojas vuelve a comportamiento normal */
.hojas-ruta-page {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* El buscador lo dejamos sticky dentro del scroll derecho */
.sticky-hojas-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #f3f4f6 !important;
    padding: 0 0 14px 0 !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* La tabla ya no debe bloquear el scroll */
.tabla-hojas-scroll {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Cabecera de tabla opcionalmente fija */
.tabla-hojas-scroll thead th {
    position: sticky !important;
    top: 95px !important;
    z-index: 50 !important;
    background: #f9fafb !important;
}

/* =========================================================
   RESET FINAL SCROLL - RECUPERAR SCROLL EN LA PARTE DERECHA
   ========================================================= */

/* La página no hace scroll general */
html,
body {
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Menú superior fijo */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 58px !important;
    z-index: 9999 !important;
}

/* Layout fijo debajo del menú */
.layout-app {
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100vh - 58px) !important;
    display: flex !important;
    overflow: hidden !important;
}

/* Bloque izquierdo fijo */
.sidebar-visual {
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    height: calc(100vh - 58px) !important;
    overflow: hidden !important;
    flex: 0 0 330px !important;
}

/* LA PARTE DERECHA ES LA ÚNICA QUE HACE SCROLL */
.layout-app .container,
.layout-app .container.container-hojas-fijo {
    flex: 1 1 auto !important;
    height: calc(100vh - 58px) !important;
    max-height: calc(100vh - 58px) !important;
    min-height: 0 !important;
    overflow-y: scroll !important;
    overflow-x: auto !important;
    display: block !important;
    padding-bottom: 120px !important;
    box-sizing: border-box !important;
}

/* Anulamos el scroll interno de la tabla */
.hojas-ruta-page,
.container-hojas-fijo .hojas-ruta-page {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
}

/* El buscador vuelve a comportamiento normal para no bloquear scroll */
.sticky-hojas-header,
.container-hojas-fijo .sticky-hojas-header {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    background: transparent !important;
    overflow: visible !important;
}

/* La tabla NO debe tener scroll interno */
.tabla-hojas-scroll,
.container-hojas-fijo .tabla-hojas-scroll {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
}

/* Cabecera de tabla sin sticky de momento */
.tabla-hojas-scroll thead th,
.container-hojas-fijo .tabla-hojas-scroll thead th {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

/* =========================================================
   RESET FINAL SCROLL - RECUPERAR SCROLL EN LA PARTE DERECHA
   ========================================================= */

/* La página no hace scroll general */
html,
body {
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Menú superior fijo */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 58px !important;
    z-index: 9999 !important;
}

/* Layout fijo debajo del menú */
.layout-app {
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100vh - 58px) !important;
    display: flex !important;
    overflow: hidden !important;
}

/* Bloque izquierdo fijo */
.sidebar-visual {
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    height: calc(100vh - 58px) !important;
    overflow: hidden !important;
    flex: 0 0 330px !important;
}

/* LA PARTE DERECHA ES LA ÚNICA QUE HACE SCROLL */
.layout-app .container,
.layout-app .container.container-hojas-fijo {
    flex: 1 1 auto !important;
    height: calc(100vh - 58px) !important;
    max-height: calc(100vh - 58px) !important;
    min-height: 0 !important;
    overflow-y: scroll !important;
    overflow-x: auto !important;
    display: block !important;
    padding-bottom: 120px !important;
    box-sizing: border-box !important;
}

/* Anulamos el scroll interno de la tabla */
.hojas-ruta-page,
.container-hojas-fijo .hojas-ruta-page {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
}

/* El buscador vuelve a comportamiento normal para no bloquear scroll */
.sticky-hojas-header,
.container-hojas-fijo .sticky-hojas-header {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    background: transparent !important;
    overflow: visible !important;
}

/* La tabla NO debe tener scroll interno */
.tabla-hojas-scroll,
.container-hojas-fijo .tabla-hojas-scroll {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
}

/* Cabecera de tabla sin sticky de momento */
.tabla-hojas-scroll thead th,
.container-hojas-fijo .tabla-hojas-scroll thead th {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

/* FIJAR BUSCADOR Y CABECERA DE COLUMNAS EN HOJAS DE RUTA */

/* La parte derecha sigue siendo la que hace scroll */
.layout-app .container.container-hojas-fijo {
    overflow-y: auto !important;
    overflow-x: auto !important;
    position: relative !important;
}

/* Buscador / zona superior fija */
.layout-app .container.container-hojas-fijo .sticky-hojas-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 700 !important;
    background: #f3f4f6 !important;
    padding: 0 0 14px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #d1d5db !important;
}

/* Separación visual debajo del buscador */
.layout-app .container.container-hojas-fijo .sticky-hojas-header::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -12px !important;
    height: 12px !important;
    background: #f3f4f6 !important;
}

/* La tabla mantiene scroll normal dentro del contenedor derecho */
.layout-app .container.container-hojas-fijo .tabla-hojas-scroll {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 12px !important;
}

/* Cabecera de columnas fija justo debajo del buscador */
.layout-app .container.container-hojas-fijo .tabla-hojas-scroll thead th {
    position: sticky !important;
    top: var(--alto-buscador-hojas, 150px) !important;
    z-index: 650 !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #d1d5db !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
}

/* Para que las celdas no se transparenten al pasar por debajo */
.layout-app .container.container-hojas-fijo .tabla-hojas-scroll table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* =========================================================
   AJUSTE FINAL: BUSCADOR FIJO + CABECERA COLUMNAS DEBAJO
   ========================================================= */

/* La parte derecha sigue siendo el área de scroll */
.layout-app .container,
.layout-app .container.container-hojas-fijo {
    overflow-y: auto !important;
    overflow-x: auto !important;
    position: relative !important;
}

/* Buscador fijo arriba dentro de la parte derecha */
.layout-app .container .sticky-hojas-header,
.layout-app .container.container-hojas-fijo .sticky-hojas-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #f3f4f6 !important;
    padding: 10px 0 14px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #d1d5db !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

/* La tabla empieza debajo del buscador */
.layout-app .container .tabla-hojas-scroll,
.layout-app .container.container-hojas-fijo .tabla-hojas-scroll {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
}

/* Cabecera de columnas fija debajo del buscador */
.layout-app .container .tabla-hojas-scroll thead th,
.layout-app .container.container-hojas-fijo .tabla-hojas-scroll thead th {
    position: sticky !important;
    top: 78px !important;
    z-index: 900 !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06) !important;
}

/* Evitar transparencias raras al pasar filas por debajo */
.layout-app .container .tabla-hojas-scroll tbody td,
.layout-app .container.container-hojas-fijo .tabla-hojas-scroll tbody td {
    background: #ffffff !important;
}

/* Separación visual de la tabla */
.layout-app .container .tabla-hojas-scroll table,
.layout-app .container.container-hojas-fijo .tabla-hojas-scroll table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-top: 0 !important;
}

/* =========================================================
   HOJAS DE RUTA LIMPIO:
   BUSCADOR FIJO + CABECERA FIJA + SCROLL SOLO FILAS
   ========================================================= */

.layout-app .container.container-hojas-fijo {
    height: calc(100vh - 58px) !important;
    max-height: calc(100vh - 58px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 24px 0 24px !important;
    box-sizing: border-box !important;
}

.layout-app .container.container-hojas-fijo .hojas-ruta-page {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.layout-app .container.container-hojas-fijo .sticky-hojas-header {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    background: #f3f4f6 !important;
    z-index: 50 !important;
    padding: 0 0 14px 0 !important;
    margin: 0 0 10px 0 !important;
    border-bottom: 1px solid #d1d5db !important;
}

.layout-app .container.container-hojas-fijo .sticky-hojas-header::after {
    display: none !important;
    content: none !important;
}

.hojas-header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
}

.hojas-header-top h1 {
    margin: 0 !important;
}

.hojas-header-top p {
    margin: 4px 0 0 0 !important;
    color: #6b7280 !important;
}

.form-buscador-hojas {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
}

.form-buscador-hojas input {
    flex: 1 1 auto !important;
}

.form-buscador-hojas button {
    flex: 0 0 auto !important;
}

/* ESTE ES EL ÚNICO SCROLL */
.layout-app .container.container-hojas-fijo .tabla-hojas-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    margin: 0 !important;
    padding: 0 0 24px 0 !important;
    box-sizing: border-box !important;
}

/* Tabla */
.layout-app .container.container-hojas-fijo .tabla-hojas {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Cabecera fija dentro del scroll */
.layout-app .container.container-hojas-fijo .tabla-hojas thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
}

/* Filas */
.layout-app .container.container-hojas-fijo .tabla-hojas tbody td {
    background: #ffffff !important;
}

/* Estados */
.estado {
    display: inline-block !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

.estado-publicada {
    background: #dcfce7 !important;
    color: #15803d !important;
}

.estado-borrador {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.texto-suave {
    color: #475569 !important;
    font-size: 12px !important;
}

/* Botones finales */
.acciones-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 72px) !important;
    gap: 6px !important;
    align-items: center !important;
}

.acciones-grid .btn-small,
.acciones-grid button.btn-small,
.acciones-grid a.btn-small {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 28px !important;
    padding: 7px 4px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* Vista, Editar, Enlace y Duplicar en azul */
.acciones-grid a[href*="/vista-previa"],
.acciones-grid a[href*="/editar"],
.acciones-grid a[href^="http"],
.acciones-grid form[action*="/duplicar"] button {
    background: #63A4F7 !important;
    color: #ffffff !important;
}

/* QR verde */
.acciones-grid form[action*="/publicar-qr"] button {
    background: #92D050 !important;
    color: #ffffff !important;
}

/* Eliminar rojo */
.acciones-grid form[action*="/eliminar"] button {
    background: #FF0505 !important;
    color: #ffffff !important;
}


/* =========================================================
   EDITOR HOJA DE RUTA COMPACTO
   ========================================================= */

body.editor-hoja-ruta-compacto .layout-app .container {
    padding: 14px 18px 20px 18px !important;
    font-size: 13px !important;
}

/* Título más pequeño */
body.editor-hoja-ruta-compacto h1 {
    font-size: 24px !important;
    margin: 0 0 10px 0 !important;
}

/* Bloques/secciones más compactos */
body.editor-hoja-ruta-compacto .card,
body.editor-hoja-ruta-compacto .form-card,
body.editor-hoja-ruta-compacto section,
body.editor-hoja-ruta-compacto fieldset {
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
}

/* Títulos de secciones */
body.editor-hoja-ruta-compacto h2,
body.editor-hoja-ruta-compacto h3 {
    font-size: 17px !important;
    margin: 0 0 8px 0 !important;
}

/* Labels más pequeños y con menos separación */
body.editor-hoja-ruta-compacto label {
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
}

/* Inputs más bajos */
body.editor-hoja-ruta-compacto input,
body.editor-hoja-ruta-compacto select,
body.editor-hoja-ruta-compacto textarea {
    font-size: 13px !important;
    padding: 6px 8px !important;
    min-height: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

/* Textarea más compacto */
body.editor-hoja-ruta-compacto textarea {
    height: 58px !important;
    min-height: 58px !important;
    resize: vertical !important;
}

/* Reducir separación entre campos */
body.editor-hoja-ruta-compacto .form-group,
body.editor-hoja-ruta-compacto .campo,
body.editor-hoja-ruta-compacto .field,
body.editor-hoja-ruta-compacto .mb-3 {
    margin-bottom: 8px !important;
}

/* Grids más densos */
body.editor-hoja-ruta-compacto .form-grid,
body.editor-hoja-ruta-compacto .grid-form,
body.editor-hoja-ruta-compacto .grid {
    gap: 8px 12px !important;
}

/* Si hay formularios con columnas automáticas, aprovechamos más ancho */
body.editor-hoja-ruta-compacto .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

/* Botones más pequeños */
body.editor-hoja-ruta-compacto button,
body.editor-hoja-ruta-compacto .btn,
body.editor-hoja-ruta-compacto .btn-primary,
body.editor-hoja-ruta-compacto .btn-secondary,
body.editor-hoja-ruta-compacto a.btn,
body.editor-hoja-ruta-compacto a.btn-primary,
body.editor-hoja-ruta-compacto a.btn-secondary {
    font-size: 13px !important;
    padding: 7px 12px !important;
    min-height: 32px !important;
    border-radius: 7px !important;
}

/* Fila de botones inferior más compacta */
body.editor-hoja-ruta-compacto .form-actions,
body.editor-hoja-ruta-compacto .acciones-form,
body.editor-hoja-ruta-compacto .actions {
    margin-top: 10px !important;
    gap: 8px !important;
}

/* Tablas internas más compactas si existen */
body.editor-hoja-ruta-compacto table th,
body.editor-hoja-ruta-compacto table td {
    font-size: 12px !important;
    padding: 6px 8px !important;
}

/* Reducir espacio general de párrafos */
body.editor-hoja-ruta-compacto p {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

/* Ocultar espacios excesivos heredados */
body.editor-hoja-ruta-compacto br + br {
    display: none !important;
}

/* =========================================================
   EDITOR HOJA DE RUTA: ORDEN CONDUCTORES / VEHÍCULO
   ========================================================= */

/* Más separación visual entre secciones */
body.editor-hoja-ruta-compacto h2,
body.editor-hoja-ruta-compacto h3 {
    margin-top: 14px !important;
    margin-bottom: 12px !important;
    padding-top: 4px !important;
}

/* El primer título no necesita tanto margen superior */
body.editor-hoja-ruta-compacto h1 + p + .card h2,
body.editor-hoja-ruta-compacto h1 + p + .form-card h2,
body.editor-hoja-ruta-compacto h2:first-child {
    margin-top: 0 !important;
}

/* Reorganizar conductor / vehículo en dos filas */
body.editor-hoja-ruta-compacto .campo-conductor-principal {
    grid-column: 1 / span 2 !important;
}

body.editor-hoja-ruta-compacto .campo-segundo-conductor {
    grid-column: 3 / span 2 !important;
}

body.editor-hoja-ruta-compacto .campo-vehiculo {
    grid-column: 1 / span 2 !important;
}

body.editor-hoja-ruta-compacto .campo-contratante {
    grid-column: 3 / span 2 !important;
}

/* Forzar 4 columnas internas para que queden 2 campos por fila */
body.editor-hoja-ruta-compacto .form-grid,
body.editor-hoja-ruta-compacto .grid-form,
body.editor-hoja-ruta-compacto .grid {
    grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
    gap: 10px 12px !important;
}

/* Un poco más de aire antes de Conductor y vehículo y Naturaleza */
body.editor-hoja-ruta-compacto h2:not(:first-child),
body.editor-hoja-ruta-compacto h3:not(:first-child) {
    margin-top: 18px !important;
}

/* Inputs/selects mantienen tamaño compacto */
body.editor-hoja-ruta-compacto select,
body.editor-hoja-ruta-compacto input {
    height: 32px !important;
}

/* En pantallas estrechas vuelve a dos columnas */
@media (max-width: 1100px) {
    body.editor-hoja-ruta-compacto .form-grid,
    body.editor-hoja-ruta-compacto .grid-form,
    body.editor-hoja-ruta-compacto .grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
    }

    body.editor-hoja-ruta-compacto .campo-conductor-principal,
    body.editor-hoja-ruta-compacto .campo-segundo-conductor,
    body.editor-hoja-ruta-compacto .campo-vehiculo,
    body.editor-hoja-ruta-compacto .campo-contratante {
        grid-column: auto !important;
    }
}
/* =========================================================
   EDITOR HOJA DE RUTA - FORMATO COMO LA SEGUNDA IMAGEN
   ========================================================= */

body.editor-hoja-ruta-compacto .layout-app .container {
    padding: 12px 18px 18px 18px !important;
}

body.editor-hoja-ruta-compacto h1 {
    font-size: 22px !important;
    margin: 0 0 6px 0 !important;
}

body.editor-hoja-ruta-compacto p {
    margin: 0 0 10px 0 !important;
    font-size: 13px !important;
}

body.editor-hoja-ruta-compacto form {
    margin: 0 !important;
}

body.editor-hoja-ruta-compacto .editor-hoja-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.editor-hoja-ruta-compacto .editor-bloque {
    background: #fff;
    border: 1px solid #d9dee7;
    border-radius: 10px;
    padding: 12px 14px;
}

body.editor-hoja-ruta-compacto .editor-bloque h2 {
    margin: 0 0 12px 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
}

body.editor-hoja-ruta-compacto .editor-grid-superior {
    display: grid;
    grid-template-columns: 1.9fr 0.7fr;
    gap: 22px;
    align-items: start;
}

body.editor-hoja-ruta-compacto .editor-col-izq,
body.editor-hoja-ruta-compacto .editor-col-der {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.editor-hoja-ruta-compacto .editor-fila-campos {
    display: grid;
    grid-template-columns: 0.8fr 0.6fr 1fr 1fr;
    gap: 12px;
    align-items: end;
}

body.editor-hoja-ruta-compacto .editor-dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 10px;
}

body.editor-hoja-ruta-compacto .editor-dos-columnas:last-child {
    margin-bottom: 0;
}

body.editor-hoja-ruta-compacto label {
    display: block;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    color: #1f2937 !important;
}

body.editor-hoja-ruta-compacto input,
body.editor-hoja-ruta-compacto select,
body.editor-hoja-ruta-compacto textarea {
    width: 100%;
    font-size: 13px !important;
    padding: 7px 10px !important;
    border: 1px solid #c6ceda !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
    background: #fff;
}

body.editor-hoja-ruta-compacto input,
body.editor-hoja-ruta-compacto select {
    height: 32px !important;
    min-height: 32px !important;
}

body.editor-hoja-ruta-compacto .editor-bloque-paradas textarea {
    min-height: 148px !important;
    height: 148px !important;
    resize: vertical !important;
}

body.editor-hoja-ruta-compacto .editor-bloque-observaciones textarea {
    min-height: 192px !important;
    height: 192px !important;
    resize: vertical !important;
}

body.editor-hoja-ruta-compacto .editor-acciones-laterales {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 4px;
}

body.editor-hoja-ruta-compacto .editor-acciones-laterales .btn,
body.editor-hoja-ruta-compacto .editor-acciones-laterales button,
body.editor-hoja-ruta-compacto .editor-acciones-laterales a {
    min-height: 32px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

body.editor-hoja-ruta-compacto .editor-bloque > div:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 1300px) {
    body.editor-hoja-ruta-compacto .editor-grid-superior {
        grid-template-columns: 1fr;
    }

    body.editor-hoja-ruta-compacto .editor-bloque-observaciones textarea {
        min-height: 100px !important;
        height: 100px !important;
    }
}

@media (max-width: 1000px) {
    body.editor-hoja-ruta-compacto .editor-fila-campos {
        grid-template-columns: 1fr 1fr;
    }

    body.editor-hoja-ruta-compacto .editor-dos-columnas {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CORRECCIÓN FINAL EDITOR - FORMATO COMO IMAGEN REFERENCIA
   ========================================================= */

/* Caja general del formulario */
body.editor-hoja-ruta-compacto .editor-bloque {
    padding: 14px 16px !important;
    margin-bottom: 14px !important;
}

/* Datos generales: izquierda amplia + observaciones derecha */
body.editor-hoja-ruta-compacto .editor-grid-superior {
    display: grid !important;
    grid-template-columns: minmax(680px, 2.2fr) minmax(360px, 0.9fr) !important;
    gap: 22px !important;
    align-items: start !important;
}

/* Primera fila: fecha, hora, origen, destino */
body.editor-hoja-ruta-compacto .editor-fila-campos {
    display: grid !important;
    grid-template-columns: 170px 130px 1fr 1fr !important;
    gap: 12px !important;
    align-items: end !important;
}

/* Paradas intermedias */
body.editor-hoja-ruta-compacto .editor-bloque-paradas textarea {
    height: 145px !important;
    min-height: 145px !important;
}

/* Observaciones internas a la derecha */
body.editor-hoja-ruta-compacto .editor-bloque-observaciones textarea {
    height: 185px !important;
    min-height: 185px !important;
}

/* Botones debajo de observaciones */
body.editor-hoja-ruta-compacto .editor-acciones-laterales {
    display: flex !important;
    gap: 14px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-top: 18px !important;
}

/* MUY IMPORTANTE: anulamos reglas antiguas que deformaban columnas */
body.editor-hoja-ruta-compacto .campo-conductor-principal,
body.editor-hoja-ruta-compacto .campo-segundo-conductor,
body.editor-hoja-ruta-compacto .campo-vehiculo,
body.editor-hoja-ruta-compacto .campo-contratante {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
}

/* Conductor y vehículo: dos columnas iguales */
body.editor-hoja-ruta-compacto .editor-dos-columnas {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    align-items: end !important;
    margin-bottom: 14px !important;
}

/* Los campos dentro de esas filas ocupan todo su espacio */
body.editor-hoja-ruta-compacto .editor-dos-columnas > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-column: auto !important;
}

/* Selects e inputs al 100% */
body.editor-hoja-ruta-compacto .editor-dos-columnas select,
body.editor-hoja-ruta-compacto .editor-dos-columnas input {
    width: 100% !important;
    max-width: none !important;
}

/* Naturaleza del servicio también en dos columnas limpias */
body.editor-hoja-ruta-compacto .editor-bloque .editor-dos-columnas:last-child {
    grid-template-columns: 1fr 1fr !important;
}

/* Separación entre títulos de sección y campos */
body.editor-hoja-ruta-compacto .editor-bloque h2 {
    margin-bottom: 16px !important;
}

/* Reducir altura general para que quepa mejor */
body.editor-hoja-ruta-compacto input,
body.editor-hoja-ruta-compacto select {
    height: 31px !important;
    min-height: 31px !important;
    padding: 6px 9px !important;
}

/* Evitar que reglas anteriores de form-grid afecten al editor nuevo */
body.editor-hoja-ruta-compacto .editor-hoja-shell .form-grid,
body.editor-hoja-ruta-compacto .editor-hoja-shell .grid,
body.editor-hoja-ruta-compacto .editor-hoja-shell .grid-form {
    display: block !important;
}

/* Ajuste responsive */
@media (max-width: 1350px) {
    body.editor-hoja-ruta-compacto .editor-grid-superior {
        grid-template-columns: 1fr !important;
    }

    body.editor-hoja-ruta-compacto .editor-bloque-observaciones textarea {
        height: 100px !important;
        min-height: 100px !important;
    }
}

@media (max-width: 900px) {
    body.editor-hoja-ruta-compacto .editor-fila-campos,
    body.editor-hoja-ruta-compacto .editor-dos-columnas {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   AJUSTE FINO EDITOR HOJA DE RUTA SEGÚN IMAGEN REFERENCIA
   ========================================================= */

/* Datos generales: estructura más parecida a la referencia */
body.editor-hoja-ruta-compacto .editor-grid-superior {
    display: grid !important;
    grid-template-columns: minmax(720px, 2.35fr) minmax(330px, 0.75fr) !important;
    gap: 24px !important;
    align-items: start !important;
}

/* Columna izquierda: campos superiores + paradas */
body.editor-hoja-ruta-compacto .editor-col-izq {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 14px !important;
}

/* Columna derecha: observaciones + botones */
body.editor-hoja-ruta-compacto .editor-col-der {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 18px !important;
}

/* Fila superior: fecha/hora más pequeños, origen/destino medios */
body.editor-hoja-ruta-compacto .editor-fila-campos {
    display: grid !important;
    grid-template-columns: 170px 130px minmax(210px, 1fr) minmax(210px, 1fr) !important;
    gap: 12px !important;
    align-items: end !important;
}

/* Paradas intermedias: altura de referencia */
body.editor-hoja-ruta-compacto .editor-bloque-paradas textarea {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    resize: none !important;
}

/* Observaciones internas: misma línea final que paradas */
body.editor-hoja-ruta-compacto .editor-bloque-observaciones textarea {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    resize: none !important;
}

/* Botones debajo de observaciones, misma altura entre ellos */
body.editor-hoja-ruta-compacto .editor-acciones-laterales {
    display: flex !important;
    gap: 14px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-top: 0 !important;
}

/* Botón Guardar borrador en verde corporativo */
body.editor-hoja-ruta-compacto .editor-acciones-laterales button[type="submit"],
body.editor-hoja-ruta-compacto .editor-acciones-laterales .btn-primary {
    background: #92D050 !important;
    color: #ffffff !important;
    border: none !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 8px 16px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
}

/* Botón Cancelar en rojo */
body.editor-hoja-ruta-compacto .editor-acciones-laterales a,
body.editor-hoja-ruta-compacto .editor-acciones-laterales .btn-secondary {
    background: #FF0505 !important;
    color: #ffffff !important;
    border: none !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 8px 16px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Bloque Conductor y vehículo más proporcionado */
body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(2) {
    max-width: 930px !important;
}

/* Conductor/vehículo: campos más cortos, no ocupan toda la pantalla */
body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(2) .editor-dos-columnas {
    display: grid !important;
    grid-template-columns: 340px 340px !important;
    gap: 18px 24px !important;
    justify-content: start !important;
    align-items: end !important;
    margin-bottom: 14px !important;
}

/* Naturaleza del servicio también más compacta */
body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(3) {
    max-width: 760px !important;
}

/* Tipo servicio e identificación proporcionados */
body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(3) .editor-dos-columnas {
    display: grid !important;
    grid-template-columns: 300px 360px !important;
    gap: 18px !important;
    justify-content: start !important;
    align-items: end !important;
}

/* Selects e inputs inferiores no se estiran de más */
body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(2) select,
body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(2) input,
body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(3) select,
body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(3) input {
    width: 100% !important;
    max-width: 100% !important;
}

/* Más aire visual entre bloques, pero sin exagerar */
body.editor-hoja-ruta-compacto .editor-bloque {
    margin-bottom: 12px !important;
}

/* Títulos de bloque */
body.editor-hoja-ruta-compacto .editor-bloque h2 {
    font-size: 17px !important;
    margin-bottom: 16px !important;
}

/* Compactar altura general de inputs */
body.editor-hoja-ruta-compacto input,
body.editor-hoja-ruta-compacto select {
    height: 32px !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
}

/* En pantallas medianas vuelve a ajuste flexible */
@media (max-width: 1450px) {
    body.editor-hoja-ruta-compacto .editor-grid-superior {
        grid-template-columns: 1fr !important;
    }

    body.editor-hoja-ruta-compacto .editor-bloque-observaciones textarea {
        height: 110px !important;
        min-height: 110px !important;
        max-height: 110px !important;
    }

    body.editor-hoja-ruta-compacto .editor-bloque-paradas textarea {
        height: 130px !important;
        min-height: 130px !important;
        max-height: 130px !important;
    }
}

@media (max-width: 1000px) {
    body.editor-hoja-ruta-compacto .editor-fila-campos,
    body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(2) .editor-dos-columnas,
    body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(3) .editor-dos-columnas {
        grid-template-columns: 1fr !important;
    }

    body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(2),
    body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(3) {
        max-width: none !important;
    }
}


/* =========================================================
   AJUSTE EXACTO EDITOR:
   PARADAS = ANCHO CONDUCTOR / BOTONES MISMA ALTURA
   ========================================================= */

/* Ancho de referencia para los bloques principales */
body.editor-hoja-ruta-compacto {
    --ancho-bloque-editor: 930px;
    --ancho-observaciones-editor: 360px;
}

/* Datos generales: columna izquierda igual al bloque conductor */
body.editor-hoja-ruta-compacto .editor-grid-superior {
    display: grid !important;
    grid-template-columns: var(--ancho-bloque-editor) var(--ancho-observaciones-editor) !important;
    gap: 24px !important;
    align-items: start !important;
    justify-content: start !important;
}

/* La columna izquierda no debe crecer más que Conductor y vehículo */
body.editor-hoja-ruta-compacto .editor-col-izq {
    width: var(--ancho-bloque-editor) !important;
    max-width: var(--ancho-bloque-editor) !important;
}

/* Paradas intermedias exactamente con el ancho del bloque conductor */
body.editor-hoja-ruta-compacto .editor-bloque-paradas {
    width: var(--ancho-bloque-editor) !important;
    max-width: var(--ancho-bloque-editor) !important;
}

body.editor-hoja-ruta-compacto .editor-bloque-paradas textarea {
    width: 100% !important;
    max-width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    resize: none !important;
}

/* La columna derecha mantiene observaciones y botones */
body.editor-hoja-ruta-compacto .editor-col-der {
    width: var(--ancho-observaciones-editor) !important;
    max-width: var(--ancho-observaciones-editor) !important;
}

/* Observaciones internas */
body.editor-hoja-ruta-compacto .editor-bloque-observaciones {
    width: var(--ancho-observaciones-editor) !important;
    max-width: var(--ancho-observaciones-editor) !important;
}

body.editor-hoja-ruta-compacto .editor-bloque-observaciones textarea {
    width: 100% !important;
    max-width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    resize: none !important;
}

/* Conductor y vehículo conserva el mismo ancho */
body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(2) {
    width: var(--ancho-bloque-editor) !important;
    max-width: var(--ancho-bloque-editor) !important;
}

/* Naturaleza también más contenida */
body.editor-hoja-ruta-compacto .editor-bloque:nth-of-type(3) {
    width: var(--ancho-bloque-editor) !important;
    max-width: var(--ancho-bloque-editor) !important;
}

/* Botones: misma altura exacta */
body.editor-hoja-ruta-compacto .editor-acciones-laterales {
    display: flex !important;
    gap: 14px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin-top: 18px !important;
}

body.editor-hoja-ruta-compacto .editor-acciones-laterales button,
body.editor-hoja-ruta-compacto .editor-acciones-laterales a,
body.editor-hoja-ruta-compacto .editor-acciones-laterales .btn,
body.editor-hoja-ruta-compacto .editor-acciones-laterales .btn-primary,
body.editor-hoja-ruta-compacto .editor-acciones-laterales .btn-secondary {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 36px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    border: none !important;
}

/* Guardar borrador verde */
body.editor-hoja-ruta-compacto .editor-acciones-laterales button[type="submit"],
body.editor-hoja-ruta-compacto .editor-acciones-laterales .btn-primary {
    background: #92D050 !important;
    color: #ffffff !important;
}

/* Cancelar rojo */
body.editor-hoja-ruta-compacto .editor-acciones-laterales a,
body.editor-hoja-ruta-compacto .editor-acciones-laterales .btn-secondary {
    background: #FF0505 !important;
    color: #ffffff !important;
}

/* Evitar que reglas responsive anteriores rompan el diseño en pantalla grande */
@media (min-width: 1451px) {
    body.editor-hoja-ruta-compacto .editor-grid-superior {
        grid-template-columns: var(--ancho-bloque-editor) var(--ancho-observaciones-editor) !important;
    }
}


/* =========================================================
   EDITOR HOJA DE RUTA - DOS BLOQUES 2/3 + 1/3
   ========================================================= */

body.editor-hoja-ruta-dos-columnas .layout-app .container {
    padding: 12px 18px 18px 18px !important;
    overflow-y: auto !important;
}

body.editor-hoja-ruta-dos-columnas h1 {
    font-size: 22px !important;
    margin: 0 0 6px 0 !important;
}

body.editor-hoja-ruta-dos-columnas h1 + p {
    font-size: 13px !important;
    margin: 0 0 10px 0 !important;
    color: #6b7280 !important;
}

body.editor-hoja-ruta-dos-columnas form {
    margin: 0 !important;
}

body.editor-hoja-ruta-dos-columnas .editor-layout-2cols {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
}

body.editor-hoja-ruta-dos-columnas .editor-columna-principal,
body.editor-hoja-ruta-dos-columnas .editor-columna-lateral {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-width: 0 !important;
}

/* Bloques */
body.editor-hoja-ruta-dos-columnas .editor-bloque {
    background: #ffffff !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 10px !important;
    padding: 13px 15px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    max-width: none !important;
    width: 100% !important;
}

body.editor-hoja-ruta-dos-columnas .editor-bloque h2 {
    font-size: 17px !important;
    line-height: 1.2 !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    font-weight: 800 !important;
    color: #111827 !important;
}

/* Datos generales */
body.editor-hoja-ruta-dos-columnas .editor-fila-datos-generales {
    display: grid !important;
    grid-template-columns: 150px 110px 1fr 1fr !important;
    gap: 12px !important;
    align-items: end !important;
    margin-bottom: 12px !important;
}

body.editor-hoja-ruta-dos-columnas .editor-paradas-full textarea {
    height: 145px !important;
    min-height: 145px !important;
    max-height: 145px !important;
    resize: none !important;
}

/* Conductor / vehículo */
body.editor-hoja-ruta-dos-columnas .editor-fila-dos-campos {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: end !important;
    margin-bottom: 12px !important;
}

body.editor-hoja-ruta-dos-columnas .editor-fila-dos-campos:last-child {
    margin-bottom: 0 !important;
}

/* Reducir visualmente campos inferiores */
body.editor-hoja-ruta-dos-columnas .bloque-conductor-vehiculo .editor-fila-dos-campos,
body.editor-hoja-ruta-dos-columnas .bloque-naturaleza .editor-fila-dos-campos {
    grid-template-columns: minmax(260px, 420px) minmax(220px, 420px) !important;
    justify-content: start !important;
}

/* Observaciones en bloque lateral */
body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral {
    min-height: 274px !important;
}

body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral h2 {
    margin-bottom: 14px !important;
}

body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral textarea {
    height: 222px !important;
    min-height: 222px !important;
    max-height: 222px !important;
    resize: none !important;
}

/* Botones laterales */
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral {
    display: flex !important;
    gap: 14px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 2px !important;
}

body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral button,
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral a,
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral .btn,
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral .btn-primary,
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral .btn-secondary {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 36px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    border: none !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

/* Guardar borrador verde */
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral button[type="submit"],
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral .btn-primary {
    background: #92D050 !important;
    color: #ffffff !important;
}

/* Cancelar rojo */
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral a,
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral .btn-secondary {
    background: #FF0505 !important;
    color: #ffffff !important;
}

/* Labels e inputs compactos */
body.editor-hoja-ruta-dos-columnas label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    color: #111827 !important;
}

body.editor-hoja-ruta-dos-columnas input,
body.editor-hoja-ruta-dos-columnas select,
body.editor-hoja-ruta-dos-columnas textarea {
    width: 100% !important;
    font-size: 13px !important;
    border: 1px solid #c6ceda !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

body.editor-hoja-ruta-dos-columnas input,
body.editor-hoja-ruta-dos-columnas select {
    height: 32px !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
}

body.editor-hoja-ruta-dos-columnas textarea {
    padding: 8px 10px !important;
}

/* Anular restos de reglas anteriores */
body.editor-hoja-ruta-dos-columnas .campo-conductor-principal,
body.editor-hoja-ruta-dos-columnas .campo-segundo-conductor,
body.editor-hoja-ruta-dos-columnas .campo-vehiculo,
body.editor-hoja-ruta-dos-columnas .campo-contratante {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
}

/* Responsive */
@media (max-width: 1200px) {
    body.editor-hoja-ruta-dos-columnas .editor-layout-2cols {
        grid-template-columns: 1fr !important;
    }

    body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral textarea {
        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;
    }
}

@media (max-width: 900px) {
    body.editor-hoja-ruta-dos-columnas .editor-fila-datos-generales,
    body.editor-hoja-ruta-dos-columnas .editor-fila-dos-campos,
    body.editor-hoja-ruta-dos-columnas .bloque-conductor-vehiculo .editor-fila-dos-campos,
    body.editor-hoja-ruta-dos-columnas .bloque-naturaleza .editor-fila-dos-campos {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   AJUSTE DEFINITIVO DOS COLUMNAS EDITOR
   Datos generales = ancho conductor / botones alineados
   ========================================================= */

body.editor-hoja-ruta-dos-columnas {
    --ancho-columna-principal-editor: 930px;
    --ancho-columna-lateral-editor: 420px;
}

/* Layout general: izquierda ancho fijo, derecha lateral */
body.editor-hoja-ruta-dos-columnas .editor-layout-2cols {
    display: grid !important;
    grid-template-columns: var(--ancho-columna-principal-editor) var(--ancho-columna-lateral-editor) !important;
    gap: 18px !important;
    align-items: start !important;
    justify-content: start !important;
    width: auto !important;
}

/* Columna principal exactamente igual para todos sus bloques */
body.editor-hoja-ruta-dos-columnas .editor-columna-principal {
    width: var(--ancho-columna-principal-editor) !important;
    max-width: var(--ancho-columna-principal-editor) !important;
    min-width: var(--ancho-columna-principal-editor) !important;
}

/* Todos los bloques de la izquierda con el mismo ancho */
body.editor-hoja-ruta-dos-columnas .bloque-datos-generales,
body.editor-hoja-ruta-dos-columnas .bloque-conductor-vehiculo,
body.editor-hoja-ruta-dos-columnas .bloque-naturaleza {
    width: var(--ancho-columna-principal-editor) !important;
    max-width: var(--ancho-columna-principal-editor) !important;
    min-width: var(--ancho-columna-principal-editor) !important;
    box-sizing: border-box !important;
}

/* Columna lateral */
body.editor-hoja-ruta-dos-columnas .editor-columna-lateral {
    width: var(--ancho-columna-lateral-editor) !important;
    max-width: var(--ancho-columna-lateral-editor) !important;
    min-width: var(--ancho-columna-lateral-editor) !important;
}

/* Observaciones del ancho exacto lateral */
body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral {
    width: var(--ancho-columna-lateral-editor) !important;
    max-width: var(--ancho-columna-lateral-editor) !important;
    min-width: var(--ancho-columna-lateral-editor) !important;
    box-sizing: border-box !important;
}

/* Datos generales: respetar fecha y hora pequeñas */
body.editor-hoja-ruta-dos-columnas .editor-fila-datos-generales {
    display: grid !important;
    grid-template-columns: 150px 110px 1fr 1fr !important;
    gap: 12px !important;
    align-items: end !important;
}

/* Paradas ocupa exactamente el ancho interno del bloque izquierdo */
body.editor-hoja-ruta-dos-columnas .editor-paradas-full {
    width: 100% !important;
}

body.editor-hoja-ruta-dos-columnas .editor-paradas-full textarea {
    width: 100% !important;
    height: 145px !important;
    min-height: 145px !important;
    max-height: 145px !important;
    resize: none !important;
}

/* Observaciones internas */
body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral textarea {
    width: 100% !important;
    height: 222px !important;
    min-height: 222px !important;
    max-height: 222px !important;
    resize: none !important;
}

/* Botonera: bloque propio con alineación perfecta */
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral {
    width: var(--ancho-columna-lateral-editor) !important;
    max-width: var(--ancho-columna-lateral-editor) !important;
    min-width: var(--ancho-columna-lateral-editor) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 8px 0 0 0 !important;
    height: 36px !important;
    line-height: 36px !important;
    box-sizing: border-box !important;
}

/* Botones: misma altura, mismo comportamiento */
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral button,
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral a {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 36px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: top !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    border: none !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

/* Guardar borrador verde */
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral button[type="submit"] {
    background: #92D050 !important;
    color: #ffffff !important;
}

/* Cancelar rojo */
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral a {
    background: #FF0505 !important;
    color: #ffffff !important;
}

/* Campos inferiores: que no se estiren de forma rara */
body.editor-hoja-ruta-dos-columnas .bloque-conductor-vehiculo .editor-fila-dos-campos,
body.editor-hoja-ruta-dos-columnas .bloque-naturaleza .editor-fila-dos-campos {
    display: grid !important;
    grid-template-columns: 420px 420px !important;
    gap: 14px !important;
    justify-content: start !important;
    align-items: end !important;
}

/* Responsive solo en pantallas pequeñas */
@media (max-width: 1450px) {
    body.editor-hoja-ruta-dos-columnas .editor-layout-2cols {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    body.editor-hoja-ruta-dos-columnas .editor-columna-principal,
    body.editor-hoja-ruta-dos-columnas .bloque-datos-generales,
    body.editor-hoja-ruta-dos-columnas .bloque-conductor-vehiculo,
    body.editor-hoja-ruta-dos-columnas .bloque-naturaleza,
    body.editor-hoja-ruta-dos-columnas .editor-columna-lateral,
    body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral,
    body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* =========================================================
   AJUSTE FINAL CAJA BLANCA EDITOR
   Alto igual a ruta-mapa y márgenes simétricos
   ========================================================= */

/* Alto de referencia: misma altura que el bloque ruta-mapa */
body.editor-hoja-ruta-dos-columnas {
    --alto-editor-ruta: calc(100vh - 58px - 24px);
    --margen-editor-interno: 22px;
}

/* Contenedor derecho del editor */
body.editor-hoja-ruta-dos-columnas .layout-app .container {
    padding: 12px 18px 18px 18px !important;
    box-sizing: border-box !important;
}

/* El formulario ocupa una caja blanca con alto controlado */
body.editor-hoja-ruta-dos-columnas form {
    background: #ffffff !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 10px !important;
    padding: var(--margen-editor-interno) !important;
    height: calc(100vh - 58px - 112px) !important;
    max-height: calc(100vh - 58px - 112px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Quitamos la caja blanca individual duplicada de dentro */
body.editor-hoja-ruta-dos-columnas .editor-bloque {
    background: transparent !important;
}

/* Layout interior: respeta mismo margen izquierda/derecha */
body.editor-hoja-ruta-dos-columnas .editor-layout-2cols {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
}

/* Columna izquierda pegada al margen interior izquierdo */
body.editor-hoja-ruta-dos-columnas .editor-columna-principal {
    margin-left: 0 !important;
}

/* Columna derecha acaba con el mismo margen interior derecho */
body.editor-hoja-ruta-dos-columnas .editor-columna-lateral {
    margin-right: 0 !important;
}

/* Evita que los bloques internos añadan márgenes laterales extra */
body.editor-hoja-ruta-dos-columnas .bloque-datos-generales,
body.editor-hoja-ruta-dos-columnas .bloque-conductor-vehiculo,
body.editor-hoja-ruta-dos-columnas .bloque-naturaleza,
body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ajuste para que el alto de observaciones no empuje demasiado */
body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral textarea {
    height: 222px !important;
    min-height: 222px !important;
    max-height: 222px !important;
}

/* Si el contenido no cabe por poco, reducimos separación vertical */
body.editor-hoja-ruta-dos-columnas .editor-columna-principal,
body.editor-hoja-ruta-dos-columnas .editor-columna-lateral {
    gap: 10px !important;
}

body.editor-hoja-ruta-dos-columnas .editor-bloque {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}


/* =========================================================
   DESHACER BLOQUE BLANCO EXTRA DEL FORMULARIO
   ========================================================= */

/* El formulario no debe crear una caja blanca nueva */
body.editor-hoja-ruta-dos-columnas form {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
}

/* Los bloques internos vuelven a tener su caja normal */
body.editor-hoja-ruta-dos-columnas .editor-bloque {
    background: #ffffff !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 10px !important;
    padding: 13px 15px !important;
    box-sizing: border-box !important;
}

/* Mantenemos el layout de dos columnas que ya estaba bien */
body.editor-hoja-ruta-dos-columnas .editor-layout-2cols {
    height: auto !important;
    max-height: none !important;
    align-items: start !important;
}

/* Separación normal entre bloques */
body.editor-hoja-ruta-dos-columnas .editor-columna-principal,
body.editor-hoja-ruta-dos-columnas .editor-columna-lateral {
    gap: 12px !important;
}

/* =========================================================
   AJUSTE DEFINITIVO DOS COLUMNAS EDITOR
   Datos generales = ancho conductor / botones alineados
   ========================================================= */

body.editor-hoja-ruta-dos-columnas {
    --ancho-columna-principal-editor: 930px;
    --ancho-columna-lateral-editor: 420px;
}

/* Layout general: izquierda ancho fijo, derecha lateral */
body.editor-hoja-ruta-dos-columnas .editor-layout-2cols {
    display: grid !important;
    grid-template-columns: var(--ancho-columna-principal-editor) var(--ancho-columna-lateral-editor) !important;
    gap: 18px !important;
    align-items: start !important;
    justify-content: start !important;
    width: auto !important;
}

/* Columna principal exactamente igual para todos sus bloques */
body.editor-hoja-ruta-dos-columnas .editor-columna-principal {
    width: var(--ancho-columna-principal-editor) !important;
    max-width: var(--ancho-columna-principal-editor) !important;
    min-width: var(--ancho-columna-principal-editor) !important;
}

/* Todos los bloques de la izquierda con el mismo ancho */
body.editor-hoja-ruta-dos-columnas .bloque-datos-generales,
body.editor-hoja-ruta-dos-columnas .bloque-conductor-vehiculo,
body.editor-hoja-ruta-dos-columnas .bloque-naturaleza {
    width: var(--ancho-columna-principal-editor) !important;
    max-width: var(--ancho-columna-principal-editor) !important;
    min-width: var(--ancho-columna-principal-editor) !important;
    box-sizing: border-box !important;
}

/* Columna lateral */
body.editor-hoja-ruta-dos-columnas .editor-columna-lateral {
    width: var(--ancho-columna-lateral-editor) !important;
    max-width: var(--ancho-columna-lateral-editor) !important;
    min-width: var(--ancho-columna-lateral-editor) !important;
}

/* Observaciones del ancho exacto lateral */
body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral {
    width: var(--ancho-columna-lateral-editor) !important;
    max-width: var(--ancho-columna-lateral-editor) !important;
    min-width: var(--ancho-columna-lateral-editor) !important;
    box-sizing: border-box !important;
}

/* Datos generales: respetar fecha y hora pequeñas */
body.editor-hoja-ruta-dos-columnas .editor-fila-datos-generales {
    display: grid !important;
    grid-template-columns: 150px 110px 1fr 1fr !important;
    gap: 12px !important;
    align-items: end !important;
}

/* Paradas ocupa exactamente el ancho interno del bloque izquierdo */
body.editor-hoja-ruta-dos-columnas .editor-paradas-full {
    width: 100% !important;
}

body.editor-hoja-ruta-dos-columnas .editor-paradas-full textarea {
    width: 100% !important;
    height: 145px !important;
    min-height: 145px !important;
    max-height: 145px !important;
    resize: none !important;
}

/* Observaciones internas */
body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral textarea {
    width: 100% !important;
    height: 222px !important;
    min-height: 222px !important;
    max-height: 222px !important;
    resize: none !important;
}

/* Botonera: bloque propio con alineación perfecta */
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral {
    width: var(--ancho-columna-lateral-editor) !important;
    max-width: var(--ancho-columna-lateral-editor) !important;
    min-width: var(--ancho-columna-lateral-editor) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 8px 0 0 0 !important;
    height: 36px !important;
    line-height: 36px !important;
    box-sizing: border-box !important;
}

/* Botones: misma altura, mismo comportamiento */
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral button,
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral a {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 36px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: top !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    border: none !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

/* Guardar borrador verde */
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral button[type="submit"] {
    background: #92D050 !important;
    color: #ffffff !important;
}

/* Cancelar rojo */
body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral a {
    background: #FF0505 !important;
    color: #ffffff !important;
}

/* Campos inferiores: que no se estiren de forma rara */
body.editor-hoja-ruta-dos-columnas .bloque-conductor-vehiculo .editor-fila-dos-campos,
body.editor-hoja-ruta-dos-columnas .bloque-naturaleza .editor-fila-dos-campos {
    display: grid !important;
    grid-template-columns: 420px 420px !important;
    gap: 14px !important;
    justify-content: start !important;
    align-items: end !important;
}

/* Responsive solo en pantallas pequeñas */
@media (max-width: 1450px) {
    body.editor-hoja-ruta-dos-columnas .editor-layout-2cols {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    body.editor-hoja-ruta-dos-columnas .editor-columna-principal,
    body.editor-hoja-ruta-dos-columnas .bloque-datos-generales,
    body.editor-hoja-ruta-dos-columnas .bloque-conductor-vehiculo,
    body.editor-hoja-ruta-dos-columnas .bloque-naturaleza,
    body.editor-hoja-ruta-dos-columnas .editor-columna-lateral,
    body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral,
    body.editor-hoja-ruta-dos-columnas .editor-acciones-lateral {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* =========================================================
   REDUCIR SOLO LA CAJA BLANCA EXTERIOR DEL EDITOR
   AL ANCHO REAL DE LOS BLOQUES
   ========================================================= */

/* Variables de ancho ya usadas en el editor */
body.editor-hoja-ruta-dos-columnas {
    --ancho-columna-principal-editor: 930px;
    --ancho-columna-lateral-editor: 420px;
    --separacion-columnas-editor: 18px;
}

/* Caja blanca exterior que contiene el formulario */
body.editor-hoja-ruta-dos-columnas .layout-app .container .card:has(.editor-layout-2cols),
body.editor-hoja-ruta-dos-columnas .layout-app .container .form-card:has(.editor-layout-2cols),
body.editor-hoja-ruta-dos-columnas .layout-app .container section:has(.editor-layout-2cols) {
    width: calc(
        var(--ancho-columna-principal-editor) +
        var(--ancho-columna-lateral-editor) +
        var(--separacion-columnas-editor) +
        30px
    ) !important;

    max-width: calc(
        var(--ancho-columna-principal-editor) +
        var(--ancho-columna-lateral-editor) +
        var(--separacion-columnas-editor) +
        30px
    ) !important;

    min-width: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* El formulario no debe estirar la caja exterior */
body.editor-hoja-ruta-dos-columnas form:has(.editor-layout-2cols) {
    width: auto !important;
    max-width: none !important;
}

/* El layout interior mantiene su ancho real */
body.editor-hoja-ruta-dos-columnas .editor-layout-2cols {
    width: calc(
        var(--ancho-columna-principal-editor) +
        var(--ancho-columna-lateral-editor) +
        var(--separacion-columnas-editor)
    ) !important;

    max-width: calc(
        var(--ancho-columna-principal-editor) +
        var(--ancho-columna-lateral-editor) +
        var(--separacion-columnas-editor)
    ) !important;
}


/* =========================================================
   ALTO CAJA BLANCA EDITOR SIN CREAR SCROLL
   ========================================================= */

/* Ajusta aquí la altura visual de la caja blanca */
body.editor-hoja-ruta-dos-columnas {
    --alto-caja-editor: calc(100vh - 160px);
}

/* Caja blanca exterior del editor */
body.editor-hoja-ruta-dos-columnas .layout-app .container .card:has(.editor-layout-2cols),
body.editor-hoja-ruta-dos-columnas .layout-app .container .form-card:has(.editor-layout-2cols),
body.editor-hoja-ruta-dos-columnas .layout-app .container section:has(.editor-layout-2cols) {
    min-height: var(--alto-caja-editor) !important;
    height: var(--alto-caja-editor) !important;
    max-height: var(--alto-caja-editor) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* El contenido interior no debe estirar la caja hacia abajo */
body.editor-hoja-ruta-dos-columnas .editor-layout-2cols {
    max-height: 100% !important;
    overflow: hidden !important;
}

/* Las columnas internas se adaptan al alto disponible */
body.editor-hoja-ruta-dos-columnas .editor-columna-principal,
body.editor-hoja-ruta-dos-columnas .editor-columna-lateral {
    max-height: 100% !important;
    overflow: hidden !important;
}

/* Reducimos ligeramente separaciones verticales para que todo quepa */
body.editor-hoja-ruta-dos-columnas .editor-columna-principal,
body.editor-hoja-ruta-dos-columnas .editor-columna-lateral {
    gap: 10px !important;
}

body.editor-hoja-ruta-dos-columnas .editor-bloque {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

/* Ajuste de alturas de textareas para evitar scroll */
body.editor-hoja-ruta-dos-columnas .editor-paradas-full textarea {
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
}

body.editor-hoja-ruta-dos-columnas .bloque-observaciones-lateral textarea {
    height: 185px !important;
    min-height: 185px !important;
    max-height: 185px !important;
}


/* Botón OBS */
.acciones-grid .btn-obs {
    background: #FFC000 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Modal observaciones internas */
.modal-obs {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    z-index: 20000 !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-obs-contenido {
    width: 520px !important;
    max-width: calc(100vw - 40px) !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important;
    overflow: hidden !important;
}

.modal-obs-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    background: #f3f4f6 !important;
    border-bottom: 1px solid #d1d5db !important;
}

.modal-obs-header h2 {
    margin: 0 !important;
    font-size: 18px !important;
}

.modal-obs-header button {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #FF0505 !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 28px !important;
    cursor: pointer !important;
}

.modal-obs-texto {
    padding: 18px !important;
    white-space: pre-wrap !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #111827 !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
}

/* OBS en amarillo corporativo */
.acciones-grid .btn-obs {
    background: #FFC000 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Modal observaciones internas */
.modal-obs {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    z-index: 20000 !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-obs-contenido {
    width: 520px !important;
    max-width: calc(100vw - 40px) !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important;
    overflow: hidden !important;
}

.modal-obs-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    background: #f3f4f6 !important;
    border-bottom: 1px solid #d1d5db !important;
}

.modal-obs-header h2 {
    margin: 0 !important;
    font-size: 18px !important;
}

.modal-obs-header button {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #FF0505 !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 28px !important;
    cursor: pointer !important;
}

.modal-obs-texto {
    padding: 18px !important;
    white-space: pre-wrap !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #111827 !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
}

/* OBS */
.acciones-grid .btn-obs {
    background: #FFC000 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Modal OBS */
.modal-obs {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    z-index: 30000 !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-obs-contenido {
    width: 560px !important;
    max-width: calc(100vw - 40px) !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important;
}

.modal-obs-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    background: #f3f4f6 !important;
    border-bottom: 1px solid #d1d5db !important;
}

.modal-obs-header h2 {
    margin: 0 !important;
    font-size: 18px !important;
}

.modal-obs-header button {
    background: #FF0505 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.modal-obs-texto {
    padding: 18px !important;
    white-space: pre-wrap !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #111827 !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
}

/* Botón OBS */
.acciones-grid .btn-obs {
    background: #FFC000 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Ventana OBS */
.modal-obs {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    z-index: 30000 !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-obs-contenido {
    width: 560px !important;
    max-width: calc(100vw - 40px) !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important;
}

.modal-obs-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    background: #f3f4f6 !important;
    border-bottom: 1px solid #d1d5db !important;
}

.modal-obs-header h2 {
    margin: 0 !important;
    font-size: 18px !important;
}

.modal-obs-header button {
    background: #FF0505 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.modal-obs-texto {
    padding: 18px !important;
    white-space: pre-wrap !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #111827 !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
}

/* =========================================================
   ARREGLO BOTÓN SALIR MODAL OBSERVACIONES
   ========================================================= */

.modal-obs-header button,
#cerrarModalObs {
    width: auto !important;
    min-width: 78px !important;
    height: 34px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 34px !important;
    background: #FF0505 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.modal-obs-header {
    gap: 16px !important;
}

.modal-obs-header h2 {
    flex: 1 1 auto !important;
}


/* =========================================================
   ARREGLO BOTÓN SALIR MODAL OBSERVACIONES
   ========================================================= */

.modal-obs-header button,
#cerrarModalObs {
    width: auto !important;
    min-width: 78px !important;
    height: 34px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 34px !important;
    background: #FF0505 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.modal-obs-header {
    gap: 16px !important;
}

.modal-obs-header h2 {
    flex: 1 1 auto !important;
}


/* =========================================================
   BOTONES LISTADO HOJAS DE RUTA MÁS BAJOS
   ========================================================= */

.acciones-grid {
    gap: 4px !important;
}

.acciones-grid .btn-small,
.acciones-grid button.btn-small,
.acciones-grid a.btn-small {
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    padding: 4px 5px !important;
    font-size: 11px !important;
    line-height: 13px !important;
    border-radius: 6px !important;
}

.tabla-hojas th,
.tabla-hojas td {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}


/* =========================================================
   VISTA PREVIA HOJA DE RUTA COMPLETA
   ========================================================= */

/* En vista previa no bloqueamos el scroll */
html.vista-previa-hoja-completa-html,
body.vista-previa-hoja-completa {
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important;
    background: #e5e7eb !important;
}

/* Si la vista previa carga dentro del layout normal, anulamos bloqueos */
body.vista-previa-hoja-completa .layout-app {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: block !important;
}

/* Ocultamos lateral de imágenes en vista previa */
body.vista-previa-hoja-completa .sidebar-visual {
    display: none !important;
}

/* Contenedor libre para ver todo el documento */
body.vista-previa-hoja-completa .layout-app .container,
body.vista-previa-hoja-completa .container {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 20px !important;
    margin: 0 auto !important;
    max-width: none !important;
    display: block !important;
}

/* La barra superior no debe tapar el documento */
body.vista-previa-hoja-completa .topbar {
    position: static !important;
}

/* Documento centrado y visible */
body.vista-previa-hoja-completa .hoja-ruta,
body.vista-previa-hoja-completa .hoja-ruta-a4,
body.vista-previa-hoja-completa .documento-hoja-ruta,
body.vista-previa-hoja-completa .pagina-a4 {
    margin: 20px auto !important;
    transform-origin: top center !important;
}

/* En pantallas pequeñas permitimos desplazamiento horizontal */
body.vista-previa-hoja-completa {
    overflow-x: auto !important;
    overflow-y: auto !important;
}


/* =========================================================
   IDENTIFICACIÓN SERVICIO REFORZADO BLOQUEADA
   ========================================================= */

.campo-refuerzo-bloqueado {
    background: #4b5563 !important;
    color: #ffffff !important;
    border-color: #374151 !important;
    cursor: not-allowed !important;
}

.campo-refuerzo-bloqueado::placeholder {
    color: #d1d5db !important;
}

/* Campo identificación servicio reforzado bloqueado */
.identificacion-bloqueada {
    background: #374151 !important;
    color: #ffffff !important;
    border-color: #1f2937 !important;
    cursor: not-allowed !important;
}

.identificacion-bloqueada:focus {
    outline: none !important;
    box-shadow: none !important;
}

.identificacion-bloqueada::placeholder {
    color: #d1d5db !important;
}

/* Bloqueo visual fuerte: identificación servicio reforzado */
.identificacion-refuerzo-bloqueada,
input.identificacion-refuerzo-bloqueada,
textarea.identificacion-refuerzo-bloqueada,
select.identificacion-refuerzo-bloqueada {
    background-color: #374151 !important;
    color: #ffffff !important;
    border-color: #1f2937 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.identificacion-refuerzo-bloqueada::placeholder {
    color: #d1d5db !important;
}

/* Color claro para identificación servicio reforzado bloqueada */
.identificacion-refuerzo-bloqueada,
input.identificacion-refuerzo-bloqueada,
textarea.identificacion-refuerzo-bloqueada,
select.identificacion-refuerzo-bloqueada,
.campo-refuerzo-bloqueado {
    background-color: #d1d5db !important;
    color: #111827 !important;
    border-color: #9ca3af !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.identificacion-refuerzo-bloqueada::placeholder,
.campo-refuerzo-bloqueado::placeholder {
    color: #6b7280 !important;
}

/* Color definitivo para identificación servicio reforzado bloqueada */
.identificacion-refuerzo-bloqueada,
input.identificacion-refuerzo-bloqueada,
textarea.identificacion-refuerzo-bloqueada,
select.identificacion-refuerzo-bloqueada,
.campo-refuerzo-bloqueado {
    background-color: #F2F2F2 !important;
    color: #111827 !important;
    border-color: #c9c9c9 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.identificacion-refuerzo-bloqueada::placeholder,
.campo-refuerzo-bloqueado::placeholder {
    color: #6b7280 !important;
}

/* Color definitivo para identificación servicio reforzado bloqueada */
.identificacion-refuerzo-bloqueada,
input.identificacion-refuerzo-bloqueada,
textarea.identificacion-refuerzo-bloqueada,
select.identificacion-refuerzo-bloqueada,
.campo-refuerzo-bloqueado {
    background-color: #F2F2F2 !important;
    color: #111827 !important;
    border-color: #c9c9c9 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.identificacion-refuerzo-bloqueada::placeholder,
.campo-refuerzo-bloqueado::placeholder {
    color: #6b7280 !important;
}

/* Color definitivo para identificación servicio reforzado bloqueada */
.identificacion-refuerzo-bloqueada,
input.identificacion-refuerzo-bloqueada,
textarea.identificacion-refuerzo-bloqueada,
select.identificacion-refuerzo-bloqueada,
.campo-refuerzo-bloqueado {
    background-color: #F2F2F2 !important;
    color: #111827 !important;
    border-color: #c9c9c9 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.identificacion-refuerzo-bloqueada::placeholder,
.campo-refuerzo-bloqueado::placeholder {
    color: #6b7280 !important;
}

/* =========================================================
   BOTÓN Y MODAL OBS GLOBAL
   ========================================================= */

.btn-obs,
a.btn-obs,
button.btn-obs {
    background: #FFC000 !important;
    color: #ffffff !important;
    border: none !important;
}

.modal-obs {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: 30000 !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-obs-contenido {
    width: 560px !important;
    max-width: calc(100vw - 40px) !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.35) !important;
}

.modal-obs-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    background: #f3f4f6 !important;
    border-bottom: 1px solid #d1d5db !important;
    gap: 16px !important;
}

.modal-obs-header h2 {
    margin: 0 !important;
    font-size: 18px !important;
    color: #111827 !important;
}

.modal-obs-header button {
    width: auto !important;
    min-width: 78px !important;
    height: 34px !important;
    padding: 0 16px !important;
    background: #FF0505 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.modal-obs-texto {
    padding: 18px !important;
    white-space: pre-wrap !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #111827 !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
}

/* =========================================================
   ALINEAR BOTONES EN TABLAS: EDITAR / ELIMINAR / OBS
   ========================================================= */

td.actions,
td.text-right.actions {
    vertical-align: middle !important;
    white-space: nowrap !important;
}

td.actions .btn-small,
td.actions button.btn-small,
td.actions a.btn-small,
td.text-right.actions .btn-small,
td.text-right.actions button.btn-small,
td.text-right.actions a.btn-small {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 30px !important;
    line-height: 30px !important;
}

td.actions .inline-form,
td.text-right.actions .inline-form {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   TABLAS COMPACTAS: CONDUCTORES / VEHÍCULOS / CONTRATANTES
   Mismo tamaño visual que hojas de ruta
   ========================================================= */

body.tabla-maestro-compacta .table-card table {
    font-size: 12px !important;
}

body.tabla-maestro-compacta .table-card th {
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 8px 12px !important;
    line-height: 14px !important;
}

body.tabla-maestro-compacta .table-card td {
    font-size: 12px !important;
    padding: 7px 12px !important;
    line-height: 15px !important;
    vertical-align: middle !important;
}

body.tabla-maestro-compacta .table-card td strong {
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.tabla-maestro-compacta td.actions,
body.tabla-maestro-compacta td.text-right.actions {
    vertical-align: middle !important;
    white-space: nowrap !important;
}

body.tabla-maestro-compacta td.actions .btn-small,
body.tabla-maestro-compacta td.actions button.btn-small,
body.tabla-maestro-compacta td.actions a.btn-small,
body.tabla-maestro-compacta td.text-right.actions .btn-small,
body.tabla-maestro-compacta td.text-right.actions button.btn-small,
body.tabla-maestro-compacta td.text-right.actions a.btn-small {
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    line-height: 13px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 800 !important;
}

body.tabla-maestro-compacta td.actions .inline-form,
body.tabla-maestro-compacta td.text-right.actions .inline-form {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.tabla-maestro-compacta .btn-obs,
body.tabla-maestro-compacta button.btn-obs,
body.tabla-maestro-compacta a.btn-obs {
    background: #FFC000 !important;
    color: #ffffff !important;
    border: none !important;
}

body.tabla-maestro-compacta .btn-danger,
body.tabla-maestro-compacta button.btn-danger {
    background: #FF0505 !important;
    color: #ffffff !important;
    border: none !important;
}

/* =========================================================
   AJUSTE FINAL TABLAS COMPACTAS + USUARIOS
   Conductores / Vehículos / Contratantes / Usuarios
   ========================================================= */

body.tabla-maestro-compacta .table-card table {
    font-size: 12px !important;
}

body.tabla-maestro-compacta .table-card th {
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 8px 12px !important;
    line-height: 14px !important;
}

body.tabla-maestro-compacta .table-card td {
    font-size: 12px !important;
    padding: 7px 12px !important;
    line-height: 15px !important;
    vertical-align: middle !important;
}

body.tabla-maestro-compacta .table-card td strong {
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* Botones normales en azul como hoja de ruta */
body.tabla-maestro-compacta .btn-small,
body.tabla-maestro-compacta a.btn-small,
body.tabla-maestro-compacta button.btn-small {
    background: #63A4F7 !important;
    color: #ffffff !important;
    border: none !important;
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    line-height: 13px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 800 !important;
}

/* OBS sigue naranja */
body.tabla-maestro-compacta .btn-obs,
body.tabla-maestro-compacta button.btn-obs,
body.tabla-maestro-compacta a.btn-obs {
    background: #FFC000 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Eliminar sigue rojo */
body.tabla-maestro-compacta .btn-danger,
body.tabla-maestro-compacta button.btn-danger,
body.tabla-maestro-compacta a.btn-danger {
    background: #FF0505 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Alineación de acciones */
body.tabla-maestro-compacta td.actions,
body.tabla-maestro-compacta td.text-right.actions {
    vertical-align: middle !important;
    white-space: nowrap !important;
}

body.tabla-maestro-compacta td.actions .inline-form,
body.tabla-maestro-compacta td.text-right.actions .inline-form {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   USUARIOS COMPACTO - AJUSTE DIRECTO
   ========================================================= */

body.usuarios-compacto table {
    font-size: 12px !important;
}

body.usuarios-compacto th {
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 8px 12px !important;
    line-height: 14px !important;
}

body.usuarios-compacto td {
    font-size: 12px !important;
    padding: 7px 12px !important;
    line-height: 15px !important;
    vertical-align: middle !important;
}

body.usuarios-compacto td strong {
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.usuarios-compacto .btn-small,
body.usuarios-compacto a.btn-small,
body.usuarios-compacto button.btn-small,
body.usuarios-compacto .btn,
body.usuarios-compacto a.btn,
body.usuarios-compacto button.btn {
    background: #63A4F7 !important;
    color: #ffffff !important;
    border: none !important;
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    line-height: 13px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 800 !important;
}

body.usuarios-compacto .btn-danger,
body.usuarios-compacto button.btn-danger,
body.usuarios-compacto a.btn-danger {
    background: #FF0505 !important;
    color: #ffffff !important;
    border: none !important;
}

body.usuarios-compacto td.actions,
body.usuarios-compacto td.text-right.actions {
    vertical-align: middle !important;
    white-space: nowrap !important;
}

body.usuarios-compacto .inline-form {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   USUARIOS - MISMO TAMAÑO Y BOTONES QUE HOJAS DE RUTA
   ========================================================= */

.usuarios-table-card table {
    font-size: 12px !important;
}

.usuarios-table-card th {
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 8px 12px !important;
    line-height: 14px !important;
}

.usuarios-table-card td {
    font-size: 12px !important;
    padding: 7px 12px !important;
    line-height: 15px !important;
    vertical-align: middle !important;
}

.usuarios-table-card td strong {
    font-size: 12px !important;
    font-weight: 800 !important;
}

.usuarios-table-card td.actions,
.usuarios-table-card td.text-right.actions {
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.usuarios-table-card .inline-form {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Botones normales de usuarios en azul */
.usuarios-table-card .btn-small,
.usuarios-table-card a.btn-small,
.usuarios-table-card button.btn-small,
.usuarios-table-card .btn-secondary,
.usuarios-table-card button.btn-secondary,
.usuarios-table-card a.btn-secondary {
    background: #63A4F7 !important;
    color: #ffffff !important;
    border: none !important;
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    line-height: 13px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 800 !important;
}

/* Eliminar sigue rojo */
.usuarios-table-card .btn-danger,
.usuarios-table-card button.btn-danger,
.usuarios-table-card a.btn-danger {
    background: #FF0505 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Texto "Usuario actual" compacto */
.usuarios-table-card .muted {
    font-size: 12px !important;
}
EOFcat >> public/css/style.css <<'EOF'

/* =========================================================
   USUARIOS - MISMO TAMAÑO Y BOTONES QUE HOJAS DE RUTA
   ========================================================= */

.usuarios-table-card table {
    font-size: 12px !important;
}

.usuarios-table-card th {
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 8px 12px !important;
    line-height: 14px !important;
}

.usuarios-table-card td {
    font-size: 12px !important;
    padding: 7px 12px !important;
    line-height: 15px !important;
    vertical-align: middle !important;
}

.usuarios-table-card td strong {
    font-size: 12px !important;
    font-weight: 800 !important;
}

.usuarios-table-card td.actions,
.usuarios-table-card td.text-right.actions {
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.usuarios-table-card .inline-form {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Botones normales de usuarios en azul */
.usuarios-table-card .btn-small,
.usuarios-table-card a.btn-small,
.usuarios-table-card button.btn-small,
.usuarios-table-card .btn-secondary,
.usuarios-table-card button.btn-secondary,
.usuarios-table-card a.btn-secondary {
    background: #63A4F7 !important;
    color: #ffffff !important;
    border: none !important;
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    line-height: 13px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 800 !important;
}

/* Eliminar sigue rojo */
.usuarios-table-card .btn-danger,
.usuarios-table-card button.btn-danger,
.usuarios-table-card a.btn-danger {
    background: #FF0505 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Texto "Usuario actual" compacto */
.usuarios-table-card .muted {
    font-size: 12px !important;
}

/* =========================================================
   USUARIOS - MISMO TAMAÑO Y BOTONES QUE HOJAS DE RUTA
   ========================================================= */

.usuarios-table-card table {
    font-size: 12px !important;
}

.usuarios-table-card th {
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 8px 12px !important;
    line-height: 14px !important;
}

.usuarios-table-card td {
    font-size: 12px !important;
    padding: 7px 12px !important;
    line-height: 15px !important;
    vertical-align: middle !important;
}

.usuarios-table-card td strong {
    font-size: 12px !important;
    font-weight: 800 !important;
}

.usuarios-table-card .btn-small,
.usuarios-table-card a.btn-small,
.usuarios-table-card button.btn-small,
.usuarios-table-card button.btn-secondary {
    background: #63A4F7 !important;
    color: #ffffff !important;
    border: none !important;
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    line-height: 13px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 800 !important;
}

.usuarios-table-card .btn-danger,
.usuarios-table-card button.btn-danger {
    background: #FF0505 !important;
    color: #ffffff !important;
    border: none !important;
}

.usuarios-table-card .inline-form {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

.usuarios-table-card td.actions,
.usuarios-table-card td.text-right.actions {
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* =========================================================
   BOTONES NUEVO: CONDUCTOR / VEHÍCULO / CONTRATANTE
   Igual que Nuevo usuario
   ========================================================= */

.page-header a.btn[href="/conductores/nuevo"],
.page-header a.btn[href="/vehiculos/nuevo"],
.page-header a.btn[href="/contratantes/nuevo"],
.page-header a.btn[href="/usuarios/nuevo"] {
    background: #63A4F7 !important;
    color: #ffffff !important;
    border: none !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    line-height: 34px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

/* Botón Email hoja de ruta */
.acciones-grid form[action*="enviar-email"] button {
    background: #63A4F7 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Botón Email hoja de ruta en verde */
.acciones-grid form[action*="enviar-email"] button {
    background: #92D050 !important;
    color: #ffffff !important;
    border: none !important;
}