/* medium.css */

@media screen and (min-width: 768px) {

    /* --- Base Styles & Typography adjustments for Tablet --- */
    h1 {
        font-size: 2.5em;
        /* Larger h1 for tablet */
    }

    /* Logo specific adjustment for desktop */
    .logo-li {
        /* Keep mobile-like behavior if it's the logo inside the nav */
        /* If logo is in header outside nav, this rule might not apply */
        margin-right: 0;
        padding: 0;
        width: auto;
    }

    .logo {
        width: 70px;
        /* Slightly larger logo for tablet */
    }

    /* --- Main Content & Sections for Tablet --- */

    main {
        padding: 20px;
        /* Consistent padding */
        width: 90%;
        /* Main takes more width on tablet */
        max-width: 900px;
        /* Adjust max width for main */
    }

    main div {
        width: 100%;
    }

    .hero-content {
        min-height: 500px;
        /* More height for hero content on tablet */
    }

    .feature {
        display: inline-block;
        /* Display features side-by-side on tablet */
        width: 48%;
        /* Two columns */
        margin: 15px 1%;
        /* Adjust margin for spacing */
    }

    /* --- Buttons adjustments for Tablet --- */
    .card button {
        width: auto;
        /* Allow buttons to size naturally */
        display: inline-block;
        /* Display side by side */
        margin: 5px;
        /* Add some margin between buttons */
    }

    #boton-actualizar-perfil {
        width: auto;
        /* Allow to size naturally */
    }

    /* --- Cards adjustments for Tablet --- */
    .card label {
        display: block;
        /* Keep labels on their own line for better readability in forms */
        width: auto;
        margin-bottom: 5px;
        /* Add some space below labels */
        margin-right: 0;
    }

    .card input[type="text"],
    .card input[type="number"],
    .card textarea {
        /* Added textarea here */
        width: calc(100% - 20px);
        /* Adjust width to fit within card padding */
        margin: 0 auto 10px auto;
        /* Center input and add bottom margin */
        display: block;
        /* Ensure they take full width */
    }

    .card textarea {
        min-height: 80px;
        /* Ensure a decent height for textareas */
    }


    /* --- Tables adjustments for Tablet --- */
    table {
        font-size: 14px;
        /* Slightly larger font for tablet tables */
    }

    th,
    td {
        padding: 10px 12px;
        /* More padding for tablet tables */
    }

    /* --- Modals adjustments for Tablet (these are for other modals, not the aside) --- */
    .modal-content,
    .w3-modal-content {
        margin: 8% auto;
        /* Adjust modal margin for tablet */
        padding: 25px;
    }

    #informeTextoModal>div>p {
        font-size: 1.1em;
        /* Larger font for modal text on tablet */
        padding: 0 10px;
    }

    #swapAccountsModal .modal-fields {
        flex-direction: row;
        /* Two columns for swap accounts fields */
    }

    #swapAccountsModal .modal-field-group {
        margin: 0 10px;
        /* Adjust margins for side-by-side */
    }

    /* --- Chatbot adjustments for Tablet --- */
    .chatbot-container {
        width: 380px;
        /* Fixed width for chatbot */
        height: 550px;
        /* Fixed height for chatbot */
    }

    /* --- Microphone Icon adjustment for Tablet --- */
    .microphone-icon {
        right: 70px;
        /* Adjust position for tablet, depending on button width */
    }

    /* Search Bar */
    .search-bar {
        flex-direction: row;
        /* Align search inputs horizontally */
        align-items: center;
        gap: 10px;
        /* Space between inputs */
    }

    .search-bar input {
        margin: 0;
        /* Remove vertical margins */
        flex-grow: 1;
        /* Allow inputs to grow */
    }

    .search-bar input[type="number"] {
        width: auto;
        /* Allow number input to size naturally */
    }

    .search-bar input[type="submit"] {
        width: auto;
        /* Allow submit button to size naturally */
        margin-top: 0;
        /* Remove top margin */
        padding: 8px 15px;
        /* Adjust padding */
    }

    /* Logo adjustment */
    .logo {
        width: 70px;
    }
    
    /* Media Queries for larger screens */
    .button-group {
        flex-direction: row; /* Buttons side-by-side on larger screens */
        justify-content: center; /* Center the button group */
        flex-wrap: wrap; /* Allow wrapping if buttons get too wide */
    }

    .action-button {
        width: auto; /* Buttons can size to content, or set a min-width */
        flex-grow: 1; /* Allow buttons to grow to fill space */
        max-width: 200px; /* Limit individual button width */
    }

    .form-grid {
        grid-template-columns: 1fr 1fr; /* Two columns on larger screens */
    }
    .form-group.full-width-field {
        grid-column: 1 / -1; /* Ensure this still spans full width (two columns) */
    }
}