html {
  font-size: 14px;
}

/* Contenedor del formulario  */
.login-container {
    background: #ffffff;
    padding: 2rem;
    width: 320px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .login-container h2 {
        text-align: center;
        margin-bottom: 1.5rem;
        color: #0072c6;
    }

    /* Estilos de los campos */
    .login-container div {
        margin-bottom: 1rem;
    }

    .login-container label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

    .login-container input[type="text"],
    .login-container input[type="password"] {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #ccd0d5;
        border-radius: 4px;
        font-size: 1rem;
        transition: border-color 0.2s;
    }

    .login-container input:focus {
        border-color: #0072c6;
        outline: none;
    }

    /* Botón de submit */
    .login-container button {
        width: 100%;
        padding: 0.75rem;
        background: #0072c6;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.2s;
    }

        .login-container button:hover {
            background: #005a9e;
        }

    /* Mensaje de error */
    .login-container .error-message {
        margin-top: 1rem;
        color: #d93025;
        text-align: center;
        font-weight: 600;
    }
    /*
        fin contenedor de formulario
    */

/* ===== FORMULARIOS DE CAPTURA ===== */
.form-panel {
    background: #ffffff;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    margin: 2rem auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: sans-serif;
}

    .form-panel h2 {
        text-align: center;
        margin-bottom: 1.5rem;
        color: #0072c6;
    }

    /* Campos del formulario */
    .form-panel label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

    .form-panel input[type="text"],
    .form-panel input[type="password"],
    .form-panel input[type="email"],
    .form-panel select,
    .form-panel textarea {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #ccd0d5;
        border-radius: 4px;
        font-size: 1rem;
        margin-bottom: 1rem;
        transition: border-color 0.2s;
    }

        .form-panel input:focus,
        .form-panel select:focus,
        .form-panel textarea:focus {
            border-color: #0072c6;
            outline: none;
        }

    /* Botón principal */
    .form-panel button {
        width: 100%;
        padding: 0.75rem;
        background: #0072c6;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.2s;
    }

        .form-panel button:hover {
            background: #005a9e;
        }

    /* Mensaje de error */
    .form-panel .error-message {
        margin-top: 1rem;
        color: #d93025;
        text-align: center;
        font-weight: 600;
    }


/* ===== VISTA DE DATOS EN REJILLA ===== */
.grid-panel {
    background: #fff;
    padding: 1rem 2rem;
    margin: 2rem auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
    font-family: sans-serif;
    max-width: 90%;
}

    /* Tabla dentro del panel */
    .grid-panel table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.95rem;
    }

    .grid-panel th,
    .grid-panel td {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid #e0e0e0;
    }

    .grid-panel th {
        background-color: #f5f5f5;
        font-weight: 700;
        color: #333;
    }

    .grid-panel tr:hover {
        background-color: #f0f8ff;
    }

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}