/* --- Estilos Generales y Responsivos --- */
    #madifyFront {
        margin: 20px auto; /* Centrar y añadir margen */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding: 0 15px; /* Añadir un poco de padding lateral en todas las pantallas */
        box-sizing: border-box;
    }

    /* Ajustes para que el formulario ocupe el ancho disponible */
    .madify-form {
        max-width: 100%; /* Permite que ocupe todo el ancho disponible */
        width: 100%;
        margin: 20px auto;
        padding: 20px;
        background: #fff;
        display: grid;
        grid-template-columns: 1fr; /* Por defecto, una sola columna para moviles */
        gap: 15px;
        font-family: sans-serif;
        border: 1px solid #e0e0e0; /* Borde más suave */
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Sombra más pronunciada para profesionalidad */
    }
    .madify-form .full { grid-column: 1 / -1; }
    .madify-form h2, .madify-form h3 { grid-column: 1 / -1; text-align: center; margin: 10px 0; color: #333; }
    .madify-form h3 { color: #0056b3; } /* Color para subtítulos */

    .madify-form input, .madify-form select, .madify-form textarea {
        padding: 12px; /* Padding más generoso */
        border: 1px solid #ccc;
        border-radius: 8px; /* Bordes más redondeados */
        font-size: 1rem; /* Tamaño de fuente más estándar */
        width: 100%;
        box-sizing: border-box;
        transition: border-color 0.3s ease; /* Transición suave al enfocar */
    }
    .madify-form input:focus, .madify-form select:focus, .madify-form textarea:focus {
        border-color: #007bff; /* Color de enfoque azul */
        outline: none; /* Quitar outline por defecto */
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Sombra suave al enfocar */
    }
    .madify-form textarea { resize: vertical; min-height: 100px; }
    .madify-form label { font-weight: 600; margin-bottom: 8px; display: block; color: #555; }
    .madify-form button[type="submit"] {
        background-color: #007bff; /* Botón principal azul */
        color: white;
        border: none;
        cursor: pointer;
        font-size: 1.1rem;
        padding: 12px 25px;
        transition: background-color 0.3s ease, transform 0.2s ease;
        border-radius: 8px;
    }
    .madify-form button[type="submit"]:hover { background-color: #0056b3; transform: translateY(-2px); }
    .madify-form button[type="submit"]:disabled { background-color: #cccccc; cursor: not-allowed; transform: none; }

    /* Estilo para el checkbox de condiciones */
    .condiciones-container {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        font-size: 0.9rem;
        color: #555;
    }
    .condiciones-container input[type="checkbox"] {
        width: 20px;
        height: 20px;
        accent-color: #007bff;
        cursor: pointer;
    }
    .condiciones-container a {
        color: #007bff;
        text-decoration: underline;
        cursor: pointer;
        font-weight: 500;
    }
    .condiciones-container a:hover { color: #0056b3; }

    /* Modal para condiciones */
    #modalCondiciones {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.7);
        z-index: 9999;
        display: none;
        justify-content: center;
        align-items: center;
        padding: 15px; /* Padding para que el modal no se pegue a los bordes en móvil */
        box-sizing: border-box;
    }
    #modalCondiciones .content {
        background: #fff;
        padding: 30px;
        max-width: 500px;
        width: 100%; /* Asegura que tome el ancho disponible hasta max-width */
        border-radius: 12px; /* Bordes más redondeados */
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        text-align: center;
    }
    #modalCondiciones h3 { margin-top: 0; font-size: 1.5rem; color: #333; margin-bottom: 20px; }
    #modalCondiciones ul {
        padding-left: 25px;
        text-align: left; /* Alineación a la izquierda para la lista */
        margin-bottom: 25px;
        line-height: 1.6;
        color: #444;
        font-size: 0.95rem;
    }
    #modalCondiciones li { margin-bottom: 12px; }
    #modalCondiciones .buttons { display: flex; gap: 15px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } /* Permite que los botones se apilen si no caben */
    #modalCondiciones button {
        padding: 12px 25px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        font-weight: bold;
        font-size: 1rem;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    #modalCondiciones button:first-child { background: #007bff; color: white; }
    #modalCondiciones button:first-child:hover { background: #0056b3; transform: translateY(-2px); }
    #modalCondiciones button:last-child { background: #e0e0e0; color: #333; }
    #modalCondiciones button:last-child:hover { background: #ccc; transform: translateY(-2px); }

    /* Contenedor de firma */
    #firmaContainer {
        margin-top: 20px;
        text-align: center;
        background-color: #f9f9f9; /* Fondo más claro */
        padding: 20px;
        border: 1px dashed #d0d0d0; /* Borde punteado más suave */
        border-radius: 10px;
    }
    #canvasFirma {
        border: 1px solid #bbb; /* Borde del canvas más suave */
        background-color: #fff;
        cursor: crosshair;
        width: 100%; /* Asegura que el canvas tome el ancho disponible */
        max-width: 380px; /* Límite de ancho para el canvas */
        height: 120px; /* Altura fija o proporcional */
    }
    #btnLimpiarFirma {
        margin-top: 15px;
        padding: 10px 18px;
        background-color: #dc3545; /* Botón rojo para limpiar */
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1rem;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    #btnLimpiarFirma:hover { background-color: #c82333; transform: translateY(-2px); }

    /* Mensajes de carga y éxito */
    .loading-msg, .success-msg, .error-msg {
        grid-column: 1 / -1;
        text-align: center;
        font-weight: bold;
        margin: 15px 0;
        padding: 12px; /* Padding más generoso para mensajes */
        border-radius: 8px; /* Bordes más redondeados */
        font-size: 1rem;
    }
    .loading-msg { color: #007bff; background-color: #e7f3ff; }
    .success-msg { color: #28a745; background-color: #d4edda; }
    .error-msg { color: #dc3545; background-color: #f8d7da; }

    /* --- Estilos para la sección de Órdenes (frontend) --- */
    #mr-ordenes-container { padding: 0; }
    .orden-card-container { padding: 0; }
    .orden-card {
        background: #eef7ff; /* Fondo azul claro para las tarjetas de orden */
        border: 1px solid #bde0ff; /* Borde azul suave */
        border-radius: 10px; /* Bordes más redondeados */
        padding: 20px 25px;
        margin: 20px auto;
        box-shadow: 0 6px 15px rgba(0,123,255,0.1); /* Sombra con el color de marca */
        color: #333;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas más amplias */
        gap: 15px 30px;
    }
    .orden-card h3 {
        grid-column: 1/-1;
        font-size: 1.3rem; /* Título más grande */
        color: #0056b3; /* Color azul para el título */
        margin: 0 0 15px;
        border-bottom: 1px solid #cce5ff; /* Borde inferior suave */
        padding-bottom: 8px;
    }
    .orden-card p { margin: 5px 0; font-size: 0.95rem; line-height: 1.5em; }
    .orden-card p strong {
        color: #0056b3; /* Color azul para las etiquetas */
        display: block;
        font-weight: 600;
        margin-bottom: 5px; /* Espacio entre etiqueta y valor */
    }
    .orden-card select.mr-select-estado {
        margin-left: 8px;
        padding: 6px 10px; /* Padding para el select */
        border-radius: 6px;
        border: 1px solid #ccc;
        width: auto;
        min-width: 140px;
        font-size: 0.9rem;
    }
    .orden-card button.mr-btn-guardar {
        background: #007bff;
        color: #fff;
        border: none;
        padding: 6px 12px;
        margin-left: 8px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.85rem;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    .orden-card button.mr-btn-guardar:hover { background: #0056b3; transform: translateY(-1px); }

    /* Estilos para el campo de búsqueda en la lista de órdenes */
    .orden-search-bar {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap; /* Permite que los elementos se apilen */
    }
    .orden-search-bar input[type="number"] {
        padding: 10px;
        width: 250px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 1rem;
    }
    .orden-search-bar button {
        padding: 10px 15px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        font-size: 1rem;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    .orden-search-bar .btn-buscar { background: #007bff; color: #fff; }
    .orden-search-bar .btn-buscar:hover { background: #0056b3; transform: translateY(-1px); }
    .orden-search-bar .btn-restablecer { background: #6c757d; color: #fff; }
    .orden-search-bar .btn-restablecer:hover { background: #5a6268; transform: translateY(-1px); }

    /* Botón de imprimir recibo */
    .btn-imprimir {
        background: #28a745; /* Botón verde para imprimir */
        color: #fff;
        padding: 10px 15px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        font-size: 1rem;
        float: right;
        margin-top: 18px; /* Ajuste de margen */
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    .btn-imprimir:hover { background: #218838; transform: translateY(-1px); }

    /* --- Estilos para las Pestañas --- */
    .mr-tabs {
        display: flex;
        border-bottom: 2px solid #dee2e6; /* Borde inferior más suave */
        margin: 0; padding: 0; list-style: none;
        overflow-x: auto; /* Permite scroll si hay muchas pestañas */
        white-space: nowrap; /* Mantiene las pestañas en una sola línea */
    }
    .mr-tabs li { margin-right: 5px; }
    .mr-tabs button {
        color: #6c757d; /* Color de texto gris para inactiva */
        padding: 12px 25px;
        background: #f8f9fa; /* Fondo gris claro para inactiva */
        border: none;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 8px 8px 0 0;
        transition: all 0.3s ease;
        flex-shrink: 0; /* Evita que las pestañas se encojan */
    }
    .mr-tabs button.active {
        background: #ffffff; /* Fondo blanco para activa */
        border-bottom: 2px solid #ffffff; /* Elimina el borde inferior visible de la pestaña */
        font-weight: bold;
        color: #007bff; /* Color azul para activa */
        margin-bottom: -2px;
        position: relative;
        z-index: 2;
    }

    /* Contenedor de contenido de las pestañas */
    .mr-tab-content {
        border: 1px solid #dee2e6; /* Borde uniforme */
        border-top: none; /* Quitamos el borde superior para que se una con la pestaña activa */
        border-radius: 0 0 10px 10px; /* Bordes inferiores redondeados */
        padding: 25px; /* Padding interno */
        margin-top: -1px;
        background: white;
        position: relative;
        z-index: 1;
        min-height: 300px;
        display: none;
    }
    .mr-tab-content.active { display: block; }

    /* Media Queries para adaptar el layout */
    @media (min-width: 768px) {
        .madify-form {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 2 columnas en tablets */
        }
        .madify-form .field-group { /* Asegura que los campos ocupen su columna */
            width: 100%;
        }
        .madify-form h2, .madify-form h3 { text-align: left; } /* Títulos a la izquierda en pantallas más grandes */
    }
    @media (min-width: 992px) {
        .madify-form {
            grid-template-columns: repeat(3, 1fr); /* 3 columnas en escritorios */
        }
        .madify-form .full { grid-column: 1 / -1; } /* Asegura que los full sigan ocupando todo el ancho */
    }
    @media (max-width: 767px) { /* Estilos para moviles */
        #madifyFront { padding: 0 10px; } /* Menos padding en móviles */
        .madify-form { padding: 15px; }
        .madify-form h2 { font-size: 1.5rem; }
        .madify-form h3 { font-size: 1.2rem; }
        .madify-form input, .madify-form select, .madify-form textarea { font-size: 0.95rem; padding: 10px; }
        .madify-form button[type="submit"] { font-size: 1rem; padding: 10px 20px; }
        .condiciones-container { font-size: 0.85rem; }
        .mr-tabs button { padding: 10px 15px; font-size: 0.9rem; }
        .mr-tab-content { padding: 20px; }
        .orden-card { padding: 15px; }
        .orden-card h3 { font-size: 1.2rem; }
        .orden-card p { font-size: 0.9rem; }
        .orden-card select.mr-select-estado { min-width: 120px; font-size: 0.85rem; padding: 5px 8px;}
        .orden-card button.mr-btn-guardar { font-size: 0.8rem; padding: 5px 10px;}
        .orden-search-bar { flex-direction: column; align-items: stretch; } /* Apilar elementos de búsqueda */
        .orden-search-bar input[type="number"] { width: 100%; }
        .btn-imprimir { float: none; width: 100%; margin-top: 15px; text-align: center; }
    }
    @media (max-width: 480px) { /* Estilos aún más pequeños si es necesario */
        .madify-form { padding: 10px; }
        .madify-form h2 { font-size: 1.3rem; }
        #modalCondiciones .buttons { flex-direction: column; gap: 10px; }
        #modalCondiciones button { width: 100%; }
    }